너무 늦은감이 있지만 그래도 1월이 가기전에 25년 회고를 써보려 한다. 한 해를 돌아보니 정말 많은 일들이 있었다. 부트캠프 졸업부터 대학교 졸업, 취업까지 정신없이 지나간 한 해인것같다. 개발에 있어서도, 그리고 나 자신에게 있어서도 올 한 해는 분명 많은 성장을 이룬 시기였다. 이 글에서는 먼저 개발자로서의 나에 대한 회고부터 시작해보려 한다. 프론트엔드 개발을 시작하며첫 회사에 들어가서 정말 좋은 분들을 만나 기술적으로 많이 배웠다. 아키텍처의 설계부터 다양한 디자인 패턴을 사용해보며, 이론적으로만 알고있었던 내용이 어떻게 사용되는지, 왜 쓰여야 하는지에 대한 생각을 많이 해볼 수 있었다. 단순히 ‘작동하는’ 코드를 작성하는 것이 아닌 전체 구조의 흐름을 고려하며 코드를 설계하는 경험을 하게 ..

서론처음으로 컨퍼런스에 다녀왔다. 프론트엔드 개발 위주의 컨퍼런스라 기대가 컸고, 오랜만에 보는 사람들과 함께 가서 그런지 더 재미있게 즐길 수 있었다. 도착해보니 내가 듣고 싶었던 세션은 거의 끝나가고 있었지만, 다행히 다른 세션들이 아직 많이 남아 있었고 유튜브에 올라오기도 하니 바로 다음에 무엇을 들을지 고민하며 내부를 둘러봤다. 홀은 A, B, C 세 개로 나뉘어 있었고, C홀은 2시까지 골드 티켓 전용 리더 토크가 진행되고 있었다. 우선 홀 외부의 네트워킹 공간부터 구경했는데, 여러 사람들이 당근을 이용한 온/오프라인 네트워킹을 하고 있었다. 나는 같이 온 형이랑 친구랑만 돌아다녀서 다른 사람들과의 교류는 없었지만, 재밌는 경험이 될 것 같았다. C홀 입구에서는 부스도 있었다. 부스는 오늘의..

회사에서 컴포넌트를 리팩토링하는 작업을 맡게 되었다. 이 컴포넌트는 드롭다운을 열거나 닫고, 투파트 버튼을 눌러 특정 동작을 실행하는 등 다양한 UI 액션을 담당하고 있었으며, 모든 동작은 외부에서 주입받은 "커맨드 객체"를 통해 이루어지는 구조였다. 처음 코드를 봤을 때는 이해조차 어려웠었다. 라인수도 많기도 했지만 처음 보는 구조였기에 이해하는데 고생을 했던 기억이 있다. 그래도 이번 업무를 진행하며 커맨드 버튼이 어느 시점에서 사용되는지 어떤 방법으로 구현되는지 조금은 알 것 같다.커맨드 패턴이란?커맨드 패턴(Command Pattern) 은 요청(명령) 을 하나의 객체(Command 객체) 로 캡슐화해서, 실행자(Invoker)와 수신자(Receiver)를 분리하는 디자인 패턴이다.즉, “무엇을 ..

최근 디자인 패턴에 대해 공부를 시작했다. 정처기를 공부하며 디자인 패턴의 종류나, 특징이 되는 키워드는 알고 있었지만 막상 코드에 적용하려니 어떻게 해야할지 감이 잡히지 않기도 하고 잊어버린 부분도 많은 것 같아 다시 짚고 넘어가려 한다. 디자인 패턴이란?소프트웨어 개발에서 자주 발생하는 문제들을 해결하기 위해 검증된 설계 방식이나 구조를 말한다. 쉽게 보자면 템플릿과 같이 자주 사용되는 기능을 검증된 방식으로 빠르게 해결하기 위해 사용한다고 볼 수 있다. 그중에서도 가장 널리 알려진 GoF 디자인 패턴이 존재한다. GoF 디자인 패턴은 4명의 저자가 쓴 디자인 패턴 책에 나오는 23가지 패턴들을 말하는데 이 4명을 GoF (Gang of Four) 라고 부른다. GoF 디자인 패턴은 객체지향 프로..

서론사이드 프로젝트를 진행하며 '동적 매개변수'를 가져와 사용해야 하는 일이 생겼다. 처음에는 useParams를 사용해 값을 가져왔지만 빌드를 해보니 에러가 엄청나게 떠 있었다. 에러의 이유는 useParams를 서버 컴포넌트인 page.tsx에서 사용했던 것이 문제였다. useParams란?useParams는 현재 페이지의 URL 파라미터 값을 가져오는 Next.js의 훅이다. 예를 들어 아래와 같은 URL 경로가 있다면 [locale]는 동적 세그먼트이다. useParams는 이 값을 가져오는 훅이다. /app/[locale]/page.tsxuseParams는 런타임에서 URL 값을 읽기 때문에 서버 컴포넌트에서 사용한다면 브라우저의 현재 URL 정보를 직접 읽을 수 없다. 클라이언트 컴포넌트와 서..

Rotate MatrixProblem:Given a 2D array (matrix) of n × n elements, rotate the matrix by 90 degrees clockwise.Example:Input:[ [1, 2, 3], [4, 5, 6], [7, 8, 9]] Output:[ [7, 4, 1], [8, 5, 2], [9, 6, 3]] 해설최상단에 있는 1,2,3 은 배열의 가장 끝번호로 이동한다. 배열로 보면 arr[0][0], arr[0][1], arr[0][2] ➡️ arr[0][끝], arr[1][끝], arr[2][끝] ... 와 같다. 위 문장은 for 문을 통해 arr[i][j] ➡️ arr[j][N - 1 - i] 이 될 것이다. 즉, 행의 값은 열로 옮겨지고..

서론멋사 프론트엔드 스쿨의 마지막, 파이널 프로젝트를 마쳤다. 기획부터 유지보수까지 모두 진행되는 프로젝트였기 때문에 설렘 반 긴장 반으로 시작했던 것 같다. 프로젝트의 주제는 "타로를 보는 AI" 로 정했다. 프로젝트를 진행하며기획의 중요성을 깨닫는 순간 🥲자유 주제로 프로젝트를 진행하다보니 어떤 주제로 프로젝트를 진행할지 생각해야했다. 특히 기획 단계가 가장 중요하다는 말을 많이 들어왔기에, 최대한 꼼꼼하게 준비하려고 노력했다. 기획과 디자인만 꼬박 일주일 가까이 걸렸고, 개발을 할 시간이 충분할까 하는 걱정도 있었다. 나름 기획을 철저하게 잘 했다고 생각했는데 막상 개발에 들어가고 보니 기획때 예상 못했던 문제들이 하나 둘 씩 나오기 시작했다.  "이 버튼 누르면 어떻게 되어야 하나요?" "운세 ..

PWA란 ?PWA는(progressive web app)의 줄임말로서 웹과 네이티브 앱의 기능 모두 사용할 수 있도록 만든 기능이다.  웹사이트의 장점은 빠른 접근성이다. 어플리케이션을 설치하는 것보다 더 빠르게 접근이 가능하고 링크를 통한 공유가 가능하다는 점이 웹 의 특징이다. 반면에 앱은 웹보다 더 부드러운 사용자 경험을 제공한다. 또한, 오프라인에서도 동작이 가능하며 설치가 된 이후에는 웹사이트보다 쉽게 접근이 가능하다. PWA는 이 두가지 기능을 모두 통합한 웹앱이다. 즉 웹을 앱처럼 사용할 수 있다. PWA 시작하기PWA는 manifest.json 파일과 serviceworker.js 파일만 있으면 만들 수 있다. 그러나 Vite 에서는 PWA를 쉽게 적용할 수 있는 플러그인이 있으므로 해당 ..

리액트는 컴포넌트 기반 아키텍처를 따르기 때문에 각각의 컴포넌트는 다른 컴포넌트의 상태에 접근할 수 없다. 하지만 부모 - 자식 관계는 props를 통해 상태를 전달할 수 있다. 리액트는 "단방향 데이터 흐름" 을 따르기 때문에 부모에서 자식으로 데이터 전달이 가능하지만, 자식에서 부모로 데이터 전달은 불가능하다. 사실 부모에서 콜백함수를 전달한다던지, 상태를 끌어올리는 방법을 통해 어느 정도 구현이 가능하지만 이 또한 컴포넌트가 많아진다면 드릴링의 문제가 생길 수 있다. 그래서 상태관리 라이브러리가 탄생했다. 상태관리 라이브러리는 전역의 저장소에서 상태를 관리할 수 있도록 돕는다. 이 저장소는 어느 컴포넌트에서도 접근 및 제어가 가능하다. 그 중 대표적인 라이브러리가 바로 zustand와 redux이..