[데브코스 13일차 TIL] 바닐라JS 코드 디자인에 대해 1

💡 회고) 배우고 생각해본 것들

타입체킹과 defaultProps에 대해서

타입스크립트면 처음부터 타입을 명시하면 되겠지만 자바스크립트에서는 어떤 props가 들어올지 모르니 타입체킹이 필요하다. 그리고 올바른 타입이더라도 값이 없을 경우 defaultProps를 덮어야 할 경우도 있을 것.

 

코드 디자인 - render를 어디서 처리 할 지?

지금은 그냥 생성하는 순간에 render를 하고 있음. render에 대한 역할을 컴포넌트가 아닌 더 상위 컴포넌트 혹은 부모 클래스에서 담당하게 할 수도 있을 것 같다. 뭐가 더 좋을까? 나중에는 상위에서 담당하는게 낫지 않을까?

 

코드 디자인 - 데이터 패칭에 관한 부분, 목업 데이터에 관한 부분에 대해서

일단 데이터를 목업할 때 api 규모가 커지면 프로젝트 시작 전에 프론트 - 기획 - 백엔드가 api 명세를 통일해야할듯, 작업을 하면서도 명세되지 않은 부분이 있으면 커뮤니케이션이 필요할 것 같다.

 

프론트엔드에서 데이터가 필요한 작업을 할 때 상위 스크립트에서 데이터를 하드코딩으로 몇 개 만들어놓고 시작하면 좋다는 것. 상위 스크립트에서 데이터를 보내준다 → 이것은 컴포넌트 자체에서 데이터 패칭을 담당하지 않는다는 것 → 상위에서 보내준다는 것은 데이터를 상위에서 받아서 props로 children에 보내주는것. 그런데 그 '상위 컴포넌트'라는 기준은 어떻게 잡아야 하나? → 예전에 이 부분에 대해서 고민한 적이 있었다. 이 컴포넌트에서 어떤 데이터가 필요한데, 이 컴포넌트에서 패칭을 할 지, 아니면 상위에서 보내줄지 고민한 적이 있었음. 이것에 대한 기준을 세울 수 있는 계기가 되면 좋을 것 같다.

 

브라우저 렌더링에 관해서

스크립트를 모듈화하지 않고 html에 여러개를 넣게 되면 순서를 신경써줘야 함. → 모듈화의 중요성(소중함?)

모듈화를 하게 되면(더 나아가 웹팩까지) 브라우저는 하나의 파일만을 불러오게 된다. → 렌더링이 더 빨라질 것

스크립트를 넣을 때는 가장 아래 쪽에 넣는 것이 좋다. 브라우저 렌더링과 관련한 내용 (예전에 공부했던 것이 기억난다) 브라우저는 html을 위에서 아래로 읽기 때문에 스크립트 태그를 만나면 렌더링을 멈춤. 따라서 렌더링이 느려지게 되므로 좋지 않은 사용자 경험을 줄 것. (http와 브라우저렌더링에 대해서 다시 공부를 해보자)

그런데 요즘에는 프론트에서 여러가지 최적화 기법이 있기 때문에 무조건은 아니라고 한다. (하지만 정석으로 배우는 단계이므로 일단 이렇게 알고 넘어갈 것)

 

새로 알게 된 라이브러리 serve

npx serve... npm 라이브러리이다. 그동안 서버를 간편하게 띄울 때 라이브서버, parcel로 빌드를 했는데 이런 것도 있었구만? default 포트번호는 5000번이고 실행할 때 다른 포트로 바꿔줄 수도 있다.

 

컴포넌트 방식으로 구현하면 뭐가 좋은가?

컴포넌트화를 잘하면 재사용이 쉽다. (레고블럭을 쌓듯...) 현재 유행하는 프레임워크, 라이브러리가 나오기도 전에 존재한 개념이라고 한다. (덜덜덜...) 이런 개념을 알지도 못하고 리액트를 한 과거의 나는 대체 뭘까...?

→ 즉 이런 컴포넌트화 추상화를 잘할 수 있다면 어떠한 프레임워크, 라이브러리를 사용해도 어려움이 없을 것

 

form 태그에 관하여

form을 제출하면 자동으로 새로고침이 된다. 이거는 예전에 여러 개의 html파일을 이용해서 작업할 때 페이지 간의 데이터 전송(서버를 통해서)을 위해 만들어진 그런 역사가 있는 것 같다. 예전 웹 개발 스타일의 잔재(?)인 느낌. 그래서 자동적으로 새로고침이 되면서 서버로 보내는 것. SPA에서는 사용하지 않으므로 대부분 막아논다.