회고 썸네일형 리스트형 [노드 기초반] 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, { .. 더보기 [리액트 심화반] 2주차 개발일지 1. 배운 내용 토큰 기반 인증 파이어베이스 이용해서 로그인 기능 구현 로그인 유지 구현 로그인 권한을 체크하는 컴포넌트 구현 2. 새로 알게 된 내용 1) Promise - 자바스크립트가 비동기처리를 하기 위한 패턴 중 하나로 콜백이 있는데 전통적인 콜백 패턴은 일명 콜백 헬이라고 불리는 중첩 문제가 발생하기 쉽다. 중첩 문제가 발생하면 오류가 발생했을 때도 캐치하기 어렵다. - 콜백 헬이 발생하는 이유는 비동기 처리 함수 내에 또 다른 비동기 작업이 필요할 경우에 중첩이 생기면서 콜백 헬이 발생한다. - Promise : 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴. - Promise 생성 방법 // 프라미스 객체를 만듭니다. // 인자로는 (resolve, reject) => {} 이.. 더보기 [리액트 심화반] 1주차 개발일지 1. 배운 내용 자바스크립트 문법 (변수와 상수, 자료형, 객체, 함수, 콜백함수, 프로토타입) 기획서 쪼개기 메인페이지 만들기 최소단위 컴포넌트 만들기 2. 새로 알게 된 내용 1) TDZ (Temporal Dead Zone, 일시적 사각지대) let, const는 호이스팅이 된다. 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 액세스를 못할 뿐. 2) const로 선언된 객체는 수정될 수 있다. 객체에 대한 참조를 변경하는 것이 불가능. 3) 콜백 함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수 4) 프로토타입 : 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어있다. 좀 더 정확히는 부모 객체의 원형. (.. 더보기 [앱개발 종합반] 5주차 개발일지 1. 배운 내용 구글 광고(애드몹) 적용하기 배포하기 2. 새로 알게 된 내용 1) 애드몹에서 가입을 하고 앱 생성 후 광고 설정해주는 방법 - 아직 게시하지 않은 앱에 광고를 붙이기 때문에 게시하지 않았습니다에 체크해주고 앱을 생성한다. - 안드로이드와 ios 모두 만들어주어야 한다. - app.json의 내용에 아래 코드를 추가해준다. "ios": { "supportsTablet": true, "buildNumber": "1.0.0", "bundleIdentifier": "com.myhoneytip.gun", "config": { "googleMobileAdsAppId": "" } }, "android": { "package": "com.myhoneytip.gun", "versionCode": 1, .. 더보기 이전 1 2 3 4 5 다음