![]()
비밀번호 초기화비밀번호 까먹었을때 > 초기화 요청하는 방법모킹 방법. 실무에서는 토큰을 전달하거나 헤더에 토큰을 심기도 하는 방법을 사용한다.//auth.apiexport const resetRequest =async (data: SignupProps) => { const response = await httpClient.post('/users/reset', data); //데이터 바디로 보내준다 return response.data;};export const resetPwd =async (data: SignupProps) => { const response = await httpClient.put('/users/reset', data); //데이터 바디로 보내준다 return response.d..
라우트페이지 및 경로`npm i react-router-dom @types/react-router-dom --save` React Router 를 사용해서 작성한다.페이지 경로는 /~도서상세만 /books/{id} route 에서 존재하지 않는 에러페이지가 발생할 경우? `errorElement` 항목으로 예외처리한다.오류 예외처리 Error.tsximport { useRouteError } from 'react-router-dom';interface RouteError { statusText?: string; message?: string;}function Error() { const error = useRouteError() as RouteError; return ( 오류발생 ..
![]()
Vercel 무료 배포firebase로 로그인, 이메일전송 등의 서비스를 구축하고 있다. 미리 배포한 후 연동하려고 하는데 멘토님께서 firebase 배포가 아닌 vercel 배포를 추천하셨다.Git Organization 에서 FE, BE 레포가 다른데 시간이 없어서 둘다 내가 하기로 했고,무료로 하려면 조직(팀) 레포가 아니라 내 계정으로 개인으로 fork 를 해서 vercel 배포를 하고 cicd로 바로 적용될 수 있도록 하는게 포인트! 1. 개인 계정에 public으로 fork 한다.2. vercel에 project 생성해서 git import 한다.이때 연결하는건 fork 해온 개인 레포지토리 링크이다.선택된 레포지토리만 vercel에 불러오게 할 수 있다. Vite로 생성한 프로젝트는 Fram..
Title 컴포넌트폰트크기 theme 에 적용하기export type Headingsize = 'large' | 'medium' | 'small';interface Theme { name: ThemeName; color: { [key in ColorKey]: string; }; heading: { [key in Headingsize]: { fontSize: string; }; }; export const light: Theme = { name: 'light', color: { primary: 'brown', background: 'lightgray', secondary: 'blue', third: 'green', }, heading: { ..
![]()
레이아웃?프로젝트의 기본적인 화면 구조를 잡는다반복적으로 들어가야하는 헤더, 푸터 등 매 화면마다 제공한다.상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비한다. Header, Footer 통일된 레이아웃 컴포넌트방법각 화면 페이지마다 컴포넌트 호출레이아웃 pico css 사용index.html `https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"/>`dark 테마 각 페이지마다 공통 컴포넌트 호출하는 경우Home.tsximport React from "react";import Header from "../components/common/Header";import Footer from "../components/common/Footer";..
인증 - query string 필터링 목록 - 상세화면 + 장바구니 - 주문서 작성, 목록 - 환경설정컨텍스트 api, use~~ 라이브러리로 전역 상태관리모달, 드롭다운, 포스트. 무한스크롤,. 슬라이드 배너 라이브러리없이 생성반응형 웹 CRA vs ViteCRAVitewebpack 압축ESBuild 롤업 빌드node.jsGolangexpress serverqkoa serversource buildmodule buildprocess.env.KEYimport.meta.env.KEYHMRHMRhttps://create-react-app.dev/https://vitejs.dev/guide/*HMR : Hot Module Reading. 개발 코드 변경시 화면에 즉시 적용타입스크립트는 HMR 사용안함Vite..
☑️ flow control, 제어 흐름, 흐름 제어사용자는 컴퓨터에게 명령하고, 컴퓨터는 이를 수행한다.특정 이벤트(trigger)로 시작해서~ 원하는 결과를 도출하며 종료된다. 명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서goto다른 구문에서 시작.개발 설계의 오류를 발생시킬 수 있어 사용하지 말것!choice일부 조건이 충족되는 경우에만 일련의 명령문 실행`if-else`, `switch`loop어떤 조건이 충족될때까지 일련의 명령문을 0회 이상 실행Collection loop, General loop > 자료구조에 따라 종류가 존재한다.continue현재 실행 구문에서 떨어진 한 구문의 집합을 실행Loop continuationbreak프로그램 실행을 중단Loop..
채용 어필하는 방법협업 능력 : 코드 대화 가능, 이슈~토론프로젝트 문해력 : 기획, 설계, 구현~테스트, .. 유지보수, 리팩토리, 운영...코드 분석 : 언어의 특징, 인사이트 > 코드 구현 능력!개발 문화 속에서 성장 경험꾸준한 노력/개선 *블로그문서, 주석, 설계, 테스트, 기능 제안 > 개발자 한정 X IT 서비스 기획 : 이 기능이 구현 가능한지 파악할 수 있는 내용QA : 사용자의 경험 테스트다양한 부분에 큰 경쟁력이 될 것이다.팀스테이지 발표 70% 프로젝트 실패 > 하나의 요구사항 모두 지키지 못했는가? (기준 모호)기술 오류, 휴먼 에러, 전반적 프로세스, 실형 불가능, 사용자들과 접점 낮음플젝 + 위 문제사항을 해결할 줄 아는 사람인가?슈퍼유저의 시선 : 넓게 보고 잘 사용할 줄 아는..
오픈소스 찾기깃허브 Explore > Topics 에 핫한 주제의 오픈소스 및 프로젝트를 확인할 수 있다. GitHub: Let’s build from hereGitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...github.com오픈소스인 플젝도 있고, 아닌 플젝도 있다 > license 꼭 확인없는 코드라면? 가져와서 수정하면 안됨 > 포크 참고해서 다른 코드 만들거나, 레포 저장하기위한 포크 ok >..
