초보 개발자의 일기

제네릭 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..

SCSS 사용하기 gulpfile.babel.js안에 있는 이 코드는 const routes = { css: { watch: "src/scss/*", src: "src/scss/styles.scss", dest: "dest/css", }, }; 특정 파일을 보고 있는데 그 파일은 styles.scss이다 styles.scss이 파일이 하는 모든 행동을 다 지켜보고 있다. styles.scss에서 일어나는 모든 일은 CSS로 compile 된다. 이렇게 styles.scss 파일을 수정하면 자동으로 style.css도 바뀐다. variables 가장 중요한 color나 가장 중요한 styles을 저장하고 싶을 때 사용 _(밑줄)이 있는 파일은 CSS로 변하지 않았으면 하는 것이다.( CSS로 컴파일되기를 ..

TS는 간단히 말해 JavaScript에 변수, 매개변수, 리턴 값에 타입을 붙인 것이 TypeScript이다. const a: string = "5"; const b: number = 5; const c: boolean = true; const d: undefined = undefined; const e: null = null; 변수는 소문자로 시작해야 한다. Number => X any const f: any ="123"; const f: any =true; any는 모든 타입이 다 된다. 함수 function add(x: number, y: number): number { return x + y; } 매개변수 바로 뒤에 리턴 값 타입을 적어주면 된다. 화살표 함수 const add: (x: numb..

중요! typescript는 최종적으로 javascript로 변환된다. 순전한 typescript 코드를 돌릴 수 있는 것은 deno이나 대중화되지가 않았다. 브라우저, 노드는 모두 js 파일을 실행한다. ts 파일을 실행하는 게 아니라 결과물인 js를 실행해야 한다. tsc tsc의 역할은 1. TS코드를 JS로 변환시켜주는 역할 2. 코드 자체의 타입 검사를 해준다. let a='number'; a=123; 이렇게 타입 검사를 해준다. 이것은 JS에서는 말이 되는 코드인데 TS에서는 되지 않는다. 하지만 타입 검사가 실패했더라도 JS적으로는 문제가 되지 않기 때문에 변환은 해준다. 타입 검사를 하고 싶으면 tsc --noEmit 하면 된다. npm 명령어를 쓰기 위해서는 노드 프로젝트로 변환을 해야 ..

DiaryList.js import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( ))} ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList; App.js import DiaryItem from "./DiaryItem"; const DiaryList = ({ diaryList }) => { return ( 일기 리스트 {diaryList.length}개의 일기가 있습니다. {diaryList.map((it) => ( )..

Ref 기능 사용해보기 useRef는 리액트의 기능이기 때문에 리액트에서 import 해야 한다. import { useRef, useState } from "react"; import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, });..