전체 글84 [Next.js, React] TodoList 만들어보기 목차 폴더구조 Next.js를 사용하였으며 /todolist 경로 이동시 사용할 page.tsx와 containers/TodoList를 사용하였다. 파일 내용 /src/app/todolist/page.tsximport TodoList from '@/containers/TodoList/TodoList';export default function Page() { return ;} /todolist 경로에서 보여줄 컨테이너 /src/containers/TodoList/TodoList.styles.tsimport styled from 'styled-components';const StyledTodoList = styled.div` display: flex; flex-direction: column.. 2024. 6. 4. [node.js, 라이브러리]UUID와 'uuid' 라이브러리 알아보기 목차 UUID란 무엇인가?UUID(Universally Unique Identifier)는 전 세계적으로 고유한 식별자를 생성하기 위해 사용되는 표준이다. 이는 시스템 간에 고유한 ID를 보장해야 하는 다양한 상황에서 유용하다. UUID는 주로 데이터베이스의 기본 키, 트랜잭션 ID, 디바이스 식별자 등 다양한 용도로 사용 된다.UUID는 128비트 길이의 숫자로, 32개의 16진수 문자로 표현된다. 예를 들어, `123e4567-e89b-12d3-a456-426614174000`과 같은 형태를 가진다. UUID의 버전UUID에는 여러 버전이 있으며, 각 버전은 특정한 생성 방식을 따른다. 주요 버전은 다음과 같다.UUIDv1 : 시간과 노드(일반적으로 MAC 주소)를 기반으로 생성된다.UUIDv3 .. 2024. 6. 3. [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 목차 Next.js 14이상 app라우터에서 페이지 로딩효과 추가하기Next.js 에서 app라우터로 개발을 하는 도중 라우터 이동전 로딩효과를 주는게 필요하였습니다. 사용 버전react : ^18zustand : ^4.5.2next : 14.1.0 진행과정 loadingStore.ts 추가/src/store/loadingStore.ts파일을 만들어줍니다.import { create } from 'zustand';interface LoadingState { isLoading: boolean;}interface LoadingActions { setLoading: (loading: boolean) => void;}const useLoadingStore = create((set) => ({ isLoadi.. 2024. 5. 30. [Next.js,TS] 특정폴더에만 Eslint 적용하기 목차 왜 특정 폴더에만 Eslint를 적용하나요?기존 만들어진 프로젝트에서 airbnb세팅 이랑 여러 커스텀 eslintrc를 넣었을때 바꿔야 할 부분이 너무 많아서 도중 build가 안되는 현상이 일어났다.그당시 .eslintrc.json전체 규칙을 적용한 모습{ "extends": [ "next/core-web-vitals", "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ], "plugins": ["@typescript-eslint", "prettier"], "parser": "@typescript-eslint/parser", "parse.. 2024. 5. 30. [Next.js, TypeScript] airbnb 및 커스텀 TS 세팅 목차 Next.js + TS 환경에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript --legacy-peer-deps .eslintrc.js.. 2024. 5. 29. [python, BeautifulSoup] 파이썬의 BeautifulSoup 알아보기 목차 BeautifulSoup는 무슨 라이브러리인가?BeautifulSoup는 Python 프로그래밍 언어로 작성된 HTML 및 XML 파일을 구문 분석하기 위한 라이브러리이다.주로 웹 스크래핑에 사용되며, 복잡한 HTML 구조에서 데이터를 추출하는 데 매우 유용하다.BeautifulSoup는 다양한 Parser를 지원하여 유연하고 강력한 HTML 및 XML 처리 기능을 제공한다. 설치BeautifulSoup는 pip를 통해 설치할 수 있다.pip install beautifulsoup4pip install lxmlpip install html5lib 주요 기능 ParserBeautifulSoup는 여러 종류의 파서를 지원한다. 각 파서마다 장단점이 있으며, 상황에 맞는 파서를 선택할 수 있다.h.. 2024. 5. 29. [puppeteer,node.js] 웹 자동화 라이브러리 Puppeteer 목차 개요Puppeteer는 구글이 만든 Node.js 라이브러리로, Headless Chrome 또는 Chrominum 브라우저를 제어할 수 있는 기능을 제공한다. 이 라이브러리는 브라우저를 프로그래밍적으로 제어하고, 다양한 브라우저 작업을 자동화하는데 사용된다. 주요 기능 웹 스크래핑(Web Scraping)Puppeteer는 웹 페이지의 내용을 가져오거나 특정 데이터 요소를 추출하는 데 사용된다.JavaScript가 렌더링한 콘텐츠를 포함하여 브라우저에서 볼 수 있는 모든 것을 캡처할 수 있다.자동화된 테스트(Automated Testing)프론트엔드 테스트 자동화 도구로, 브라우저 환경에서 애플리케이션을 테스트 할 수 있다.다양한 사용자 상호작용을 시뮬레이션하여 애플리케이션의 동작을 검증할 .. 2024. 5. 29. [Next.js,TS,Three] 나의 3D캐릭터Three.js에 표출하기 - 개인기록 목차 사전 작업https://www.youtube.com/watch?v=1ZDjzJm3vPY&t=182s프로필용 캐릭터를만드는 방법은 위 유튜브에 적혀있다.언급된건 4개지만 사용하는건 PPM을제외한 아래 3개 사이트이다.Profile Pic Maker ⇢ https://pfpmaker.com/Ready Player Me ⇢ https://readyplayer.me/Blender ⇢ https://www.blender.org/download/Mixamo ⇢ https://www.mixamo.com/#/아바타 만들기위 유튜브를 참고해서 위 링크중 Ready Player Me 에서 아바타를 만들어서 .glb 형식으로 다운로드 해준다. Blender 다루기당시 blender 최신버전인 4.1버전을 다운로드하.. 2024. 5. 28. [React,TS]React.lazy와 Suspense로 코드 스플리팅 구현하기 목차 개요현대 웹 애플리케이션은 점점 더 복잡해지고, 초기 로딩 시간을 줄이는 것은 사용자 경험을 향상시키는 중요한 요소이다.React에서는 'React.lazy'와 'Suspense'를 통해 코드 스플리팅을 쉽게 구현할 수 있는 방법을 제공한다.이번 글에서는 'React.lazy'와 'Suspense'를 사용하여 동적 컴포넌트를 로드하는 방법을 알아보려고 한다. 코드 스플리팅이란?코드 스플리팅은 애플리케이션을 여러 개의 작은 청크(chunk)로 나누어, 필요한 순간에 해당 청크를 로드하는 기술이다.이를 통해 초기 로딩 시간을 줄이고, 사용자가 필요한 기능을 사용할 때만 관련 코드를 로드하여 성능을 최적화 할 수 있다. React.lazy'React.lazy'는 React에서 컴포넌트를 동적으로 임포.. 2024. 5. 28. [React,TS] 라우팅 코드 컨벤션 목차 라우팅 코드 컨벤션이 왜 필요한가?Next.js와 다르게 React는 라우팅을 직접 지정해줘야한다. 그래서 효율적인 코드 컨벤션으로 관리가 되면 좋기때문에 글을 남기려고 한다. 사용 버전"dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.97", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint": "^8.57.. 2024. 5. 28. 이전 1 2 3 4 5 6 ··· 9 다음
