본문 바로가기

분류 전체보기

 (16)
[바닐라 자바스크립트로 SPA 구현] 2. 웹팩 세팅 바닐라 자바스크립트로 SPA를 구현하는 프로젝트 진행 중에, 멘토님의 제안으로 처음으로 웹팩을 사용해보게 되었습니다. 이번 포스팅에서는 프로젝트를 진행하면서 웹팩에 대해 공부하고 적용한 내용에 대해서 정리해봅니다. 웹팩의 필요성 1. 모듈관리 자바스크립트의 함수나 변수는 기본적으로 전역공간에 노출되어서, 서로 다른 파일에서 동일한 이름의 식별자를 사용하려고 하면 충돌하기 마련입니다. 과거에 자바스크립트가 단순한 용도로만 사용되던 경우에는 큰 문제가 아니었지만, 자바스크립트의 발전과 함께 그 용도가 점점 다양해지고, 점점 더 커다란 프로젝트를 진행하게 되면서, 자바스크립트의 유효범위 문제를 해결하기 위한 방법들이 등장했습니다. 대표적으로 node.js 환경에서 서버 개발을 하는데 사용하기 위한 모듈 시스템..
[포즈를 부탁해] Recoil 비동기 데이터 Refetch 방법에 대한 고찰 이번 포스팅에서는 작년부터 조인하여 개발하고 운영중인 인생네컷 포즈추천 서비스 에서 Recoil로 서버 데이터를 받아오면서 캐싱 데이터 때문에 상태 불일치가 발생했던 경험과, 이 문제를 해결하기 위해 시도했던 Refetch 방안들에 대해서 공유해봅니다. 배경 포즈를 부탁해는 23년 3월, 열흘간 진행되는 해커톤인 포텐데이를 통해서 시작된 프로젝트입니다. (참고로 저는 포텐데이가 끝나고 나서 서비스를 확장하는 과정에서 추가로 영입되었습니다.) 프로젝트의 첫 시작에는 개발자가 프론트엔드 개발자 한명이었는데요, 이후 서비스 고도화와 함께 백엔드 개발자 분이 들어오시고 서버도 생겼습니다. 따라서 개발초기에는 서버 연동 데이터를 받아올 필요가 없었고, 상태관리 라이브러리는 전역상태관리를 위한 Recoil 하나만 ..
[바닐라 자바스크립트로 SPA 구현] 1. 컴포넌트와 렌더링 F-Lab 멘토링 과정 중 바닐라 자바스크립트로 SPA를 구현하는 프로젝트를 진행하고 있습니다. 본격적으로 기능을 구현하기 전 틀을 잡기 위해 고민한 과정을 기록하기 위해서, 이번 포스팅에서는 바닐라 자바스크립트로 구현하는 컴포넌트 아키텍처와 렌더링에 대해서 나름대로 고민하고 결정한 내용을 정리해 봅니다. 1. 초기 구현방식 맨 처음 컴포넌트 아키텍처와 렌더링을 구현한 방식은 책의 내용을 참고해서 진행하였습니다. 해당 도서의 렌더링 부분은 다른 글을 통해서 정리하기도 했습니다. 처음 구현했던 내용을 간단하게 요약하자면 아래와 같습니다. - 컴포넌트는 targetElement(DOM노드)와 상태 데이터를 인자로 받아 새로운 DOM노드를 리턴하는 함수 const Header = (targetElement, ..
[프레임워크 없는 프론트엔드 개발] 2. 렌더링 https://m.yes24.com/Goods/Detail/96639825 프레임워크 없는 프론트엔드 개발 - 예스24 프레임워크 없이 효과적으로 작업하는 방법과 프로젝트에 적합한 프레임워크를 선택하는 방법의 두 가지 주제를 다룬다. 프레임워크나 서드파티 라이브러리를 사용하지 않고 프론트엔드 애플 m.yes24.com 프레임워크 없이 DOM을 효과적으로 조작하는 방법에 대해서 배워봅니다. DOM 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API 렌더링 성능 모니터링 requestAnimationFrame()을 사용해 현재 렌더링과 다음 렌더링 사이에 1초에 몇 프레임을 그렸는지(FPS) 대략적으로 출력할 수 있음 const tick = () => { frames++ const now = windo..
메가테라 프론트엔드 생존코스 12주차 회고 어느덧 12주차가 되었다. 이번주 회고에서는 지난 3개월을 되돌아보고자 한다. 아쉬운점 세달간 온전히 집중하지 못했던 것이 가장 아쉽다. 제출하지 못한 과제들이 너무 많고 소화하지 못한 개념들도 많다. 좋았던점 바쁜 와중에도 매일매일 거르지 않고 공부에 투자하려고 노력하는 경험을 할 수 있었다. 혼자 공부할때는 전체를 보지 못하고 눈앞에 있는것만 보려고 했었는데, 프론트엔드 생존코스를 통해 더 넓게 보게된 것 같다. 특히, 내가 무엇을 알고 무엇을 모르는지에 대해서 이전보다 더 잘 알게 되었다. 앞으로의 계획 그동안 제출하지 못한 과제들을 개인적으로라도 해보려고 한다. 테스트코드에 대해서는 강의 전체에서 강조가 많이 되었는데 여전히 많이 어려운 것 같다. 강의와 과제를 통해 익숙해지는 훈련을 하고 싶다...
메가테라 프론트엔드 생존코스 11주차 회고 목요일 새벽인데 이제서야 지난주 주간회고를 쓰다니... 창피하다... 여전히 9주차 강의는 다 들었으나 데브노트를 작성하지 못했다. 9주차를 소화하지 못한 것 같아서 뭘 써야되는지 모르겠지만, 9주차 코드를 조금 더 뜯어보면서 뭘 배웠는지 작성할 계획이다. 사실 다른 공부를 좀 하느라 메가테라 공부에 시간을 쏟지 못했다. 그래서 9주차 공부도, 회고도 뒷전이 됐다. 짧은 시간동안 완성하는 사이드 프로젝트를 진행하려고 관련된 공부를 했었는데, 아쉽지만 중간에 일부 팀원들이 그만두면서 팀이 공중분해 되었다. 열심히 해보려고 했는데 아쉬워서 어제 오늘 공부를 놓고 쉬기도 했다. 하지만 그래도 짧은 시간동안 배운점도 있다. 원하는 기능을 구현하기 위해 라이브러리를 찾아 만들어보기도 하고 회사도 학교도 아닌곳에서..
메가테라 프론트엔드 생존코스 10주차 회고 5월들어 회사 업무가 너무 바빠졌다. 코스는 막바지로 향하는데 시간은 점점 부족하고 의지력도 처음같지 않았다. 결국 지난 한주도 별볼일없는 한주가 되고 말았다. 9주차부터 쇼핑몰 실습을 하면서 그간 배웠던 것들을 복습하고 있다. 지난주에 9주차 강의를 다 못들어서 이번주는 밀린 강의를 다 듣는 시간을 가졌다. 하지만 아직 데브노트 작성을 못했다. 이전처럼 키워드가 강의별로 주어지는게 아니라 스스로 학습한 내용 중 부족한 부분을 채워나가야하는데, 또 강의를 쫓아가기에 급급했다. 강의를 듣고 그대로 따라하는 것만으로도 시간이 많이 필요한데, 이해는 못하고 손가락만 따라치고 있는 것 같다는 느낌을 받았다. 그래서 진도를 천천히 따라가더라도 이번 쇼핑몰 실습을 충분히 복습하고 혼자서 따라 만들수 있을 정도가 되..
메가테라 프론트엔드 생존코스 9주차 회고 1. 이번주에 배운 것 지금까지 배운걸 바탕으로 쇼핑몰 만들기 실습을 시작했다. 앞에서 제대로 공부하지 못하고 넘어간 부분이 있다면 부족한 부분을 메꾸기 좋은 시간인 것 같다. 2. 이번주에 잘한 것 없다. 3. 아쉬운 것 강의를 아직도 다 못들었다. 이번주에 회사일도 바빴고 이런저런 핑계로 공부를 소홀히 했다. 코스 막바지가 가까워지니까 해이해진 것 같기도 하다. 다음주부터는 정신차리고 어떻게든 공부시간을 확보하려는 노력을 해야겠다. 4. 다음주의 다짐 하루라도 공부를 쉬는 날은 없게 하자 늦었더라도 쇼핑몰 강의 열심히 들으며 쫓아가자

티스토리툴바