썸네일 [React] json-server 사용하기 json-server 빠르고 쉽게 REST API를 구축해준다. ➰ REST API : URI 주소와 메서드로 CRUD(Create, Read, Update, Delete) 요청을 하는 것 가짜 API 서버 열기 먼저 프로젝트 디렉터리에 (src 디렉터리 밖에) data.json 파일을 작성한다. { "days": [ { "id":1 , "day":1 }, { "id":2 , "day":2 }, { "id":3 , "day":3 } ], "words": [ { "id": 1, "day": 1, "eng": "book", "kor": "책", "isDone": false }, { "id": 2, "day": 1, "eng": "car", "kor": "자동차", "isDone": false }, { "id..
썸네일 [React] 이벤트 처리, useState, prop - 예제 코드 이벤트 처리(Handling Event) export default function Welcome () { function showName () { console.log("yuns") } function showAge (age) { console.log(age) } function showText (txt) { console.log(txt) } return ( Welcome! Show name {showAge(10)} }>Show age { const txt = e.target.value; showText(txt); }} /> ) }​ useState() state : 컴포넌트가 갖고 있는 속성값 import { useState } from "react"; export default function We..
썸네일 [React] React에서 CSS 사용하기 - eject, module css CRA를 사용하여 프로젝트 생성하기 HMR : Hot Module Replacement, 모든 종류의 모듈을 새로고침할 필요 없이 런타임에 업데이트 할 수 있다. Package.json 살펴보기 // package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eject" : 내부에 숨겨진 모든 설정 파일들을 꺼내는 명령어 ✅ Webpack, Babel 등의 설정을 변경하고 싶을 때 사용한다. React에서 CSS 사용하기 1. 인라인 스타일 사용 import World from "./Wor..
썸네일 [개발자 취업] 개발자 이력서 작성팁3 1. 인풋(일일커밋, 블로그, 강연, 컨퍼런스 등등)보단 아웃풋을 보여줘라 ✅ 뭘 했어요 → 뭘 위해 이걸 했고, 그 결과가 뭐다. 00강의를 들었다 → 뭘 위해서 이걸 들었고 어디에 이렇게 사용해서 결과가 나왔다. 00책을 읽었다 →읽고 나서 어떤 변화가 있었다. (예 : 코드짤 때 이렇게 응용) 2. 얼마나 노력했다보다 노력의 결과물이 이렇다는 것을 보여주기 ✅ 깃허브, 블로그 등 코드를 보여줄 수 있는 부분을 첨부를 해줘야한다. 3. 그 외 이력서 글에서 나오는 사람의 느낌을 본다. (자기소개, 지원동기 등) 혼자만의 실력을 보여줄 수 있는 프로젝트 하나는 있으면 좋음. 태도, 로열티(회사, 팀원, 서비스에 대한 애정...)가 채용에 큰 영향을 끼친다. 🚀 참고 용기를 잃지 않는 개발자 이력서 , ..
썸네일 [TypeScript] 유틸리티 타입(Utility Types) Utility Types 📌 keyof keyof 연산자는 객체 타입에서 객체의 키 값들로 숫자/문자열 리터럴 유니언을 생성한다. // keyof interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' const uk:UserKey = "name"; 📌 Partial Partial는, 의 모든 프로퍼티를 옵션(선택적)으로 바꿔준다. // Partial interface User { id: number; name: string; age: number; gender: "m" | "f"; } // interface U..
썸네일 [TypeScript] 제네릭(Generics) - 사용법 및 간단 예제 매개변수의 타입이 바뀌었는데, 동일한 함수를 재사용하고 싶다면 함수 오버로드 유니언 타입을 사용한다. [✅, 아래코드] 📌 예제1 function getSize(arr:number[] | string[]):number { return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); // 3 const arr2 = ["1", "2", "3"] getSize(arr2); // -> Error Generics 제네릭(Generics)을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. 선언할 때는 타입 파라미터()만 적어주고, 생성하는 시점에 사용하는 타입을 결정한다. : 타입 파라미터, 어떤 타입을 전달 받아 해당 함수에서 사용할 수 있도..
썸네일 [TypeScript] 클래스 사용- 접근 제한자, readonly, static, abstract 📌 class 작성하기 class Car { // color: string; constructor (public color: string) { // constructor (readonly color:string) { this.color = color; } } 타입스크립트에서 클래스를 작성할 때, 멤버 변수는 미리 선언해주어야 한다. (color: string) 멤버 변수를 미리 선언하지 않는 방법은 접근제한자, 혹은 readonly 키워드를 사용하는 것이다. 접근 제한자(Access modifier) public : 자식 클래스나 클래스 인스턴스에서 접근이 가능하다. (default) private : 해당 클래스 내부에서만 접근 가능 protected : 자식 클래스에서 접근이 가능하지만, 클래스 인스..
[TypeScript] 리터럴, 유니온/교차 타입 - 정의 및 사용 리터럴, 유니온/교차 타입 리터럴 타입(Literal Types) TypeScript에는 문자열과 숫자, 두 가지 리터럴 타입이 있는데 이를 사용하면 문자열이나 숫자에 정확한 값을 지정할 수 있다. userName1처럼 정해진 string 값을 가진 변수를 '문자열 리터럴 타입'이라고 한다. 📌 Literal Types const userName1 = "Bob"; let userName2 = "Tom"; // userName2 = 3 // -> Error : 최초 할당된 값이 string이므로 // Literal + Union // | : Union Type type Job = "policer" | "developer" | "teacher"; interface User { name: string; job..
썸네일 [API] REST API - 개념 및 특징, URI 설계하기 API(Application Programming Interface)는 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단이다. REST API REST API는 데이터를 주고받을 때, 개발자들 사이에서 널리 쓰이는 형식이다. REST란 형식의 API 과거의 SOAP이란 복잡한 형식을 대체한다. REST API 특징 각 요청이 어떤 동작이나 정보를 위한 것인지를 그 요청의 모습 자체로 추론 가능하다. ✅ RESTful하게 만든 API는 요청을 보내는 주소만으로도 어떤 요청(CRUD)인지 파악 가능하다. https://(도메인)/classes // 반 목록을 받아온다. https://(도메인)/classes/2 // index가 2인 반의 정보를 받아온다. https://(..
썸네일 [API] API - 개념과 사용 API 개념 API : 프로그램(프론트-백)끼리 소통하는 과정에서 사용하는 규칙. request, 요청 : 프론트단에서 서버에 정보를 달라고 요청하는 것 response, 응답 : 서버가 프론트단으로 정보를 보내주는 것 Open API : 기능을 구현해놓은 백엔드를 API를 통해서 공개해둔 것. ✅ serverless API 가이드 요청과 응답은 API마다 정해진 형식에 맞춰서 전달되는데, 이런 형식이 작성된 문서를 API 가이드라고 부른다. 전송방식 GET : 검색어를 주소창에 넣어 보내는 방식 POST : 주소창이 아니라 안 보이는 곳(body)에 넣어서 정보를 전달하는 방식 API 사용하기 Public API 둘러보기 Public APIs : https://github.com/public-apis/..
썸네일 [TypeScript] 함수 - 함수 정의 방법과 다양한 사용 📌 함수의 기본 사용 function add(num1:number, num2:number): void { // return num1 + num2 console.log(num1 + num2); } function isAdult(age:number): boolean { return age > 19 } 📌 함수와 선택적 매개변수 // 함수의 매개변수도 옵션으로 지정할 수 있다. ✅ 선택적 매개변수 function hello(name?: string):string { return `Hello, ${name || "world"}`; } // 혹은, 매개변수에 default 값을 줄 수도 있다. function hello2(name = "World"):string { return `Hello, ${name}`; }..
썸네일 [TypeScript] 인터페이스(interface) - 사용 유형과 확장 Interface 인터페이스(Interface)는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 변수와 인터페이스 type Score = 'A+' | 'A' | 'B' | 'C'; // 값을 특정할 수 있게 된다. interface User { name : string; age : number; gender? : string; readonly birthYear: number; [grade:number] : Score; // number를 key로 하고, string의 value로 하는 property를 여러 개 받을 수 있다. } let user: User = { name : 'xx', age : 30, birthYear : 2000, 1 : 'A', 2 : 'B', 3 ..
라이브러리 브랜드 그룹 | 천천히 굴러가는 개미공장

티스토리툴바