ziglog
우테코 27주차 기록
August 8, 2021 • ☕️ 4 min read
우테코 27주차 기록
놀토 프로젝트
마지막(?) 기능 회의
3차 데모데이 다음 날, 마지막 기능인 댓글과 마이페이지 회의를 쭉 달렸다. vscode는 켜지도 않고 하루종일 회의만 했다. 그래도 이전까지 해온 경험이 있어서인지 나름대로 착착 진행되었다. 미키가 댓글을, 내가 마이페이지를 맡기로 했다. 마크업을 뚝딱뚝딱 하고 백엔드 api를 붙였다. 조금 더 완성도 있는 서비스가 되어가고 있다!
유닛 테스트
컴포넌트 단위의 테스트를 진행하고 있다. 컴포넌트의 모든 비즈니스 로직을 추출하여 테스트에 용이하게끔 만들자는 의견이 있었는데, 뭔가 아직은 그럴 필요성까지는 느끼지 못하여 jest로 함수를 적당히 mocking해서 테스트하고 있다. 처음 틀을 잡을 때는 삽질을 굉장하게 했는데, 그 이후부터는 착착 초록불이 뜨는 것을 보니 코딩할 맛이 난다.
공부하기
JIT 컴파일 타임
인터뷰 스낵 스터디를 하던 중, 자바스크립트에서 런타임 이전에 이뤄진다는 ‘코드 평가 과정(스캐닝 과정)’은 정확히 어떤 시점에 발생하는지 궁금하여 스터디 페어와 함께 찾아보았다.
자바스크립트에서 이뤄지는 JIT 컴파일(just-in-time compilation) 이란 프로그램을 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다. 동적 번역(dynamic translation)이라고도 불린다.
이는 Java 등 컴파일이 필요한 언어와, 코드를 한 줄 한 줄 읽어내려가며 실행하는 JavaScript 등의 인터프리터 언어 두 가지 방식을 혼합한 방식이다. 실행 시점에서 인터프리트 방식으로 기계어 코드를 생성하면서 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다. 즉 코드를 우선 인터프리터 방식으로 실행하고 필요할 때 컴파일하는 것이다. 이런 방식으로 JavaScript는 성능을 크게 개선시킬 수 있었다.
👾 크롬의 자바스크립트 엔진인 V8은 JIT 컴파일을 지원한다.
브라우저는 자바스크립트 엔진으로 자바스크립트 소스를 내부에서 이해할 수 있는 언어로 변환하고 실행하는데, 이를 컴파일이라고 부른다. 자바스크립트같은 인터프리터 언어는 항상 같은 코드를 반복해서 컴파일하고 생성한다. 브라우저에서 새로고침이나 페이지 이동이 발생하면 항상 같은 코드를 새로 컴파일하게 되는 것이다.
그래서 V8에서는 먼저 JavaScript 코드를 Interpreter 방식으로 컴파일하고 이를 ByteCode로 만들어 낸다. 컴파일 속도를 높이기 위해 이 ByteCode를 캐싱해두고, 자주 쓰이는 코드를 최적화하여 이후 컴파일 시 참조하여 속도를 높인다.
🤔 그래서 정확히, 실행컨텍스트를 만들고 변수 선언부를 등록하는 과정이 ‘런타임’인지 그 이전의 어떤 단계인지는 알지 못했다. 아무튼 런타임은 아닌 것으로!
Ref
- https://oowgnoj.dev/review/advanced-js-1
- https://pks2974.medium.com/v8-에서-javascript-코드를-실행하는-방법-정리해보기-25837f61f551
etc
커스텀 React Hooks로 로직 공유하기
컴포넌트의 비즈니스 로직을 hook으로 빼서, 해당 hook을 react-hooks-testing-library로 테스트할 수 있다.
Ref https://medium.com/jit-team/how-to-smoothly-manage-shared-logic-with-custom-react-hooks-558575c11bcf
normalize-css
모든 브라우저에서 동일한 결과물을 보기 위해 사용하는 툴이다. CSS reset 등을 사용하면 DOM 요소들에 기본적으로 적용되어 있는 margin 등의 스타일 기본값을 모두 초기화시켜줄 수 있지만, 이는 필요한 속성들까지도 전부 제거해버린다는 문제점이 있다. normalize-css는 normalizing이 필요한 속성들만 초기화시켜준다는 점에서 유용하다.
macOS와 window에서 화면이 서로 다르게 보이는 문제를 해결하고자 사용했는데, 결국 normalize-css로는 모든 문제가 해결되지는 않아 각 요소들을 하나하나 체크하면서 적당한 여백을 두게끔 조정하고 있다. 프론트엔드 개발의 귀찮음 스택 += 1
styled-components 등의 CSS-in-JS를 사용 중이라면 styled-normalize를 사용할 수 있다.
최신 CSS
- flexbox의
gap속성은 지금도 유용하게 쓰고 있다. scroll-snap-type속성은 놀토 서비스에 잠깐 적용했다가 사용되지 않아서 뺐다. 하지만 어디든 센스있게 사용 가능한 속성인 것 같다.aspect-ratio라는 속성이 기대된다!
Ref https://www.youtube.com/watch?v=lkTpOHv1Ros&feature=youtu.be
TDD 모르는 사람도 시작하는 법
Ref https://twitter.com/KentBeck/status/1421257650113634304
마무리
아찔했던 3차 데모데이였다..🥲
그리고 도쿄올림픽 꽤나 재밌었다. 팀원들과 여자배구 4강전 같이 봤다. 잔여백신도 착착 잘 잡는 우리 팀원들. 나는 언제 맞을까나?
이번주는 마지막 기능들을 빠르게 구현하느라 기술적인 어려움에 마주하는 경험이나 챌린징한 배움들은 조금 적은 편이었다. 하지만 서비스에 조금 더 어울리게끔 조금씩 개선해나가는 과정도 뿌듯한 것 같다 😆
이제 다음 주 최종발표만을 앞두고 있다. 이제서야 슬슬 지치는 기분도 들지만, 조금만 더 정신차리고 버텨서 유종의 미를 거둬보자!
Relative Posts:
우테코 26주차 기록
August 1, 2021
지그의 개발 블로그
