초보 개발자의 일기

보낼 링크 헤더에 JWT 넣기 Key 값에 Authorization을 기입하고 Value값에 Bearer 입력 후 한칸 띄우고 사이트에서 발급한 jwt를 입력해준다. 보낼 값 입력 바디에 백에서 준 api대로 양식을 맞춰서 보내준다. 결과 값 정상적으로 서버에 보내지고 응답이 돌아왔다.

시작하기 npm i @fortawesome/fontawesome-svg-core npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/react-fontawesome 추가 스타일 추가 스타일 아이콘을 사용하기 위해 새로 더 설치한다. npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-svg-icons npm i --save @fortawesome/pro-light-svg-icons npm i --save @fortawesome/pro-duotone-svg-icons 적용할 아이콘 선택 fontawesome 사이트에 들어가서 이 아이콘을 적용하고 싶다. 불..

공변성 반공 변성 타입 예시 function a(x: string): number { return 0; } //매개변수로 문자를 받아 숫자를 리턴 type B = (x: string) => number | string; let b: B = a; 함수 a는 문자를 받아서 숫자로 리턴하는 함수 근데 B는 문자를 받아 숫자나 문자로 리턴한다. b에 a를 대입하면 잘 대입이 된다. (서로 타입이 다른데 대입이 된다. ) 왜??? 리턴 값은 더 넓은 타입으로 대입할 수 있다. 반대 예시 function a(x: string): number | string { return 0; } type B = (x: string) => number; let b: B = a; 이건 안된다. 넓은 타입에서 작은 타입으로 대입은 안..

타입 추론하기 interface Arr { forEach(callback: (item: T) => void): void; } const a: Arr = [1, 2, 3]; a.forEach((item) => { console.log(item); item.toFixed(1); }); a.forEach((item) => { console.log(item); return "3"; }); const b: Arr = ["1", "2", "3"]; b.forEach((item) => { console.log(item); item.charAt(3); }); b.forEach((item) => { console.log(item); return "3"; }); 타입 직접 하나씩 만들어보기 interface Arr { f..

제네릭 function add (x: string|number, y: string|number): string|number { return x + y } add(1, 2); //3 add(1, 2); //3 add('1', '2'); //'12' add('1', '2'); //12' add(1, '2'); //'12' add('1', 2); //'12' 아래 2개가 틀림! 제네릭을 배우기 전 이렇게 작성하면 안 되는 코드 1,2를 더해서 3을 만들고 싶은데 string이 나올 수도 있는 것을 배제하지 못해 코드가 잘못되었다. 틀린 방법 function add(x: T, y: T): T {return x + y;} add(1, 2); // 3 같은 타입이니까 가능 add("1", "2"); // '12' ..

void void는 크게 3가지로 분류 가능 -리턴 값이 void function a(): void{ } return값이 없어야 한다. -매개변수가 void function a(callback: ()=>void){ } 메서드나 매개변수에서는 실제 리턴 값이 뭐든 상관하지 않는다. 그래도 void에 return값을 넣으면 안 된다. -메서드가 void interface A { talk: () => void; } const a: A = { talk() { return 3; } } 메서드나 매개변수에서는 실제 리턴 값이 뭐든 상관하지 않는다. 그래도 void에 return값을 넣으면 안 된다. declare declare const a: string; declare function a(x: number): n..

SSR: Server Side Rendering 페이지를 이동할 때마다 서버에 새로운 페이지에 대한 요청을 하는 방식 장점 화면 전체가 한방에 그려짐 모든 검색엔진에 대한 SEO(검색엔진 최적화)가 가능 매번 새로고침 되기 때문에 사용자 UX가 다소 떨어짐 서버에 매번 요청을 해서 트래픽이 발생 SPA: Single Page Application 한 개의 페이지를 가진 애플리케이션 리액트, 앵귤러, 뷰 같은 자바스크립트 기반 프레임워크를 사용해 SPA로 개발한다. 장점 자연스러운 페이지 느낌 전체 페이지를 업데이트할 필요가 없어서 깜빡거림이 없다. SPA는 서버에게 정 적리 소를 한 번만 요청하고, 받은 데이터는 전부 캐시로 저장한다. 서버의 템플릿 연산을 클라이언트로 분산 컴포넌트별 개발 용이 단점 J..

문제 입력 첫 줄에 정수 N이 입력된다. 그 다음줄에 N명의 학생의 키가 앞에서부터 순서대로 주어진다. 출력 선생님이 볼 수 있는 최대 학생수를 출력한다. 입력 예시 8 130 135 148 140 145 150 150 153 출력 예시 5 풀이 방법 큰 수 출력에서 했던 것처럼 비슷한 방식으로 풀이 내 코드 Solution 느낀 점