728x90 반응형 리액트13 Next.js의 폴더 구조 살펴보기 안녕하세요 오늘은 Next.js의 폴더 구조를 알아보겠습니다. Next.js 13 버전 이후부터 app 디렉토리 기반의 새로운 라우팅 시스템을 도입했습니다. 이는 기존의 pages 디렉토리 기반 라우팅 시스템과는 조금 다르며, 더욱 유연하고 효율적인 방식으로 라우팅을 처리합니다. app 디렉토리를 사용하면서도 프로젝트 구조를 적절하게 유지하려면 다음과 같은 방식으로 관리할 수 있습니다. src/├── app/ # Next.js 13의 새로운 라우팅 시스템을 사용│ ├── layout.tsx # 공통 레이아웃 파일│ ├── page.tsx # 기본 루트 페이지 (루트 경로 '/')│ ├── posts/ # 'posts' 경로 관련 페이지들│ │ └── .. 2024. 9. 19. Next.js API 라우트 VS Express 서버 프레임워크 안녕하세요 오늘은 Next.js api 라우트 기능을 활용한 백엔드 구현과 express 서버 프레임워크를 사용한 백엔드의 활용방안 및 비교에 대해 이야기 해보겠습니다. 1. 데이터 처리가 간단할 때 (Next.js API 라우트 > Express 서버 프레임워크)간단한 API 서버 (Next.js API 라우트가 적합한 경우):예를 들어, 단순한 블로그 플랫폼에서 사용자가 글을 작성하고 조회하는 기능을 제공하는 경우, Next.js API 라우트는 충분히 적합합니다. 사용자는 GET, POST 요청을 통해 데이터를 쉽게 조회하거나 삽입할 수 있습니다.예시:// pages/api/posts.jsexport default async function handler(req, res) { if (req.me.. 2024. 9. 19. tailwind css에 대해 알아보자 안녕하세요 오늘은 css를 좀더 간편하게 작성하기 위해서 tailwind css를 적용해보고 간단한 문법을 알아보겠습니다. 먼저 공식문서에서 설치 및 적용 방법이 자세히 설명되어있습니다. https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 해당 링크에서 적용시켜 보세요 만약 해당 방법으로 적용이 되지 않는 경우 input.css를 직접 app.tsx에 import 시켜주니 적용되는 이슈가 저는 있었네요 이.. 2024. 2. 10. 리액트 아토믹 디자인(Atomic Design)에 대해 알아보자 안녕하세요 오늘은 리액트 아토믹 디자인에 대해서 알아보겠습니다. 아토믹 디자인(Atomic Design)은 Brad Frost가 제안한 디자인 시스템입니다. 이 방법론은 웹 페이지를 여러 개의 독립적인 컴포넌트로 분리하고, 이들을 조합하여 복잡한 UI를 구축하는 데 초점을 맞춥니다. 아토믹 디자인은 이름에서 알 수 있듯이 화학의 원소와 분자에 착안한 아이디어로, 다음과 같은 5단계 계층 구조를 가집니다: Atoms (원자): 이는 가장 기본적인 빌딩 블록으로서 버튼, 인풋 필드, 텍스트 등과 같이 독립적으로 사용할 수 없는 가장 작은 UI 요소들을 의미합니다. Molecules (분자): 여러 개의 Atom을 결합하여 만든 비교적 간단한 UI 구성 요소입니다. 예를 들어 검색 폼(Molecule)은 텍스.. 2023. 9. 12. React에서 styled-components로 스타일링하기 안녕하세요 오늘은 리액트 스타일드 컴포넌트에 대해 알아보겠습니다. 저는 학원에서 CSS,SCSS를 배워 이부분이 익숙하지만 리액트를 사용하게 되면 프론트엔드 관점에서 CSS를 사용하는 것 보다 클래스 네임등을 설정하지 않아도 되므로 클래스 명 충돌을 방지하고 컴포넌트를 사용하게 되므로 재사용성을 높일 수 있다는 편한점이 있습니다. 기본적인 스타일드 컴포넌트 예제를 살펴보고 어떻게 사용하는지에 대해 작성해보겠습니다. 먼저 npm install styled-components 명령어를 실행해 주세요. import React from "react"; import styled from "styled-components"; const Button = styled.button` background-color: ${.. 2023. 9. 8. 리액트 네이티브와 Expo로 아이폰 앱 만들기: 로그인, 회원가입 백엔드 api 연결하기 안녕하세요 오늘은 리액트 네이티브를 사용한 간단한 앱에서 로그인,회원가입 기능을 구현하여보겠습니다. 저번과 다른점은 타입스크립트로 변경하였고 상태관리를 위해 recoil을 적용하였습니다. 일단 프로젝트의 구조를 먼저 살펴보겠습니다. 저번에 추가하여 회원가입 스크린을 만들고 리코일 아톰을 추가하였습니다. 먼저 auth.ts입니다. import { atom } from "recoil"; import axios from "axios"; import AsyncStorage from "@react-native-async-storage/async-storage"; import instance from "../../axios/AxiosInstance"; interface User { username: string; .. 2023. 8. 7. 리액트 네이티브와 Expo로 아이폰 앱 만들기: 홈 화면과 로그인 화면 구현 안녕하세요 오늘은 리액트 네이티브를 사용해 간단한 앱을 작성해보겠습니다. 먼저 저는 아이폰을 사용하고 있고 최종 목표는 앱스토어에 배포하는 것으로 진행해보겠습니다. expo.go를 사용하여 쉽게 개발을 할 수 있습니다. 앱스토어에서 expo.go를 다운받아줍니다. 그리고 리액티브 네이티브 공식문서를 확인하여 첫 프로젝트를 작성합니다. https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev vs 코드에서 공식문서대로 따라하다 np.. 2023. 8. 3. useEffect를 사용하여 api를 사용해보자 이번에는 useEffect를 사용해서 api를 불러내는 예제를 작성해 보겠습니다. DataDisplay라는 컴포넌트를 만들어 줍니다. import React, { useState, useEffect } from 'react'; function DataDisplay() { const [searchTerm, setSearchTerm] = useState(''); const [results, setResults] = useState([]); const handleSearch = async () => { const response = await fetch(`https://api.conceptnet.io/c/en/${searchTerm}?limit=10`); const data = await response.js.. 2023. 3. 21. 리액트 useState에 대해 알아보자 사용자가 증가 및 감소할 수 있는 카운터를 만들고 싶다고 가정해 보겠습니다. useState 훅을 사용하여 카운트에 대한 상태 변수와 카운트를 업데이트하는 함수를 만들 수 있습니다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); function increment() { setCount(count + 1); } function decrement() { setCount(count - 1); } return ( Count: {count} Increment Decrement ); } 사용자가 "Increment" 버튼을 클릭하면 증가 함수가 호출되고 현재 카운트 값에 1을 더한 .. 2023. 3. 21. 리액트 Props를 알아보자 먼저 리액트 프로젝트의 구조입니다. App.js는 이렇게 작성하였습니다. 여기서 버튼을 컴포넌트화 시켜서 사용하는데 color라는 props를 전달하여 사용할 수 있습니다. 이제 버튼 컴포넌트로 가서 버튼에 스타일을 props로 넘겨 받아 사용하였습니다. 결과입니다. 이렇게 하는 장점은 무엇일까요? props는 여러 수준의 구성 요소를 통해 전달될 수 있으므로 복잡한 UI를 더 간단한 빌딩 블록으로 구성할 수 있습니다. 전반적으로 props는 React에서 모듈식의 재사용 가능하고 유연한 UI 구성 요소를 구축하기 위한 중요한 도구입니다. 다음에는 useState에 대해 알아보겠습니다. 2023. 3. 21. 이전 1 2 다음 728x90 반응형
