본문 바로가기

programming study

(889)
[항해99 1기] [Chapter5] 미니프로젝트 (2) (2021.4.10) 미니 프로젝트에 대한 일지 1. 우선순위 목표 세우기(프론트엔드) 뷰 만들기 회원가입 로그인 헤더 채팅방 프레임과 색상을 입히는 단계까지 진행하고 기능 확인이 가능할 선까지 패키지 기본 세팅 웹 페이지 제작에 필요한 기본적인 패키지들 정하기 history같이 최신 버전에서 오류가 있는 패키지들 주의할 것! router redux react-redux redux-thunk logger redux devtools history router url 정하기 Notfound 만들기 2. 오늘 진행한 것 컨셉 색상 정하기 및 로고 제작 완료 로고와 중심 테마 색상 기본 로고 테마 색상 색상표 3. 프로젝트 간이 회의 회원가입, 로그인 시스템 일반 회원가입, 소셜 회원가입(카카오) 일반 회원가입은 username이 ..
[항해99 1기] [Chapter5] 미니프로젝트 (1) (2021.4.9) 미니 프로젝트에 대한 일지 1. 주제 선정 아이스브레이킹 후 프로젝트 주제에 대한 회의 진행 참고할 만한 기존의 서비스나 필요한 기능들을 말해보기 채팅을 메인 컨텐츠로하는 웹 애플리케이션으로 정하기 스파르타코딩의 상담 채팅앱 아임웹 관리자와만 채팅을 할 수 있어서 제한적 사용자 간의 채팅을 할 수 있는 것이 좋다. 알림 기능까지 자소설 닷컴 사용자가 로그인을 하면 채팅방을 개설 들어가서 대화를 할 수 있도록 함 클럽하우스 누구나 자유롭게 음성 채팅을 할 수 있는 것을 참조하자 카테고리 별로 채팅방을 만들어 놓기 무한스크롤 회원가입, 프로필, 로그인 소셜 로그인(카카오, 네이버) JWT 토큰 닉네임이 보이도록 하자 웹소켓 소켓통신 + http 실시간으로 통신 할 수 있다. Redis DB 사용 빠르나 안정..
엘리먼트 렌더링 엘리먼트 렌더링 화면의 가장 작은 단위 화면에 표시할 내용을 기술 일반 객체 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 컴포넌트와 엘리먼트는 다른 것이다. const element = hello world DOM에 엘리먼트 렌더링하기 루트 DOM 노드 안에 들어가는 모든 엘리먼트를 React DOM에서 관리 일반적으로 React 애플리케이션은 하나의 루트 DOM으로 이루어짐 많은 수의 독립된 DOM 루트 노드가 있을 수 있다. 렌더링 된 엘리먼트 업데이트 하기 React 엘리먼트는 불변 객체 엘리먼트 생성 후 해당 엘리먼트의 자식이나 속성을 변경 불가 특정 시점의 UI를 보여준다. UI를 업데이트 하는 유일한 방법 새로운 엘리먼트를 생성한다. ReactDOM.render()로 ..
[항해99 1기] [Chapter4] 클론코딩 (3) (2021.4.5) 클론 코딩 프로젝트에 대한 일지 1. 회의 내용 할 것 책 정보 조회시 오래된순, 좋아요순, 별점순으로 조회하는 기능 만들기 드롭박스 페이지네이션 하기 API 설계 정하기 좋아요 취소와 좋아요는 메소드로 구분 북아이디 숫자 1부터 시작 더보기 가져온 데이터를 덜 보여주다가 버튼을 누르면 더 보여주는 형식 로그잇 필요한 것? 리뷰 등록, 삭제, 좋아요, 좋아요 취소 리뷰기능 리뷰 한 번 작성시 막기 하트 겟으로 먼저 조회하기 2. 튜터 멘토링 중간 점검으로 받은 멘토링 내용 정리 CSS로 데이터 정렬하여 보여줄 것 flex 응용하여라 for문은 되도록 지양 디테일 페이지 열 때 해당하는 사용자 정보를 불러오기하여라 프롭스로 책정보를 넘기는건 좋지 않다. 댓글 로그인 사용자만 쓸 수 있도록 하기 disabl..
JSX JSX JavaScript를 확장한 문법 React element를 생성 문자열도 HTML도 아니다. 태그 문법을 사용하나 다른 점들이 있다. 1. JSX에 표현식 포함하기 const name = 'greedy siru'; const element = Hello, ReactDOM.render( element, document.getElementById('root') ) 중괄호 안에 JavaScript 표현식을 넣을 수 있다. 수식, 함수 등 사용할 수 있다. 2. JSX는 표현식이다 컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수 호출이되고 JavaScript 객체로 인식된다. if, for에 사용할 수 있다. 변수에 할당, 인자, 함수로부터 반환이 가능하다. 3. JSX 속성 정의 con..
[항해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 스파르타코딩클럽 리액트 심화반