공부하는 김쨔뿌

이번주 프로젝트는 참..다사다난했다. 적당할거라 생각했던 스코프가 예상 외의 이유로 커지고 팀원들은 갈리고.. 큰 문제 하나가 있었지만 적지 않을것.. 공개적인 곳에서 적을만한 문제가 아니라서리. 그래도 완성했다 우리의 프로젝트!! KREAM 이라는 사이트를 클론코딩 했다. 원본사이트 https://kream.co.kr/ KREAM | 한정판 거래의 FLEX 한정판을 거래하는 가장 확실한 방법 kream.co.kr 클론코딩한 사이트 http://kream-clone-coding.s3-website.ap-northeast-2.amazonaws.com/ KREAM clone coding 항해 99 3기 KREAM 클론코딩 kream-clone-coding.s3-website.ap-northeast-2.ama..

달력보면 5주차 회고같은데 4주차 회고라고 써야하나 허허 이번주는 팀 프로젝트! 백엔드와의 첫 협업^^ 우리팀의 작업물에 대해..간단히 정리해보자. Calendar type Diary http://calendar-type-diary.shop/ React App calendar-type-diary.shop 프론트엔드 깃허브 원격 저장소 https://github.com/jjubbu/Calendar-Diary-Front GitHub - jjubbu/Calendar-Diary-Front: 항해99 3기 4주차 미니프로젝트 항해99 3기 4주차 미니프로젝트. Contribute to jjubbu/Calendar-Diary-Front development by creating an account on GitHub..

벌써 4주차라고..??? 와... 이번 주차에는 수요일까지 리액트 심화반 강의를 듣고 목-금 매운맛 과제 빡세게 하다가 제출, 토요일에는 과제 개선! 오늘은..좀 쉬었다 ㅎㅎ..ㅋㅋ.. 깃허브 https://github.com/jjubbu/React-Calendar GitHub - jjubbu/React-Calendar: 항해 99 3기 3주차 과제 (매운맛) - 달력 만들기 항해 99 3기 3주차 과제 (매운맛) - 달력 만들기. Contribute to jjubbu/React-Calendar development by creating an account on GitHub. github.com 사이트 https://seona-react-calendar.web.app/ React App seona-rea..

기본 질문 ▶ s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요? 리액트는 SPA(Single Page Application), 즉 한개의 페이지로 이루어져있어서 S3서버에서는 index.html 파일 하나만 있다고 인식한다. 이를 해결하기 위해서 s3설정시 에러가 났을때의 문서를 index.html로 해놓으면 오류가 발생해도 index.html로 돌아가 제대로 동작한다. ▶ 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요? 리액트는 한개의 페이지로 이루어져있어 index.html 자체에 넣을 수 있는 OG태그는 사용에 한정이 있으나, react-helmet 을 이용하면 각 페..

lodash - 자바스크릅트 유틸리티 라이브러리 - 배열관리, 모듈화 성능향향 등등 - debounce와 throttle을 제공 debounce & throttle - 둘 다 콜백을 줄여주기위한 용도 debounce 이벤트 요청을 받으면 잠시 기다렸다가 요청을 실행하는데, 실행전에 새로운 요청이 들어오면 이전 요청을 수행하지않고 또 기다렸다가 가장 마지막에 들어온 요청을 수행한다. throttle 일정시간동안 요청 들어온 이벤트의 가장 마지막인 이벤트를 수행한다. useCallback(x, [y]); - 함수를 저장한다. - 컴포넌트가 리랜더링 되어도 일정 조건 아래에 함수가 초기화되지 않는다. - x 는 저장할 함수, y가 변하면 함수가 재선언된다. 예시) > 1000은 밀리초를 의미하며 저 부분으로 ..

필기를 했는데..난장판이라 정리. 전체적인 팀 프로젝트 관련 Q. 컴포넌트 쪼갤때 어떻게 하셨는지? A. 처음부터 너무 작게(엘리먼트 단위로) 쪼개면 어렵다. 중복이 되는 것들 위주로 쪼개기. Q. 프론트엔드끼리의 분업은 어떻게 했는지? A. 서로 다른 파일에서 기능별로 분업. 같은 파일로 작업하면 이후 에러사항이 생길 수 있다! 명세서를 작성해서 분업하면 편리! Q. (질문이 뭐였는지 까먹은..) A. 1주차~지금까지 나중에 무슨 기능을 추가해봐야겠다! 싶은 것들은 미니프로젝트때 추가해서 활용해보기! redux-toolkit 같은 라이브러리를 사용해보면 좋다! 실전 프로젝트 관련 Q. 디자인은 디자이너만 건드는건지? 아니면 이쪽에서 의견을 줄 수 있나요? A. 의견을 처음부터 주면 좋다. 디자이너의 시..

Firebase Authentication 사용하는 법 프로젝트에 파이어베이스 패키지 설치 yarn add firebase 파이어베이스 콘솔 > 프로젝트 선택 or 생성 > 좌측 메뉴에서 Authentication 클릭 > 시작하기 클릭 원하는 로그인 방법 선택 문서 보고 필요한 코드 가져가기 https://firebase.google.com/docs/auth/web/start?authuser=0 웹사이트에서 Firebase 인증 시작하기 Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 Firebase 인증을 사용하면 사용자가 이메일 주소 firebase.google.com 문서를 보면 비밀번호 기반..

https://jjyabbu.tistory.com/35 11_[항해99 3주차 React 심화]_2021.09.30 오늘의 공부 자바스크립트 https://jjyabbu.tistory.com/34 스파르타 코딩클럽 React 리액트 심화반 1주차 정리 - Javascript 이 글에서 사용하는 모든 A, B, C..a,b,c...는 원하는 값을 넣어서 사용할 수 있다... jjyabbu.tistory.com https://jjyabbu.tistory.com/38 12_[항해99 3주차 React 심화]_2021.10.02 어제+오늘의 공부 어제 자다가 밤에 깨서 공부하다가 새벽을 보내버려서 TIL을 못썼기에..합치기. 리액트 심화반 강의 2-13 까지 개념정리 https://jjyabbu.tistory...

자바스크립트는 싱글쓰레드로 동작하는 언어 > 일꾼이 하나라 작업을 하나씩 수행함. 단, 실행환경의 도움을 받기에 비동기적인 동시실행이 가능함. 비동기 작업시 > 콜스텍에 setTimeout 같은게 쌓임 > 콜스텍이 Web API 에게 처리 위임 > Web API가 콜백큐에 콜백함수 넘겨줌 > 콜백큐는 이벤트 루프를 통해서 콜스텍에 콜백함수를 넘겨줌 > 콜스텍이 넘겨받은 콜백함수 처리 콜백 자바스크립트가 비동기처리를 하기위한 패턴 중 하나. *콜백함수가 중첩될수록 관리가 힘들어진다. Promise 비동기 연산이 종료된 이후 결과를 알기위해 사용하는 객체 const promise = new Promise((resolve, reject)=>{ if ( ){ resove("성공") }else{ reject("실..

이 글에서 사용하는 모든 A, B, C..a,b,c...는 원하는 값을 넣어서 사용할 수 있다. 정해진 것이 아님. Javascript 변수/상수 변수 (let) : 변하는 값 = 재할당이 가능한 값 상수 (const) : 변하지 않는 값 = 재할당이 불가능한 값 *const로 선언한 객체는 일부 재할당 가능 (자세한건 아래의 객체형 참고.) *var 은 오류 찾기가 힘들어서 es6부터는 보통 let과 const를 사용한다..! 선언하기 let a = 1; 혹은 let a; 선언후 할당하기 a = 1; 가능 불가능 let a = 1; a = 2; let a = 1; let a = 2; scope : 변수가 어디까지 살아있는지의 범위 block-scope..