Enjoy Programming

오늘부터 기초적인 자바스크립트 내용부터 시작해서 차근차근 다시 포스팅하려고 한다. 모던자바스크립트 도서를 기준으로 작성하고~ react나 nextjs graphql은 프로젝트 도중 필요한 시점에 작성하겠다~! 먼저 짧게 변수의 선언과 할당에 대해 짚고 넘어가자. Runtime을 기준으로 생각하면 좀 더 쉽게 이해하기 쉽다고 생각한다. 먼저 score라는 변수를 선언하고 할당해보자 순서는 콘솔창에 선언되지 않은 score를 표시하고 그 다음 score를 선언한다. 그리고 score에 80을 할당하자. 결과부터 보면 먼저 undefined가 뜨고 80이 찍힌다. 자바스크립트는 순서대로 읽어 내려간다. 그럼 첫 console.log에 왜 reference오류가 아닌 undefined가 떴는가! 하면 이는 바로..

오랜만의 포스팅이다 이제 다시 포스팅을 짬짬이 조금씩이라도 해보려한다. 현재 react 프로젝트를 진행중이라 react에 관한 포스팅을 기재한다. 자 react는 virtual Dom을 사용한다. 뭐가 좋은가 virtrual DOM을 브라우저의 memory에 올려 브라우저의 Dom을 변경하기 전에 이전 v-dom과 현재의 v-dom을 비교해서 바뀐 최소 부분만 반영을 한다. 그러니 랜더링 과정이 최소로 이루어지고 이를 자식 노드까지 반복한다. 모든 비교가 끝나면 Dom Tree에 반영! 비교하는 Elem이 바뀐 경우 이전 v-dom을 제거하게 된다. (컴포넌트 윌 언마운트, useEffect 정리) 이때 모든 자식들도 제거되고 재생성 된다. elem이 같다면 prop을 수정한 뒤 자식들의 노드를 비교한다..

타입스크립트의 핵심중 하나인 인터페이스에 대해서 오늘은 써본다. 위 예제 코드는 printLabel함수를 호출 시 argument로 string타입 label을 갖는 labeledObj오브젝트를 갖는다. 객체가 더 많은 프로퍼티를 갖고 있더라도, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사한다. 이 타입작성을 label을 가진 interface로 다시 작성해보면 이러하다~ 위에 { label : string } 대신 interface에 이 타입을 넣어주고 오브젝트는 이런 인터페이스야~! 라고 알려준다. 다행인건 타입 검사에서는 props의 순서를 지킬 필요는 없다. 오직 인터페이스가 요구하는 props가 존재하는지와 props들이 적절한 타입을 가졌는지만 확인한다. - Optio..

오늘부터 타입스크립트 공식문서를 하나씩 정리해본다. 공홈은 뭔가 ui가 나랑 맞지않아서 gitbook으로 읽는다~ https://typescript-kr.github.io/pages/basic-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 자 오늘 정리할 내용은 기본타입에 대해서 알아보자. 자바스크립트와 거의 유사하다. 먼저 - Boolean - let isDone: boolean = false; 뭐 설명할게 없다. - Number - 마찬가지다. 일단 자바스크립트 처럼 모두 부동 소수 값이다. typescropt는 16진수, 10진수 리터럴에 더불어 ECMAScript2015에서 나온 2진수, 8진수 리터럴도 지원한..

이번에 프론트엔드 면접을 보며 절실히 느끼고 또한 코드를 작성하면서 그리고 여러 것을 배우면서 느꼈던 원리에대한 이해의 부재가 얼마나 큰지 와닿았고 더 나은 코드 더 좋은 프로그래밍을 하기 위해 처음 자바스크립트 책을 샀다. 검색도 해보고 알아보고 했는데 이게 책이 상당히 두껍긴 하지만 많은 사람들이 추천하고 현재에 머물지 않고 앞으로 나아가기 위해 도움이 될 수 있겠다 판단해서 오늘 바로 송도로 달려가서 사왔다. 왜 이리 재고가 없는 것이냐;; 동네랑 청라 검단 몇 군데를 전화했는데 전부없었다.. 인터넷가는 4만500원 송도 교보문고에 재고 확인해보니 1권이 딱 !!!! 오케이 바로 건너가서 샀다 45000원... ㅋㅋㅋ 톨비에 기름값까지 5만원에 샀네;; 그러니 더 열심히 공부하고 내 것으로 만들자 ..

dispatch와 getState를 할 수 있으니 이제 subscribe를 해줘야하는 건가? 구독해서 렌더링 해줘야 한다. 컴포넌트 하나를 더 만들어보자. 그냥 렌더링 될 todo list 컴포넌트이다. 이 컴포넌트가 받아야할 prop은 이미 text인것을 알기에 text를 넣어주고 랜더링 해준다. 이제 홈컴포넌트에서 각 text를 넣어주면 된다. spread를 사용해 보내줬다. 위 코드는 익숙한 방식으로 풀어보면 요렇게 되겠다. 이렇게 todo가 넘어가고 destructure로 {text}만 받는 구조. 자 그럼 생각해보자 home 컴포넌트는 이미 connect를 연결해서 state와 dispatch를 해줬다. home은 state도 필요했고 dispatch도 필요했으니 mapState와 mapDisp..