728x90 ⛵ 항해 중267 1주차 - 프로젝트 생성, 최소 단위 컴포넌트 만들기, 숙제 [프로젝트 생성] 1. CRA로 프로젝트 생성 - nvm 설치 - node install과 use [node version] nvm install [node version] nvm use [node version] - yarn 설치 npm install -g yarn - create-react-app 설치 yarn add global create-react-app - CRA로 프로젝트 생성 yarn create react-app image-community 2. 크롬 익스텐션 설치하기 Redux devTools : 리덕스를 사용할 때, 리덕스의 액션에 따른 데이터 변화를 편히 볼 수 있게 해줘요! React developer Tools : 리액트를 디버깅하기 편하게 해줍니다. 3. VSCode 확장 프로.. 2021. 11. 29. 1주차 - JavaScript Re-Start, Prototype 1. 변수와 상수 더보기 👉 [변수 생성의 3단계] 선언 → 초기화 → 할당 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!) 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!) 할당: undefined로 초기화된 변수에 실제 값을 할당 1) var : var는 가급적 사용하지 않는 게 좋습니다. - var로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 가집니다. - var는 선언과 초기화를 한번에 합니다. - 재선언이 가능합니다. - 선언하기 전에도 사용 할 수 있습니다. // var는 이런 식의 사용도 가능합니다. 괴상하죠! // var name은 선언! name = "perl"은 할당! fun.. 2021. 11. 29. 5주차 개인 과제 기능 목록 11월 29일 1주차 강의 듣고 들은 내용 활용해서 과제 수행했다. 11월 30일 2주차 강의 듣고, 로그인/회원가입 구현 + 로그인 유지 + 로그아웃을 구현했다. 12월 1일 3주차 강의 듣기 전에 어제 구현한 거에서 추가 할 건 없는 지 살펴보고 회원가입 시 이메일, 비밀번호를 입력하지 않았을 때 버튼이 비활성화 되도록 만들었다. https://velog.io/@hyunjoong/react-button-%ED%99%9C%EC%84%B1%ED%99%94 TIL #18 react - button 활성화 react는 state를 통해서 초기값을 설정 하며this.setState()를 통해서 state의 값을 변경한다.this.setState() = 비동기 방식westagram 로그인 화면에서 i.. 2021. 11. 29. [WIL] 4주차 → 라이프 사이클, Hook 1) 리액트의 라이프 사이클이란? : 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 입니다. 그래서 각각의 컴포넌트에는 라이프 사이클(생명 주기)라는 것이 있습니다. 컴포넌트의 수명은 페이지에서 렌더딩 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지를 의미합니다. 라이프 사이클은 총 9개가 존재합니다. 크게 세가지 유형으로 나눌 수 있는 데 생성 될 때, 업데이트(수정 될 때), 제거 될 때입니다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 부릅니다. -> 마운트는 DOM이 처음 생성 된 후 웹브라우저 상에 나타나는 것을 의미합니다. -> 업데이터는 4가지 상황에서 발생 됩니다. 1) props가 바뀔 때 2) state가 바뀔 때 3) 부모 컴포넌트가 리렌더링 될 때 4).. 2021. 11. 28. [TIL] 24일차 1) 코딩 애플 강의 수강하기 2) javaScript.info 문서 읽고 정리 3) 프로젝트 주석 달면서 정리 4) 팀원들이랑 코드 리뷰 + 코드 리뷰 하다가 알게 된 사실인데 추가, 수정, 삭제 몇번 안했는 데 일일 할당량이 금방 차던 이유가 // useEffect // 처음 컴포넌트가 생성 되었을 때 fireStore의 데이터를 불러오고 // userInfo(redux)의 데이터가 바뀌면 다시 fireStore에서 데이터를 불러온다. React.useEffect(() => { // async 쓰는 방법도 있음 dispatch(loadDictionaryFB()); }, []) // userInfo 넣으면 무한로딩이 일어나서, 데이터를 너무 잡아먹음 useEffect()에서 []에 userInfo를 넣.. 2021. 11. 27. [TIL] 23일차 1) 팀 과제 마무리 및 제출 2) 기능 마무미 및 개인 과제 배포(firebase hosting) 3) javaScript.info 문서 보고 정리하기 4) 코딩애플 강의 수강 firebase hosting으로 배포한 주소 https://dictionary-a59f3.web.app/ React App dictionary-a59f3.web.app 끝났다 끝났어 2021. 11. 26. 5주차 - Firebase로 배포하기 firebase 호스팅 하기 1) 대시보드에서 호스팅 신청하기 https://firebase.google.com/?gclid=CjwKCAiA4veMBhAMEiwAU4XRr5kTEZ4g_fo2092S4LTj920TDACmLrsuC9pUrYPdd86hDLpE8DP0yBoCf_AQAvD_BwE&gclsrc=aw.ds Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 2) 프로젝트 build 하기 yarn build 3) 프로젝트에 CLI 설치하기 yarn add global firebase-tools 4) firebase에 로그인 하고 init 실행하기 # 웹 브라우저가 열리고 내 구글 계.. 2021. 11. 25. 5주차 - S3 버킷 설정하기, 도메인 연결하기 1. AWS S3 버킷 - S3 버킷이란? 더보기 S3(Simple Storage Service)는 단순 스토리지 서비스예요! 이미지나 파일을 저장할 수 있습니다. html, css, js 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅 할 수도 있어요. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있어요! - 정적 웹 사이트란? 더보기 웹 사이트는 서버 측 스크립트 사용 유무를 기준으로 동적 웹 사이트와 정적 웹 사이트로 나눠볼 수 있어요. (서버 측 스크립트는 PHP, JSP, ASP같은 친구들을 말해요!) 정적 웹 사이트는 html, js, css같이 정적 자원으로만 이루어진 웹 사이트입니다. 🙂 2. S3 버킷 설정하기 - S3 정적 웹 사이트 호스팅 방법 https://doc.. 2021. 11. 25. [TIL] 22일차 1) 수정하기 버튼 눌렀을 때 UpdateWord.js로 이동 2) 수정하면 fireStore에 수정된 데이터 반영 3) 로딩 스피너 구현 하면서 state에 is_loaded 데이터가 필요해서 추가 후 전체 수정 4) 수정 페이지 갔을 때 기존에 입력한 값 defaultValue로 띄우기 5) 삭제하기 버튼 눌렀을 때 confirm으로 확인 6) 전체 CSS 수정 (머테리얼 UI 활용) 7) firebase로 배포하기 8) 전체 단어 보기 / 외운 단어 보기 / 못외운 단어 보기 (+완료하기 버튼) + 추가로 멘토님께 숙제를 받았다. (페이징 처리, 전체 보기 / 외운 단어 보기 / 못외운 단어 보기 (+완료하기 버튼)) 오후 9시 지금 완료하기 버튼 만들고 컴포넌트 분리 해서 각 조건별로 출력 하도록.. 2021. 11. 25. 이전 1 ··· 13 14 15 16 17 18 19 ··· 30 다음 728x90
