Jaypedia

항상 해야겠다고 다짐해놓고 매번 우선순위에서 밀려버리는 주간 회고. 예전에는 쓰는 것이 당연했는데 소홀해지다 보니 어느 새 회고를 쓰지 않는 것이 습관화가 되어 버린 것을 목격했다. 나는 회고가 정말 중요하다고 생각한다. 회고를 통해 내가 한 것을 꼼꼼히 적어내려가다 보면, 내가 잘했던 것과 아쉽게 했던 것들이 생각으로만 했을 때보다 훨씬 명확하게 보인다. 잘했던 것은 더 잘해야겠다고 생각하고, 아쉽고 후회가 되는 것들은 자연스레 앞으로 어떻게 개선해야 할지를 생각하게 되어 해결책을 모색하게 된다. 적지 않으면 내가 뭘 잘했는지, 뭘 못했는지, 앞으로는 어떻게 하는 것이 좋을지를 다 놓치는 것과 같다. 따라서 회고 시간을 놓친다는 것은 발전할 수 있는 기회를 놓치는 것과 같고, 그러면 제자리 걸음 혹은 ..

1. 2주차 멘티 과제 JavaScript Deep Dive 1장부터 15장까지 공부해 온 후, 면접 형식으로 질문했을 때 답할 수 있도록 하기 답변 정답률 체크 방식 제대로 설명했을 시 🟢 절반 정도 제대로 설명했을 시 🟠 틀린 답변 혹은 제대로 설명하지 못했을 시 🔴 2. 과제 질문들 총 59개의 질문 중, 멘티는 10개의 질문을 통과함(정답률 약 17%) 정답률이 낮은 만큼, 다음 주에 같은 질문으로 한 번 더 진행하기로 했다. 멘티분이 조금 더 열심히 하실 수 있도록 파격적인(!) 조건을 걸었다. 다음번엔 정답률이 70% 미만일 경우, 멘토링을 바로 종료하는 것으로. 1. What is Programming? 프로그래밍이란? 🟢 2. What is JavaScript? 자바스크립트의 특징을 설명해..

0. Introduction 시작하게 된 계기 2022년 10월 17일부터 2023년 7월 23일까지, 거의 9개월 가량 진행된 멘토링이 막을 내리게 되었다. 함께 하던 멘티분은 진로를 프론트엔드 개발자가 아닌 본업으로 돌아가고자 하셨고, 코딩은 취미 쪽으로 돌리고자 하셨다. 정말 열정적으로 참여해주시고, 질문도 잘 해주시고, 회고도 정성스럽게 남겨주셨는데 아쉬웠지만 종료를 해야만 했다. 나는 새로운 멘티를 찾고 싶었다. 누군가를 가르치기 위해서 준비하는 과정에서 공부가 많이 필요하고, 설명하면서 개념이 선명해진다. 이렇게 공부했을 때 가장 오래 남는다는 것을 알고, 또 무엇보다도 혼자 공부하는 것보다 같이 공부할 때 더 시너지가 나고 재미도 있다. 또한 내가 다른 사람을 도울 수 있다는 효능감도 얻을 ..

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

1. 크기가 작은 부분 문자열 (Level 1) Problem Summary 숫자로 이루어진 문자열인 t, p가 주어진다. t에서 p와 길이가 같은 부분 문자열 중, 부분 문자열이 나타내는 수가 p보다 작거나 같은 것이 몇 번 나오는지 횟수를 리턴한다. Solution function solution(t, p) { let answer = 0; const length = p.length; const pNum = Number(p) for (let i = 0; i b - a); let answer = 0; for (let i = 0; i < g.length; i++) { if (!s.length) return answer; const child = g[i]; while (s.length) { const coo..

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

1. 방문 길이 (Level 2) Problem Summary 명령어가 주어진다. 이 명령어대로 캐릭터는 움직이고, “처음 걸어본 길의 길이”를 구해야 한다. 좌표평면의 경계를 넘어가는 명령어는 무시한다. 캐릭터는 0,0에서 시작하고, 경계는 5, -5이다. Solution function solution(dirs) { let answer = 0; const loc = { x: 0, y: 0 }; const set = new Set(); for (const dir of dirs) { const curLoc = `${loc.x}${loc.y}`; switch (dir) { case 'U': loc.y -5 && loc.y--; bre..

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

1. 할인 행사 (Level 2) Problem Summary want 배열에 있는 제품과 수량이 할인하는 날짜와 10일 연속으로 일치할 경우의 수 구하기 Solution function solution(want, number, discount) { // 1. 물건과 물건의 개수를 매핑하기 const wantMap = want.reduce((map, el, idx) => { map.set(el, number[idx]); return map; }, new Map()); let count = 10; // 물건 10개가 모두 할인되는지 체크해 줄 변수 let answer = 0; discount.forEach((_, i) => { // 10개를 체크해줘야 하므로 이런 식으로 범위 정함 // 지금 시작하는 값으..

💬 Motivation 2022년 10월부터 Pullanner 프로젝트를 진행하면서, 프론트엔드 팀원과 함께 커밋 컨벤션을 정리해 보았다. 사실 작년 11월 24일에 완성했지만 팀 노션에만 저장해 두었다. 이번에 블로그에 업로드하게 된 계기는 원티드 프리온보딩 프론트엔드 인턴십 과정에 참가하여 팀 프로젝트를 하게 된 것이다. 함께 하게 된 팀원들과 커밋 컨벤션을 정해야 했고, 이때 정리된 문서를 보여주게 된다면 더 효과적일 것이라 생각했다. 팀원들이 나 포함 8명이었기 때문에 꽤 많았고, 각자가 사용해 왔던 커밋 컨벤션들을 돌아가면서 말하게 되었다. 이때 나는 정리해뒀던 커밋 컨벤션을 팀원분들께 보여드렸고, 이것이 최종 선택이 되었다. 여기서 깨달았던 것은, 정리해 둔 것은 언젠가 빛을 발할 수 있다는 ..