개발 기록
-
좌충우돌 블로그 Next.js로 마이그레이션하기
좌충우돌 블로그 Next.js로 마이그레이션하기
저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로..
2023.07.28
-
모임 서비스를 개발하며 (모두 모여라 개발기)
모임 서비스를 개발하며 (모두 모여라 개발기)
2022 . 06 . 22 ~ 2022 . 10 . 22 우아한테크코스 레벨 3 ~ 4에 거쳐 진행된 팀 프로젝트가 21일 데모데이를 끝으로 마무리 되었습니다. 제가 참여한 팀에서는 "모두 모여라"라는 모임 생성 & 참여 서비스를 개발하게 되었는데, 지난 네 달간의 개발 과정을 정리해보는 시간을 가지려고 합니다. 팀 규칙 정하기 모두 모여라(이하 모모) 팀은 백엔드 크루 4명과 프론트엔드 크루 2명, 총 6명으로 구성된 팀입니다. 여러 명이 함께 개발을 해야하다보니 앞으로의 원활한 진행을 위해 일관성 있는 규칙이 필요했습니다. 간단한 시간 약속부터 회의나 코드 리뷰 방식까지 공통적인 팀 규칙을 정하고, 각 분야별로 구체적으로 필요한 규칙이 있으면 정하였습니다. 정했던 규칙들 중 4번 나만 알지 않기, 나..
2022.10.23
-
Recoil + React-query 삽질기
Recoil + React-query 삽질기
이 글은 모두 모여라 기술 블로그에도 업로드 되었습니다. 현재 진행하고 있는 프로젝트의 스프린트가 마무리 되고, 본격적인 유지보수와 리팩토링 작업에 들어갔습니다. 시간적인 여유가 생겨 사용되고 있는 기술 스택들을 깊게 공부해보며 발견했는데 현재 사용중인 라이브러리들 중 라이브러리가 추구하는 방향 또는 기능과 일치하지 않는 부분을 발견하였습니다. 무엇인가 이상한 점을 느껴 전체적인 데이터 관리 플로우를 점검해보았는데, 나름 잘 사용하고 있었다는 초기의 생각과는 달리 데이터 관리의 일관성이 무너진 상태였습니다. 저희 팀이 처음보는 라이브러리를 사용하며 어떤 착각을 했었는지, 그 실패의 경험을 글로 옮겨보려합니다. 무엇이 문제였을까? 문제가 되는 라이브러리는 프로젝트의 상태 관리를 담당하는 recoil과 통신..
2022.10.28
-
썸네일 생성기를 리뉴얼 했어요
썸네일 생성기를 리뉴얼 했어요
지금으로부터 약 1년 전, 블로그 포스팅에 사용하기 위해 썸네일을 생성해주는 프로그램을 만들었습니다. 이때 만든 프로그램을 지금까지도 만족스럽게 쭉 써오고 있었는데, 몇 가지 불편한 점이 있었으나 기술적인 역량이 부족하여 손대지 못하고 있었습니다. 🚩 이전에 만들었던 썸네일 생성기 제작기 썸네일 생성기를 만들었어요 (Thumbnail generator) 이번에 우아한테크코스를 진행하며 생각해오던 목표 중 하나가 기술적으로 성장해서 이전에 진행했던 프로젝트들을 리팩토링 하는 것이었습니다. 현재까지 가장 많이 사용했었고, 앞으로도 계속 사용할 예정이며 직접 사용하며 느꼈던 불편점들이 명확했던 썸네일 생성기가 첫 번째 대상이 되었습니다. 현재 프로젝트의 문제점 우선 기술스택부터 점검하였습니다. 기존의 썸네일 ..
2022.12.12
-
PR시 미리보기 구현하기 (Github Actions)
PR시 미리보기 구현하기 (Github Actions)
여러 개발자가 팀으로 함께 개발을 하는 경우, 일반적으로 github를 통해 버전을 관리하게 됩니다. 실제 라이브 프로젝트를 배포하게 되는 main 브랜치가 있다고 하겠습니다. 보통 이 main 브랜치에서 파생하여 개발용 버전을 관리할 목적으로 사용하는 develop 브랜치를 두고 여기서 파생된 각 기능별 브랜치에서 실제 개발을 진행한뒤, 이를 develop 브랜치로 병합하여 관리합니다. 여기에 hotfix와 같은 기타 브랜치들이 더 추가되기도 하지만 우선 큰 줄기는 이렇습니다. 이렇게 브랜치를 관리하는것 만으로도 프로젝트의 전체적인 그림을 파악하기에 좋지만, 아직은 몇 가지 문제가 남아있습니다. 예를 들어, 협업자의 코드를 볼 수는 있으나 그 결과를 눈으로 확인하려면 해당 브랜치로 이동하여 코드를 pu..
2022.11.09
최신 포스트
-
classname으로 스타일 간결하게 관리하기
React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classnames 라이브러리를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다. 설치 // npm을 사용한다면, npm install classnames // yarn을 사용한다면, yarn add classnames 먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다. 적용 이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다. import * as styles form './style.css.ts'; exp..
2024.03.24
-
useEffect 내부에서는 기명함수를 사용하자
useEffect useEffect는 외부 시스템과 컴포넌트를 동기화 시켜주는 리액트 훅으로, 공식 문서에 나와있는 useEffect의 예시 코드는 이러한 모양입니다. 코드를 보면, useEffect의 첫 번째 인자로 트리거 시 실행될 동작을 익명함수로 넣어주고 있습니다. 이때 훅 내부의 함수가 길어지면 특별한 주석 없이는 코드의 동작을 알기 어려워 질 때가 종종 발생합니다. 따라서 함수를 적절한 이름을 붙인 기명함수로 바꿔주면 팀원들의 이해를 도와줄 수 있습니다. 이 상태에서, 임의로 오류를 발생시켜 보겠습니다. Uncaught Error: Error occurred! at (/src/App.jsx?t=1710664770335:24:11) 에러가 발생한 위치의 stack trace에 at 뒤로 파일의 ..
2024.03.17
-
Redux와 RTK로 상태 관리하기
들어가며 React에서 전역 상태를 관리하는 방법은 다양합니다. React가 공식적으로 제공하는 Context API부터, 얼마전에 소개했던 Zustand 등 수많은 라이브러리들이 있습니다. 오늘은 그중에서도, 꽤 오랜 시간 사용되어 온 Redux와 RTK에 대해 알아보겠습니다. Redux Redux는 Flux 패턴을 따라가는 상태 컨테이너입니다. Dispatcher의 Action를 통해 Store의 상태를 변화시키고, 이 상태가 다시 View에 차례대로 반영되는 단방향 구조가 Flux 패턴의 핵심입니다. 이러한 구조로 만들어진 컨테이너를 활용하여 쉽게 데이터를 집약하고, 일관성 있게 관리할 수 있다는 것이 바로 Redux의 장점입니다. 예시를 통해 React에서 Redux를 사용하는 방법에 대해 알아보..
2024.03.03
-
2024년도 신입의 취업 후기
들어가며 23년도 회고를 작성한지 얼마 되지 않았는데 좋은 일이 생겨 후기를 작성하게 되었다. 겨울동안 줄기차게 진행했던 취업 준비를 마무리하고, 2월부터 프론트엔드 개발자로 커리어를 시작하게 되었다. (이 글을 쓰는 지금이 출근 3일차의 따끈따끈한 신입인 상태다!) 사진에는 모두 담지 못했지만, 취업까지의 과정이 쉽지만은 않았다. 우테코를 수료하고 학업을 마무리하러 돌아오긴 했지만, 동시에 간간히 개인 프로젝트를 진행하고 이력서를 넣으며 취업의 문을 두드리곤 했었다. 그 결과, 지금까지 47번의 지원 중 2곳의 합격을 받아 최종적으로는 현재 캐치테이블에 신입 프론트엔드 개발자로 합류하게 되었다. 그동안 취업을 위해 어떻게 준비했었는지 잊어버리기전에 이 자리를 빌려 간단히 기록해두려고 한다. 나의 장점은..
2024.02.08
-
Cookie와 Web Storage (Local Storage와 Session Storage)
서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다. 현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 웹 스토리지 API를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해서 간단히 알아보겠습니다. 쿠키 쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송..
2024.01.24
