멋사 TIL 여정 (8월 말부터 수료까지)

오리엔테이션

• 일단 해보는 HTML (이두희 선생님)

1일차

• 환경설정(Visual Studio Code), 코드 스니펫 설정, GitHub 잔디심기 등

2일차

• HTML Semantic 작성법

3일차

• git, GitHub 이용 실습

4일차

• CSS 특강 (이종찬 선생님)

5일차 (9월 5일)

• HTML의 Semantic한 작성법
• 객체지향적으로 HTML을 짜야한다. (HTML을 사물(object)로써 바라보는 시각을 길러라)
• 코드 한줄마다 명확한 의도가 있어야 한다. (필요없는 태그는 과감히 삭제)

6일차 (9월 6일)

• text level semantic과 embedded contents에 대해 학습했다.
• text level semantic은 단어 그대로 텍스트 단위의 엘리먼츠를 뜻한다.
• 그러므로, 넓이(width)와 높이(height)를 가질 수 없으며, 엘리먼트 내부 컨텐츠의 길이 및 크기만큼의 영역을 가지게 된다.
• embedded의 단어적 정의는 '내장된' 이라는 의미이다.
• 단어 뜻 그대로, embedded content는 외부의 컨텐츠를 끌어다가 html 문서에 내장시켜주는 역할을 한다.
• embedded 엘리먼트들은 css 스타일링과 겹치는 부분이 있고, 상당한 기능이 있어 자유도가 높은 편이다.
• 그러므로 mdn 등 문서를 그때그때 잘 찾아서 사용하는 습관을 들여야 한다.

7일차 (9월 7일)

• Forms (input, label, select, fieldset, legend, button, textarea, datalist)에 대해 학습했다.
• Tabular data (table, caption, thead, tbody, tfoot, tr, th, td, colspan, rowspan, colgroup, col, scope)에 대해 학습했다.
• 특강) css :: 과제 풀이 및 마진 병합 현상에 대해 학습했다. (빔캠프 CSS)
• html이나 css나 대략적인 사용방법을 익힌 후, 필요할때마다 사용하면 될 것 같다.
• 그러나 무엇이 있는지는 확실히 알아놓아야 하겠다.

8일차 (9월 8일)

• 1만시간의 법칙이라는 홈페이지의 마크업 작업을 하였다.
• 실무와 시맨틱의 괴리는 생각보다 클 것 같다는 생각을 했다.
• 마크업 자체는 잘 되는 것 같아서 뿌듯했다.
• CSS를 본격적으로 배웠는데, 셀렉터에 대해 특히 심도있이 공부했던 것 같다. (셀렉터의 종류, 우선순위)
• box에서는 벅참을 느꼈다. 외부 display와 내부 display의 차이점과 컴퓨터가 css를 연산하는 순서를 잘 파악해야 할 것 같다.
• 추석때를 잘 활용해서 공부를 해야한다. (견고한 CSS 강의 부분을 들을 예정)

9일차 (9월 13일)

• css에 대해 좀 더 심화적으로 공부했다.
• 다 외울 필요는 없다. 다만 인지하고 있고, 늘 찾아서 쓸 수 있을 정도의 기민함을 유지하자.
• position : static, relative, absolute, fixed, sticky
• z-index
• float : 띄우다/둥둥떠있다. left, right.
• 자식요소가 모두 float일 경우, 부모가 자식의 넓이를 인식하지 못할 수도 있음. (이를 방지하기 위해 BFC를 이용함)
• 가상 클래스 선택자 (.class:first-child ~ .class:nth-child() 등
• 상호 작용을 위한 가상 클래스 (:hover, :active, :focus, :checked 등
• 가상 요소 선택자 (::before, ::after, ::selection)

10일차 (9월 14일)

• position, z-index, float에 대해 다시 공부했다.
• 네거티브 마진이란 것을 새로이 배웠다.
• 1만 시간의 법칙이라는 과제를 마무리했고, 로그인 위젯 화면을 하나 만들었다.
• float와 position, text에 관해 명확히 알고있지 못해 제작에 어려움이 있었다.
• 또한 markup에서 class명을 짓는 것이 상당히 어려웠다.
• 마크업할때 class명을 마크마다 해주는 것이 오히려 나을 수도 있다.

11일차 (9월 15일)

• flex에 대해 심화된 공부를 하였다.
• flex는 axis가 제일 중요한 개념이다.
• 축을 기반으로, 이리저리 머릿속에서 개념들을 굴릴줄 알면 될 것 같다.
• 그와 별개로, 우리 동료들이 너무 공부를 열심히 한다.
• 나는 그정도로 하고 있을까? 라는 생각을 하면...
• 평균치이며 압도적이지는 못하다.
• 압도적으로 되기위해 더욱 많은 노력을 해야한다.
• 아침 일찍 일어나 코딩을 하면 괜찮을 것 같기도 하다.

12일차 (9월 16일)

• 프론트엔드스쿨 2기 선배님 / 김태곤 개발자 / 이수진 개발자 님의 특강을 들었다.
• 열심히 살아야겠다.. 라는 생각을 했다.
• 강의가 끝나고 자바스크립트의 기본에 대해 다시 학습했다.
• 예전에는 어려웠던 개념(클로저, 재귀함수, 함수 실행)이 옛날보다 더 잘 이해되었다.
• 끊임없이 회귀해서 공부하는 것이 좋은 개발자가 되기 위해 반드시 필요하다는 것을 깨우치게 되었다.

13일차 (9월 19일)

• flex, grid, transition, transform에 대해 학습했다.
• flex의 경우 중심축과 교차축의 개념과 축을 어떻게 구성할지에 대해 숙달된다면 어렵지 않게 작성할 수 있을 듯 하다.
• grid는 flex보다 더 나은 개념이다. 내부의 fr을 구성하고, 컬럼과 로우를 구성해서 홈페이지를 좀 더 구체적으로 구성할 수 있다.
• transition과 transform은 아직 받아들이기 어려웠다. 과제를 통해서 숙달하는 편이 나을 것 같았다.
• 과제를 하나 끝냈다. 다음과제도 영민하게 학습해서 끝내야겠다.

14일차 (9월 20일)

• 애니메이션과 perspective에 대해 공부했다.
• zigzag 과제를 제출했다.
• 조원들과 함께할 아이템을 하나 발굴했다. 재미있을 것 같다.
• 병원을 다녀온 뒤 조그마한 약속이 있어 많은 것을 배우지 못했다.
• 개인적으로 복습하는 시간을 가져야한다.

15일차 (9월 21일)

• 빔캠프의 CSS 강의가 중요했다.
• 레이아웃의 설계에 대해 배웠다.
• 세부 내용은 덜 중요하다. 레이아웃을 먼저 짜보고 색깔을 넣어서 시각화한뒤 재사용할 수 있는지 생각해보아야 한다.
• 레이아웃을 만들어 낸 후, 세부 내용들을 하나하나씩 짜 맞춘다.

16일차 (9월 22일)

• 현업에서 사용하는 CSS 기법에 대해 배웠다.
• ir기법 : image replacement이다. 디자인적으로는 숨겨놓았으나, 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 숨겨두는 기법을 말한다.
• CSS Sprite 기법 : 사용할 여러 그림을 한곳에 묶은 그림의 판 자체를 브라우저에 심은 뒤, 좌표를 찍어 그 아이콘을 보여주게하는 기법이다.
• 한판에 모든 이미지를 모아놓으면 용량이 커진다는 단점이 있다.

17일차 (9월 26일)

• 미디어쿼리에 대해 배웠다.
• CSS는 확실히 개념이 뭐가있는지 알고 넘어가는게 좋다. 하지만 미리 엄청나게 파놓을 필요는 없다고 생각되었다.
• 회고를 회고하는 시간을 가졌는데, 우리 조는 회고의 목적에 너무 부합하게 잘 돌아가고 있는 것 같다. 팀장이 나라서 그런가?
• 개인 시간에 자바스크립트의 배열 메서드인 pop, push, shift, unshift, splice에 대해 공부했다.
• Array.push() : 배열의 맨 끝에 인수로 넣은 엘리먼트를 추가하고, 본인은 새로운 배열의 길이를 리턴함.
• Array.pop() : 배열에서 배열의 맨 끝의 엘리먼트를 삭제하고, 본인은 삭제된 배열의 요소를 리턴함.
• Array.shift() : 배열의 pop()과 비슷하나 방향이 반대. 배열에서 맨 앞의 엘리먼트를 삭제하고, 본인은 삭제된 배열의 요소를 리턴함.
• Array.unshift() : 배열의 push()와 비슷하나 방향이 반대. 배열의 맨 앞에 인수로 받은 엘리먼트를 추가하고, 본인은 새로운 배열의 길이를 리턴함.
• Array.splice(start, [deleteCount], [items]) : 기존 배열의 엘리먼트들을 삭제하거나, 다른 요소들로 대체하는 기능을 가진 메서드.
• start는 splice 메서드가 동작될 위치를 알려줌. 음수값이 입력될 경우, 배열의 끝요소를 1로 카운터하여 절대값만큼 역으로 카운팅함.
• deleteCount는 start배열부터 deleteCount만큼 배열의 엘리먼트를 삭제함. 만약 누락되었거나, start로부터 배열끝까지의 요소의 갯수보다 값이 크다면 start부터 배열 끝까지 삭제.
• items는 start에서부터 deleteCount만큼 삭제한 후 엘리먼트를 추가하는 기능을 함.

18일차 (9월 27일)

• 사진을 무료로 사용할 수 있는 사이트에 대해 배웠다.
• SVG를 다루는 방법에 대해 배웠다.
• css로 그림을 그리는 방법에 대해 배웠다.
• ssas를 다루는 방법에 대해 배웠다.
• 일단 무엇인지는 알아두되 깊이는 나중에 챙기는 것이 좋다고 생각했다.
• 현재 DOM 관련 집필을 하고있어 DOM에 대해 학습했다. 먼저 브라우저의 렌더링에 대해 학습했다.
• 브라우저는 서버에 html 문서를 request 한다.
• 서버는 브라우저에 html 문서를 바이트화해서 보낸다. 브라우저는 이것을 파싱하여 렌더링을 한다.
• 이때 렌더링을 하기 전에 DOM, CSSOM 트리를 만들고 이들을 합쳐 렌더 트리를 만든다.
• 자바스크립트는 DOM의 요소를 수정하여 웹에 동적인 움직임을 가할 수 있다.

19일차 (9월 28일)

• sass를 다루는 방법과 tailwinds를 다루는 방법에 대해 배웠다.
• 개인적으로는 배열 헬퍼 펑션에 대해 공부했다.
• arr.map((e, i, arr) => {return }) : map은 받은 어레이의 길이만큼 동작하고, 같은 길이의 배열을 반환함.
• arr.forEach((e, i, arr) => {return }) map과 동일하게 작동하나, 기존 어레이를 수정하며 본인 자체는 undefined를 반환.
• arr.filter((e, i, arr) => {return }) 새로운 배열을 리턴하며, return값이 truthy하면 새로운 배열에 push됨.
• arr.find((e, i, arr) => {return }) 배열 내에 어떤 엘리먼트가 있는지 순회하는 헬퍼 펑션이며 return에 truthy라면 그 값이 리턴되고 함수가 끝남.

20일차 (9월 29일)

• tailwinds에 대해 배웠다.
• 사용방법을 잘 알고 있다면 생산성을 크게 올려줄 수 있을 것 같았다.
• 그러면서도 CSS에 대해 깊게 잘 알아야만 자유자재로 사용할 수 있을 것 같았다.
• 내일부터 자바스크립트인데 기대가 된다.

21일차 (9월 30일)

• 자바스크립트의 기본에 대해 배웠다.
• string에 대한 메서드를 배웠는데, 참으로 다양했다.
• 내가 유심히 본 것은 prototype부분에 관한 것이었는데, 각각 어떤 prototype를 상속받느냐에 따라 사용할 수 있는 메서드가 달라졌다.
• 자바스크립트를 잘 알기위해서는 최종적으로 object에 대해 자세히 파면 될 것 같았다.
• 팀원들에게 스프레드 용법, 2진수 변환법(parseInt(1001, 2)) 등에 대해 알려줬다.

22일차 (10월 4일)

• Array와 Object에 대해 옅게 배웠다.
• Array와 Object는 섞어서 쓸 일이 많다. 다양한 접근방법에 대해 배울 필요성이 있겠다.
• Object 메서드는 정적 펑션이 많고, Array 메서드는 prototype을 할당받은 고차함수가 많다.
• 그 이유는 메서드를 적용하고자 하는 object에 프로토타입을 할당받아 내부 프로토타입을 호출할 경우, object 내 key와 사용할 method 이름이 겹칠 수 있어서 그렇다.
• 일단은 자바스크립트를 놀랍도록 깊게 파보아야겠다.

23일차 ~ 25일차 (10월 5일 ~ 10월 7일)

• 알고리즘 캠프 준비때문에 TIL이 내 우선순위에서 밀렸다.
• 개인적으로 Object에 대한 공부를 했다.
• 문제를 풀며 Object를 다루는 사고방식에 대해 깨우쳤다.

24일차 (10월 11일)

• 수업을 들으며 많은 것을 배우게 되었다.
• 디스트럭쳐링 할당에 대해 공부할 필요성을 느꼈다. (데이터를 만지다보면 수도 없이 쓸 문법이라 생각된다.)
• 함수에서 객체를 인자로 사용하는 디자인 패턴 중 하나인 RORO에 대해 알게 되었다.
• 자바스크립트는 기본적으로 call by value로 동작한다. 즉, 참조형식도 참조를 하는것이 아닌, 주소값을 복제하여 인자로 넘겨주는 형태로 동작한다.
• 클로저에 대해 다시 학습했다.
• 외부함수가 종료되더라도, 내부함수가 여전히 동작하고있다면 가비지 컬렉터가 외부함수의 변수를 삭제시키지 않고 폐쇄공간에서 참조하게 된다.(?)

25일차 (10월 12일)

• map과 set, this, json에 대해 학습했다.
• map은 순환이 가능한(이터러블한) 객체 구조를 띈 자료구조로, 키와 값을 1:1로 매핑한 형태이다.
• set은 집합의 의미로, 집합내 중복을 허용하지 않는 자료구조이다.
• this는 자신을 부른 객체나 배열을 참조하는 기능이다.
• new는 함수를 생성자로 만드는 기능을 함으로써, 객체를 찍어낼 수 있는 기능을 가진다.

26일차 (10월 13일)

• fetch과 DOM을 이용해 브라우저창에서 페이지를 직접 빌드업해보았다.
• 정규표현식에 대해 배웠고, 나중에 필요할 때 찾아서 쓰면 될 것임을 느꼈다.
• DOM 책 집필이 거의 마무리되어간다. 앞으로 5번의 스프린트 회고를 끝으로 마무리를 지으려고 한다.

27일차 (10월 13일)

• DOM에 대해 학습했다. 일단 DOM의 역할 및 작동 방법에 대해 배웠고, 추후 필요할 때 다시 깊게 공부할 예정이다.
• 자바스크립트의 This에 대해 공부했다. 작동방법이 그때그때 바뀌는데, this는 참조하는 대상이 그때그때 바뀐다.
• 함수가 함수를 호출했을 경우, 선언형(function() {})은 this가 지정되지 않고, 화살표함수는 아예 this가 없게 된다.
• 따라서 함수 내 함수에서 선언형은 전역객체를 참조하게되고, 화살표함수는 상위 스코프를 참조하게 된다.
• export/import에 대해 공부했다. module.export는 객체이며, export는 키 값으로 볼 수 있다. 무엇이 할당되느냐에 따라 export의 값은 달라진다.
• require를 통해 외부 라이브러리를 이식받을 수 있다.
• API를 통해 다양한 동작을 할 수 있음을 배웠다.

28일차 (10월 17일)

• 비동기 환경에 대해 공부했다.
• Promise 객체에 대해 공부했고, 차례대로 fetch, axios, 콜백지옥에 대해 공부했다.
• Promise가 제일 중요한 요소라고 볼 수 있다. Promise는 하나의 약속이며, resolve와 reject 둘 중 하나를 반환하는 객체이다.
• 이를 then, catch, finally 등으로 메서드체이닝을 해주며 비동기적인 코드를 할 수 있게 해준다.
• 개인적으로 c0d3에서 공부를 많이 진행할 필요가 있다.

29일차 (10월 18일)

• D3, ChartJS에 대해 학습했다.
• D3와 ChartJS는 추후에 몰아서 학습하면 될 것 같다. JS를 통해 편하게 SVG를 HTML에 표현할 수 있다.
• 그리고 이를 잘 사용하려면 역시 DOM에 대해 잘 알아야 한다. 노드를 추가하고 수정하는 것에 익숙해질 필요가 있다.
• DOM을 공부하기위해서 브라우저를 이용해 하나씩 추가해가면서 해보아야 겠다.
• Promise가 잘 와닿지않아 계속 공부를 하고 있다. 이제야 조금씩 알 것 같은 느낌이 든다.

30일차 (10월 19일)

• 역삼역에서 스터디를 한 날.
• 강사님은 DOM을 알려주셨다. 이벤트 전파에 대해 설명해주셨다.
• 이벤트 전파에는 캡처링, 타겟팅, 버블링이 있으며, window 객체부터 타겟된이벤트로 올라가 다시 window 객체로 내려오며 이벤트가 전파된다.
• 이때 이벤트 실행은 '기본적으로' 버블링이 우선권을 가지고 있으나, 캡처링 단계에서도 불값을 조정하여 바꿀 수 있다.
• 개인적으로는 Promise에 대해 공부했다.
• 배열에 담긴 Promise를 Promise.All을 통해 사용할 수 있다.
• axios는 프로미스를 반환하며, 데이터를 별도로 가공할 필요는 없다 (json 등으로)

31일차 (10월 20일)

• 테킷 강의를 들은 날이다.
• Object의 Challenge 문제를 풀었다.
• 어레이 내 오브젝트를 통해 좌표값을 구하는 것을 손코딩 할 필요성을 느꼈다.
• 재귀함수가 공간복잡도를 상당히 많이 차지한다는 것을 알게되었다. (for 문의 중요성을 알게 되었다.)
• TDD에 대해 공부중이다.

32일차 (10월 24일)

• 투두리스트 만들기와 설문지 작성에 관한 프론트엔드 작업을 실제적으로 해보았다.
• 교육 32일차만에 위의 것들이 이해가 가는 것이 신기했다.
• CSS, HTML은 숨겨진 기능이 많다. 이것을 알아야 JS로 굳이 먼 길을 돌아가지 않는다.
• DOM, DOM을 연동한 자바스크립트의 활용이 웹의 알파이자 오메가인 것을 느꼈다.
• 일단, 추후에 내부 코드를 하나하나 까서 공부할 시간이 필요할 것 같다.
• 별개로, axios등을 통해 api를 받아오는 것에 대한 숙련도 향상이 필요할 것 같다.

33일차 (10월 25일)

• 생성자함수와 클래스에 대해 학습을 했다. (수업)
• 개인적으로는 이벤트 리스너에 대해 공부했다.
• 각 이벤트는 반환하는 오브젝트가 있고, 이것을 이용해 무언가 컨트롤이 가능하다.
• 일단은 이벤트도 쭉 배워나가야 한다.

34일차 (10월 26일)

• 강의에서는 클래스에 대해 알려줬지만, 개인적으로는 프로미스를 사용한 구현을 공부했다.
• Promise.all을 사용했고, 결과적으로 api를 적절히 사용하여 원하는 것을 구현해볼 수 있었다.
• 이제 HTML에 관련해서 조금 더 학습해야 한다. DOM을 익히며, addEventListener를 사용해 여러가지를 실습해보아야 하겠다.
• canvas를 이용해 학습을 해보았다. canvas를 이용해 HTML 화면에서 나오는 그림 및 사진들을 적절히 컨트롤 할 수 있음을 알게 되었다.

35일차 (10월 27일)

• 특강Day
• 네이버 이사님께서 소중한 강의를 해주셨다.
• 개발자가 가져야 할 가장 중요한 능력 : 문제해결능력
• 사용자의 문제를 해결하기 위해 치열하게 고민한 해법으로 적절한 기술을 활용하여 시장이 원하는 시점에 제품으로 내놓는 사람이 되어야 한다.
• 큰 기업이 원하는 신입 : 탄탄한 기본기를 바탕으로 빠르게 기술을 습득할 수 있는 사람 (CS가 단단해야하고, 1~2년 동안 구체적으로 노력한 근거가 보여야 한다.)
• 치열하게 고민하고 있다는 반복적인 증거가 필요하다!!
• 이제 서버는 클라우드로 빌려오고, 백엔드는 JS로 가능한 시대가 온다. (이미 왔다.) 그러니 JS 기초를 매우 열심히 파보자.

36일차 (10월 31일)

• 10월이 다 지났구나!
• 알고리즘을 배웠다. 호준 강사님은 알고리즘에 대해 어떤 것이 있는지 대략적으로 훑어주는 시간을 가지셨다.
• 듣다가 너무 어려운 내용이 많아서 일단은 소리를 줄이고 내가 할 수 있는 공부를 했다.
• 빈도수 찾기 문제 해결 패턴에 대해 공부했고, 내용을 블로그에 포스팅했다.
• 이제부터 알고리즘 공부를 조금씩 해나갈 것이다.

37일차 (11월 1일)

• 알고리즘에 대한 접근 방법을 배운 것 같다.
• 코딩 테스트를 통과하기 위한 다양한 문제풀이 방법이 있다.
• 이게 알고리즘을 익힌것을 알기 위해 코테를 보는 것인지, 코테를 보기위해 알고리즘을 보는 것인지는 좀 어지럽지만
• 그래도 중요한 알고리즘을 알아야한다는 것은 변함이 없다.
• 따라서 알고리즘 공부에 시간을 조금씩 매일 할애할 생각이다.

38일차 (11월 2일)

• 알고리즘 학습 + 제이쿼리 겉핥기를 했다.
• 자바스크립트를 잘 알고 한다면 제이쿼리는 너무 쉬운 것 같았다.
• 바닐라 자바스크립트는 정말 평생 해야겠음을 느꼈다.
• 오늘 CSS를 다시 공부했는데 느낌이 새로웠다. 상품을 만든다는 느낌으로 하니 생각보다 재미있었다.
• 어서 C0D3 class까지 마치고 실제 제작으로 빠르게 넘어가야겠다.
• 알고리즘 개인 공부로써는 슬라이딩 윈도우를 클리어했다.
• 진짜 문제 풀이로 가고, 머릿속에 있는 것을 개념화할 때 폭발성장하겠지만 일단은 기초공사를 하듯 알고리즘을 해나갈 생각이다.

39일차 (11월 3일)

• 밴딩머신을 강사님과 함께 만들었다.
• 만드시는 것을 보며, 내가 모르는 것은 이제 크게 없구나! 라고 생각을 하게 되었다.
• 탄탄한 퓨어 자바스크립트 스킬만이 살 길임을 다시 한번 느끼게 되었다.
• 그러한 와중에서도, 프로젝트라는 결과물을 만들어내야하는 현실에 내가 원하는 바닐라 자바스크립트 공부를 진득하게 하기가 어렵다.
• 아무튼 현재로써는 완벽하지는 않지만 나름 기본기가 갖춰진 것 같다.
• 인강을 통해 빠르게 리액트를 배우고 블로그나 나만의 무언가를 만들어봐야겠다.
• 그러면서도 바닐라 자바스크립트로도 할 게 많을 것 같다. 아무쪼록 주말을 잘 활용해야 할 것 같다.
• 일단 내 이력서 프로토타입 작성이 먼저일 것 같다.

40일차 (11월 4일)

• 내 홈페이지 만들기에 착수했다.
• 티스토리 작성한 내역을 api로 받아 웹에 쏴주려고 했는데 보안이슈가 있어 아쉽게도 그렇게 하지 못했다.
• 서버가 필요한 이유를 직접적으로 느껴본 계기가 되었으며, 내 것을 만든다는 것이 이렇게 가슴뛰는 일임을 알게 되었다.
• 일단 내 홈페이지는 SPA로 모든 작업을 할 것이다.

41일차 (11월 7일)

• 내 첫번째 홈페이지의 버전1이 나왔다.
• 일단 it's me와 About me에 대한 것만 작성을 했다.
• SPA로 모든 것을 구현했다는 것이 보람이 있었으며, 무엇보다 내가 스스로 하나를 만들었다는 것이 너무 뿌듯했다.
• 그래도 수정사항이 넘친다.
• 디자인에 대한 미묘한 수정이 필요할 것 같다.
• 다음 개발은 멋사 리액트 끝난 후 할 것이다.

42 - 44일차 (11월 8~10일)

• 2개의 TIL을 건너뛰었다.
• 리액트를 배우고 있으며, 내용이 상당히 난잡하다.
• 일단 대표님 강의와 공식문서를 왔다갔다 하며 기능을 익히고 있다.
• 투두리스트 튜토리얼을 번역해보며 간단한 앱을 만들어 본 뒤, 다시 공식문서 튜토리얼(틱택토)을 따라치며 완성해볼 예정이다.
• 이후 공식문서와 노마드코더 기본 강의를 병행하며 실제로 만드는 기능을 빠르게 익혀볼 것이다.
• 자바스크립트의 기초가 어느정도 잡힌 덕에 이러한 공부방법이 가능해진 것 같다.

45일차 (11월 14일)

• 리액트 튜토리얼 공식문서 번역을 완료했다.
• 튜토리얼을 따라가며 공부를 해보니 확실히 장점은 있다. 머릿속으로 약간의 구조화가 되는 기분이다.
• 하지만 너무 많은 시간이 든다. 이 시간에 더 효율적으로 공부를 할 수 있을 것 같다.
• 내일은 한글로 된 튜토리얼 문서의 구현해보며 익히기를 해볼지, 아니면 인강을 들으며 할지 고민중이다.
• 아무래도 무언가 만들면서 배우는게 금방 늘 것 같기는 하다. 빠르게 기능 익히고 내 이력서 사이트를 리액트로 구성해보아야겠다.

46일차 (11월 15일)

• props의 개념에 대해 조금 더 견고히 익혔다.
• HTML의 attribute라는 특성을 변수로 이용하여 객체로 넘겨주는 것이 props이였다.
• 따라서 하향식으로만 동작하고, 읽기 전용으로 쓰일 수 밖에 없다.
• 이를 state로 제어할 수 있다고 한다. 내일도 열심히 배워야겠다.

47일차 (11월 16일)

• 리액트가 생각보다 어렵다.
• 처음 하는걸 해서 멘탈이 많이 깨지긴 했지만... 그래도 조금씩 배우고 있는 중이다.
• props와 states에 대해 열심히 하고 있다.

48일차 (11월 17일)

• 리액트가 굉장한 문제로 다가온다. 하지만 states의 개념에 대해서는 많이 이해했다.
• 리액트에서 컴포넌트를 리렌더링 하기 위해서는 states를 사용할 수밖에 없다.
• states는 어떠한 내부 로직에 의해 동작하며, 컴포넌트의 바뀐 부분만을 리렌더링 해주는 원리인데, 이를 위해 states 함수를 통해 변수를 바꿔줘야한다.
• 이러한 원리때문에 많이 헷갈렸던 것으로 보이며, 어떤 변수 자체를 재할당 하면 안되고, states와 연결된 변수를 적극 활용해야 함을 알게 되었다.

49일차 (11월 21일)

• 리액트가 왜 어렵게 느껴진 지 알게된 하루였다. 그냥 동작 자체가 너무 추상화 되어 있던 것이다..
• 페어프로그래밍도 순탄하게 잘 이루어지고 있다.
• 오늘 리액트로 state와 로컬스토리지, props를 이용해서 투두리스트를 구현했으며, 더 기능을 구체화할 수 있을 것 같다.
• 내일 퀵 정렬을 공부해볼 것이다.

50 ~ 53일차 (11월 21일 ~ 24일)

• 리액트에 대해 계속 배우고 있다.
• 살짝 번아웃이 온 것인지, 여러가지를 한번에 하는게 많이 어렵다.
• 퀵정렬을 공부를 하고 있으나, 상당히 이질적인 정렬인 것 같다. 손코딩으로 해결을 보아야겠다.
• 프로젝트 팀이 구성되었다. 프로젝트를 어떻게 해나가야 할지 머릿속으로 구상이 필요하다.

51일차 (11월 25일)

• 원범님의 특강을 들었다.
• REST API를 이용해 회원가입, 로그인을 하는 방법에 대해 학습했다.
• 프론트엔드와 백엔드는 하나의 생태계에 존재함을 이번 수업에서 확실히 느끼게 되었다.
• 또한 필요할때마다 구글링하는 방법을 계속 습득하고 있다.
• 나는 좋은 개발자가 될 것 같다.

52일차 (11월 28일)

• react를 이용하여 호준 대표님을 따라 블로그를 하나 만들었다.
• useContext, useEffect 등을 언제 쓰는지 직접적으로 코딩하며 생각할 수 있었다.
• 앞으로 만드는 것이야 어떻게든 만들어볼 수 있을 것 같다.
• 무언가 제작하는 행동을 계속 유지해서 생산성을 늘려감과 동시에, 새로운 기술을 접목할 수 있도록 늘 공부해야겠다.
• 아무 연관없지만, 그럼에도 불구하고... 바닐라 JS의 중요성이 돋보이는 하루였다. (그냥 그렇게 느꼈다.)

53일차 (11월 29일)

• 솔직히... 강의를 내려놓고 딴 짓을 많이 한 날이다.
• 딴 짓을 하면서 머릿속에는 리액트를 어떻게 사용해야하나 계속 생각했다.
• 그러다가 포켓몬도감을 후다닥 만들었고, 예상했던대로 나왔다.
• 쿼리스트링을 사용해서 원하는 자료만 뽑아내는 것도 성공했다.
• 내일은 포켓몬도감을 좀 더 어드밴스드하게 만들어 볼 예정이다.
• 사용 기술은 리액트와 리덕스가 될 것 같다.

54일차 (11월 30일)

• 리액트 기능을 익히기 위해 포켓몬스터 뷰어를 만들었다.
• 직접 고민해가며 만들었기 때문에 기능에 대해 전부 설명할 수 있다.
• state와 props가 상당히 많아짐에 따라 관리가 다소 어려워졌다.
• 리덕스와 같은 리액트의 훅 기능들을 반복숙달해야겠다.
• 내일은 이력서를 바닐라 JS로 리팩토링 할 예정이다.

55일차 (12월 1일)

• form validation과 node, 웹팩에 대해 공부했다.
• 이 후 개인적으로 git에 대해 공부했다.
• git의 merge stratege에 대해 중점적으로 보았다. 3 way merge, fast-forward에 대해 학습하고 블로그에 포스팅했다.
• 내일 마저 공부하고 협업에 적용할 수 있을 정도로 알아볼 것이다.
• 조금씩 우상향 하는 것 같다.

56일차 (12월 5일)

• webpack에 대해 배웠다.
• 일단 어떤 로직으로 의해 굴러가고, 플러그인을 어떻게 달아야 하는지에 대해 배웠다.
• 잘 배운 것 같다.
• 동시에 firebase를 시작하고 있는데, 재미있는 기술같다는 느낌이 들었다.
• 자습시간에는 코딩테스트 쉬운 문제를 풀었다. 알고리즘 정리와 코딩테스트 정리를 언젠가는 투트랙으로 가져가야겠다.
• 수업 일정이 종료되면 바로 프로젝트에 올인할 예정이다. 그 안에서도 모르는 것이 많으니 차차 배워가야지.
• html/css/js 기초를 한번 다시 닦아보고 싶다. 정말 잘 마무리가 될 것만 같다.

57일차 (12월 6일)

• 파이어베이스의 기초에 대해 배웠다.
• 파이어베이스는 백엔드에 쉽게 접근하게 해주어 생산성을 큰 폭 올릴 수 있는 기능이었다.
• 따라쳐보며 굉장히 편리하다는 것을 느꼈지만, 진정한 개발자라면 직접 서버를 구성할 줄 알아야 함을 느꼈다.
• Node js도 멋지게 해낼 것이다. 나중에.

58일차 (12월 7일)

• 파이어베이스에서 로그인하고 로그아웃 하는 과정을 실습했다.
• 파이어스토어는 내일 배우는데 상당히 기대가 된다.
• 개인적으로는 리덕스 툴킷에 대해 공부를 했다. 굉장히 편의성이 좋은 것 같다.

59일차 (12월 8일)

• 파이어베이스로 만든 두근두근 다이어리에 파이어스토어를 적용해보았다.
• 그런 와중에 프로젝트 생각에 약간 뒤숭숭해서 공부가 살짝 되지 않았다.
• 나는 나를 믿고, 프로젝트 때 잘 할 수 있을 것이다.
• 팀장으로써 git의 흐름, 프로젝트의 방향성을 잘 따야겠다.

60일차 / 프로젝트 1일차 (12월 9일)

• 프로젝트를 시작하는 날이다.
• 앞으로 어떻게 진행해야 할 지 방향성을 잡았다.
• 개개인이 리액트를 사용하는 방법을 잘 모른다면 프로그래밍이 잘 진행되지 않을 것이므로 일단 각자 공부시간을 약간만 더 가지기로 했다.
• 그와 별개로 나는 팀장으로써 어떻게 협업을 해쳐나가야할지 생각해놓아야한다.
• 일단 주말에 푹 쉬고 다음주부터 열심히 정말 열심히 달려볼 생각이다.

61일차 / 프로젝트 2일차 (12월 12일)

• 프로젝트를 본격적으로 시작했다.
• 코딩 컨벤션과 깃 컨벤션을 위주로 회의를 일단 시작했다.
• 협업이 굉장히 어려운 것이지만, 가치가 있는 일임을 회의를 하면서 느꼈다.
• 탄탄한 이해와 대화를 바탕으로 올라가는 설계물은 흔들리지 않는다고 생각하며 팀원들과 열심히 대화해볼 것이다.

62일차 / 프로젝트 3일차 (12월 13일)

• 프로젝트를 시작하는 도중에 한번 뒤엎어야 할 때가 왔다.
• 이 때 멘탈관리를 잘 해야 함을 느꼈다.
• 일단 폴더를 잘 나누고 컴포넌트를 분리한 뒤 어떻게 해야할 지 고민을 해보아야 겠다.

63일차 ~ 70일차 / 프로젝트 10일차 (12월 14일 ~ 22일)

• 프로젝트를 하면서 잠깐 TIL을 잊고 있었다.
• 생각보다 이슈가 많이 있었고, 다양한 방법으로 해결했다.
• git : branch를 push할 때, conflict를 해결하는 방법을 알게 되었고, 어떻게 pull request를 해야 협업이 편한지 알게 되었다.
• useEffect와 useLayoutEffect의 차이를 알게되었다. 로딩창을 이용해 효율적으로 코딩하는 방법을 알게 되었다.
• React에서 컴포넌트를 분리할 수 있다는 것이 엄청난 장점이고, 그것을 얼마나 잘 활용하느냐에 따라서 생산성이 달라진다는 것을 체감하게 되었다.
• 위의 이슈들은 블로그에 하나하나 정리해야 할 것 같다.

71일차 / 프로젝트 11일차 (12월 26일)

• 무한스크롤을 구현해보았는데 구현 방식이 재미있었다. 무한스크롤은 search 컴포넌트에서 검색되는 데이터가 많을 경우에 사용감이 좋지않아 도입하게 되었다.
• 인터섹션 옵저버 API를 사용했으며, 특정 조건마다 배열을 slice하여 컴포넌트에 전달해주는 방식으로 로직을 구현했다.
• 더 나은 사용감을 위해 디바운싱이라는 기술을 내일 도입해보아야겠다.
• 팀원들에게 사기를 북돋아주는 말을 해보자. 이러나 저러나 뭐 좋게 끝내는 것이 좋다. 사실 배운게 더 많기도 하고

72일차 / 프로젝트 12일차 (12월 27일)

• Search 컴포넌트에 디바운싱이라는 기능을 추가하여 사용성을 높혔다.
• ProfileModify 컴포넌트를 제작하고 있다. ProfileSetting 컴포넌트보다 코드의 가독성이 훨씬 나아졌다.
• 초기 제작에는 기능우선으로 제작해야 속도가 나지만, 후반으로 갈 수록 컴포넌트 정리를 하면서 개발을 해야 오류가 없겠음을 느꼈다.

73일차 / 프로젝트 13일차 (12월 28일)

• state를 사용할 때는 state의 비동기 개념을 잘 이해해야 코딩이 편리해진다는 것을 이해했다.
• css를 사용할 때 엘리먼트의 단순 위치를 조정하는 것이라면 calc함수를 쓰는 것이 편리하다는 것을 알게 되었다.
• 팀원들이 많이 열심히 해주고 있다. 나는 전체적으로 프로그램을 보면서 어떤게 빠졌는지 봐주는 입장이 되었다.
• 대신 팀원이 기술적인 어려움이 있다면 잘 집어서 얘기해주고 있다. 좋은 팀장이 되기 위해 많은 노력을 해야겠다.

74일차 / 프로젝트 14일차 (12월 29일)

• 입사지원서를 제출하느라 프로젝트에 많은 관심을 쏟지 못한 날이었다.
• 그래서 팀원들과 그냥 많은 대화를 나누게 되었다. 그러면서 쌓인 응어리들이 많이 해소가 됨을 느꼈다.
• 대화는 늘 중요한 것 같다. 대화가 프로그래밍은 아니지만 프로젝트에서는 굉장히 중요한 요소임을 알게 되었다.

75일차 / 프로젝트 15일차 (1월 4일)

• 프로젝트를 발표하는 날이다.
• 팀원들이 리드미, 개발 등 각자 맡은 부분이 있어 PPT를 혼자 만들었는데 약간의 시간이라도 내서 팀원들과 상의하고 만들었으면 어땠을까 싶다.
• 앞으로 프로젝트를 발표할때에는 기술적으로 어떻게 고민했는지를 많이 넣어야 할 것 같다.
• 발표는 잘 마무리 되었고, 프로젝트도 잘 끝나게 되었다.

76일차 / 프로젝트 16일차 (1월 5일)

• 다른 팀원들의 발표를 듣고, SEO에 대해 공부를 했다.
• 사실 수료 코앞이라 수업이 눈에 들어오지는 않았다.
• 그래도 흘러들으며 키워드를 많이 따놓은 것 같다.

77일차 수료

• 수료했다.
• 4개월 간의 여정이 끝났다.
• 사실 수료 후 혼자 공부할 수 있다는 생각에 오히려 기쁘다.
• 하지만 혼자였으면 여기까지 못왔다는 것도 확실하다.
• 멋쟁이사자처럼 운영진들, 위니브 강사진들, 동기들 모두들 감사합니다.
• 훌륭한 개발자가 되기 위해 TIL은 꾸준히 유지할 생각이다.