너무 늦은감이 있지만 그래도 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] 이 될 것이다. 즉, 행의 값은 열로 옮겨지고..