코드숨 React 8기 - 1주차 회고

Facts(학습내용, 사실/ 객관)

학습내용

1. 개발 환경 구축

• Node.js 개념 학습 및 설치
• NPM 개념 학습 및 프로젝트 만들기
• Webpack Dev Server 개념학습 및 설치, 실행 방법 학습
• ESLint 개념학습 및 설치, 설정 방법 학습

2. 웹 개발

• DOM 개념 및 조작 방법 학습
• JS 문법 학습(forEach, map, filter, Rest parameters, Spread syntax)

3. JSX

• Babel 개념 및 설치, 설정 방법 학습
• Webpack config 설정 방법 학습
• JSX 개념 학습
• JS 문법 학습(구조분해 할당, Object관련 함수, 연산자 활용법)

사실 / 객관

1.  디스코드에 익숙하지 않아 오티에 대한 공지를 보지 못했고 오티 참석을 하지 못했다.

2. 회사 배포시기와 겹쳐 굉장히 바쁜 주간을 보냈고 휴일에 집에 내려갔다 와야하는 일정으로 평일에는 따로 공부할 시간을 내지 못했다.

3. 과제 1은 제출했지만 과제2는 제출하지 못했다. 

4. 과제의 취지를 이해하지 못한채 완벽하게 모든 코드를 완성 후 일요일 까지만 제출하려고 했다.

 

---

Feelings(느낌,주관)

1. 아쉬웠다.

유달리 바빴던 주간의 영향도 있었지만 과제의 취지를 뒤늦게 알아 리뷰를 받을 기회를 놓친 것이 아쉬웠다. 과제의 취지는 생각않고 일정 내 제출하는 것에만 주안점을 두었던 것 같다.  

 

2. 어려웠고 뜨끔했다.

시간에 쫓기며 과제를 하려다 보니 어떻게 접근해야 할 지 더욱 감을 못잡고 고민하는 시간이 길어졌다. 그 시간이 길어져 과제 풀이 영상을 보는 것이 낫다고 판단했고 영상을 보고 따라치고 별 고민없이 PR을 날리려 했다. 근데 순간 이렇게 하면 나에게 도움이 되지 않을 것 같다는 생각이 들어 찾아보다 아샬님의 프로그래밍 어떻게 공부할 것인가 라는 오리엔테이션 영상을 보게 됐다. 이 영상을 보고 이번 과제에도 이전의 인풋 중심의 학습방식으로 임했기 때문에 뜨끔했다.

 

https://www.youtube.com/watch?v=oFhN3EqrCwc  

 

---

Findings(배운점)

1. 완벽/완성에 초점을 맞추지 말고 그 날 그 날 할 수 있는 만큼만 제출하고 리뷰를 많이 받자.

• 과제의 목표는 완성 및 제출이 아닌 그 날 마감 전까지 한 것을 가지고 리뷰를 받고 더 나아지기 위해 고민을 하는 것에 있다.

 

2.  과제 풀이 영상을 보고 따라 치는 것(인풋 중심)은 별 도움이 되지 않는다. 빠르게 한 번 보고 스스로 해보는 인출중심의 학습을 해야한다. 

 

3. Switch문 대신 Object Look Up 테이블을 사용하자. 

 

4. 웹팩의 개념과 왜 필요한 지 알게 되었다.

• 윕팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.
• 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML,CSS,Javascript,Images)등을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구이다. 
• 웹팩은 파일 단위의 자바스크립트 모듈 관리의 필요성, 웹 개발 작업 자동화 도구, 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해 등장했다.

 

5. 어렴풋이 알고 있던 DOM 개념을 명확히 잡을 수 있었다.

•  텍스트 파일로 만들어진 웹 문서를 브라우저에 렌더링하라면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올리는 것을 DOM이라 한다. 
• 모든 요소와 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자관계로 표현할 수 있는 트리구조로 구성한 것이다. 
• DOM은 자바스크립트를 통해 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 

 

6. 바벨 개념과 왜 쓰이는 지에 대해 알 수 있었다. 

• 바벨은 ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜주는 것이 주된 목적이다.
• 타입스크립트, JSX처럼 다른 언어로 분류되는 것도 트랜스 파일 해준다.

 

7. JSX의 원리에 대해 배웠다. 

• 자바스크립트 안에서 HTML 문법을 사용해 UI를 구성할 수 있게 도와주는 자바스크립트를 확장한 문법이다.
• 리액트를 위해 나왔지만 JSX는 리액트와 상관없이 사용할 수 있다. 
• 브라우저에서 실행되기 전 코드가 번들링 되는 과정에서 바벨을 사용하요 자바스크립 형태의 코드로 변환된다. 

function App(){
	return (
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null "react"));
}

위의 예에서 매번 컴포넌트를 렌더링 할 때마다 위 코드처럼 createElement 함수를 사용해야 하면 불편하고 가독성이 떨어지게 되는데 JSX를 사용하면 매우 편하게 UI를 렌더링 할 수 있다. 

 

---

Affirmation(자기 선언)

1. 매일 매일 조금씩이라도 한 만큼 과제를 제출하고 최대한 많은 리뷰를 받아 개선해 나가자.

2. 과제 풀이 영상을 보고 그것을 바탕으로 과제를 다시 해보고 내가 작성한 코드와 비교하는 시간을 꼭 가지자.

3. 1시간 빨리 출근하여 학습 영상을 시청하고 퇴근 후 2시간씩 과제를 위한 시간을 투자하자.