본문 바로가기

전체 글409

[ Next.js ] Link, Dynamic Routes Next.js란 무엇이고, 왜 사용할까? 특징 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 기본 구조 및 기능 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ... dev - next dev 개발 모드로 프로젝트를 실행 Hot reloading 등.. 2023. 1. 31.
[ KTP ] CSS 프로젝트 회고 Clone-Coding Share Space 프로젝트 기간: 2022.1.6 - 2022.1.12 프로젝트 S.A. KEEP 1. 노션을 활용한 프로젝트 관리 프로젝트 일정, 기능 개발, 참고자료 등 꼼꼼한 문서화를 통해 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow로 작업 진행 Main, dev, feature로 브랜치를 나누고 feature는 기능별로 브랜치를 계속 생성해서 dev에 병합하며 작업했는데 기능에 따라 브랜치를 나누니 한 눈에 파악하기도 쉬웠고 작업하기 훨씬 편리했다. 3. PR 시 화면 공유를 통해 기능 구현 한 것 .. 2023. 1. 30.
[ TypeScript ] 보호되어 있는 글 입니다. 2023. 1. 27.
[ React ] 웹 링크 유효성 검사, React Query Firebase 웹 링크 유효성 검사 let regex = /^(http(s)?:\/\/)([^\/]*)(\.)(com|net|kr|my|shop)/gi; const trueOrFalse = regex.test(input); if (trueOrFalse === true) { setErrorMessage(''); setInputValidation(true); } else { setErrorMessage('유효한 주소를 적어주세요.'); setInputValidation(false); } /: 정규식 시작 ^: 문자열의 시작 (http(s)?:\/\/): http:// 또는 https:// 허용 ([^\/]*): ^는 not의 의미로 /를 제외한 모든 문자열을 허용한다. (\.): .를 선언해야 한다. (com|net|kr.. 2023. 1. 27.
[ React ] 하나의 modal로 버튼에 따라 다른 내용 출력하기 modal 창 하나로 수정 버튼에 따라 그에 맞는 내용이 modal 창에 뜨게끔 구현을 해보았다. MyPage.jsx - 수정 버튼 import EditModal from '../../components/MyPage/EditModal/EditModal'; import { Fragment, useEffect } from 'react'; import { MyPageContainer, MyInfoContainer, MyPageTagTitle, MyInfoInput, MyInfoEditButton, NickNameContainer, GithubContainer, MyPageTabsContainer, InputCheckContainer, } from './style.js'; const MyPage = () => .. 2023. 1. 24.
[ WIL ] 내일배움캠프 12주차 Facts TypeScript 기초 다지기 WebSocket 기초 다지기 TodoList 타입스크립트로 리펙토링 하기 Feelings 기존에 React로 만든 프로젝트를 TypeScript로 리팩토링 하는 과정이 쉽지 않았다. 앞으로 다시 한번 더 리팩토링을 해서 TypeScript를 좀더 잘 이해하고 싶다. 이번 프로젝트에서 React Query로 프로젝트를 만들 계획이라 기대된다. Findings TypeScript 기초 문법 WebSocket을 채팅 구현 강의를 보았는데 직접 구현해 보면 좋을 것 같다. Future CSS(Clone Coding Share Space) 프로젝트 잘 마무리하기 프로젝트 완성 후 TypeScript로 리펙토링 해보기 2023. 1. 22.
[ TypeScript ] TypeScript 설치 및 파일 생성 새로운 파일 만들기 mkdir todolist-typescript typescript 파일 생성 npx create-react-app 파일이름 --template typescript Run Project npm start Firebase와 연결 npm install firebase 2023. 1. 21.
[ React Query ] 게시물에 따른 comments 업데이트 React Query에서 데이터가 만료되었다는 뜻은? 데이터 refatching 실행에는 만료된 데이터 외에도 여러 트리거가 있다. 컴포넌트가 다시 마운트 되거나 윈도가 다시 포커스 되었을 때 만료된 데이터일 경우에만 refatching이 실행된다. staleTime translates to ‘max age’ 데이터가 만료됐다고 판단하기 전까지 허용하는 시간. 웹사이트에 표시된 데이터가 10초까지는 그대로여도 괜찮다면 staleTime을 10초로 설정한다. staleTime의 기본 값이 0인 이유 데이터는 항상 만료 상태이므로 서버에서 다시 가져와야 한다고 가정한다는 뜻이다. 게시물에 따른 comments 업데이트 문제: 게시물에 따른 comments가 업데이트 되지 않는다. 첫 번째 게시물의 comme.. 2023. 1. 21.
[ React Query ] useQuery, isError, isLoading Cliente State vs. Server State Client state: user’s chosen language or theme. Server state: information stored on server React Query, 3가지 키워드 Query - 어떤 데이터에 대한 요청을 의미한다. Mutation - 어떤 데이터를 바꾸는(추가, 수정, 삭젝) 것이다. Query Invalidation - 쿼리를 무효화 시킨다. React Query 실행 순서 1. React Query 설정 npm install react-query 2. Create query client: 쿼리와 서버의 데이터 캐시를 관리하는 클라이언트 3. Apply QueryProvider: 자녀 컴포넌트에 캐시와 클라이언트.. 2023. 1. 19.
728x90

티스토리툴바