2019-12-09 TIL

일일목표

1. 마이페이지에 회원정보 수정기능 구현
2. CSS 적용
3. 장바구니 버그가 있는데 해결하기

결과

• 1번 목표 달성. 2번 진행중.

CSS in JS

비교

• styled component vs emotion
• 모두 CSS 관련한 js 코드들을 따로 모아놓고 import하면 되었기에 관심사의 분리가 가능하다.
• js 기반의 syntax 안에 css 코드가 들어가므로 유연한 코드 및 효율적인 코드 작성이 가능하다.
• webkit-appearance : 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다.(크롬)
• focus
• createGlobalStyle : body 태그의 margin, padding을 없애고 싶을때 사용
• display

5FS

Facts

• React로 쇼핑몰 기능을 거의 다 구현하여 CSS를 입히기로했다. 익숙치 않아 버그가 많았는데 짝프로그래밍으로 문제를 해결할 수 있었다.

Feelings

• 한달전 웹 공부를 시작했을 땐 기능을 구현하면서 그때그때 CSS를 입히기로 했는데 이도저도 아닌상태가 되어 진도가 나가지 않았다. CSS가 없어도 쇼핑몰 기능엔 문제가 없기 때문에 CSS를 생각하지않고 기능구현부터 완료하였다. 기능 구현이 끝나고 CSS를 입히기 시작하는데 이전보다 훨씬 더 흥미를 갖고 빠르게 적용할 수 있었다. 코딩 실력이 늘어서? 명확한 목적이 있어서?

Findings

• CSS를 적용하는게 힘들지 않았던 이유는 CSS적용의 필요성을 크게 느꼈기 때문이다. 기능구현을 완료한 상태에서 사용자에게 더 나은 서비스를 제공하기 위해선 CSS가 필수적이라고 생각했다. 명확한 목적을 갖고 코딩을 하니 스스로도 즐겁게 코딩할 수 있었다.
• 짝프로그래밍을 하면서 CSS 버그를 해결했는데 긴장감을 갖고 엄청난 집중력으로 의견을 나눴더니 금방 해결할 수 있었다.

Future Action Plan

• 코드를 짤 때 우선순위를 명확히하자. 당장 필요한 기능인가? 생각하자.
• 짝프로그래밍을 귀찮고 두려워하지 말자.

Feedback