본문 바로가기

programming study/항해99 커리큘럼

 (82)
[항해99 1기] [Chapter5] 미니프로젝트 (1) (2021.4.9) 미니 프로젝트에 대한 일지 1. 주제 선정 아이스브레이킹 후 프로젝트 주제에 대한 회의 진행 참고할 만한 기존의 서비스나 필요한 기능들을 말해보기 채팅을 메인 컨텐츠로하는 웹 애플리케이션으로 정하기 스파르타코딩의 상담 채팅앱 아임웹 관리자와만 채팅을 할 수 있어서 제한적 사용자 간의 채팅을 할 수 있는 것이 좋다. 알림 기능까지 자소설 닷컴 사용자가 로그인을 하면 채팅방을 개설 들어가서 대화를 할 수 있도록 함 클럽하우스 누구나 자유롭게 음성 채팅을 할 수 있는 것을 참조하자 카테고리 별로 채팅방을 만들어 놓기 무한스크롤 회원가입, 프로필, 로그인 소셜 로그인(카카오, 네이버) JWT 토큰 닉네임이 보이도록 하자 웹소켓 소켓통신 + http 실시간으로 통신 할 수 있다. Redis DB 사용 빠르나 안정..
[항해99 1기] [Chapter4] 클론코딩 (3) (2021.4.5) 클론 코딩 프로젝트에 대한 일지 1. 회의 내용 할 것 책 정보 조회시 오래된순, 좋아요순, 별점순으로 조회하는 기능 만들기 드롭박스 페이지네이션 하기 API 설계 정하기 좋아요 취소와 좋아요는 메소드로 구분 북아이디 숫자 1부터 시작 더보기 가져온 데이터를 덜 보여주다가 버튼을 누르면 더 보여주는 형식 로그잇 필요한 것? 리뷰 등록, 삭제, 좋아요, 좋아요 취소 리뷰기능 리뷰 한 번 작성시 막기 하트 겟으로 먼저 조회하기 2. 튜터 멘토링 중간 점검으로 받은 멘토링 내용 정리 CSS로 데이터 정렬하여 보여줄 것 flex 응용하여라 for문은 되도록 지양 디테일 페이지 열 때 해당하는 사용자 정보를 불러오기하여라 프롭스로 책정보를 넘기는건 좋지 않다. 댓글 로그인 사용자만 쓸 수 있도록 하기 disabl..
[항해99 1기] [Chapter4] 클론코딩 (2) (2021.4.3) 클론 코딩 프로젝트에 대한 일지 1. 회의 내용 백엔드 크롤링 완료 데이터 400여개 크롤링할 예정 책소개 , 타이틀 ,출간일, 좋아요, 북아이디, 사용자 아이디 , 책 이미지 url 스타는 넣지 않았다. 좋아요기능 넣을 것 북 아이디, 사용자 아이디 필요 카운트 0,과 1을 오가며 체크를 표시 0이면 좋아요를 안 한 상태 코멘트 별점 주기 총 별점을 전체 카운트로 나누어 별점을 계산할 것 프론트엔드 전체적인 뷰 완료 메인페이지, 로그인, 회원가입 페이지 메인페이지의 캐로셀은 좋은 라이브러리를 구했음 다만, 어려워보임 최우선 작업을 하고 난 이후 시간이 남으면 할것 통신방식에대해 공부할 필요가 있음 2. 특강 기초를 소화하는 방향으로 하여라 CRUD, 로그인 연습하는 기간 로그인 구현도 간소화 하기 세션..
[항해99 1기] [Chapter4] 클론코딩 (1) (2021.4.2) 클론 코딩 프로젝트에 대한 일지 1. 클론 서비스 정하기 리디 셀렉트 로그인 회원가입 책 전체조회 인기목록 조회 책 리뷰 인스타그램 무한스크롤 검색 댓글 좋아요 포스팅 메가 박스 영화 메인 카테고리 전체 영화 조회 좋아요 무한스크롤 예매 리디북스 셀렉트로 결정! 2. API 구상하기 항해 99 클론코딩 API(8조) 3. 백/프론트 Repository 만들기 https://github.com/greedysiru/hanghae99_books https://github.com/seongbinko/hanghae99_books 4. 튜터 질의 응답 정리 질문 사항 CSS 어떻게? SCSS or styled-components 리덕스 백엔드가 있는데, 리덕스가 필요한가? 원페이지로? 리액트로 원페이지를 만들어 스..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (6) (2021.3.31) Firebase Authentication 파이어베이스에서 지원하는 인증 기능 공식 문서 1. 설치 yarn add firebase 2. auth 설정 firebase.js에서 아래와같이 설정 import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { // 파이어베이스의 인증 정보 }; firebase.initializeApp(firebaseConfig); const auth = firebase.auth(); export { auth }; Reference 스파르타코딩클럽 리액트 심화반
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (5) (2021.3.30) 리덕스 1. 설치하기 리덕스, 리덕스 모듈 내에서 경로 이동을 할 수 있는 히스토리 ,라우터와 히스토리를 역어줄 모듈 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 불변성 관리를 용이하게 할 수 있는 패키지 yarn add immer redux-actions 2. 모듈 만들기 예시코드 // 패키지 임포트 import { createAction, handleActions } from "redux-actions"; import { produce } from "immer"; // Action const LOG_IN = "LOG_IN"; const LOG_OUT = "LOG_OUT"; c..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (4) (2021.3.29) 1. 토큰 기반 인증 이전의 방식은 사용자의 로그인 상태를 서버가 전부 가지고 있었다. 서버의 세션에 사용자 정보를 넣고 로그인 여부를 기록, 저장 서버에 부하가 크고 관리의 여러움 최근은 토큰 기반 인증 방법을 많이 사용 1.1 OAuth2.0 외부서비스의 인증 및 권한부여를 관리하는 프레임워크 Open Authentication, Open Authorization 동작 방식 클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_token을 준다. 클라이언트는 access_token을 이용하여 API 요청을 할 수 있다. 서버는 API 요청을 받고, access_toke을 가지고 권한 여부를 확인 후 결과를 클라이언트에게 보낸다. 유저가 구글 로그인을 하는 상황 구글(Resource Ser..
[항해99 1기] [Chapter3-2] 주특기 심화 - 리액트 심화반 (3) (2021.3.28) Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어이다. 메인 쓰레드와 콜스택 하나 코어 엔진과 실행환경(런타임)의 도움을 받아 비동기 작업을 동시에 할 수 있다. WebAPI(dom, ajax, setTimeout), Task Queue, Event Loop 1. 콜백 자바스크립트가 비동기 처리를 하기 위한 패턴 중 하나 그러나, 콜백 헬로 불리는 중첩 문제를 일으킬 수 있다. 콜백 헬 비동기 처리 시에는 실행 완료를 기다리지 않고 다음 작업을 실행 비동기 처리 함수 내에서 처리 결과를 반환하는 것으로 원하는 동작을 하지 않을 경우 콜백 함수를 사용한다. 콜백 함수 내에서 또 다른 비동기 작업이 필요한 경우 중첩이 생기게 된다. 2. Promise 비동기 연산이 종료된 이후 결과를 알기 위해서 사..

티스토리툴바