[TIL] 2022-03-21

이번주의 주제 (Week2)

외관상 보이는 것이 전부가 아니다!
이번주 학습 내용에 가장 실무적인 내용이 많이 들어있다고 하셨다.

이번주에 배울 내용

1. 실무적인 폴더 구조: Container / Presenter

2. 컴포넌트 분리 및 데이터 전달 : Props

3. 목록 형태의 데이터를 보여주자 : Map / Filter

4. 안전한 코드를 작성하자 : TypeScript

5. 규칙을 정해서 협업하자: Eslint / Prettier / Husky
   우리들만의 룰을 정하고, 그 룰에 어긋나면 깃허브에 올리지 못하도록 제한을 둔다.

오늘의 TIL

1. 실무적인 폴더 구조 : Container / Presenter

• 기존에 만들었던 페이지 컴포넌트 안에서 컴포넌트를 여러개로 나누고, 나눈 것들을 조립해서 만드는 방식으로 나아간다.

  한 페이지에 다같이 들어있던 컴포넌트를 기능 별로 나누어서 각 폴더(페이지)로 만들어 있는 코드를 최소화하는 방법을 배웠다.
  이렇게 폴더를 나눠서 관리하면 수정을 할 때 고쳐야 하는 부분을 파악하기가 더 빨라져서 기존의 방식보다 유지보수가 간편해진다.
  각 페이지를 연결할 때 부모와 자식의 관계를 잘 파악하고 경로를 설정하는 것이 중요한 것 같다.

2. 컴포넌트 분리 및 데이터 전달 : Props

• 각각의 컴포넌트들 간에 서로 데이터를 전달해주기 위한 props라는 개념을 배운다.

  분리된 페이지 간에 데이터를 전송하기 위해서 pops를 사용했고, props와 setState를 이용해서 연결된 emotion의 styled 속성도 변경시켜 보았다.
  이것을 사용하면 과제를 할 때 도입하지 못했던 기능들을 더 구현할 수 있을 것 같다.

3. setState의 원리

• setState의 원리를 모를 경우 발생하는 문제가 있다. 그 문제에 직접 부딪혀보고 해결하기 위해 알아야 하는 내용을 학습한다.

  모든 input box에 값이 입력되어 있으면 버튼에 색상을 추가하고, 입력되지 않은 input box가 생기면 버튼 색을 제거하는 기능을 만들었다. 그런데, 한 글자를 입력하거나 삭제했을 때는 바로 색이 추가되거나 제거되는 기능이 동작하지 않고, 한 글자를 추가로 더 입력하면 그때서야 기능이 동작했다.
  이렇게 되었던 이유는, setState는 값이 바뀔 때마다 화면을 새로 그려주는데(리렌더링) input box에 값이 바뀌어 onClick 함수가 호출되었을 때 state의 값은 바로 변경되지만, 화면을 새로 그려주는 것은 함수가 종료되는 시점이기 때문이다.(효율성) 그래서 버튼의 색을 변경할 지 결정하는 if문의 조건절을 state가 아닌 onClick 함수 호출 시 들어오는 event의 value로 변경했더니 함수가 제때 올바르게 작동하는 것을 볼 수 있었다.
  원하는 기능의 주요한 부분이 동작은 되는데 애매하거나 사용성에 영향을 미치는 문제가 발생할 때는 원리에 대해 찾아보면 도움이 될 것 같다.

JavaScript 기초 수업

• Stack, Que
• 실행 컨텍스트, 콜스택

  자료구조인 스택과 큐에 대해서 배웠다. 스택은 입구가 하나이고 큐는 입구가 두개여서 데이터가 들어오고 나가는 순서가 다르다. 스택은 lifo, 큐는 fifo.
  실행 컨텍스트에 대해서도 배웠다. JS는 코드를 읽어나가면서 실행할 함수를 실행 컨텍스트를 생성하고, 순서대로 콜스택에 넣어둔다. 콜스택에 쌓인 함수는 먼저 들어온 함수가 나중에 pop된다.

알고리즘 수업

• slice, padStart

  오늘부터 프로그래머스로 문제를 풀었다. 프로그래머스의 간략한 사용법에 대해 알 수 있었고(console.log를 찍으면 실행 결과를 볼 수 있고, 테스트 케이스를 추가할 수 있다.),
  slice와 padStart를 이용해서 문자열 일부를 가리는 문제, 문자열을 정수로 바꾸는 문제, 배열에서 연속되는 요소를 하나로 만드는 문제를 풀었다.
  slice는 앞으로도 자주 사용될 메소드라고 하셔서 padStart와 함께 MDN을 참고해서 정리해두었다.

Self Study

• 포트폴리오 문서 구조 container/presenter 패턴으로 변경
• emotion active 활용해서 submit button의 style 변경

  자유게시판 등록 화면과 상세 화면을 각각 container/presenter 구조로 변경했다. 폴더 구조를 변경하는 것은 크게 어렵지 않았지만, 폴더의 구조를 바꿨더니 버튼을 눌렀을 때 화면이 새로고침 되는 현상이 발생했다. 찾아보니 form을 사용할 경우에 나타나는 현상으로, 속성 값을 변경해줘야 하는 것 같았다. handleSubmit을 사용하니 올바르게 잘 작동했다.
  문서를 분리해서 쓰니까 확실히 에러를 찾을 때 기능 관련된 에러면 container를, 렌더링 문제면 presenter 파일을 열어서 확인하면서 좀 더 구조를 잘 파악할 수 있었고, 고쳐야 할 구문을 찾는데도 도움이 되었다. 맘에드뤄 굿~!