0142 · FE4월 16일
[Next.js] React만 쓰던 내가 Next.js 튜토리얼에서 놀란 이유
“React만으로도 충분한데, 굳이 Next.js를 배워야 할까?” 23년도 가을부터 React를 접하면서 웹개발을 해왔던 필자에게는 Next.js, Vue.js 등을 접해야 할 필요성을 못 느끼고 있었다. 그러다 최근 Next.js + TS 개발이…
FE · 웹개발 · 프론트엔드
#프론트엔드
9월 0장 · 통산 515장
- 0131 · FE4월 6일[Next.js] 태그, 왜 width와 height를 안 쓰면 에러가 날까?서론 Image 컴포넌트의 에러 Next.js를 사용하다 보면 위의 사진처럼, <Image> 컴포넌트를 사용할 때 width와 height 속성을 반드시 지정하라는 에러를 자주 보게 된다. ?잠깐!!? Image 태그를 써야 하는 이유에 대해서는 아…FE · 웹개발 · 프론트엔드
- 0130 · FE4월 6일[Next.js] 단순히 태그만 바꾸라고? 대신 를 써야 하는 진짜 이유서론 npm run build 후 발생한 에러 내용 Next.js 기반 프로젝트에서 'npm run dev' 명령어를 사용하여 로컬에서 개발을 진행했을 때에는 문제가 없었지만, 'npm run build' 명령어를 사용하여 빌드하다가 위의 사진에 있…FE · 웹개발 · 프론트엔드
- 0128 · FE4월 5일[React] 한 줄로 코드를 깔끔하게? 구조 분해 할당 완전 정복서론 React를 처음 배웠을 때, useState를 쓸 때마다 나오는 []와 ()의 조합이 도대체 무슨 의미인지 헷갈렸던 기억이 있다. 그냥 외워서 쓰긴 했지만, 코드의 의도를 정확히 이해하긴 어려웠다. 그러다 구조 분해 할당이라는 개념을 알게 되…FE · 웹개발 · 프론트엔드
- 0127 · FE4월 5일[Next.js] React.useState와 useState, 단순한 스타일 차이일까?서론 React에서는 상태를 관리할 때 useState라는 훅을 자주 사용한다. 그런데 코드를 보다 보면 React.useState(...)처럼 쓰는 경우도 있고, 그냥 useState(...)만 사용하는 경우도 있다. 이 둘은 어떤 차이가 있을까?…FE · 웹개발 · 프론트엔드
- 0126 · FE4월 4일[Next.js] Next.js 페이지 이동, 어떤 방법이 최선인가?서론 최근 app 라우팅 기반에서 프로젝트를 진행하면서, 핸들러에 의해 페이지 이동을 구현해야 했었다. 페이지 간 이동은 사용자 경험에서 중요한 요소로, 어떤 방법을 선택하느냐에 따라 애플리케이션의 성능과 사용성이 크게 달라질 수 있기에 더욱 어떤 …FE · 웹개발 · 프론트엔드
- 0125 · FE4월 4일[Next.js] Next.js + Tailwind에서 커스텀 폰트를 가장 쉽게 적용하는 방법!? 서론 Next.js에서 Tailwind CSS를 사용할 때, 커스텀 폰트를 적용하는 방법은 여러 가지가 있다. 웹사이트의 타이포그래피는 사용자 경험을 좌우하는 중요한 요소 중 하나이며, 올바른 폰트 적용 방식은 성능 최적화와 가독성 개선에 기여한…FE · 웹개발 · 프론트엔드
- 0113 · FE3월 26일[Next.js] "Tailwind CSS Prettier 플러그인의 정렬 우선순위 이해하기!"Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 다양한 스타일을 빠르게 적용할 수 있게 해준다. ?잠깐!!? Tailwind CSS에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/228?c…FE · 웹개발 · 프론트엔드
- 0112 · FE3월 26일[Next.js] "Tailwind CSS, 더 깔끔하고 예쁘게 정리하는 방법!"서론 Tailwind CSS를 사용하다 보면 클래스 속성의 순서가 뒤죽박죽이 되거나 통일성이 부족한 경우가 많다. 이런 경우 코드의 가독성이 떨어지고, 특히 협업 시 코드를 이해하는 데 불필요한 시간이 소요될 수 있다. 이를 해결하기 위해 Tailw…FE · 웹개발 · 프론트엔드
- 0110 · FE3월 26일[CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"Tailwind CSS는 다양한 스타일을 미리 정의된 유틸리티 클래스로 제공한다. (* 유틸리티 클래스란 특정 스타일을 적용할 수 있도록 미리 정의된 단일 클래스) 대표적인 유틸리티 클래스를 몇 가지 예시로 정리해보자! 색상 (Colors) 1) b…FE · CSS · 웹개발
- 0109 · FE3월 26일[CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다. 그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다. 유틸리티 퍼스트(Utility-First) 방…FE · CSS · 웹개발
- 0108 · FE3월 26일[Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"Tailwind CSS란? Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, HTML 요소에 직접 클래스를 적용해 스타일을 지정할 수 있도록 설계되었다. ?잠깐!!? 개별적인 유틸리티 퍼스트 방식의 CS…FE · CSS · 웹개발