본문 바로가기

React24

리액트 프로젝트 만드는 순서 + 다른 zip 파일 덮어쓰기 -리액트 프로젝트 생성 순서: 1. yarn create react-app 프젝이름 2. cd 프젝이름 해서 위치 맞춰주고 3. yarn start -다른 zip 파일 덮어 쓰기 프로젝트 새로 생성하기 zip 파일 내, src 폴더와 새로 생성한 프로젝트의 src 폴더 교체 package.json 교체 프로젝트 루트 경로에서 yarn install로 필요한 패키지 설치하기 이때 파이어베이스에서 키값 안받아오면 아무것도 안뜨니까 키값 받고 파이어베이스 api 복사하는 곳에 복붙해서 실행하면 잘 뜸! > 2021. 4. 9.
클론코딩 첫 주 - 프로그래머스 사이트 코딩테스트 연습 | 프로그래머스 (programmers.co.kr) 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 이 페이지하나를 우선 하기로 했고 나는 이 부분을 하기로 했다. 금,토,일 이번주에 무조건 이걸 만들고 싶다!!! 1. 네비게이션 바 (검정색) 만들기 필요한 기능: -로고 넣기 (왼쪽 정렬) -탑 프로그래머스~ 프로그래밍 강의 가운데 정렬 -계정만들기~기업회원 (오른쪽 정렬) -커서 갖다 대면 글씨 bold -'코딩테스트 연습' 클릭하면 하얀색 바 나오기 -반응형으로 만들면 좋음 진행 과정: 검정 바는 반응형으로 만든 것 같은데 안에 로고랑 글씨 새기는게 막힘. 일단 로고는 계속 안들어가서 글씨부터 새기려는데 그 글씨도 그냥 글씨가 아니라 .. 2021. 4. 5.
파이어베이스 배포 안될 때 리액 5주차 배포 강의 들었는데도 에러가 떴음 그래서 yarn build랑 firebase deploy 계속 했는데도 안됨! 그러다가 우연히 본 하나의 댓글.. https://hanghae99.slack.com/archives/C01R58K4KLN/p1617038343277500 Slack hanghae99.slack.com 방금 호스팅 관련 에러를 고친 과정을 공유해드리겠습니다.4주차 강의까지 모두 완주를 하고 호스팅 강의를 들으면서 firebase 호스팅을 진행 하는데 조금 건성으로 들어서 최초 firebase init을 입력하고 나오는 세팅을 할 때 모두 엔터만 쳐서 세팅을 끝낸 것이 원인이었습니다. 그 이유 때문에 호스팅을 위한 public디렉토리가 디폴트인 public폴더로 잡히게 되고 그 안에.. 2021. 4. 2.
리액트 심화 4주차 정리 [수업 목표] 무한 스크롤 기능을 만들어본다. 쿼리로 데이터를 정렬해서 가져와본다. 파이어스토어의 복합 쿼리를 사용해본다. 파이어베이스의 실시간 데이터베이스를 사용해본다. [4주차에서 배우는 것] - 무한 스크롤 직접 만들기 - 댓글 작성, 목록 보기 - 실시간으로 알림 받기 (feat. realtime database) 일단 내 게시글 최근 순서대로 보이게 만들어주자! 그럴려면 '쿼리'를 사용 1) redux/post.js 에서 getPostFB 함수로 간다. 2) 파이어베이스 콘솔 들어온 후 참고 firebase.google.com/docs/firestore/query-data/queries?authuser=0 Cloud Firestore에서 단순 쿼리 및 복합 쿼리 실행 | Firebase Clou.. 2021. 4. 1.
리액트 심화 3주차 정리 [수업 목표] 파이어스토어로 데이터를 관리한다. 파이어베이스의 스토리지 서비스를 사용하여 이미지 업로드 기능을 만든다. 파일 업로드 전 이미지 미리보기를 하려면 어떻게 하는 지 알아본다. 잦은 이벤트 처리 기법에 대해 알아본다. Debounce와 Throttle 이벤트가 엄청 많이 일어나면? 우리가 감사합니다를 검색 할 때, ㄱ, ㅏ, ㅁ, ㅅ, ㅏ 하나하나 입력할 때마다 검색을 새로 하면(=검색 api를 호출한다고 해봅시다!), 연관 검색어 같은 걸 빨리 바꿔줄 수 있어서 좋죠. 그런데 감사합니다를 빨리 검색한다고 생각해보세요. 1초도 안되는 시간에 이미 감사합까지 쳤다면, ㄱ,ㅏ,ㅁ,..., ㅎ,ㅏ,ㅂ까지 엄청나게 많이 검색을 해야해요. 😢 → 이럴 땐 특정 시간마다 1번씩, 혹은 키보드 입력을 멈췄.. 2021. 3. 30.
리액트 심화 2주차 정리 [수업 목표]토큰에 대해 알아본다.파이어베이스를 사용해서 로그인 기능을 구현해본다.로그인을 유지하는 방법에 대해 알아본다.로그인 권한을 체크하는 컴포넌트를 만들어본다. Promise 비동기: 작업 하나 요청하고 나는 다른거 해. 그러다 요청해놓은게 결과를 주면 다른거 하는거. ex) 파이어베이스, 외부 api 쓰는 것: 비동기 작업 자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 오잉?🤢 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (WebAPI(dom, ajax, setTi.. 2021. 3. 29.