📝 400에러 해결하기기 Firebase를 이용해 로그인 기능을 구현후, 사용자 정보를 firestore에 저장하려는 생각을 가지고 있었지만… 저장이 안되는 문제가 발생했다. 🤨 에러 메세지는 다음과 같다. 400. That’s an error. Your client has issued a malformed or illegal request. ...

👀 시작하며 작업을 하다보면 항상 자주 반복되는 문장들이 있다. 나는 이 중에서도, utils폴더에 작성된 custom className을 작성할 수 있게 하는 cn을 이용한 className 작성을 많이 한다. 작성 할 때 처음에는 className으로 작성하고 조건부 식이 필요할 때만 감싸서 사용하는데 문득.. 이걸 하나하나 치고 있기 너무 귀찮...

👀 시작하며 작업을 하다보면 항상 자주 반복되는 문장들이 있다. 나는 이 중에서도, utils폴더에 작성된 custom className을 작성할 수 있게 하는 cn을 이용한 className 작성을 많이 한다. 작성 할 때 처음에는 className으로 작성하고 조건부 식이 필요할 때만 감싸서 사용하는데 문득.. 이걸 하나하나 치고 있기 너무 귀찮...

✨ 깃 커밋 메세지를 간단하게 써보자 요즘 GitHub를 좀 더 체계적으로 관리하려고 하다 보니 어떤 상황에 어떤 prefix(Gitmoji)를 써야하는지 헷갈리는 상황이 생겼다. 특히 커밋 메시지에서 Gitmoji를 사용할 때, 매번 이모지를 찾아서 작성하는게 다소 번거롭게 느껴지기도 했다. 그래서 이를 쉽게 도와줄 수 있는 라이브러리가 있는지...

✨ 깃 커밋 메세지를 잘 쓰고 싶어! 프로그래밍은 나중에서야 왜 많은 사람들이 그렇게 써왔는지, 혹은 그렇게 조언했는지 알 것 같은 상황이 자주 발생하는 듯 하다. 특히 깃 커밋 메세지가 그렇다. 나는 꽤 오랫동안 type: Subject만 작성하는 깃 커밋 메세지 형식을 선택해왔다.🤔 그 때는 크게 불편함을 느끼지 못했고, 이것 도 충분히 하나의...

✍ 미들웨어가 필요하다! 웹사이트를 만들다 보면 다음과 같은 경우를 처리해야 하는 상황을 만날 수 있다.👀 사용자가 로그인 했는데 로그인 페이지에 시도하는 경우 사용자가 로그인 하지 않았음에도 보호되는 주소에 접근하려는 경우 사용자에게 권한이 없음에도 사용자가 해당 주소에 접근하려는 경우 업무에서는 next.js와 next-auth...

💌 Formatter 최근 사내에서 주로 사용하는 Fast API가 궁금해서 Fast API + Next js 조합으로 todo 를 만들어보고 있다. 나는 Python을 Javascript만큼 자주 사용하지 않기 때문에, 내 노트북 환경에서 Python을 거의 사용하지 않아서 이번에 BE 작업을 위해 Python Formatter를 처음으로 사용해보게...

💌 Git 요즘은 개인적으로 Git을 잘쓰는 방법이 뭐가 있을까 고민하고 있다. 🤔 항상 쓰는 명령어 위주로 사용하기 때문에 (예를들어 pull, push, commit etc…) 다른 복잡한 상황에서는 한계를 느꼈기 때문이다. 특별한 상황이 올 때마다 찾아보고 명령어를 입력하곤 했는데, 이제는 상황별 명령어를 정리해두고, 이런 command들을 ...

📌 시작하며 이전 Nextjs-Optimizing(4) 포스팅에서 static assets에 대해 살펴보았다. 사실 그때는 “그렇군! 좋아! 🤗” 하고 넘어갔는데, 나중에 이걸 실제로 사용할 일이 생기니 약간의 시행착오를 겪게 되어, 이를 해결했던 과정을 정리해보고자 한다. 🖼️ Image Caching 💥 문제 상황 나는 public 폴더 내...

🔑 들어가며 이번 포스팅은 업무 진행 중 마주쳤던 문제와 그 해결 과정에 대해 작성해보고자 한다. ✨구현 요구사항 화면을 구성하는 가로로 나열된 3개의 컴포넌트가 있다. 각각의 컴포넌트가 A, B, C 라고 할 때 A는 완전히 접을 수 있고, C는 사용자가 드래그해서 사이즈를 조절할 수 있는 resizable Component다. 마지막으로 B...

✨ sessionStorage 사용기 오늘은 업무에서 sessionStorage를 사용했었는데, 과정을 정리해보고자 한다. 🚨문제 정의 💡 사용자가 특정 B페이지에 접속하면 자동으로 스크롤 이벤트가 일어나야 한다. 위의 내용을 바탕으로 간단하게 해당 구현해야 할 기능을 정의해보자면, 아래와 같다. Trigger: 사용자가 B페이지...

📌시작하며 15.2.2 공식문서 기반으로 작성 계속해서 Static Assets에 관한 내용을 알아보자. 1️⃣ Static Assets in public Next.js는 이미지 같은 static 파일을 root의 public이라는 폴더 아래에 제공할 수 있다. 그러면, 다른 컴포넌트에서 기본 URL(/)로 public 내부의 파일을 참...

📌웹 접근성 웹 접근성(a11y)은 비장애인, 장애인 모두가 사용할 수 있도록 웹사이트를 개발하는 것을 뜻한다. React에서는 접근성을 갖춘 웹사이트를 만들 수 있도록 모든 지원을 하고 있다고 하는데, 이번에는 이 부분을 탐색해보고자 한다. 🤓 🤝WAI-ARIA WAI-ARIA(Accessible Rich Internet Applicati...

📌시작하며 Next.js 공식문서를 읽을 때마다 느끼는 거지만 정말 사람은 아는만큼 보이고, 아는만큼 쓰는 것 같다.. 😅 특히 이렇게 습득할 수 있는 정보가 많을 때는 내가 처해있는 상황에 어떤 정보가 가장 필요한지 구별해내는 것이 정말 어렵지만 꼭 필요한 일이기도 하다. 서론이 길었는데, 최근 Optimizing 관련 문서를 읽다가 타고 타고....

📌시작하며 15.2.2 공식문서 기반으로 작성 아직 작업이 완전히 끝난 것은 아니지만, 공식문서를 보면서 꾸준히 Next.js의 최적화 기법에 대해서 관심을 가지고 있다! 특정 <Image> 컴포넌트나, <Scripts> 같은 경우에는 직접 예제를 만들어 보면서 학습하는 중이라 블로그에 정리하는건 조금 시간이 걸릴 것...

📌시작하며 useRef를 언제 사용하나요? 라고 묻는다면, react에서 DOM 요소를 참조할 때 사용한다. 라고 답할 것이다! 실제로, useRef의 역할에는 DOM 요소를 참조하는 것이 있으니 틀린 말은 아니다. 하지만, 최근에 ‘최초 렌더링’ 상황에 스크롤이 최하단으로 내려가야 하는 컴포넌트를 구현하며, 자꾸만 해당 컴포넌트 내부의 것들이 렌...

📌시작하며 최근 제작하고 있는 웹이 한 번에 표시되어야 하는 정보가 많아, 좌측엔 내비게이션을 두고, 우측엔 해당 페이지에 필요한 정보를 두었다.🤔 좌측 내비게이션은 사이즈가 그리 크지 않고, 펼치거나 접을 수 있기 때문에 괜찮지만, 사용자가 가운데 내용을 보면서 정보 컴포넌트를 함께 보고 싶은 경우에는 고정 사이즈를 제공하는 것보다, 사용자의 화...

📌시작하며 ✅nth-child tailwind를 이용해 다양한 선택자를 이용해 편리하게 class를 줄 수 있다. tailwind 에서는 nth-child &는 수정할 선택자를 나타낸다. import Container from "@/components/Container" export default function tailwindd() {...

📌시작하며 퇴근 전, 다른 프론트엔드 개발자 분과, 라이브러리 번들 사이즈에 대해 이야기를 나누었다. 최적화의 중요성은 너무 당연한 것이기도 해서, 번들 사이즈를 줄이는 것이나, 최적화 진행에 대해 공감했고, 기본적으로 알고있는 내용에 더해 Next js가 제공하는 최적화 방식도 알아두면 좋을 것 같아서, 한동안 Next js의 공식문서의 Optim...

📌시작하며 계속해서 next.js의 Parallel Routes를 사용할 때는 어떻게 error.tsx를 보여주면 좋을지 정리해보자. ✅Parallel Routes란? 공식문서에서는 Parallel Routes를 이렇게 설명한다. Parallel Routes를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더...

📌시작하며 계속해서 fetch 도중 발생하는 에러 handling에 대해 정리해보자. ✅api fetch 중 문제가 발생하는 상황을 가정하기 위해, next.js에서 api를 하나 만들자. 아래 예제는 해당 경로로 POST 요청을 보냈을 시에, 404를 return 한다. // 경로는 /api/error import { NextResponse ...

📌시작하며 전 포스팅에서는 global-error.tsx로 최상위 layout.tsx에 에러가 발생했을 때 이를 감지하고, 적절한 UI를 렌더링 하는 방식에 대해 살펴보았다. 이번에는 각 페이지에 사용되는 error.tsx에 대해 알아보자. 이전부터 error.tsx의 존재를 알고 있었고, 종종 프로젝트에 사용도 했었는데 어떤 순간에서는 적절히 렌...

📌시작하며 1월에 기회가 있어 교육박람회를 다녀왔고, 가장 관심있게 보았던 것은 디지털 교과서다. 사실 출판사들마다 UI는 거의 비슷했는데, 가장 기억에 남는 출판사의 교과서를 떠올려보면, 사용자에게 로딩 컴포넌트나 토스트 메세지가 적절히 표시되어 사용자 배려가 돋보였다. 내가 봤던 출품작 중에서는 시연 중 네트워크 오류로 인해 제대로 작동을 하지...

📌시작하며 입사하고 오랫동안 함께 하고 있는 프로젝트가 출시를 준비하면서, 프로토타입으로 만들었던 컴포넌트를 리팩토링 할 필요성이 있었다. 최근에는 생각나면 Next.js 공식문서를 살펴보는 중인데 그때 발견한 Template.ts를 적용하면서, 전체적인 컴포넌트 위치 변경이 있었고 layout.tsx를 쓰며 children에게 Props를 내려주는...

📌시작하며 tailwind CSS가 4.0으로 업데이트 되었다! tailwind CSS가 3.0으로 업데이트 된게 2021년 12월이니, 3년 조금 넘어 1버전이 업데이트 된 것!😎 나는 tailwind를 기본으로 작업을 하기 때문에 이번에 어떤 내용들이 업데이트 되었는지 무척 기대가 된다. 그럼 블로그 글을 바탕으로 업데이트 내역을 살펴보고, 실제...

📌시작하며 최근 프로그래머스 문제 풀이를 다시 시작했다. 알고리즘 강의를 듣고 있기도 하고, 꾸준히 해서 나쁠건 없으니 말이다.😊 문제를 풀다 보면, 특정 문제들에서는 정규표현식이 빛을 발하는데, 내가 JS 정규표현식을 완벽하게 숙지하고 있는 것이 아니라 난감할 때가 있다. 실무에서도 form을 만들 때 정규표현식을 이용해 값을 제한하기도 하는데,...

📌시작하며 프로그램 언어의 다형성이란, 프로그램 언어의 각 요소들이 다양한 자료형에 속하는 것이 허가되는 성질을 가리킨다. (위키백과) 어쩌다 들어간 웹사이트에서 Polymorphic Components 관련된 글을 보게 되었다. Polymorphic(다형성) 이란 단어 자체가 낯설어서, 이게 뭐지? 하고 읽어보던 와중에, 내가 예전에 봤던...

📌시작하며 vitest에서 jest로 이동하면서 한 번에 모든 테스트 파일을 옮기면 복잡할 듯 해 한 파일씩 옮겨보고, 테스트가 통과하는지 살펴보는 시간을 가졌다. 한참을 괴롭게했던(…) clipboard에 복사하는 테스트가 무사히 통과 된 이후, vitest에서 진행한 MSW mocking 관련 테스트를 옮겨왔는데 아니나 다를까! 여기서도 오류가 ...

📌시작하며 개인 프로젝트 테스트 작성에서 오랜 시간 진행이 안되었던 부분이 있었다. 사용자가 share-button을 클릭하면 clipboard에 원하는 url이 제대로 복사가 되는지에 대한 문제였는데 테스트 통과 의 문제가 아니라, 테스트 작성 자체가 잘못되었다는 에러가 발생했다… 😥 ✅실제 UI 흐름 내가 테스트하고자 하는 UI의 흐름은 다음...

📌문제상황 chromatic을 이용해 storybook을 배포했다! 그런데 storybook에서는 제대로 보이던 이미지가, chromatic의 Snapshot에서는 제대로 보여지지 않는 문제가 발생했다!😣 현재 스토리가 어떻게 만들어졌는지 살펴보자면 아래와 같다. mockData.ts에 객체 형식의 더미데이터를 두었다. 더미...

📌시작하며 tailwind를 사용한지 꽤 오랜시간이 지났다. 쓰면서 느끼는 점은 확실히 className이 길어지면서 보기 불편해지는 건 맞지만, 사용하기 편리한 것 또한 부정할 수 없다는 것! 이번 글에서는 tailwind를 쓰면서 이상하리만큼 까먹던..(ㅎㅎ) 몇가지 속성과, 정말 편리했다..! 하는 내용을 정리해보고자 한다. ✅leading...

📌문제 상황 아무래도 회사 업무라 자세하게 작성할 수 없지만, 대략적으로 설명하면, 사용자가 컴포넌트를 클릭하면 해당 컴포넌트의 text를 받아서, 처리해야 하는 상황이 있었다. 그냥 state 내려줘서 처리하면 되지.. 싶지만 해당 컴포넌트는 부모 컴포넌트가 A 데이터를 필요로 함. 부모 컴포넌트는 map을 이용해 자식 컴포넌트를...

📌긴급 테스트를 해야한다! 그런데… 최근 내가 FE를 담당했던 프로덕트의 프로토타입 시연이 결정되었다.😲 팀 밖을 벗어나 타인에게 보여주는 것은 처음이기에 괜찮을지 긴장 되는 한 편, 날짜가 임박하게 정해졌는데, 막상 보여드렸더니 문제 생기는건 아니야?! 하는 불안감이 엄습했다… 😱(살려줘!) 지금 당장 테스트라이브러리 도입은 어렵기 때문에, 간단...

📌시작하며… 테스트 작성에 대해 찾아보며 코딩하던 평화로운 어느날… 우연히 우아한 형제들의 기술 블로그에 통합테스트와 관련된 내용을 발견했다. 자세하게 설명되어 있는 글이라 어떤 내용으로 테스트를 작성 하시는지 궁금해 살펴보던 와중 MSW 를 사용해 API값을 mocking 하는 부분이 있었다. MSW 어디서 많이 들어본 이름인데…🤔 하고...

📌상황 나를 너무나 고뇌하게 만들었던(…) react hook form을 이용한 Signin Component 테스트에 관한 내용을 작성해보고자 한다.😇 (a.k.a. 코드 한 줄이 불러온 에러 파티^^) 먼저 로그인 페이지를 만들기 위해 Signin Component를 만들었다. ID와 Password가 입력 되어야 하는 input 태그는 rea...

📌상황 storybook으로 작업을 하던 와중, next/font가 적용되지 않고 있다는 문제점을 발견했다. 실제 사용자가 보여지는 것을 정리하는 작업이고, 폰트가 미치는 영향이 큰 만큼 수정이 필요했다. 첫 번째로 storybook 공식문서를 확인해보았으나… next/font/google You don’t have to do anythin...

📌상황 최근에 꾸준히 공부하고 있는 Vitest와 Storybook을 실제 작업물에 적용시켜보는 프로젝트를 진행중이다. 간단한 컴포넌트 부터 Storybook을 작성하고, npm run storybook을 통해 확인해보니, Tailwind가 적용되지 않는다는 문제가 발견됐다. 라이브러리들이 설치된 상황은 다음과 같다. Next.js + Ta...

📌시작하며 회사에서 프로젝트를 진행하면서, 애니메이션을 구현할 일이 생겼다. 웹상에서 애니메이션을 구현하는 방식에는 CSS를 이용하거나 라이브러리를 이용하는 방식도 있지만, JavaScript의 requetAnimationFrame을 사용해 애니메이션을 구현하는 방식도 있다. 개인적으로 requestAnimationFrame은 가볍게 연습용으로만 ...

📌시작하며 기본적인 테스트 과정과 흐름에 대해 알아봤으니 이번엔 context API나 zustand와 같은 전역 상태 관리를 테스트 해보자. ✅context API 사실 처음엔 전역 상태 관리 를 테스트 한다는 거에 어떻게 하는건지 고민되었지만, 전역 상태 관리 에 초점을 맞추지 말고 사용자에게 보여지는 것 에 초점을 맞춰보면 쉽게 테스트 할 ...

📌시작하며 이번엔 vitest와 함께 사용되어 사용자 관점에서 테스트 할 수 있게 도와주는 React Testing Library에 대해 알아보고자 한다. React Testing Library는 실제 사용자가 UI를 어떻게 사용하는지 초점을 맞춰 테스트하는 것을 권장하며, 이를 구현하기 위한 API를 살펴보자. ✅DOM 요소 선택 (get~) ...

📌시작하며 이전 포스팅에서 테스트에 앞서 테스트의 배경과 사용되는 라이브러리를 살펴봤다면, 이번에는 실제로 사용되는 라이브러리의 api를 정리해보고자 한다. ✅it it 함수를 사용해 특정 동작이나 결과에 대한 기대를 정의하고, 이를 검증하는 테스트 코드를 안에 작성하게 된다. it 함수 안에 작성되는 설명은 테스트 목적, 기대 결과를 명확하게 ...

📌시작하며 드디어 이 날이 왔다 개인적으로 프론트엔드 테스트에 흥미가 있어 인프런에서 강의를 수강했었고, 한동안은 테스트해볼 만한 컴포넌트를 만들어 테스트를 작성하는 시간을 가졌다. 프론트엔드 테스트에 대해 “정말 필요한가?”라는 의견도 있지만, 나는 테스트에 긍정적인 입장이다. 이유는, 규모가 큰 프로젝트 진행시 예상치 못한 사이드 이펙트를 최...

📌시작하며 파이썬 강의 수강 중… 앞에 부분은 어렵지 않아서 가벼운 맘으로 보고 있었는데, 입출력 부분 부터 난이도가 올라가면서 새로 정리가 필요해졋다. 다행인건 흥미도도 쭉쭉 올라가는 중이란 것.😎 그래서 오늘은 파이썬 파일 I/O 방식에 대해 정리해보고자 한다. ✅기본적인 파일 열기 파이선에서 파일을 여는 핵심은 open() 함수다! 이후 파...

📌시작하며 최근 파이썬의 탄탄한(?) 기초를 다지고, 앞으로 사용하게 될 파이썬에 대비하고자 인프런 강의를 듣고 있다. 수업에서 안내하는 예제도 공부해야 하지만, 내가 잘 모르거나 이해가 잘 안되는 부분은 따로 찾아보면서 학습하는게 좋으니, 블로그에 추가로 정리를 하고자 한다. 🤗 ✅람다 함수 람다 함수는 Python에서 익명 함수를 정의할 때 ...

📌시작하며 next.js를 사용하면서 tailwind를 사용하는 일이 많아졌다. 이번 프로젝트에서도 tailwind를 적용하기로 했는데 편리한 라이브러리가 있어 정리해보고자 한다. ✅tailwind-merge tailwind-merge는 스타일 충돌 없이 tailwind css의 클래스를 병합해주는 역할을 한다. 예를 들어 기본 스타일이 bg-r...

📌시작하며 신입 개발자로 일하기 시작하며 업무에 필요한 스택을 틈틈히 공부하고 있다.😌 파이썬도 같은 흐름으로, 백엔드 코드를 읽거나 소통할 때 필요한 파이썬 공부도 시작했다. 파이썬 언어는 인간이 읽기 쉬운 고급언어로 배우기도 쉽다고 한다. 아직 걸음마 단계라 과연 그런지는 차차 공부해봐야 알겠지만😅 일단 기본 문법은 예제도 쳐보고 한 번은 훑...

📌시작하며 (작성중~) 최근에는 특별히 막 프로젝트를 진행하진 않더라도, 감을 잃지 않기 위해(?) 꾸준히 코드를 쳐보고, 궁금했던 내용 (예를 들어 Vue)을 맛보고 있다.😉 이번 포스팅은 프로젝트에서 떼어놓을 수 없는 Git에 관련된 내용이다. 자주 쓰는 명령어를 정리해보자. ✅저장소 초기화 / 복제 새로운 Git 저장소를 초기화 한다. 이...

📌시작하며 CSS 라이브러리 중 emotion을 사용해보고 정리하는 글! ✅emotion emotion은 CSS in JS 방식으로 스타일을 작성할 수 있는 라이브러리다! CSS in JS 방식으로 작성하는 방법은 이미 Styled Component를 사용해봤기 때문에 이해하는 것 자체는 어렵지 않았다. 👀 (작성하는 방식도 거의 비슷하고….) ...

📌시작하며 최근에 수강하는 강의에서 컴포넌트 합성에 대한 내용을 소개해주셨다. 왜 컴포넌트 합성이란 개념을 사용하시는지 설명을 듣다보니… 오! 😲 이거 진짜 잘 써먹겠다! 싶어서, 내용을 정리해보고자 한다. ✅컴포넌트 합성 컴포넌트 합성.. 이라는 단어만 보면 가장 먼저 생각나는건 아래와 같은 코드가 아닐까? export default func...

📌시작하며 정보처리기사 실기 합격 확인 후 쓰는글… 🎉 😌회고… 필기 합격글을 3월 1일에 작성했었는데, 6월 18일에 실기까지 최종 합격하게 되었다. 24년 1회차 시험에 실기와 필기 모두 마칠 수 있어서 너무 뿌듯하다. 📝공부는 꾸준히 어쨌든 첫 공부를 시작할 때 부터 최종 발표가 날 때 까지 다소 시간이 소요되었던 만큼 중간에 지칠때도 ...

📌시작하며 이전 포스팅에서 오픈그래프 만드는 법에 대해 쭉 살펴보고, 프로젝트에 적용했는데 역시나😅 예상치 못한 오류를 여럿 마주했다. 다행히 그 오류들을 해결하고 오픈그래프 적용을 완료해서, 관련 내용을 잊지않게 정리하고자 한다. ✅프로젝트 상황 기본적으로 모든 페이지에 적절한 오픈그래프가 적용될 수 있도록 figma를 이용해 이미지를 만들어 ...

📌 프로젝트를 이어받다. 같은 FE 동료의 퇴사가 결정되어, 앞으로 이어서 내가 해당 프로젝트를 작업하게 되었다. 👀 데일리 스크럼을 진행한 덕분에 해당 개발자 분께서 어떤 코드를 작성하실 때 가장 많은 시간을 소요하셨는지, 어떤 것을 중점적으로 생각하고 계신지는 대략적으로 파악하고 있었고, 인수인계 문서를 꼼꼼히 작성해두셔서, 순조롭게 인수인계가...

📌들어가며 (작성중~) Docker는 개발자라면 한 번씩 들어보지 않았을까 싶다.😎 인강 커리큘럼에도 포함되어 있고, 관련 경험자를 구하는 글을 몇 번 봤는데 🤔 이쯤되니, Docker가 어떤건지, 왜 필요한지 궁금해져서 알아보려고 한다. ✅Docker의 필요성 어떤 애플리케이션을 만든다고 가정해보자. 개발자들은 이 애플리케이션을 제작하기 위해 ...

📌시작하며 Next.js에서는 이전 SEO포스팅에서 정리했던 meta 태그들을 간단하게 만들 수 있는 방법을 제공한다. 공식문서 예제를 보고 응용해보면서 방법을 익혔는데, 의외로(?) 오픈그래프 쪽은 공식문서 내용이 부족하다고 느꼈다… 😅 그래서이번 포스팅에서는 나름 시행착오를 거치며 학습한 Next.js 오픈그래프 설정에 대해 정리해보고자 한다! ...

📌시작하며 프로젝트 최적화 작업을 마무리하고.. 이번엔 접근성(Accessibility) 점수를 개선해보고자 한다. 😎 개인적으로 접근성 하면 생각나는 말이 있다. 내가 한창 수업이나 과제에 아이패드를 활용하던 중에 ‘손쉬운 사용’기능이 있다는걸 알게되었고, 사용법을 찾아보던 중 한 유튜브 영상을 접하게되었는데, 그때 출연자가 이 기능을 설명하면서...

📌시작하며 앞에서 Graph QL을 간단하게 훑어봤는데… 그럼 REST API에서 말하는 CRUD는 어떻게 구현하는거지?🤔 라는 의문이 들었고 간단한 어플을 만들어 보면서 공부한 내용을 정리하고자한다. (정확히 말하면 CRUD는 아니지만 이 글에서는 편의성을 위해 CRUD라고 작성한다) ✅전체 흐름 이 CRUD를 구현하기 위해서는 크게 세 부분...

📌시작하며 유튜브 강의를 듣고 백엔드에서 만들어 둔 내용을 read하는 간단한 앱을 만들어봤는데, 백엔드 설정부분에서 이해가 부족한 부분을 채우고자 한다.😎 ✅typeDefs typeDef(Type Definition)는 GraphQL스키마 구조를 정의한다. 각 필드는 지정된 유형의 데이터를 반환하는데, 필드의 반환 유형은 scalar, obje...

📌시작하며 Graph QL 관련 자료를 찾다보니, Apollo를 함께 사용하는 것을 보았다.😎 Apollo는 무엇인지, 어떻게 적용할 수 있는지 알아보고 Graph QL 관련된 유튜브 영상에서 배운 내용을 나름대로 정리해보고자 한다. ✅Apollo란? 공식 문서의 설명을 살펴보자. Apollo는 데이터를 통합하고 서비스들을 단일 분산 Gr...

📌시작하며 Graph QL이라면 아마 개발 공부를 하는 사람이라면 한 번쯤은 들어봤을 거다! 내가 봤던 인강 코스에서도 있었고, 개발 유튜브 채널에서도 등장했고, 개발자들 대화나 채용공고에서도 자주 볼 수 있기 때문이다.🤔 사실 나는 Graph QL이라는 이름만 들었을 때 그래프를 이용한 시각화 라이브러리의 일종이지 않을까? 라고 생각했었다…😅 ...

📌시작하며 최근에는 계속해서 프론트엔드 기술 중 “최적화”에 초점을 맞춰 공부하고 있다. 이 최적화 단계에는 사용자 경험(UX)를 위한 일을 포함하는 건 물론, 코드 최적화 단계를 포함한다. 이번 포스팅에서는 커스텀 훅으로 가독성과 유지보수성을 높일 수 있는 방법을 정리하고자 한다. ✅Hook이란? 리액트를 처음 접했을 당시 읽었던 책들은 앞에서...

📌시작하며 이번 프로젝트에서 새롭게 사용한 API가 있다! 바로 File API인데, 여러 자료를 참고해서 구현은 했지만 아직 완전히 이해하고 내 것으로 만든 것은 아니라 제로부터 스스로 작성하긴 어려울 것 같다고 생각했다.🤔 그래서 이번에 File API에 대해 알아보고 프로젝트를 복기해보려고 한다. ✅File API File API는 웹 애플...

📌시작하며 이 글은 아래와 같이 이어집니다. 최적화 적용(2) - Next Image 공식문서 분석 Next/Image를 다 잘 활용해보고자 이 전 포스팅에서 Next/Image 공식문서를 읽고, 활용법에 대해 복습했었다. 이후 포스팅을 바탕으로 이미지 최적화를 위해 몇 가지 리팩토링을 진행했고, 공식문서를 읽었을 때 헷...

📌시작하며 이 글은 아래의 오류를 해결하고, 작성하는 포스팅입니다. (해결 안됨) Hydration failed because the initial UI does not match what was rendered on the server. ⛔문제상황 문제상황을 복기해보자면, Header.tsx 컴포넌트에서, localSto...

📌시작하며 프로젝트에서 React.memo, useMemo, useCallback을 사용해서 메모를 통한 최적화 방식을 적용했다. 어떤 것들에 적용했는지 정리하고자 포스팅한다.😎 ✅React.memo React.memo는 컴포넌트가 받는 props가 변경되지 않는 한, 해당 컴포넌트가 재랜더링되는 것을 방지한다. React Dev Tools를 ...

📌시작하며 프로젝트에서 dark/light 모드를 지원하면서 문득, 사용자가 이미지를 업로드 하지 않았을 때 보여지는 이미지가…너무 밝지 않나?! 라는 생각을 하게 됐다. light 모드에는 괜찮은데 dark 모드라면 사용자가 불편할 수 있겠다는 생각을 하게 되었고, 각 모드별로 대응 되는 이미지로 변경하기로 결정했다! 생각했던 첫 번째 방식은 d...

📌시작하며 이 글은 아래와 같이 이어집니다. 최적화 적용(4) - Next Image 적용 사실 지금 프로젝트에서 이미지 최적화를 어떻게 하면 좋을지 고민이 많았다.(물론 지금도…)🤔 일단 이미지가 사용되는 전체적인 흐름은 다음과 같다. graph LR; A(사용자 웹 접속, 데이터 요청) --> B(데이...

📌시작하며 지난 포스팅에서 계속 최적화 방식에 대해 알아봤는데 이제 직접 프로젝트에 적용해보려고 한다.😎 일단 가장 간단해보이는(?) 폰트 최적화 부터 시작하기로 했다. 현재 사용하고 있는 폰트 파일을 봤더니 생각 이상으로 용량이 엄청나다!😅 (약 12mb…) 나는 두 가지 언어에 관한 폰트를 사용하고 있기 때문에 용량이 무려 2배!🥲 폰트를 불러...

📌시작하며 이번에는 폰트를 최적화해보자.😎 Next.js의 경우 Next/font를 이용해 최적화 된 폰트를 사용할 수 있는데, 이번에 진행한 프로젝트에서는 로컬 폰트를 사용하면서 다른 방식의 폰트 최적화의 필요성을 느꼈다. 어떤 방법이 있는지 알아보고 프로젝트에 적용해보고자 한다. ✅확장자별 폰트 사이즈 지난번 동영상, 이미지에서도 알아봤던 것...

📌시작하며 지금까지 정적 파일들에 대한 최적화에 대해 알아봤다면, 이번에는 코드 작업에서 불필요한 리렌더링을 줄이는 방법 ‘메모이제이션’에 대해 알아보자.🥰 ✅React Developer Tools 먼저 만든 리액트 컴포넌트들이 어떻게 작동하는지 확인하기 위해서 React Developer Tools를 사용할 수 있다. Chrome, Firefo...

📌시작하며 이번에는 이미지를 최적화 해보자! ✅이미지 최적화 이미지 최적화는 동영상 최적화와 마찬가지로, 사이즈를 줄이는 것에서부터 시작한다. ➡️적절한 이미지 포맷 설정 💟webP 포맷 WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷으로, PNG, JPEG 기존 포맷 파일 보다 작아진다. CAN...

📌시작하며 프로젝트 최적화는 웹 성능을 향상시키고, 더 나은 사용자 경험을 만드는데 있어서 필수불가결한 요소이다. 지금 듣고 있는 강의도 ‘최적화’에 대해 알고 싶어서 구매했었는데, 최적화에 대해 집중적으로 학습하고, 나름대로 정리해보고자 한다. ✅동영상 최적화 동영상 최적화의 시작은 ‘용량을 줄이는 것’ 이다. 인생 첫 프로젝트 당시 무조건 화...

📌시작하며 react-portal에 대해 정리하다가 알게 된 dialog태그에 대해 정리해보고자 한다. ✅<dialog>태그 dialog 태그는 팝업 대화 상자를 간단하게 만들 수 있는 태그로, 경고창, 확인창 입력폼 등으로 활용할 수 있다. 기본적으로 모달 형태를 갖는다. dialog태그는 어떤 브라우저에서 사용할 수 있을까? MD...

📌시작하며 최근 강의를 수강하며 학습용 프로젝트를 진행 중이다. 강의 내용 중에 React Portal을 사용해 Modal을 만드는 부분이 나오는데, 해당 기능의 존재는 알고있었지만 실제 프로젝트에 적용해보는 건 처음라서, 강의 내용을 기반으로 스스로 학습한 내용을 추가해 정리해보고자 한다. ✅React Portal 이란 공식문서에서는 이 기능을...

📌시작하며 이전 포스팅에서 seo의 종류에 대해 알아봤는데, 이번 포스팅에서는 On-site SEO에서 meta 태그에 대해 알아보고자 한다. 이 글은 아래와 같이 이어집니다. SEO(1) SEO(2) SEO(3) ✅title태그 <!DOCTYPE html> <html> <...

📌시작하며 Next.js를 학습하고, 목표했던 프로젝트 제작이 전체적으로 마무리되었다. 이제 Meta Data와 Open graph등을 적용하는 단계가 남았다. 이런 과정은 모두 더 나은 SEO를 위해서인데, 이번 포스팅 시리즈(?) 에서는 SEO와 프론트엔드에서 SEO를 위해 어떤 것을 사용할 수 있는지 학습한 내용을 정리하고자 한다. 이 ...

📌시작하며 이번에는 Tailwind를 이용해 간단하게 다크모드를 구현 할 수 있었는데, 관련내용을 정리하고자 한다. 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) TailwindCSS 세팅(4) ✅Tailwind.c...

⛔문제상황 localStorage와 tailwind를 이용해 darkmode를 구현하는 도 중 오류가 발생했다. Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to c...

📌시작하며 이전 포스팅에서 OAuth에 대해서 정리해보았고, 이번엔 다른 로그인 방식에 대해서 정리해보고자 한다. 전에 면접 후기를 보았을 때 ‘세션 로그인 방식과 토큰 로그인 방식의 차이를 아시나요?’ 라고 물으셨다고 하는데, 나 또한 그 질문을 들었다면 🥹(…네?) 하고 당황할 것 같기 때문이다. 그리고 이왕 로그인 방식에 대해 알아보기 시작했으...

📌시작하며 지난 프로젝트에서는 firebase를 이용해 이메일 로그인을 구현했었다. 그 때 다음 프로젝트에서는 SNS 로그인을 구현해봐야지! 다짐했었고, 구현 중에 있다.😎 next-auth를 쓰면 정말 간단하게 다양한 제공자의 로그인 기능을 구현할 수 있는데, 구현 방법만 쭉 정리하기 보다는 OAuth 자체를 정리하면 프로젝트의 흐름을 더 잘 이...

⛔문제상황 yarn을 이용해 next-auth를 설치하려고 하자 다음과 같은 오류가 발생했다. error An unexpected error occurred: “EPERM: operation not permitted, unlink ‘C:\Users\\node_modules\@next\swc-win32-x64-msvc\next-swc.win32...

📌시작하며 현재 만들고 있는 프로젝트에서는 첫 화면에서 DB에 있는 data를 불러와 렌더링해서 보여주려고 한다.😎 useQuery를 써서 불러올까 했지만, Next13의 data Fetching 기능을 사용해보고 싶기도 했고, 프로젝트 내의 다른에서 무한 스크롤을 적용해 데이터를 전부 가져올 예정이기 때문에, 루트 페이지에서는 겹치지 않는 기능을 ...

📌시작하며 무한 스크롤 사용자가 페이지 하단에 도달 할 때 새로운 콘텐츠를 로딩하여 사용자에게 콘텐츠를 끊임없이 제공할 수 있도록 하는 방식 무한 스크롤은 아마 한 번씩은 다들 경험해 본 방식일 것이다.🤔 한 번에 많은 양을 로딩하기에 시간이 오래 걸릴 경우, 분할해서 로딩해 줄 수도 있고, 사용자의 호기심을 자극해 사용자가 더 오래 애플리...

📌시작하며 사용자가 입력한 내용을 수정할 수 있는 페이지를 만들다가, 문제점을 발견했다. 먼저 계획한 로직은 다음과 같다. graph LR; B(api요청 후데이터 받아오기)--> C(데이터 줄바꿈 기준으로 split 후input에 defaultValue 지정); C--> D(사용자가 그 중 원하는 값만 수정 후 제출) defaul...

⛔문제상황 input을 사용한 컴포넌트를 만들다 아래와 같은 오류가 발생했다. app-index.js:35 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined ...

⛔문제상황 아래 글에서 mermaid 문법을 사용해 그래프를 그렸는데, 나중에 확인해보니 그래프가 제대로 표시되지 않는 문제가 발생했다. (현재는 수정 완료!) supabase와 prisma(4) -storage 이용하기 ⭕제대로 표시 된 예 graph LR; A[사용자] --> B(파일 업로드); B -...

⛔문제상황 Next13 api 요청 함수를 만들다, 아래와 같이 에러가 발생했다. Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:...

📌시작하며 Flux 패턴을 사용하는 React는 전체적으로 상태를 공유하기 위해서 전역 상태 관리 라이브러리(혹은 그것을 도와주는 무언가…)를 사용해야 한다. 이를 위해 처음 React 프로젝트에서는 Redux를 사용했고, 그 다음 프로젝트는 비교적 간단한 상태 관리가 필요해 Context API를 사용했다. 사실 Context API를 사용한 프...

📌시작하며 프로젝트에서 이미지를 업로드하고, 해당 이미지를 저장할 필요가 있었다! supabase의 storage를 이용하면 되는데, 어떻게 코드를 작성했는지 돌아보며 정리해보고자 한다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma...

⛔문제상황 supabase storage에 업로드 된 내용을 받아와 표시하려고 시도하자 Error: Invalid src prop (https://[수퍼베이스id].supabase.co/storage/v1/object/public/thumbnail/이미지.jpg) on next/image, hostname “[수퍼베이스id].supabase....

📌시작하며 이전 포스트에서 타입스크립트의 기본적인 내용을 살펴봤다면, 이번엔 타입스크립트를 편하게 사용하게 해주는 제네릭과 제네릭 유틸리티 타입에 대해 알아보고자 한다.😎 이 글은 아래와 같이 이어집니다. Typescript(1) Typescript(2) ✅제네릭 ➡️기존 사용 방식 제네릭은 코드를 더 유연하...

📌시작하며 리액트 쿼리는 아마 한 번쯤은 다들 들어봤을 거라 생각한다. 따로 강의를 들으면서 리액트 쿼리를 사용해봤는데, 직접 프로젝트에 적용해보는 것은 처음이라, 이번 글에서는 “그래서 리액트 쿼리가 뭔데?!” 라는 질문에 대한 답을 찾아보고, 사용법을 익혀보고자 한다.😄 (이 글은 v5 docs를 참고해 작성했다.) ✅React-Query(Ta...

📌시작하며 이번 프로젝트에는 form을 자주 사용하는데, form을 다룰 때 사용하면 좋은 라이브러리 중 React-Hook-Form을 도입해보고자 한다. ✅ React-Hook-Form 공식 사이트에서는 이렇게 소개한다! React-Hook-Form은 성능이 우수하고 유연하며 쉬운 유효성 검사를 통한 확장 가능한 폼입니다. 그럼 일단...

📌시작하며 기본 CRUD에서 더 다양한 활용법을 함께 정리하고자 한다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma CRUD supabase와 prisma(3) - prisma 심화 supabase와 prisma(4)...

📌시작하며 이어서 prisma를 이용해 api 작성시, 자주 쓰이는 문법을 살펴보자! 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma CRUD supabase와 prisma(3) - prisma 심화 supabase와 p...

📌시작하며 이번 프로젝트는 Next.js를 이용해 RESTful API를 작성해 DB와 상호작용하는 부분이 포함된다. 백엔드 담당자가 없이 진행하는 프로젝트인만큼, 프론트엔드에서도 간단하게 사용할 수 있는 DB 중, supabase를 이용하기로 결정했다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - ...

📌시작하며 프론트엔드 개발자는 "타 직군과 커뮤니케이션🤝 할 상황이 굉장히 많다"라는 건 아마 모두가 인정하는 사실일 것이다. 하나의 프로덕트를 위해 디자이너와 백엔드 개발자는 물론, 서비스 기획, 프로젝트 매니저 등 정말 많은 사람과 함께 달려가는거다! (개인적으로 이 과정이 개발자가 가진 매력 중 하나가 아닐 까 생각한다. 마치 소년만화의 주인...

📌시작하며 정보처리기사 필기시험을 보고 왔고, 예비 합격 후 쓰는 후기 글! 🤔공부를 시작하다 프론트엔드 면접 예상 질문들을 읽어보면 CS 지식이나 알고리즘, 자료구조 등을 만날 수 있다. 알고리즘이나 자료구조는 코딩테스트 공부를 하면서 함께 학습하고 있는데 CS는 추가로 학습이 필요하다는 걸 느꼈다! (현업에 계신 분들도 꾸준히 공부하신다는 글...

📌시작하며 프로젝트를 시작하고 Tailwind를 사용하다 보니 자꾸 똑같은 속성의 클래스명을 헷갈려서, 자주 쓰는 내용을 정리해보면 좋을 것 같아 포스팅을 작성한다. 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) Tailwi...

📌시작하며 이번에 진행하는 프로젝트에서 전부터 해보고 싶었던 ‘언어 변경’기능을 구현하고 있다. 한국어와 일본어 두 언어를 지원하는 애플리케이션인데, 각 언어에 적절한 font를 사용하고 싶어 방법을 검색해보게 되었다. 🤔 Next/font를 시도하다 이번 프로젝트에서는 Next13을 사용하고 있고, Next.js가 13으로 업데이트되면서 새로 ...

📌시작하며 TailwindCSS 세팅(1)편에서 plugin이나 그 외 세팅을 마무리 했으니 이번엔 tailwind 컬러를 커스텀 해보고자 한다. 사실 거창해보이지만 별 건 없다🤭 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) ...

📌시작하며 Next.js에서 TailwindCSS 이용해 스타일링을 하기로 결정하고, 필요한 플러그인을 설치했다. 하지만 예상대로 작동하지 않거나 오류가 발생하는 경우가 있었다. TailwindCSS는 종종 사용할 것 같으니 이번 기회에 어떤 오류가 있는지 정리하고, 나름의 세팅 과정을 정리해보고자 한다. 이 글은 아래와 같이 이어집니다. ...

📌시작하며 Next.js + Typescript 인강을 듣던 중 선생님께서 (제네릭을 사용하시면서) 이 부분은 조금 어려울 수 있어요. 라고 말씀하셨는데.. 그 말씀 그대로였다. 선생님께서 작성하시는 문법이 타입스크립트 제네릭인 건 알고 있지만 그걸 내가 자유자재로 쓸 수 있는 가는 아무래도 다른 문제다 보니… 😥 그래서, 이번엔 확실하게...

📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) routes 부분도 12 버전과 달라진 부분이 꽤 있다! 헷갈리지 않도록 이 번엔 Next13의 API Routes🌹에 대해 알아보자. ✅API...

📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) 이 번엔 Next13의 꽃🌺 app 폴더를 살펴보고, api 작성법에 대해 정리해보고자 한다. ✅app router app/ │ ├───pag...

📌시작하며 개발 공부를 시작하고 지금까지 notion으로 많은 양을 정리해왔다. 하지만 notion으로 정리하면 아무래도 블로그보단 폐쇄적인 공간인 만큼 작성한 글을 누군가에게 보여주기 애매한 부분이 있었다. 아마 많은 개발자가 그렇겠지만.. 그 동안 다른 개발자분들의 블로그를 통해 공부한 부분이 많기에, 블로그를 시작해보면 어떨까? 생각하게 되었...

📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) Next.js 강의를 수강을 시작한지 어느정도 시간이 지났다. 내가 React를 공부하기 시작했을 때는 많은 프로젝트나 강의가 클래스형 컴포넌트에...

📌시작하며 웹 애플리케이션에서 성능 측정은 어떻게 할까? 이번 글에서는 내 나름대로 성능지표와 Lighthouse에 대해 정리하고, 활용해볼 수 있는 자료를 만들어보고자 한다. ✨Lighthouse 이 내용은 Chrome for Developers 를 참고해 작성한다. Lighthouse는 웹페이지 품질을 개선하기 위한 오픈소스 자동화 ...

📌시작하며 컴포넌트를 만들다 보면, onClick이나 onMouseOver등의 이벤트를 props로 받아와야 하는 일이 간혹 생기곤 한다. 물론 props로 내려줘서 작업해도 문제는 없지만, 이벤트가 하나 더 발생하면, 컴포넌트에 정의해둔 props의 interface안에 작성해줘야 하는 번거로움이 생긴다. 그래서 미리 정의할 때 타입을 확장해서 ...

📌시작하며 연말에 가볍게 진행한 프로젝트에서 Jest를 간단히 적용해보았다. 역시 처음 도입하는 것이다 보니 시간도 많이 소요되고 삐그덕 거리기는 했지만 그래서 그런지, PASS가 뜰 때마다 너무 기뻐서 다들 봐달라고 하고 싶었다… 🤣 어쨌든, 이번 포스팅에서는 프로젝트를 진행하면서 새롭게 배운 Jest의 내용을 정리해보면서 복습해보려고 한다. ...