본문 바로가기
Next.js의 레이아웃과 페이지 Next.js에서의 라우팅 시스템과 리액트에서의 라우팅 시스템은 다르다. 리액트에서는 따로 라우팅 라이브러리를 깔아야 하지만, Next.js에서는 "파일" 기반의 라우팅 시스템을 가지고 있다.각 폴더는 URL 경로와 매치되는 라우트 경로를 나타낸다.당신이 지은 폴더의 이름이 라우팅 주소의 이름이 된다.(예를 들어) app 폴더 안에 dashboard라는 폴더를 만든다. 이후 invoices라는 폴더를 만들면 "내 도메인 / dashboard / invoices" 가 라우팅 주소가 된다. 그리고 각 라우트 마다 page.tsx / layout.tsx 파일을 통해 별도의 UI를 만들 수 있게 된다.app 폴더의 최상 파일. 즉, src > app > page.tsx는 홈화면이 되어줄 것이다.dashboard.. 2025. 3. 13.
Next.js의 폰트/이미지 최적화 글을 시작하기 전에, 공식 문서는 다음 링크를 참고하길 바란다.https://nextjs.org/learn/dashboard-app/optimizing-fonts-images App Router: Optimizing Fonts and Images | Next.jsOptimize fonts and images with the Next.js built-in components.nextjs.org(일단 이미지에 대한 부분을 먼저 작성하겠다.)이미지를 넣는 방법.Next.js에서는 이미지를 넣는 방법이 크게 2가지가 있다.1. 그냥 태그를 쓴다.2. 태그를 사용해서 이미지를 최적화한다.1. 그냥 태그를 쓴다.public에 이미지 넣어두고, 필요한 페이지에 태그를 써주면 된다./ 부터 시작해서 이미지 경로.. 2025. 3. 12.
Next.js에서의 css 스타일링 Next.js에서는 스타일링을 할 수 있는 방법이 여러 가지 존재한다. 이 글에서는 그 부분을 이야기할 것이다.이번 챕터에서...다룰 주제는 다음과 같다.전역 CSS 파일이 무엇인가스타일링 방법: Tailwind 와 css modulesclsx 유틸리티 패키지로 class 명을 조건부로 제공전역 css프로젝트를 만들고, src > app 부분을 보면 global.css 파일이 있다. 이 파일이 "전역"으로 css를 먹일 수 있는 파일이다.이 파일은 앱 내에 어디든 불러올 수 있다.(import) 근데 보통 최상위 컴포넌트에 추가하는 것이 좋은 관행이다.예시 코드 > (경로) : src > app > layout.js import { Geist, Geist_Mono } from 'next/font/goog.. 2025. 3. 11.
Next.js 프로젝트 빌딩하는 법 Next.js는 리액트의 풀스택 프레임워크이다.리액트의 단점을 보안하고 서버 사이드 렌더링으로 돌아간다. (클라이언트 사이드 렌더링도 가능함)SEO에 불리한 리액트랑 다르게 Next.js는 SEO가 잘 적용이 된다. 또한 현재 프론트엔드에서 가장 트렌디하다. (관련 영상 및 글)https://toss.tech/article/firesidechat_frontend_6 프론트엔드 개발에서 Next.js, 꼭 써야 할까? | EP.6 모닥불프론트엔드 개발에서 프레임워크는 정말 필수 일까요? 토스 정진우, 조유성 님이 전하는 프레임워크와 라이브러리의 정의부터 실제 업무에서의 활용법까지, 실용적인 예시를 통해 함께 알아보toss.techhttps://www.youtube.com/watch?v=1w70c7x62BI.. 2025. 3. 10.
Vite로 리액트 프로젝트 시작하기 create react app 지원이 중지되었기에, 다른 방식으로 프로젝트를 만드는 것을 추천한다. 방법은 많다. 그중에서 Vite를 이용해서 리액트 프로젝트를 빌딩 하는 방법을 작성하고자 한다.(create react app 지원 중단 관련 글)왜 쓰는가?이유는 되게 간단하다. 프로젝트가 커져도 빠른 속도를 유지해주기 때문이다.작은 프로젝트에서는 잘 못 느낄 수 있지만, 프로젝트가 커지면 npm start시 "미리 보기" 서버를 여는 속도가 매우 늦어진다. (심하면 '분' 단위까지 늘어날 수 있음.) 그리고 코드를 수정하고 저장하고 반영하는 속도도 느려진다.이런 부분을 방지하기 위함이다.Vite 설치하기아래와 같은 명령어를 입력하여 설치할 수 있다.Vite를 사용하기 위해서는 14.18+, 16+의 N.. 2025. 3. 8.
create react app 지원 중단 create react app이 지원 중단에 따라서 새로운 프로젝트의 빌딩 방법을 다르게 해야 한다. 기존까지는 npx create-react-app my-appcd my-appnpm start이 명령어로 만들게 되었다. 뒤에 my-app이 자신의 프로젝트 이름이 된다. (대문자 금지)(관련 리액트 글)https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org이제 이런 방법을 리액트에서는 권장하지 않는다. 다른 방법으로 빌딩해야 한다.그럼 어떻게 해야 하는가?하는 방법은 여러 개가 있다.. 2025. 3. 7.
프론트엔드 개발자가 고려해야 할 접근성 사항 프론트 작업을 할 때, 여러 가지를 고려해야 하지만, 그중 "접근성" 부분을 신경 쓰는 것은 쉽지 않다. 그러나 몇 가지 요소만 제대로 파악하고 있으면 좀 더 쉽게 접근성을 보완할 수 있을 것이다.> 글https://velog.io/@eunbinn/accessibility-essentials-every-front-end-developer-should-know [번역] 모든 프런트엔드 개발자가 알아야 할 접근성 필수 사항기능 구현에 집중하다 보면, 접근성을 간과하는 경우가 종종 발생합니다. 이러한 상황이 반복되면, 어느새 접근성은 부담으로 다가오곤 합니다. 그러나 몇 가지 기본 원칙을 지키기만 해도 접근velog.io(출처: @eunbinn) 2025. 2. 28.
리액트 로딩창 구현 리액트에서 로딩창을 구현하는 방법은 여러 가지가 존재하지만, 그중 React spinners 라이브러리를 이용하는 방법을 작성하고자 한다.(참고로 npm으로 깔 때 오타내서 react-spinner라고 쓰면 리액트는 이해를 못 한다. 이 부분 조심하자.)React spinner 설치하기npm install react-spinners사용법 - Spinner 모양 선택하기 https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io 이 사이트에 들어가서 여러 가지 스피너 중 마음에 드는 스피너를 선택하면 된다.사이트 내에서 커스텀할 수도 있고 리액트 코드에서 확인하면서 커스텀할 수 있다.색깔 같은 것은 사이트 내에서 바로 확인 가능하다.(예시코드.. 2025. 2. 25.
리액트 emotion 사용법 Emotion 은 JS로 css 스타일을 작성하도록 설계된 라이브러리다.Emotion은 프레임워크에 구애받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 특히 이 라이브러리를 토스에서 쓰고 있다.https://tosspayments-dev.oopy.io/cc9367e4-4ff6-4241-8189-9f3cf250f5d2#162ece7b-e09f-4711-92a1-7100aa27aeb6 토스 프론트엔드 챕터의 모든 것토스 프론트엔드 챕터를 소개합니다! 이 문서에는 프론트엔드 챕터에 대해서 궁금하신 분들께서 꼭 알았으면 하는 정보들이 담겨 있습니다.tosspayments-dev.oopy.io특히나 css의 props를 이용한 방법을 즐겨 쓴다고 한다.https://emotion.sh/docs/.. 2025. 2. 23.
리액트 zustand란? 이번 글은 리액트의 상태 관리 라이브러리 중 하나인 zustand를 알아보도록 하겠다.리액트 zustand란?프론트엔드에서 상태는 렌더 하는 데 있어서 영향을 미칠 수 있는 값을 뜻한다. 상태를 어떻게 관리하느냐에 따라 웹을 렌더 하는데 영향을 미칠 수 있다. 즉, 프론트엔드 개발자에게 상태관리는 중요한 임무가 되었다.리액트는 독립적인 컴포넌트 단위로 구성되어 있다. useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파할 수 있다.상태가 시작된 지점과 어떤 컴포넌트를 거쳐가는지, 모든 흐름을 이해하고 기억한다면 useState와 props를 사용하는데 무리가 없다. 하지만 프로젝트의 규모가 커짐에 따라 관리해야 할 상태의 개수는 늘어날 것이.. 2025. 2. 21.
리액트 쿼리란? 이번 글은 "리액트 쿼리"에 대한 전반적인 내용을 담은 글이다. 리액트 쿼리가 무엇인지 시작해서, 코드는 어떻게 작성하는지? 언제 사용하는지 등등.. 이야기할 것이다.제대로 시작하기 전에, 공식 문서가 궁금하다면?공식 문서https://tanstack.com/query/latest/docs/framework/react/examples/basic React TanStack Query Basic Example | TanStack Query DocsAn example showing how to implement Basic in React using TanStack Query.tanstack.com위 링크 들어가면 리액트 쿼리의 베이직한 예시를 확인할 수 있다. (문서도 있으니 확인하자.)리액트 쿼리란?공식문서.. 2025. 2. 20.
리액트 Swiper (슬라이더) 적용 리액트 slick도 있긴 한데, DOM 요소의 부분에서 문제가 생길 수 있고.Swiper는 리액트에 좀 더 친숙해서 이 라이브러리를 채택하였다.관련 글을 링크로 달아두겠다.https://velog.io/@ooo3289/React-Swiper-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-Navigation-Pagination React Swiper 적용하기 (Navigation, Pagination)Swiper 공식 문서 참고퍼블리셔일 때 슬라이드 써야하는 일이 있으면 무조건 Swiper를 사용했었다.React 환경에서는 처음 쓰는거라 기대 만빵확실히 html, javaScript위에서 쓰는 것 보다 더 쉬웠음!!일단velog.io사람마다 라이브러리 선택은 당연히 다르겠지만.내가 써본.. 2025. 1. 27.
메뉴 밑줄 슬라이딩 애니메이션 헤더에 주는 메뉴 밑줄 슬라이딩 애니메이션을 만드는 법을 알고 싶다면 밑의 링크를 참고하자.https://youtu.be/O54PjSD9BUg?si=_SLLCsgV66BhdfYHhttps://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/SyujQp2L(핵심은 결국 자바스크립트 문법이다.)리액트에서는 자바스크립트 파일을 만든 이후, 함수로 묶어서 함수를 부르는 방향으로 진행해도 괜찮을 듯하다.아니면 jsx 파일 안에다가 바로 구현하는 방법도 있다. 이러면 useState를 써야 할 것. 2025. 1. 14.
모달 창 구현하는 방법 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미한다. (웹과 앱에 꽤 많이 쓰인다.) - 팝업 창 구현하는 것도 추후에 작성하겠다.자바스크립트를 기반으로 웹/앱 Dom을 조작하거나 직접 CSS style을 수정하는 방식이다.즉, css의 display 상태를 자바스크립트의 DOM요소로 제어하는 것.디테일한 부분은 다음 글들을 참고하자.https://velog.io/@seungmimi/javascript%EB%AA%A8%EB%8B%AC-%ED%8C%9D%EC%97%85-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 [javascript]모달 팝업 구현하기🧐 모달 팝업이란일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 .. 2024. 12. 23.
리액트 - 유튜브 영상 넣기 리액트에 mp4로 영상을 넣는 방법도 있지만, 좀 더 편하게 유튜브 영상을 넣는 방법이 있다.(mp4로 하려면 mp4를 다운로드하고, 라이브러리도 깔아줘야 하고... 아무튼 복잡함)1. 라이브러리 깔기$ npm install react-youtube일단 npm 라이브러리를 깐다. 코드는 위와 같다.2. import 설정import YouTube from 'react-youtube';jsx 파일에 import문을 작성한다. 코드는 위와 같다.3. 예시 코드 >.jsx.youtube { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding-top: 20px; padding-bottom: 20px;}리.. 2024. 11. 27.
터치 디바이스(핸드폰/패드) 마우스 hover 해결방법 pc에서 마우스 hover 가상 클래스를 이용해서 이펙트를 주는 경우가 정말 많다.근데 핸드폰이나 패드 같은 "터치" 디바이스에서 제대로 작동하지 않는다는 문제가 존재한다.이를 해결하기 위해서 해결방법을 작성해 본다.https://ykwan0714.github.io/%ED%84%B0%EC%B9%98-%EB%94%94%EB%B0%94%EC%9D%B4%EC%8A%A4-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%97%90%EC%84%9C-hover-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0/ 터치 디바이스, 모바일에서 hover 제거하기 | 잡다한 개발 이야기모바일에서 클릭시 hover 효과가 나타난다. 이를 제거해 보자.ykwan0714.github.io(관련글)핵심핵심은.. 2024. 10. 31.
미디어 쿼리란? 기초부터 실전까지 미디어 쿼리란 "반응형 웹 디자인"을 위한 훌륭한 명령어라고 생각하면 편하다.인터페이스는 각각 "데스크톱 / 태블릿 / 핸드폰"으로 아주 크게 나눌 수 있다. 근데 이 인터페이스의 크기는 서로 각각 다르며 같은 종류의 장치라도 넓이와 높이가 다르다. (예를 들어 아이폰 12 pro와 갤럭시 s8의 넓이는 다르다.)즉, 다른 사이즈의 디바이스이지만.. 우리는 "동일한 유저 경험"을 제공해야 하지 않겠는가. 이것을 위해서는 미디어 쿼리는 필수라고 볼 수 있다.("동일한 유저 경험" ... 이게 진짜 생각보다 만만치 않다. 어찌 보면 챌린지에 가깝다.)아무튼. 이에 대한 영상을 참고하길 바란다.https://youtu.be/hltvPyLHKPk?si=-xFzEhdmT87IYFEX 2024. 10. 9.
리액트 - 카카오 Map API 이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.카카오 api 키 받기https://apis.map.kakao.com/여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로.. 2024. 10. 9.
리액트 - 환경 변수 관리하기 [API key] [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Passwordrominlamp.tistory.com 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임이다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 존재한다.이런 환경 변수를 세팅해서 노출하고 싶지 않은 key 아이디나 시크릿을 관리할 수 있다.자세한 것은 글을 참고하자. 영상은 밑의 영상을 참고하자.h.. 2024. 10. 9.
리액트 - 네이버 Map API 리액트에서 네이버 지도 api를 쓰는 법에 대해서 글을 써본다. 여러 차례, 삽질을 끝에... 어느 정도는 해결이 되었다.(어느 정도라는 건, 완벽히는 해결되지 않았다는 뜻... 돈이나.. 가끔 에러가 뜨기도 하고...)https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] 네이버 지도 api 사용하기react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한velog... 2024. 10. 3.

티스토리툴바