[TIL] 2022/01/27

• Component 안에 Styled-Component를 넣으면 안된다. Styled-Component 자체도 하나의 컴포넌트 단위이기 때문에 컴포넌트 안에 또하나의 컴포넌트를 여러개 넣게 되면 에러가 발생한다. 실제로, 이렇게 했다가 무한 루프와 같은 렌더링 에러가 발생했다.
• Jenkins는 빌드와 배포를 한번에 해주는 하나의 플랫폼인데 이에 대해서 좀더 공부할 필요가 있을 것 같다. 일단은 그냥 알려주는데로 써봤는데, 굉장히 편리한 플랫폼인건 확실,, 매우 비개발자적인 멘트이지만 모든 시작은 이러하지..ㅎㅎ + 백엔드 관련 플랫폼(유저들이 API 요청시 해당 API가 몇 ms 동안 이뤄졌는지 등의 로그를 그래프처럼 표현해주는 플랫폼)인 Zipkin 도 공부해보면 재밌을듯.
• JS 옵셔널 체이닝 : 본래 자바스크립트에서 예를 들어,

const obj = {
	fruit: {
    	"name": "apple"
    }
}

위와 같은 obj 가 있을 때, obj.fruit.nullProperty1.nullProperty2 을 조회하면 어떻게 될까?
: 위와 같이 'Uncaught TypeError' 에러가 나온다. 이는 없는 property를 참조했을 때 나오는 에러이다. 이 때, 애플리케이션 내에서 에러 핸들링을 한다는 측면에서 봤을 때, 위와 같은 에러는 언제든 날 수 있다. 즉, 만약에 api를 이용해서 데이터를 받아서 객체를 채운 다음에 조회를 한다고 했을 때, 서버 에러로 인해 데이터를 못받아왔다면 위와 같은 참조 에러가 날 수 있다. 이를 방지하기 위해서 '옵셔널 체이닝'을 사용한다. 위의 경우 '옵셔널 체이닝'을 사용해보면,
: 위와 같이 쓸 수 있다. 분명히 위에서 에러가 발생한 상황과 똑같은 참조인데도 이번에는 에러가 나지않고, undefined가 출력됐다. 개발시에 활용하면 좋을 것!

• 나는 아직 styled-components를 사용하지 못했었는데, css-module과 비교했을 때 충분히 쓸만한 가치가 있다고 생각한다. 오히려 styled-components가 시장을 더욱 장악하고 있다고도 생각된다. 일단 styled-components의 장점이라 했을 때, 하나의 컴포넌트 단위로 css 적용을 생각할 수 있게 해준다는 것이고, 그 안에 다른 클래스들을 styled-components로 네스팅해서 관리해서 쓸 수 있다는 것이다. 이에 더하여 JSX 내에서 사용하기 때문에 변수 등을 사용해서 css를 자유롭게 컨트롤 할 수 있다는 점이 매우 유용하다고 생각한다(Props로 css 특성을 유동적으로 적용을 시킬 수 있다는 점).