프로그래밍/웹 개발46 [React] useState Hook과 Props로 쇼핑몰 상태관리 코드스테이츠의 과제로 쇼핑몰 애플리케이션의 주요 기능을 구현했다. 그 과정에서 app.js, ItemListContainer.js, ShoppingCart.js 파일의 코드를 자세하게 정리해보려고 한다. 먼저 전체 진행 과정은 아래와 같다. 1. 장바구니의 기능 구현하기 - [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현 - 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현 - 장바구니의 상품 갯수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 갯수가 업데이트되도록 구현 2. app.js 파일에서 state와 메소드를 생성하고 웹 페이지인 ItemListContainer와 ShoppingCart에 props으로 전달 3. itemListContainer와 S.. 2021. 8. 22. [React] Hook과 Styled Component를 통한 기능 구현 코드스테이츠의 과제로 React의 Hook과 이벤트 핸들러를 통해 Modal, Toggle, Tab, Tag 기능을 구현해보았다. 동시에 Styled Component를 활용하여 디자인을 했다. 아래과 같은 방식으로 진행했으며, 컴포넌트를 구성하는 코드를 정리해보았다. 1. 기능별로 컴포넌트 구성 : Modal, Toggle, Tab, Tag, Autocomplete, ClickToEdit 컴포넌트 구성 2. 컴포넌트들을 App.js에 import하여 연결하기 Modal 컴포넌트 제작 1. Styled Component 기능으로 div와 button에 대해 CSS로 디자인 2. useState Hook을 사용하여 Open 여부에 대한 상태 관리 (True or False) 3. 이벤트 핸들러를 통해 버튼.. 2021. 8. 21. [Node.js] MySQL과 연동하여 서버 및 DB 구축하기 코드스테이츠의 과제로 Node.js와 MySQL을 통해 쇼핑몰의 서버와 데이터베이스를 구축했다. 진행 과정은 다음과 같다. 1. Node.js 환경에서 MySQL을 통한 데이터베이스 연결하기 2. 데이터베이스를 생성하고, 배치 모드를 통해 테이블과 레코드 입력 3. items 모델 구현 : Items 테이블의 아이템 리스트를 모두 조회하기 위한 Get 요청 4. orders 모델 구현 : orders & order_items 테이블의 주문 내역을 조회(Get)하고, 새로운 주문을 추가(Post) 5. MVC 모델의 컨트롤러와 클라이언트쪽은 이미 구현 완료 6. API 문서 요약 - GET의 Request : GET /users/:userId/orders - GET의 Response : orders 테이블.. 2021. 7. 28. [Node.js] dontev 모듈과 .env를 사용하여 sql 비밀번호 숨기기 스프린트 과제를 위해 우선 JavaScript 파일과 mysql을 연결해야 한다. dontev 모듈을 이용하여 sql 비밀번호를 환경변수로 설정 후 git에서는 숨길 예정이다. 1. dontev 모듈 설치 - dontev 모듈 설치 코드 : npm i dontev 2. .env 파일 생성 후 환경변수 입력 - .env 파일 생성 후, mysql 접속을 위해 아래와 같이 개인정보를 입력 및 저장 (환경 변수로 저장됨) DATABASE_USERNAME= DATABASE_PASSWORD='yourpassword' DATABASE_NAME='learnmysql' - .env에 입력된 환경 변수는 Node.js의 내장 객체인 process.env에 객체 형태로 저장됨 { DATABASE_USERNAME: 'roo.. 2021. 7. 27. [Node.js] Mini Node Server 스프린트2 (express 사용) Mini Node Server 스프린트2 - express 사용하기 스프린트 과제 설명 - 스프린트 1과 동일 - Express 공식문서 활용 : https://expressjs.com/ko/ 문제 해결 코드 1. express를 적용하여 초기값 설정 const express = require('express') const cors = require('cors') const app = express() const PORT = 5000; app.listen(PORT, () => { console.log(`Example app listening at http://localhost:${PORT}`) }) 2. 미들웨어 적용 app.use(cors()) // 응답(response)에 자동으로 cors 헤더 입력.. 2021. 7. 2. [Node. js] Mini Node Server 제작 스프린트 (createServer) Mini Node Server 스프린트 스프린트 과제 설명 1. 목적 - 웹 서버를 구현하기 - 클라이언트의 액션(버튼 클릭)에 따라 각기 다른 HTTP 요청을 서버로 보내고, HTTP 요청에 담아 보낸 단어를 소문자 또는 대문자로 변경된 단어를 응답으로 받아 화면에 보여주기 2. 방법 - HTTP 요청과 응답을 다루기 위해 HTTP 모듈 사용 - HTTP 트랜잭션 해부에 관한 공식문서 참고하기 : https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/ 3. 요구사항 - Endpoint(URL)에 따른 Method 기능 구현하기 /lower POST 문자열을 소문자로 만들어 응답해야 합니다 /upper POST 문자열을 대문자로 만들어 응답해.. 2021. 7. 1. 이전 1 ··· 3 4 5 6 다음 반응형