📝 성장을 위한 기록
-
블록체인 스타트업 프론트엔드 개발자의 입사 1주년 회고Record/daily 2023. 2. 22. 13:17
중국어통번역학과를 졸업한 내가 어느덧 2년 차 개발자가 됐다!! 🥳 하지만 개발자로 지내면서 학습 내용은 틈틈이 개인 노션이나 블로그에 작성해 왔지만, 나를 돌아볼 시간은 없었던 것 같다. 그래서 이번 회고를 통해서 내가 1년 동안 무엇을 했고 어떤 걸 배웠는지, 그리고 앞으로 해야 할 일들을 정리하고자 한다. 개발자로서 작성하는 첫 번째 회고의 주제는 블록체인 스타트업 프론트엔드 개발자의 입사 1주년이다. 1. 프리랜서 개발자로 시작하다 현재 다니는 회사에 오기 전 어떤 경험을 쌓았는지부터 시작해야 할 것 같아서 이야기를 한 번 풀어본다. 개발자로서의 내 첫 커리어는 상주 프리랜서 프론트엔드 개발자로 시작을 했다. 개발 공부를 병행하며 YAPP 동아리 활동을 마치고 취업 준비를 하려던 즈음에, 노마드코..
-
애플처럼 화려한 Parallax Scroll 랜딩 페이지 개발해보기Study/Frontend 2023. 1. 13. 15:15
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. 패럴랙스 스크롤링 기법을 간단히 말하면 스크롤에 따른 애니메이션 효과라고 할 수 있다. 패럴랙스 스크롤링 기법을 적용한 대표적인 웹사이트는 애플 제품 소개 페이지이다. 볼 때마다 감탄사가 나왔었는데, 회사에서 이와 같은 인터랙션 사이트를 구현할 기회가 생겼다! "나도 애플처럼 화려한 인터랙션을 넣을 거야😎"라고 속으로 호기롭게 외치며 스터디를 시작했다. 회사에서 인프런 바우처를 지원해 줬기 때문에 강의 1, 강의 2를 들으며..
-
[컨퍼런스 리뷰 / Google I/O 2022] What's new for the web platformRecord/review 2022. 5. 19. 12:17
구글이 개최하는 연례 개발자 컨퍼런스인 Goolge I/O 를 듣고 발표 내용 및 추가적으로 서칭하고 정리한 내용을 공유하려고 한다. What's new for the web platform 세션은 프론트엔드 개발자라면 꼭 봐야 하는 세션이다. 새로운 기능들을 많이 접해볼 수 있고, 발표 내용을 바로 실무에 적용해본 기능들도 있어서 굉장히 유용했다. Google I/O 2022 CSS accent-color accent-color는 위 요소들에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정해주는 속성이다. 이 속성은 color-scheme 속성과도 함께 작동하므로 light 모드와 dark 모드에 각각 색상을 설정해줄 수 있다. See the Pen HTML elements with accent-..
-
ESLint를 자동화해보자 (feat. husky & lint-staged)Study/Frontend 2022. 4. 14. 13:23
Lint 코드의 오류나 버그, 스타일 등을 점검하는 것을 lint라고 부른다. 린트는 코드의 가독성을 높이는 것뿐만 아니라 자바스크립트와 같은 동적 언어의 특성인 런타임 버그를 예방하는 역할도 한다. ESLint는 ECMAScript 코드에서 문제점을 검사하고 더 나은 코드로 고쳐주는 lint tool이다. ESLint를 사용해서 개발을 하면 잠재적인 오류와 버그를 제거할 수 있다. 협업을 하는 프로젝트에서 lint를 적용하는 것은 필수라고 할 수 있다. 왜냐하면 모든 개발자들이 같은 규칙 내에서 개발해야 잠재적인 오류를 방지할 수 있기 때문이다. 하지만, 아무리 ESLint를 모든 개발자들이 사용한다고 해도 warning, error 등 lint 결과를 무시하고 바로 commit 하고 push 해버릴 ..
-
웹팩 성능 최적화를 통해 개발 효율성을 극대화 해보자 ✨Study/Frontend 2022. 4. 8. 16:25
🚧 이 글은 윈도우로 개발하는 동료로부터 시작되었습니다..! 사실 m1 맥북 13 프로를 쓰는 나로서는 개발하는데 성능의 문제성을 크게 느끼지 못했다. 서버 사양도 나쁘지 않아서 배포하는데도 크게 느리다는 생각을 못했다. 하지만 윈도우 환경에서 개발하는 동료의 빌드 속도를 보고 경악을 금치 못했다... 첫 순수 빌드 시간이 거의 30초에 가까웠으며, webpack dev server를 첫 구동하는 시간이 무려 90초나 걸리는 것이었다.. 내 개발환경의 성능과 비교해보자면 첫 빌드는 약 3배, dev server 구동은 약 13배 차이가 났다. 그래서 동료 개발자의 웹팩 개선 시도를 기점으로, 정확하게 개발 환경의 문제점을 파악하고 고치기 위해 Webpack 공식 문서를 정독하면서 성능을 최적화해보기로 했..