23년 8월 졸업 후 25년 5월까지의 (약 21개월) 프론트엔드 신입 취업 준비 대장정에 마침표를 찍게 되었습니다. 거의 군복무 기간이랑 비슷하네요:) 취준 기간을 되돌이켜보면서 어떻게 보내왔고, 아쉬웠던 점 등에 대해 상기해보면서 글을 남겨보려고 합니다. 졸업 후 독학으로 HTML, CSS, JAVASCRIPT를 학습하며 역량을 쌓아나갔습니다. 사실 이 기간이 좀 아쉬웠던 기간으로 뽑으라고 하면 뽑을 수 있을 것 같습니다. 공부 방법과 방향성에 대해 많이 방황했던 기간이 길었기 때문이죠.. 차라리 졸업 후 바로 부트캠프를 진행할 걸 이라는 후회가 조금은 있습니다. 24년도 1월부터 6개월동안 본격적으로 부트캠프를 진행하면서 프론트엔드 개발자로서의 역량을 차근차근 쌓아나갔습니다. 확실히 몰입할 수 있..

라이브러리 vs 프레임워크Next.js는 React.js를 보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공하는 프레임워크이다. 프레임워크? 라이브러리와의 차이는 뭘까? 한번 복습 겸 정리해보고 가자. 핵심적으로는 기능 구현의 주도권이 누구에게 있는가!에 대해 고민해보면 좋을 것 같다.만약 주도권이 개발자에 있다? 이러면 라이브러리로 생각하면 좋을 것 같다. 라이브러리 같은 경우는 기능 구현을 원하는 방향으로 진행이 가능하고, 쓰고 싶은 도구와 기술을 쓸 수가 있다. 자유도가 높은 것이 특징이다. 반면 프레임워크는 주도권이 프레임워크에 있다. 프레임워크가 제공하는 기술을 이용하거나 허용하는 범위 내에서만 추가 도구 사용이 가능하다는 것.대표적으로 이번에 다룰 Next.js가 있다. 라이브러리에 비..

퍼널이란?퍼널은 위 그림처럼 최종 지점에 도달하면서 이탈이 높아지는 현상을 깔때기 모양으로 나타낸 것을 의미한다. 실제 토스에서도 회원가입 페이지를 개발할 때, 가입 방식, 주민번호, 집주소같은 여러 페이지를 통해 상태를 수집하고, 가입완 페이지를 보여주게 되는데 마지막 집 주소 페이지에서 최종적으로 API 호출을 하는 형식으로 구현을 하게 된다.  보통은 각 페이지에서 버튼 클릭 시 router.push로 다음 페이지로 이동시키도록 구현한 다음, 전역 상태를 통해 상태를 유지하며, 집주소(마지막)페이지에서 상태를 불러와 호출을 하게하는 것이 일반적인 방법이다. 다만, 페이지 흐름을 따라가기에 어려움이 있고, 상태를 사용하는 곳과 수집하는 곳이 다르기 때문에 추후 API를 추가하거나, 버그를 수정할 때 ..

피키토키 프로젝트를 진행하면서 회원가입 기능을 맡게 되었다. 따로 회원가입을 위한 아이디와 비밀번호 입력 폼을 구현할 필요는 없었고, 카카오 로그인 로직 하나만 구현하면 됐다. Next.js 프레임워크를 사용하기로 했기 때문에, 해당 프레임워크의 인증 라이브러리인 NextAuth를 사용해보고자 했다. 클라이언트, 서버 사이드에서 모두 인증 관리를 편하게 처리할 수 있을 것 같았다. 처음 공식문서를 보고 생소한 코드들이 많아 이해하는데 꽤 많은 시간이 소요됐다. providers, callbacks, jwt 등등.. 이번 기회에 정리하면서 확실히 알고 넘어가보자.  providers: [ Kakao({ clientId: process.env.KAKAO_CLIENT_ID as string, ..

Deque는 양쪽에서 삽입과 삭제 모두 가능한 선형 자료구조이다. 코딩테스트를 준비하면서 shift() 와 같은 메서드를 사용하니, 시간초과가 나는 것을 자주 볼 수 있었다. 시간 복잡도가 O(N)인 배열 자료구조를 사용하기 보다 경우에 따라 시간 복잡도가 O(1)인 Deque를 사용하면서 해결해 나가면 좋을 것 같았다.  자바스크립트로는 직접 구현을 해야하기 때문에 구현 코드를 작성해 보았다.  class Node { constructor(value) { this.value = value; this.prev = null; this.next = null; } } class Deque { constructor() { this.front = null; ..

다른 해야 할 일들이 많았다 보니, 바로 작성하지를 못했다. 더 늦어지기 전에 기록용으로 남겨보려고 한다..!(현재 3주차 진행 중) 왓에버 멘토링을 하면서 프로젝트를 하나 병행하면 좀 더 유의미한 시간을 보낼 수 있을 것 같아 모집 중인 모든 동아리를 알아보았다. 협업 경험이 부족하기도 했고, 성장이 너무 간절하다 보니 합격 역시 간절하게 다가왔다. 다행히 알아보던 시기에 디프만과 DND가 모집 중이었고, 디프만은 떨어졌지만 그래도 붙고 싶었던 동아리인 DND에 합격해 너무 기뻤다. 최근 좋은 소식이 딱히 없어서 우울해지던 찰나에 합격 소식이 들려와 또 다른 동기부여가 된 것 같다. DND는 인터뷰와 같은 절차는 없었고 자기소개서 위주로 평가가 되는 듯했다. (OT를 들어보니 깃헙에서 어느 정도의 역량..

이번주는 좋은 것과 나쁜 것이 무엇이 있었나요?코딩테스트를 매일 진행하지 못했던 점이 아쉬움에 남습니다..이번 멘토링 시간에 진행한 기술 질문에 대한 답변은 어느 정도 잘한 것 같아 만족스럽습니다..! 이번주 진행했던 학습/개발 내용은 무엇이었나요?JS로 SPA 구현하기(날씨 앱 만들기)리액트 공식문서 학습 (Thinking in React, Describing the UI, Adding Interactivity)브루트포스, 그리디 알고리즘 학습가장 고민을 했던 부분은 무엇이었나요?SPA의 동작원리에 대해 고민을 많이 하며 학습을 해나갔습니다. history api들을 사용하는 이유와 pushstate와 같은 메서드들은 어떻게 동작하는지에 대해 고민을 많이 했습니다.아쉬운 부분을 개선하기 위해서 필요한 ..

SPA란 무엇일까?SPA는 Single Page Application의 약자로 단일 페이지 애플리케이션을 의미한다. 처음 렌더링 때에만 웹 애플리케이션에 필요한 정적 리소스들을 받아오게 된다. 이후 페이지를 이동할 때에도 필요한 데이터만 요청을 하고 새로고침이 없이 부드러운 전환이 가능하게 된다. 기존 link 태그를 사용하면 페이지 요청할 때마다 새로운 리소스를 다운로드하고 다시 랜더링 하게 되는데, 이러면 사용성 측면에서 좋지가 않다. 난 민망하게도 SPA를 솔직히 이름만 알았지, 제대로 원리를 알고 사용해 본 적은 없었던 것 같다. 이번 기회에 SPA에 대해 확실히 알아놓자. 그럼 도대체 서버에 요청을 안 보내고 URL만 변경을 어떻게 할 수 있는 걸까? 이를 해결하기 위해서는 history api..

해당 문제는 간선의 가중치가 0 이상이고, 하나의 노드에서 다른 모든 노드까지의 최단 경로를 구하는 문제이기 때문에, 다익스트라 알고리즘을 사용하면 될 것 같았다. 단, 조건이 하나 붙게 되는데 주어진 두 정점을 반드시 거쳐야 하는 정점 번호가 주어진다.     1번 노드로 시작했을 때 최단경로, v1 노드로 시작했을 때 최단 경로, v2로 시작했을 때 최단 경로를 각각 구해주면 된다. v1을 먼저 방문하는 경로와 v2를 먼저 방문하는 경로가 있을 수 있는데 둘 중 더 작은 값이 나오는 걸로 결과를 도출하면 된다.  코드(function main() { const fs = require("fs"); const isLocal = true; const filePath = isLocal ? "t.txt"..

다익스트라 알고리즘이란?다익스트라는 하나의 노드에서 다른 모든 노드까지의 최단 경로 및 거리를 구하는 알고리즘이다. 주의할 점은 음수 간선이 존재하지 않을 때만 사용할 수 있다는 점.중요한 시간 복잡도는 간선이 M이고, 노드 개수가 N일 때, O(M * logN)을 따르게 된다. 그림으로 이해하는게 더 빠른 것 같아서 직접 그려보며 공부해 보았다.시작 노드부터 가까운 노드를 그리디하게 방문하는 점을 고려하면서 그려보니 이해하기 수월했다.  다익스트라 알고리즘 로직은 현재 살펴보지 않은 경로 중에서 가장 거리가 짧은 경로를 먼저 살펴봐야 한다. 힙 자료구조를 사용하게 되는데, 자바스크립트에서는 라이브러리가 제공되지 않기 때문에 우선순위 큐를 활용한 힙 자료구조를 직접 구현해야 했다. 우선순위 큐를 반영한 ..