천진난만 코딩 스토리

styled-components 자체는 크게 어렵지 않았다. 문법자체도 달라지는게 없었기에 수월하게 할 수 있었지만, 새로 배운 개념이기에 정리를 해봤다. 1) CSS-in-JS CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. 순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다. CSS-in-JS 방식을 사용하기 위해 플러그인 설치 후, 터미널에서 styled-components를 설치해준다. // 터미널에서 아래 명령어로 설치 yarn add styled-components ① styled-components 사용하기 classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-c..

오늘은 버츄얼돔과 렌더링에 대해 다시 짚어보았다. 다시 짚어보다가 렌더링 최적화에 대해 알게 되었다.. 최적화를 하기 위해서 무엇을 해야하는지 알아고보, 시도도 해보았지만 아쉽게도 실패했다..ㅠ 렌더링 최적화를 하기 위해서는 어느 한 부분에 리렌더링이 일어날 때, 하위의 컴포넌트도 렌더링이 되지 않도록 연결고리를 끊어야 한다는 것은 알았다. 하지만 어떻게 해야할지 몰라서 이 부분은 더 찾아보고 시도해야할 듯하다. 못하니까 괜히 오기가 생기는....... 렌더링 최적화 외에 흥미가 생기는 주제가 또 있었다. 바로, '컴파운드 컴포넌트 패턴'이다. 개발자의 입장에서 컴포넌트의 구조를 한 눈에 보기 좋고, 좀 더 수정 등의 유지보수가 간단하게 짤 수 있는 컴포넌트 형태에 대한 방법이다. * 컴포넌트 하나에 p..

오늘은 어제 만들었던 투두리스트의 컴포넌트를 분리해 보았다. 분리하면서 props를 받을 때 구조분해할당으로 받지 않아서 오류가 났었다. 처음엔 뭐가 문제인지 몰라서 헤맸는데, 이 때문에라는 것을 알고 허무했다... 중괄호 때문에.... 컴포넌트를 다 분리하고 나니 함수 중에서 중복으로 사용되는 함수가 있어서 어떻게 해야 하나 하다가 함수도 컴포넌트 분리하듯이 분리해 버리자!! 생각하고 실행에 옮겼다. 파일에 함수를 옮기고 export 하여 컴포넌트 파일에 import를 하였는데, 오류가 나며 실행이 되지 않았다.... 분명 제대로 받아왔는데 왜 안되나... 알아보니 여러 문제가 있었다.... 첫 번째로 export 할 때 매개변수로 넣어준 것들을 컴포넌트 파일의 함수 적용하는 곳에도 똑같이 넣어주어야 ..

오늘은 리액트로 투두리스트를 만들어 보았다. 투두 리스트 추가와 삭제는 강의 내용을 토대로 만들면 어렵지 않게 만들 수 있었다. 하지만 완료 버튼을 누르면 투두가 완료 자리에 가도록 하는게 어려웠다... 완료 자리에 갈 수 있도록 투두에 ' isDone: false '를 기본값으로 주고, 완료 버튼을 클릭하면 false가 true로 바뀌고, 완료 자리로 가도록 하려고 하였다. 그렇게 하기 위해서 map에 if문을 사용하여 바뀌도록 하였다. 생각은 했지만 뭔가 변하는게 없어보여서 혼란스러웠다. 그래서 결국 도움을 받아 조금씩 코드를 작성해 갔다. 적용이 잘 되었지만, 구역을 나누는 기준이 작성되어있지 않았다. //투두 완료 const clickDoneBoxHandler = (id) => { const ne..

이번주에는 자바스크립트 문법을 마저 공부하느라 어지러웠다..... 코어 자바스크립트 책을 보며 공부했는데, 아니 이거 너무 어렵네요.. 특히 클로저 개념 공부할 땐 어지러웠다... 쉽지 않아,, 금요일부터는 주차가 바뀌어서 리액트를 본격적으로 접하기 시작했다. 자바스크립트 문법만 보다가 리액트를 만지작거리니 재미있기도 하고 생각보단 쉬웠다. 아직까진 쉬운 개념들만 접한건진 몰르겠지만, 생각보다 할만 햇다는 것에 만족!!!! 내일부터는 과제로 주어진 투두리스트를 만들어보고, 또 만들어보고 반복하며 리펙토링 하는 시간을 가질거다. 물론 여유가 남는다면 다른 리액트 관련 가의도 봐야겠다! 일단 의욕은 충만하다!!

어제 보던 강의를 마저 보았다. 생각보다 많이 어렵지는 않았다. 강의를 보며 차근차근 손코딩 해보며 이해하니까 생각보다 수월했다. 이 전에 css작업도 해보고 순수 자바스크립트 작업도 해보아서 아직까지는 괜찮다!! 1) State State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. name이라는 정보를 const name = “ ”; 으로 만들었는데, 만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성한다. State를 만들 때는 useState()를 사용한다. useState 라는 함수를 이용해서 state를 만든다. useState 는 state를 만들어주는 리액트에서 제공하는 기능이고, “훅”이라고 부른다. ① useState 훅을 사용하는 방식 const 로 선언..

오늘부터 본격적으로 리액트를 접하기 시작했다. 리액트는 처음이라 긴장하며 시작했지만, 생각보다 할 만했다. 사실 쉬는 시간을 많이 가져서 생각보다 공부를 많이 하지는 않았지만, 이정도로도 나쁘지 않다!! 물론 내일이 힘들겠지만...! 리액트지만 뭔가 자바스크립트의 문법을 토대로 하다보니 그렇게 어렵진 않아서 끙끙대지는 않았다. (물론, 많이 안 본 탓도 있지만......) 그래도 뭔가 재미있어서 내일 강의 얼른 다 보고 과제하며 코드를 짜보는 시간을 가져야겠다!!! 지금 실력으로는 어림도 없지...! 1) 개발환경 (npm, yarn) npm yarn 공통점 ① 자바스크립트 런타임 환경인 노드의 패키지 관리자 ② 전 세계의 많은 개발자들이 만든 유용하고 다양한 패키지 ③ 프로그램을 올려놓은 '온라인 데이..

오늘 공부 내용은 상당히 어려웠다..... 동기 비동기의 차이는 이해가 되는데, promise 부분에서 좀 헤맸다. 다행히 영상의 도움을 받아서 감은 잡혔지만, 역시나 직접 사용해봐야 명확히 알게 될 것 같다. 동기 비동기는 깇이 이해하려고 하면 양이 엄청 많아진다고 한다. 그건 추후에 어느정도 이해가 되었을 때 해보기로 한다. 지금 괜히 시도했다간 지금 이해한 내용도 헷갈릴지 몰라... 1) 동기 / 비동기 (태스크큐, 이벤트루프) 동기는 직렬적으로 태스크를 수행하고, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기한다. 비동기는 병렬적으로 태스크를 수행하고, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행한다. 자바스크립트의 대부분의 DOM 이벤트 핸들..

오늘 공부 내용은 this, 콜백 함수, 클로저이다. 사실 이 세 가지 개념이 모두 어렵다고 생각되었던 내용이기에 쉽지 않았다. 다만 this와 콜백 함수는 강의를 보고 책을 읽다 보니 할만했지만 클로저는...... 클로저 공부하는 데에 나머지 두 개념보다 시간을 3~4배는 쓴 듯하다.... 사실 아직도 완벽하게 이해했다고 자신 있게 말하기는 어렵다. 어떤 느낌인지 감은 잡았지만 명확하지 않고 두루뭉술한 느낌이다... 이를 위해 모던 자바스크립트 딥다이브 책도 주문하였다.....ㅎ 1) this 자바스크립트에서의 this는 어디서든 사용할 수 있지만, 상황에 따라 this가 바라보는 대상이 달라지는데 엉뚱한 대상을 바라보는 경우도 있다. 함수와 메서드의 구분이 느슨한 자바스크립트에서 this는 실질적으로..

오늘은 데이터 타입과 실행 컨텍스트에 대해 공부했다. 데이터 타입은 크게 어렵지 않았지만, 실행 컨텍스트의 호이스팅과 스코프에서 좀 헤맸다. 1) 데이터 타입 데이터 타입에는 크게 두 가지가 있다. 기본형 (숫자, 문자열, 불리언, null, undefined)은 기본적으로 불변성을 띄고, 참조형 (객체, 배열, 함수, 날짜, 정규표현식)은 가변성을 띄지만 상황에 따라 불변값을 사용하는 경우도 있다. 1bit는 0과 1이고, 1byte는 8bit이다. 변수는 변할 수 있는 무언가(데이터)이고,식별자는 변수명이다. 데이터 할당 시 변수 영역과 데이터 영역이 있다. 변수 영역의 값에 데이터 영역의 주소를 저장하고, 데이터 영역의 주소에 할당하려는 데이터를 저장한다. 얕은 복사는 바로 아래의 단계의 값만 복사..