본문 바로가기

전체 글402

2024-07-30 Funnel Pattern + CRUD 에서의 커스텀 훅 사용 패턴 상황페이지 컴포넌트에서 자식 컴포넌트를 호출해서 시퀀스의 이동에 따라 페이지를 이동시키는 듯한 효과를 보여주는 Funnel Pattern으로 디자인하였다.글쓰기 페이지이기 때문에 자식 컴포넌트들에서 사용자와의 인터렉션이 계속 발생하는 컴포넌트들이고, 사용자에게 입력 받은 값을 마지막 step에서 값을 서버에 전송해야 하는 로직으로 작성되어 있다.자식 컴포넌트에서 입력한 값을 부모 컴포넌트가 참조하는 방법으로 전역 상태로 관리하는 방법이 가장 먼저 떠오르지만, 이건 개인 프로젝트가 아니라 팀 프로젝트이기 때문에 대부분의 컴포넌트가 재사용이 가능하도록 작성하였고, 실제로 검색 페이지에서 이 컴포넌트들을 사용하고 있다.그렇다면 글쓰기 페이지에서 이 컴포넌트를 사용해서 사용자에게 값을 입력 받고 이어서 글쓰기 .. Programing/TIL 2024. 7. 30.
Next.js의 App Router와 Page Router의 차이 App Router? Page Router?Next.js는 Page Router 방식을 사용하다 13.4 버전 이후부터 App Router라는 개념이 도입되었다. App Router 방식은 비교적 정말 최신 기술이기 때문에 아직까지는 Next.js에서 Page Router 방식으로 제작되어 있는 프로젝트가 훨씬 많다.따라서 지금 막 입문한 프론트 엔드 엔지니어는 Page Router의 개선 버전인 App Router를 배우되, Page Router와의 차이점을 짚고 넘어가는 것도 중요할 것이다. Next.js를 배우기 위해서 인터넷에 검색을 하거나 강의를 찾아볼 때 이것이 App Router 방식의 자료인지 Page Router 방식의 자료인지 구분할 수 없다면 큰 혼동이 올 수 있다. 기본적으로 둘 다.. Programing/Next.js 2024. 7. 30.
2024-07-29 넥스트.JS의 폴더 구조 Next.js를 배운 지 한 달이 넘어 가는 이 시점에서 Next.js의 폴더 구조를 다시 공부한다는 것이 이상하게 보일 수 있지만,폴더 구조는 팀 프로젝트를 할 때마다 컨벤션에 약간의 차이가 발생해서 이번 프로젝트에서는 왜 이렇게 폴더구조를 설정하였는지까지 하나 하나 기술적 의사 결정 사유를 놓고 토론하느라 꽤 많은 시간이 흘렀다. 지금까지의 팀프로젝트에서 이런 경험은 없었다. 그리고 이런 것을 프로젝트의 아키텍쳐를 구성하는 과정임을 알게 되었다. 기본적인 Next.js의 폴더구조와 지금 우리 프로젝트의 현재의 아키텍쳐를 보면서 살펴보도록 하겠다. Next.js로 프로젝트를 생성하면 기본적으로 위처럼 폴더 구조가 생성이 된다.자바스크립트, 타입스크립트 사용 유무에 따라서 확장자는 달라진다. .├─ .n.. Programing/TIL 2024. 7. 29.
리액트에서 API 호출로 반환 받은 값을 렌더링 하는 기본 패턴 import { useEffect, useState } from "react";// axios importexport default function App() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.date); }); }, []); return ( 상품 목록 페이지 {products && products.map(products => { return {products.name} })} .. Programing/React 2024. 7. 29.
Taste Hobby/Guitar 2024. 7. 28.
Restful API Axios로 호출하는 기본 패턴 (useState, useEffect 사용) + strict mode import { useEffect, useState } from "react";import "./styles.css";import axios from 'axios';export default function App() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.data); }) }, []); console.log(products); return ( );} db.json이라는 데이터 파일을 만들고 json-server로 로컬에서 node.js .. Programing/React 2024. 7. 27.
함수형 컴포넌트 자동완성 VSCode 플러그인 function Login () { return ( ... )}export default Login; 컴포넌트를 만들 때마다 이런 기본 구조를 작성하는 것이 여간 귀찮은 일이 아니다.그리고 또 자동완성 기능을 사용하지 않으면 typo의 위험이 언제나 도사리고 있다. 따라서 rfc라는 명령어만 입력해도 함수형 컴포넌트를 자동으로 입력해주는 플러그인이 유용하게 쓰이는데,설치하면 하면 된다. 링크는 아래. https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio MarketplaceExtension for V.. Programing/React 2024. 7. 27.
2024-07-26 커스텀 훅으로 컴포넌트와 state 반환해서 부모 컴포넌트에서 사용하기 퍼널 패턴과 같이 여러 컴포넌트와 페이지가 쏟아지는 경우, 그 컴포넌트들을 호출한 부모 컴포넌트에서는 하위 컴포넌트에서 생성된 state를 공유받을 수가 없다.이번 프로젝트를 진행하면서 재사용 가능한 컴포넌트는 중복 작업을 피하고 하나로만 만들어 프로젝트의 사이즈를 줄이고, 팀의 공수를 줄이는 데에 초점을 두고 진행하고 있다.그동안 팀프로젝트를 많이 진행했지만, 그동안 진행했던 것은 팀프로젝트가 아니라 개인 프로젝트 5개를 하나의 리포지토리에 모아 놓은 형태가 아니었나 하는 자조적인 반성도 해본다. 이러한 패턴이 익숙하지 않아 초반 작업 속도가 꽤 걸린다.그 중에서 아주 간단한 버튼을 커스텀 훅으로 만들어서 팀원들에게 사용법을 안내한 문서를 오늘의 TIL로 남겨 본다.이미지파일 위치src/hooks/us.. Programing/TIL 2024. 7. 26.
2024-07-24 SEO란? SEO란, Search Engine Optimiztion의 약자로, 검색 엔진 최적화를 의미한다. 구글이나 네이버와 같은 검색 엔진에서 내 웹 사이트가 상위 노출되는 것은 누구나 바랄 것이다. 그런데 검색 엔진은 내 사이트가 어떤 사이트인지 알지 못한다. 그래서 검색 엔진의 로봇이 내 사이트가 어떤 사이트인지 잘 알 수 있게 해주는 것이 중요하다. 검색 엔진은 크게 웹 페이지의 제목(title), 설명(description), 이미지의 alt 속성 등을 읽어서 이 사이트가 어떤 내용으로 구성되어 있는지 판단한다. 그리고 기능 상으로는 작동하지 않는 등의 시멘틱한 HTML 태그 등도 검색 엔진이 이 사이트가 어떻게 구성되었는지 판단할 수 있는 근거가 된다. 여기서 React.js와 Next.js의 큰 차.. Programing/TIL 2024. 7. 23.
2024-07-23 프론트엔드의 디자인, Funnel Pattern 사용법커스텀 훅 살펴보기// useState, useCallback과 같은 리액트 훅을 사용하기 때문에 클라이언트 컴포넌트로 설정합니다.'use client';import { useCallback, useState } from 'react';// useNextButton 커스텀 훅을 정의합니다. 이 커스텀 훅은 Funnel 패턴을 구현하기 위해 단계를 넘기는 기능을 합니다.// 인자를 3개 받습니다.const useNextButton = (// initialStep은 초기 시퀀스의 숫자입니다. 보통은 0부터 설정하시고 실제 사용하는 페이지에서도 그렇게 작성하시면 됩니다. initialStep: number,// 버튼에 렌더링 되는 텍스트입니다. 쓰는 곳이 전부 다르니 prop으로 받았습니다. .. Programing/TIL 2024. 7. 23.

티스토리툴바