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