Jaypedia

1. MSW 도입 배경 Next.js 13버전으로 진행 중인 프로젝트에 MSW를 도입하고 싶다는 생각이 들었다. 나는 다른 React 프로젝트에서 MSW를 도입해 유용하게 활용한 적이 있다. 백엔드 팀원들과 함께 API 스펙에 대해서 논의가 끝났는데 아직 구현이 덜 되어 API를 프론트 측에서 사용할 수 없는 상황이라면, 마냥 기다리기엔 시간이 아깝다. 바로 이 때 API를 Mocking한다면, 프론트에서도 기능/UI 구현 작업을 이어나갈 수 있다. 추후 API가 개발된다면, 자연스럽게 실제 API로 대체하면 된다. 또현 현재 나의 프로젝트에는 OAuth 로그인을 도입한 상태다. 로그인 후에는 서버로부터 쿠키를 통해 access token이 발급되는데, 추후 API 요청을 할 때 이 access toke..

Introduction 풀래너의 프론트엔드 팀은 개발 환경을 세팅할 때 많은 공을 들였습니다. 👏 89일 간 13번의 심도 있는 회의를 통해서, 현재는 개발 환경 세팅이 완료된 상태입니다. 이번 포스팅에서는 Formatting과 Code Quality와 관련된 세팅을 어떻게 했는지에 대해서 자세히 파헤쳐 보려고 합니다. Code Formatter와 Linter를 도입한 이유 저희 프론트엔드 팀은 코드를 일관성 있게 작성하고, 잠재적인 에러를 미리 발견해서 코드의 퀄리티를 높이면서도 효율성 있게 작업하고 싶었습니다. 그래서 ESLint, Prettier는 필수라고 생각을 했고, 이제 이것들을 어떻게 우리 팀에 맞게 커스터마이징하여 사용할 것인가를 고민했어요. 코드를 본격적으로 작성하기 전에 충분히 고민을 ..

Introduction Pull-up Planner, 줄여서 Pullanner(풀래너)는 풀업 운동을 차근차근 해나갈 수 있도록 도와주는 서비스입니다. 풀업 운동은 상체 근력을 키우는 데 아주 좋은 운동이지만, 꽤나 쉽지만은 않은 운동이기 때문에 초보자가 하려면 꾸준함과 노력이 필요해요. 작년 10월부터 프론트엔드 개발자, 백엔드 개발자, 그리고 디자이너가 모여 서비스 기획을 시작했고, 지금도 프로젝트가 진행되고 있습니다. 저는 프론트엔드 개발자로서 기획, 디자인에도 참여하고 있는데요! 개발이 아닌 다른 분야도 팀원들과 함께하니 즐거웠습니다. Future 앞으로 프론트엔드 개발 과정을 블로그에 담아 볼 예정입니다. 개발환경 세팅 과정, 개발 과정, 트러블 슈팅 과정 등, 기술과 관련된 이야기들을 꼼꼼하게..

🎄 Motivation 크리스마스를 의미있게 보내고 싶은 자의 고민 일년에 단 한 번 뿐인 크리스마스. 이 날을 어떻게 하면 좀 더 의미있게, 남는 게 있게 보낼 수 있을지 12월 초부터 고민해왔다. 이번 크리스마스는 일요일이었고, 일요일에는 여러 스터디들이 있지만 다들 크리스마스에는 스터디를 안 하는 분위기였다.(이날 만큼은 다들 쉬고 싶었나 보다..😂) 마침 이날 시간도 비었다. 이렇게 주말에 자유를 누리게 된 날이 정말 얼마만인가! 휴일이라고 해서 그냥 흘려버리고 싶진 않았다. 목적 없이 유튜브나 보면서 의미없이 시간을 보내면 미래의 내가 반드시 후회할 것이라는 직감이 있었다. 또 공부하고 싶은 것이 있는데, 이것을 긴 호흡으로 가져가고 싶다는 생각도 했다. 하루 종일 해커톤을 해 보면 어떨까? 이..

Project Introduction A부터 L까지, 키보드의 키를 누르게 되면 해당하는 드럼의 소리가 나오게 되는 간단한 프로젝트이다. 또한 키를 눌렀을 때, 해당하는 버튼이 마치 불이 켜지는 것 같은 CSS Animation 효과도 곁들였다. CSS 스타일링은 기본적으로 제공해 주긴 하지만, 연습도 할 겸 내가 직접 코드를 짜 보았다. 사실 이 프로젝트는 키보드 키를 눌렀을 때 소리나는 기능밖에 없어서 단순하지만, 여기에서도 꼭 챙겨야 할 것들이 있다. 핵심은 역시 이벤트를 잘 핸들링하는 것이지만, 이벤트 추가와 제거만 한다고 끝이 아니다. 예외 처리, keycode, transitionend 같은 이벤트를 알아야 순조롭게 만들 수 있다. 그래서 그런 것들을 중심으로, 잊지 않기 위해 포스팅을 해 본..

오늘부터 새로운 챌린지를 해 보려고 한다. 30일간 프레임워크, 라이브러리 등이 없이 오로지 순수한 자바스크립트만으로 작은 프로젝트들을 완성시키는 것이다. 챌린지를 하며 기대되는 효과 자바스크립트를 매일 공부하는 꾸준함 어떤 기능을 구현할 때 로직을 짜는 것에 익숙해지는 것 자바스크립트 문법에 익숙해지기 공부 방법 강의 제작자 Web Bose가 Github에 코드를 공유해 놓았다. 코드를 다운로드하면 각 프로젝트마다 index-START.html 파일과 index-FINISHED.html 파일이 있다. START로 스스로 문제를 풀어 본 후, FINISHED를 확인해 답안을 체크하면 된다. 사실 JavaScript30을 안 지는 꽤나 되었지만 시작을 미뤄 오고 있다가, 더 이상 미루다가는 내년이 되겠다 ..

자바스크립트로 계산기를 만들 때, 가장 먼저 생각해 볼 것은 입력된 숫자와 연산자들을 저장하는 방법이다. 이것을 쉽게 구현할 수 있도록 하는 것이 Class이다. 클래스 안의 다양한 함수들을 통해 계산기의 각 기능을 세분화하여 동작하도록 하였다. 1. 자바스크립트로 조작해 줄 HTML 요소들을 가져오기 const numberButtons = document.querySelectorAll('[data-number]'); const operationButtons = document.querySelectorAll('[data-operation]'); const equalsButton = document.querySelector('[data-equals]'); const deleteButton = documen..

자바스크립트를 이론 위주로 공부하여 조금씩 흥미를 잃고 있던 무렵, 뭔가를 만들어 보기로 결심했다. 기본적인 것 같으면서도 배울 게 많을 거라 생각해서 계산기를 만들어 보기로 했다. 백지에서 만들기는 어려울 것 같아 유튜브에 검색을 했고, 정말 많은 튜토리얼들이 있었지만 그중 Web Dev Simplified의 영상으로 골랐다. 예전에 Todo List를 따라 만든 적이 있는데 괜찮았기 때문이다. (이것도 나중에 포스팅으로 다뤄 볼 예정) 카일이 설명을 해 주는데, 차분하면서도 물 흐르는 듯한 막힘없는 설명이 특징이다. 이 포스팅은 한 번에 하려다가, 자바스크립트 부분이 좀 길어질 것 같아서 두 편으로 나누었다. HTML JavaScript Calculator AC DEL ÷ 1 2 3 × 4 5 6 +..