본문 바로가기

분류 전체보기402

Next.js 프로젝트 생성 npx create-next-app@latest✔ What is your project named? … my-Next-Project✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like to use `src/` directory? … No / Yes✔ Would you like to use App Router? (recommended) … No / Yes✔ Would you like to customize the default import alias (@/*)? … No / Yes 필요에 .. Programing/Next.js 2024. 7. 17.
Next.js를 쓰는 이유가 무엇인가? Vite나 CRA가 제공하지 않는 기능들을 제공하는 프레임워크의 성격을 갖고 있기 때문에 많이 사용되는 추세이다.여러가지가 있겠지만 대표적으로는 아래와 같은 기능을 추가적으로 제공한다. 왜 쓰는 지 알고 쓰는 것과, 유행이라서 쓰는 것과는 하늘과 땅 차이라고 생각하여 정리를 하며 고민을 해볼 필요가 있다고 생각했다. Next.js의 차별점라우팅라우팅이란, 쉽게 이야기 해서 웹 페이지를 이동하는 것을 말한다. 페이지마다 고유한 URL 세그먼트가 존재해야 페이지 별로 이동할 수가 있는데, 이것을 가능하게 만들어 주는 것이 라우팅 기술이다.Vite나 CRA를 통해 React 프로젝트를 생성하게 되면 React-Router-Dom이라는 라이브러리를 설치해서 별도의 세팅을 해주어야 한다.하지만 Next.js에서는.. Programing/Next.js 2024. 7. 17.
2024-07-16 User Flow Chart 부트캠프 과정에서 User Flow를 처음 경험해보았다.UI/UX 디자이너와 함께 협업을 하면서 처음 접하게 된 개념인데, 사용자가 앱의 어디에서 시작해서 앱의 사용을 종료할 때까지 앱의 다양한 기능과 화면을 통해 어떤 흐름으로 페이지와 기능을 이용하는지 관계도를 나타내는 것이다. 사실 지금까지 웹 사이트를 제작하면서 이 user flow를 고려해가면서 페이지 구성을 하지는 않았다. 그러나 웹 사이트의 정형화된 패턴에서 크게 벗어나지 않게 제작했기 때문에 이 user flow를 후에 작성하더라도 큰 문제는 없었을 것이다. 하지만 user flow를 고려하면서 '분기'도 명시하면서 유저와의 인터렉션도 고려하게 되었다. 또한 user flow를 작성하다 보니 라우트 구조까지 머릿속에 그려졌는데 인증/인가와 .. Programing/TIL 2024. 7. 16.
PWA 프로젝트 셋업하기 패키지 설치yarn add next-pwayarn add -D webpacknext.config.mjs 설정import withPWAInit from "next-pwa";const withPWA = withPWAInit({ dest: "public",});/** @type {import('next').NextConfig} */const nextConfig = {};export default withPWA(nextConfig);public/manifest.json 설정{ "name": "My Next.js PWA", "short_name": "NextPWA", "description": "My awesome Next.js PWA!", "icons": [ { .. Programing/Next.js 2024. 7. 16.
별자리 Hobby/Guitar 2024. 7. 14.

티스토리툴바