[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

🔥 핫딜 페이지 핫딜 페이지에는 제품 상세 모달, 장바구니 모달, 결제 모달까지 한 페이지 안에서 결제까지 할 수 있도록 만들었다. 초반 기획을 했을 때 최소한으로 페이지를 만들자고 해서 대부분을 모달로 만들었다. (그러지 말았어야 했다.) 1️⃣ 수정 전 핫딜 페이지 처음에 기획할 때는 원래 이런 페이지가 아니였다. 이전까지의 프로젝트와 비슷한 느낌의 쇼핑몰을 만들려고 했으나 막상 다 만들고 나니 너무 허전했다. 기능도 이전 프로젝트와 다를게 없었고 차별화 되는 느낌이 없었다. 그리고 기간도 아직 많이 남아 있어서 삭제하고 다시 만들었다. (이전 파일은 배포 과정에서 삭제하는 바람에 없어졌다..) 2️⃣ 수정 후 핫딜 페이지 사용한 라이브러리: react-daum-postcode(우편번호 검색), Sw..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - Zustand

이번 프로젝트를 하며 처음 사용해본 상태관리 라이브러리인 zustand에 대해 정리를 해논 블로그다. 앞으로 어떤 방향으로 사용할 지에 대한 내용을 적어놀 것이다. 🤔 Zustand란? zustand는 context API를 간편하게 사용하기 위해 만들어진 상태관리 라이브러리다. 상태관리를 하기위해 Context API, Redux, React Query, Zustand 등이 있지만 Zustand를 사용하는 가장 큰 이유는 코드를 사용하는데 간편하기 때문이다. ✏️ Zustand 사용법 사용법은 Redux를 사용할 때와 비슷하다. store 폴더를 만들고 그 안에 전역 변수를 선언해주면 된다. 하지만 나는 타입스크립트를 같이 사용하고 있기 때문에 타입도 추가로 지정해주면 된다. // store impor..

• format_list_bulleted 프로젝트
• · 2023. 12. 11.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 타입스크립트

이번 프로젝트에서 타입스크립트를 사용하며 겪은 배운점과 고쳐야 될 점을 나열한 블로그다. 앞으로 어떻게 사용할 지에 대한 간단한 정리 형식으로 써놓았다. 1. 타입스크립트 사용 한 곳. 1-1. API 호출시 타입 선언 1-2. 부모에서 자식 컴포넌트로 Props 전달시 타입 선언 1-3. useState, useRef 등 ReactHook 사용시 타입 선언 1-1. API 호출시 타입 선언 ✂️ 수정 전 // API 타입 선언 const [resentProductList, setResentProductList] = useState([]); // API 호출 useEffect(() => { const getResentProduct = async () => { try { const res = await a..

• format_list_bulleted 프로젝트
• · 2023. 12. 11.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 회고록(1)

배포 링크 : https://doongg.site/ 깃 허브 : https://github.com/orgs/DoongG/repositories 🐣 DoongG(둥지) 드디어 부트캠프의 마지막 프로젝트가 시작되었다. 기간이 긴 만큼 기획과 개발까지 차근차근 시작했다. 팀원은 자유였으며 나는 원래 친한 5명의 크루들과 함께 프로젝트를 시작했다. 총 5명이었으며 프론트 3명 백엔드 2명으로 이루었다. 주제를 정해야 했다. 팀원 모두의 흥미를 이끌 수 있는 주제를 생각해봤다. 우리 팀원들 과반 수 이상이 혼자 산 경험이 있었다. 그래서 자취생들을 위한 플랫폼을 만들기로 했다. 플랫폼에 어떤 것을 넣을 까 생각을 해봤는데 자취생들은 일반적으로 돈이 부족하기 때문에 '핫딜 상품'만 모아둔 쇼핑 페이지, 자취생들끼리..

• format_list_bulleted 프로젝트
• · 2023. 12. 11.
• textsms

[TypeScript] - 함수 타입 정의하기

😎 타입스크립트에서 함수 정의 자바스크립트에서 함수를 정의 할 때 매개변수와 어떤 값을 반환 할지 써준다. 타입스크립트도 마찬가지다. 여기에 추가로 타입만 작성해주면 끝이다. // 일반 함수 function func(a: number, b: number): number { return a + b; } // 화살표 함수 const add = (a: number, b: number): number => a + b; ● 매개변수의 기본값이 이미 정의된 경우 function introduce(name = "진형", tall?: number) { console.log(`name : ${name}`); if (typeof tall === "number") { console.log(`tall : ${tall + 10..

• format_list_bulleted TypeScript
• · 2023. 11. 4.
• textsms

[TypeScript] - 변수 타입 선언

🤔타입 선언? 자바스크립트와 타입스크립트의 가장 큰 차이점은 변수에 타입을 지정해주는 것에 있다. Java와 C언어와 달리 따로 타입을 지정해주지 않는 자바스크립트는 런타임 후 버그를 발견 할 수 있는 동적 언어 타입이다. 동적언어의 가장 큰 단점이 에러를 늦게 발견한다는 것인데, 이 때문에 자바스크립트 대신 타입스크립트를 쓰는 이유다. 실제로 자바스크립트의 버그중 15%를 타입스크립트로 없앨 수 있다는 결과가 있다. + 컴파일 단계에서 바로 에러를 수정할 수 있기 때문에 에러 지점을 바로 파악하기 쉽다. 1️⃣원시 타입 선언 방법 //number let num1:number=123; // string let str1:string = "hello"; //boolean let bool1: boolean =..

• format_list_bulleted TypeScript
• · 2023. 10. 29.
• textsms