프로젝트 최적화(1) - 동영상 최적화
📌시작하며 프로젝트 최적화는 웹 성능을 향상시키고, 더 나은 사용자 경험을 만드는데 있어서 필수불가결한 요소이다. 지금 듣고 있는 강의도 ‘최적화’에 대해 알고 싶어서 구매했었는데, 최적화에 대해 집중적으로 학습하고, 나름대로 정리해보고자 한다. ✅동영상 최적화 동영상 최적화의 시작은 ‘용량을 줄이는 것’ 이다. 인생 첫 프로젝트 당시 무조건 화...
saemii blog
dialog태그 활용하기
📌시작하며 react-portal에 대해 정리하다가 알게 된 dialog태그에 대해 정리해보고자 한다. ✅<dialog>태그 dialog 태그는 팝업 대화 상자를 간단하게 만들 수 있는 태그로, 경고창, 확인창 입력폼 등으로 활용할 수 있다. 기본적으로 모달 형태를 갖는다. dialog태그는 어떤 브라우저에서 사용할 수 있을까? MD...
React Portal 사용하기
📌시작하며 최근 강의를 수강하며 학습용 프로젝트를 진행 중이다. 강의 내용 중에 React Portal을 사용해 Modal을 만드는 부분이 나오는데, 해당 기능의 존재는 알고있었지만 실제 프로젝트에 적용해보는 건 처음라서, 강의 내용을 기반으로 스스로 학습한 내용을 추가해 정리해보고자 한다. ✅React Portal 이란 공식문서에서는 이 기능을...
SEO(2) - meta 태그와 title 태그
📌시작하며 이전 포스팅에서 seo의 종류에 대해 알아봤는데, 이번 포스팅에서는 On-site SEO에서 meta 태그에 대해 알아보고자 한다. 이 글은 아래와 같이 이어집니다. SEO(1) SEO(2) SEO(3) ✅title태그 <!DOCTYPE html> <html> <...
SEO(1) - SEO는 무엇이고 왜 중요한가
📌시작하며 Next.js를 학습하고, 목표했던 프로젝트 제작이 전체적으로 마무리되었다. 이제 Meta Data와 Open graph등을 적용하는 단계가 남았다. 이런 과정은 모두 더 나은 SEO를 위해서인데, 이번 포스팅 시리즈(?) 에서는 SEO와 프론트엔드에서 SEO를 위해 어떤 것을 사용할 수 있는지 학습한 내용을 정리하고자 한다. 이 ...
TailwindCSS 세팅 (4) - Next.js에 darkmode 적용하기
📌시작하며 이번에는 Tailwind를 이용해 간단하게 다크모드를 구현 할 수 있었는데, 관련내용을 정리하고자 한다. 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) TailwindCSS 세팅(4) ✅Tailwind.c...
(해결 안됨) Hydration failed because the initial UI does not match what was rendered on the server.
⛔문제상황 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...
next-auth 이용하기(2)-로그인 방식을 이해해보자
📌시작하며 이전 포스팅에서 OAuth에 대해서 정리해보았고, 이번엔 다른 로그인 방식에 대해서 정리해보고자 한다. 전에 면접 후기를 보았을 때 ‘세션 로그인 방식과 토큰 로그인 방식의 차이를 아시나요?’ 라고 물으셨다고 하는데, 나 또한 그 질문을 들었다면 🥹(…네?) 하고 당황할 것 같기 때문이다. 그리고 이왕 로그인 방식에 대해 알아보기 시작했으...
next-auth 이용하기(1)-OAuth에 대해 알아보자
📌시작하며 지난 프로젝트에서는 firebase를 이용해 이메일 로그인을 구현했었다. 그 때 다음 프로젝트에서는 SNS 로그인을 구현해봐야지! 다짐했었고, 구현 중에 있다.😎 next-auth를 쓰면 정말 간단하게 다양한 제공자의 로그인 기능을 구현할 수 있는데, 구현 방법만 쭉 정리하기 보다는 OAuth 자체를 정리하면 프로젝트의 흐름을 더 잘 이...
An unexpected error occurred: EPERM operation not permitted in
⛔문제상황 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...
Next.js 13의 특징과 변화(4) - Data Fetching
📌시작하며 현재 만들고 있는 프로젝트에서는 첫 화면에서 DB에 있는 data를 불러와 렌더링해서 보여주려고 한다.😎 useQuery를 써서 불러올까 했지만, Next13의 data Fetching 기능을 사용해보고 싶기도 했고, 프로젝트 내의 다른에서 무한 스크롤을 적용해 데이터를 전부 가져올 예정이기 때문에, 루트 페이지에서는 겹치지 않는 기능을 ...
React-Query(TanStack-Query)를 사용해보자! (2) - 무한스크롤
📌시작하며 무한 스크롤 사용자가 페이지 하단에 도달 할 때 새로운 콘텐츠를 로딩하여 사용자에게 콘텐츠를 끊임없이 제공할 수 있도록 하는 방식 무한 스크롤은 아마 한 번씩은 다들 경험해 본 방식일 것이다.🤔 한 번에 많은 양을 로딩하기에 시간이 오래 걸릴 경우, 분할해서 로딩해 줄 수도 있고, 사용자의 호기심을 자극해 사용자가 더 오래 애플리...
React-Hook-Form(2) - reset을 이용한 defaultValue 설정
📌시작하며 사용자가 입력한 내용을 수정할 수 있는 페이지를 만들다가, 문제점을 발견했다. 먼저 계획한 로직은 다음과 같다. graph LR; B(api요청 후데이터 받아오기)--> C(데이터 줄바꿈 기준으로 split 후input에 defaultValue 지정); C--> D(사용자가 그 중 원하는 값만 수정 후 제출) defaul...
Warning: A component is changing an uncontrolled input to be controlled.
⛔문제상황 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 ...
Github Pages에서 Mermaid 사용하기
⛔문제상황 아래 글에서 mermaid 문법을 사용해 그래프를 그렸는데, 나중에 확인해보니 그래프가 제대로 표시되지 않는 문제가 발생했다. (현재는 수정 완료!) supabase와 prisma(4) -storage 이용하기 ⭕제대로 표시 된 예 graph LR; A[사용자] --> B(파일 업로드); B -...
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
⛔문제상황 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:...
recoil 이용하기
📌시작하며 Flux 패턴을 사용하는 React는 전체적으로 상태를 공유하기 위해서 전역 상태 관리 라이브러리(혹은 그것을 도와주는 무언가…)를 사용해야 한다. 이를 위해 처음 React 프로젝트에서는 Redux를 사용했고, 그 다음 프로젝트는 비교적 간단한 상태 관리가 필요해 Context API를 사용했다. 사실 Context API를 사용한 프...
supabase와 prisma(4) - storage 이용하기
📌시작하며 프로젝트에서 이미지를 업로드하고, 해당 이미지를 저장할 필요가 있었다! supabase의 storage를 이용하면 되는데, 어떻게 코드를 작성했는지 돌아보며 정리해보고자 한다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma...
Error: Invalid src prop on next/image
⛔문제상황 supabase storage에 업로드 된 내용을 받아와 표시하려고 시도하자 Error: Invalid src prop (https://[수퍼베이스id].supabase.co/storage/v1/object/public/thumbnail/이미지.jpg) on next/image, hostname “[수퍼베이스id].supabase....
Typescript(2)
📌시작하며 이전 포스트에서 타입스크립트의 기본적인 내용을 살펴봤다면, 이번엔 타입스크립트를 편하게 사용하게 해주는 제네릭과 제네릭 유틸리티 타입에 대해 알아보고자 한다.😎 이 글은 아래와 같이 이어집니다. Typescript(1) Typescript(2) ✅제네릭 ➡️기존 사용 방식 제네릭은 코드를 더 유연하...
React-Query(TanStack-Query)를 사용해보자! (1)
📌시작하며 리액트 쿼리는 아마 한 번쯤은 다들 들어봤을 거라 생각한다. 따로 강의를 들으면서 리액트 쿼리를 사용해봤는데, 직접 프로젝트에 적용해보는 것은 처음이라, 이번 글에서는 “그래서 리액트 쿼리가 뭔데?!” 라는 질문에 대한 답을 찾아보고, 사용법을 익혀보고자 한다.😄 (이 글은 v5 docs를 참고해 작성했다.) ✅React-Query(Ta...
React-Hook-Form(1) - 기본 사용방법 알아보기
📌시작하며 이번 프로젝트에는 form을 자주 사용하는데, form을 다룰 때 사용하면 좋은 라이브러리 중 React-Hook-Form을 도입해보고자 한다. ✅ React-Hook-Form 공식 사이트에서는 이렇게 소개한다! React-Hook-Form은 성능이 우수하고 유연하며 쉬운 유효성 검사를 통한 확장 가능한 폼입니다. 그럼 일단...
supabase와 prisma(3) - prisma 심화
📌시작하며 기본 CRUD에서 더 다양한 활용법을 함께 정리하고자 한다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma CRUD supabase와 prisma(3) - prisma 심화 supabase와 prisma(4)...
supabase와 prisma(2) - prisma CRUD
📌시작하며 이어서 prisma를 이용해 api 작성시, 자주 쓰이는 문법을 살펴보자! 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - 기본 개념 supabase와 prisma(2) - prisma CRUD supabase와 prisma(3) - prisma 심화 supabase와 p...
supabase와 prisma(1) - 기본 개념
📌시작하며 이번 프로젝트는 Next.js를 이용해 RESTful API를 작성해 DB와 상호작용하는 부분이 포함된다. 백엔드 담당자가 없이 진행하는 프로젝트인만큼, 프론트엔드에서도 간단하게 사용할 수 있는 DB 중, supabase를 이용하기로 결정했다. 이 글은 아래와 같이 이어집니다. supabase와 prisma(1) - ...
Storybook을 사용해보자(1) - 예제 뜯어보기
📌시작하며 프론트엔드 개발자는 "타 직군과 커뮤니케이션🤝 할 상황이 굉장히 많다"라는 건 아마 모두가 인정하는 사실일 것이다. 하나의 프로덕트를 위해 디자이너와 백엔드 개발자는 물론, 서비스 기획, 프로젝트 매니저 등 정말 많은 사람과 함께 달려가는거다! (개인적으로 이 과정이 개발자가 가진 매력 중 하나가 아닐 까 생각한다. 마치 소년만화의 주인...
정보처리기사 - 필기 후기
📌시작하며 정보처리기사 필기시험을 보고 왔고, 예비 합격 후 쓰는 후기 글! 🤔공부를 시작하다 프론트엔드 면접 예상 질문들을 읽어보면 CS 지식이나 알고리즘, 자료구조 등을 만날 수 있다. 알고리즘이나 자료구조는 코딩테스트 공부를 하면서 함께 학습하고 있는데 CS는 추가로 학습이 필요하다는 걸 느꼈다! (현업에 계신 분들도 꾸준히 공부하신다는 글...
TailwindCSS 세팅 (3) - 자주 쓰는 CSS 정리
📌시작하며 프로젝트를 시작하고 Tailwind를 사용하다 보니 자꾸 똑같은 속성의 클래스명을 헷갈려서, 자주 쓰는 내용을 정리해보면 좋을 것 같아 포스팅을 작성한다. 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) Tailwi...
Next.js 언어별 폰트 적용하기 - @font-face
📌시작하며 이번에 진행하는 프로젝트에서 전부터 해보고 싶었던 ‘언어 변경’기능을 구현하고 있다. 한국어와 일본어 두 언어를 지원하는 애플리케이션인데, 각 언어에 적절한 font를 사용하고 싶어 방법을 검색해보게 되었다. 🤔 Next/font를 시도하다 이번 프로젝트에서는 Next13을 사용하고 있고, Next.js가 13으로 업데이트되면서 새로 ...
TailwindCSS 세팅(2) - Tailwind Color Custom
📌시작하며 TailwindCSS 세팅(1)편에서 plugin이나 그 외 세팅을 마무리 했으니 이번엔 tailwind 컬러를 커스텀 해보고자 한다. 사실 거창해보이지만 별 건 없다🤭 이 글은 아래와 같이 이어집니다. TailwindCSS 세팅(1) TailwindCSS 세팅(2) TailwindCSS 세팅(3) ...
TailwindCSS 세팅(1) - ESlint Plugin
📌시작하며 Next.js에서 TailwindCSS 이용해 스타일링을 하기로 결정하고, 필요한 플러그인을 설치했다. 하지만 예상대로 작동하지 않거나 오류가 발생하는 경우가 있었다. TailwindCSS는 종종 사용할 것 같으니 이번 기회에 어떤 오류가 있는지 정리하고, 나름의 세팅 과정을 정리해보고자 한다. 이 글은 아래와 같이 이어집니다. ...
Typescript(1)
📌시작하며 Next.js + Typescript 인강을 듣던 중 선생님께서 (제네릭을 사용하시면서) 이 부분은 조금 어려울 수 있어요. 라고 말씀하셨는데.. 그 말씀 그대로였다. 선생님께서 작성하시는 문법이 타입스크립트 제네릭인 건 알고 있지만 그걸 내가 자유자재로 쓸 수 있는 가는 아무래도 다른 문제다 보니… 😥 그래서, 이번엔 확실하게...
Next.js 13의 특징과 변화(3) - API Routes
📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) routes 부분도 12 버전과 달라진 부분이 꽤 있다! 헷갈리지 않도록 이 번엔 Next13의 API Routes🌹에 대해 알아보자. ✅API...
Next.js 13의 특징과 변화(2) - 폴더구조
📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) 이 번엔 Next13의 꽃🌺 app 폴더를 살펴보고, api 작성법에 대해 정리해보고자 한다. ✅app router app/ │ ├───pag...
Chirpy 설치와 커스텀
📌시작하며 개발 공부를 시작하고 지금까지 notion으로 많은 양을 정리해왔다. 하지만 notion으로 정리하면 아무래도 블로그보단 폐쇄적인 공간인 만큼 작성한 글을 누군가에게 보여주기 애매한 부분이 있었다. 아마 많은 개발자가 그렇겠지만.. 그 동안 다른 개발자분들의 블로그를 통해 공부한 부분이 많기에, 블로그를 시작해보면 어떨까? 생각하게 되었...
Next.js 13의 특징과 변화(1)
📌시작하며 이 글은 아래와 같이 이어집니다. Next.js 13의 특징과 변화(1) Next.js 13의 특징과 변화(2) Next.js 13의 특징과 변화(3) Next.js 강의를 수강을 시작한지 어느정도 시간이 지났다. 내가 React를 공부하기 시작했을 때는 많은 프로젝트나 강의가 클래스형 컴포넌트에...
Lighthouse에 대해 알아보자
📌시작하며 웹 애플리케이션에서 성능 측정은 어떻게 할까? 이번 글에서는 내 나름대로 성능지표와 Lighthouse에 대해 정리하고, 활용해볼 수 있는 자료를 만들어보고자 한다. ✨Lighthouse 이 내용은 Chrome for Developers 를 참고해 작성한다. Lighthouse는 웹페이지 품질을 개선하기 위한 오픈소스 자동화 ...
Typescript(4) - 각 Element의 Props 속성을 정해보자
📌시작하며 컴포넌트를 만들다 보면, onClick이나 onMouseOver등의 이벤트를 props로 받아와야 하는 일이 간혹 생기곤 한다. 물론 props로 내려줘서 작업해도 문제는 없지만, 이벤트가 하나 더 발생하면, 컴포넌트에 정의해둔 props의 interface안에 작성해줘야 하는 번거로움이 생긴다. 그래서 미리 정의할 때 타입을 확장해서 ...
Jest - matcher
📌시작하며 연말에 가볍게 진행한 프로젝트에서 Jest를 간단히 적용해보았다. 역시 처음 도입하는 것이다 보니 시간도 많이 소요되고 삐그덕 거리기는 했지만 그래서 그런지, PASS가 뜰 때마다 너무 기뻐서 다들 봐달라고 하고 싶었다… 🤣 어쨌든, 이번 포스팅에서는 프로젝트를 진행하면서 새롭게 배운 Jest의 내용을 정리해보면서 복습해보려고 한다. ...