스파르타코딩클럽 썸네일형 리스트형 [노드 기초반] 5주차 개발일지 1. 배운 내용 크롤링 AWS EC2 인스턴스 이용해서 코드 배포 도메인 연결 2. 새로 알게 된 내용 (1) 크롤링 - axios로 크롤링할 페이지 접속, iconv-lite로 HTML 데이터 한글 깨짐 방지 # 한글 깨짐 방지 코드 const content = iconv.decode(html.data, "EUC-KR").toString(); - cheerio로 특정 태그를 가르켜 데이터 가져오기 const $ = cheerio.load(content); const list = $("ol li"); await list.each( async (i, tag) => { let desc = $(tag).find("p.copy a").text() let image = $(tag).find("p.image a i.. 더보기 [노드 기초반] 4주차 개발일지 1. 배운 내용 상품 목록 필터링 상품 장바구니에 담기 장바구니 아이템 삭제 상품 수량 수정 구매 페이지 추가 2. 새로 알게 된 내용 (1) delete 만들기 router.delete("/goods/:goodsId/cart", async (req, res) => { const { goodsId } = req.params; const isGoodsInCart = await Cart.find({ goodsId }); if (isGoodsInCart.length > 0) { await Cart.deleteOne({ goodsId }); } res.send({ result: "success" }); }); (2) patch 만들기 : 권장하기로 두개 다 해당 리소스의 정보를 수정하는 용도로 사용한다. 다만 .. 더보기 [노드 기초반] 3주차 개발일지 1. 배운 내용 RESTful API MongoDB 설치하고 사용하기 쇼핑몰에 RESTful API 이용해서 상품 추가하기 2. 새로 알게 된 내용 (1) RESTful API : REST(Representational State Transfer)는 분산 하이퍼 미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식. 웹에 존재하는 모든 자원에 고유한 URI를 부여해 활용하는 것. 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미함. 웹에 존재하는 자원들에 대한 접근하는 방법 등을 정의한 것이 REST이고 REST 규칙을 따르는 API를 RESTful API라고 함. (2) RESTful API의 구성요소 - 자원(URL) - 행위(HTTP method) : GET, POST, PUT, PATCH,.. 더보기 [노드 기초반] 2주차 개발일지 1. 배운 내용 Express의 Routing Express의 MiddleWare 템플릿 엔진으로 실제 페이지 연결해보기 2. 새로 알게 된 내용 (1) Express의 Router 사용 방법 // index.js const goodsRouter = require('./routes/goods'); app.use('/goods',goodsRouter); (2) Express에서의 MiddleWare // index.js // 아래의 친구가 먼저 실행됨 * 미들웨어임 app.use((req, res, next) => { console.log(req); next(); }); // 미들웨어 실행되고 나서 response 실행됨 app.get('/', (req, res, next) => { res.send('We.. 더보기 [노드 기초반] 1주차 개발일지 1. 배운 내용 JS 기본 문법 복습 ES6 새로운 문법 Express 실행해보기 2. 새로 알게 된 내용 (1) Promise의 Producer and Consumer - Producer : Promise를 처음 생성할 때 Promise의 내부 코드블럭이 실행된다. 이를 executor라고 하는데, executor 실행 결과에 따라 resolve 혹은 reject를 불러준다. - Consumer : Promise의 결과에 따라 후처리하는 부분. Promise가 정상적으로 실행되어 resolve가 되었으면 then을 통해 후처리가 가능하고, reject가 될 경우 catch를 통해 후처리가 가능하다. (2) Express의 index.js 생성하고 실행해보기 // index.js const express.. 더보기 [리액트 심화반] 5주차 개발일지 1. 배운 내용 firebase 호스팅 이용해서 프로젝트 배포하기 검색 엔진 최적화 pre-rendering meta tag core web vitals를 사용해 성능 체크 (+firebase analytics 연동) React.memo 사용해보기 2. 새로 알게 된 내용 1) firebase 호스팅 이용해서 배포하기 - 파이어베이스 CLI 설치해서 로그인하고 프로젝트 연결해주기 - 우리가 사용하는 서비스 전부 선택 (space bar로 선택, enter 키로 적용) - 프로젝트 선택할 때는 Use an existing project 선택 - 영상에서는 What do you want to use as your public directory? 에서 build로 해줘서 나도 build로 해주었는데 자료에는 .. 더보기 [리액트 심화반] 4주차 개발일지 1. 배운 내용 무한 스크롤 구현 firestore에서 데이터 정렬해서 가져오기 firestore의 복합 쿼리 사용해보기 firebase의 realtime database 사용해보기 2. 새로 알게 된 내용 1) 무한 스크롤 동작 원리 - 게시글을 한번에 여러개를 가져오면 페이지 로드 속도가 엄청 나빠진다. 한 화며냐에 담기는 게시글은 그렇게 많지 않기 때문에 한 화면에 담기는 게시글 수만 가지고 오고 스크롤이 화면 밑에 닿았을 때 다음 게시글을 불러오면 된다. - 무한 스크롤 컴포넌트를 만들고, 게시글 컴포넌트들, 다음 목록을 불러올 함수, 파이어스토어에서 불러오는 중 여부 판별자, 다음글 여부 판별자를 넘겨준다. - 그전에 게시글을 가져올 때, 어디까지 가져왓는지, 다음엔 뭐부터 가져올지 페이징 정보.. 더보기 [리액트 심화반] 3주차 개발일지 1. 배운 내용 파이어스토어로 데이터 관리하기 파이어베이스의 스토리지 서비스를 이용하여 이미지 업로드하기 파일 업로드 전 이미지 미리보기 구현 잦은 이벤트 처리 기법 2. 새로 알게 된 내용 1) 파이어스토어 연동하기 - firebase.js에서 파이어스토어 추가 import "firebase/firestore"; ... const firestore = firebase.firestore(); ... export{auth, apiKey, firestore}; - 파이어스토어에서 데이터 가져오기 import { firestore } from "../../shared/firebase"; ... const getPostFB = () => { return function (dispatch, getState, { .. 더보기 이전 1 2 다음
