비동기 처리의 중요성 시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음 Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면 Data를 받을때 까지 기다리며 다음 코드들도 기다리게 됨 Promise의 문제 점 체이닝(.then .then .then ...)을 계속하다 보면 코드의 가독성이 떨어짐 Async / Await 비동기 처리방식인 콜백 함수와 프로미스(promise)의 단점을 보완 비동기 처리 패턴 중 가장 최근에 나온 문법 프로미스를 간결하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API Async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환 됨 Async / Await 사용 방법 function 앞에 async 키워드 Pro..

결과 저장한 데이터를 수정하고 삭제할 수 있도록 만들었다. Firebase DB에서 “실시간”으로 업데이트하기 때문에 바로 변경됨 CRUD의 기능이 완성되었다. 아이디에 고유 id 값과 DB의 id 값을 비교하여 자신의 데이터만 불러온다. CSS 내용 우선은 배치와 아이콘만 적용해 주었다. [Times.css] .times--container { width: 500px; display: grid; grid-template-columns: 400px 100px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); margin-bottom: 10px; padding: 10px 0px; font-size: 18px; } .times--container input { width: 3..

결과 FireBase의 Authentication (인증) 기능을 이용하여 로그인 창을 구현하였다. Google 아이디와 Github 아이디로 로그인 가능하도록 설정했다. SetTimer.js 내용이 너무 길어져 Modal창 부분을 따로 components로 분리했다. 오류 SetTimer.js를 분할하는 과정에서 생긴 오류 갑자기 사이트에 렉이 걸리기 시작했고, console.log()로 출력해보니 끊임없이 랜더링 되고 있었다. 생각 1. 분할하는 과정에서 props를 setDbTime={setDbTime} setState로 설정해주어서 그렇다고 생각함 → 검색해본 결과 이렇게 사용해도 상관없음, 따로 만들어서 실행해보니 이상 없음 2. 랜더링 관련 문제이니 useEffect() Hook과 관련 있을 ..

자료구조 자료(Data)의 집합 Data를 저장하고, 관리하기 위해 사용하는 구조 자료구조의 목적 데이터를 효율적으로 저장 및 관리하여 메모리를 효율적으로 사용하기 위함 자료구조의 사용은 메모리의 용량을 절약해주고, 실행 시간을 단축시켜줌 자료구조 종류 선형 구조 (Linear data Structure) 데이터를 일렬로 저장하는 방식 리스트 (List) 스택 (Stack) 큐 (Queue) 데크 (deque) 비선형 구조 (Non-linear data Structure) 데이터를 나란히 저장하지 않는 구조 그래프 (Graphs) 트리 (Trees) 리스트 (List) 단순 연결 리스트 원형 연결 리스트 이중 연결 리스트 스택 (Stack) 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 LIFO (Last ..

CSR (Client Side Rendering) vs SSR (Server Side Rendering) 랜더링(Rendering - 화면에 데이터를 뿌려주는 행위)을 하는 주최에 따라 구분된다. CSR (Client Side Rendering) 클라이언트에서 렌더링이 일어남 CSR 동작 1. 유저(Client)가 서버(Server)에 요청을 보냄 2. HTML 파일과 JS를 서버에서 전송 3. 브라우저에서 HTML 파일과 JS 다운 4. 브라우저에서 프레임워크 실행 (TTV / TTI) TTV (Time To View- 사용자가 볼 수 있음) TTI (Time To Interact - 사용자가 클릭 등의 인터렉션 가능) CSR 장점 1. 컴포넌트 정의 및 재사용에 용이 2. Blinking (깜빡임) ..

결과 Firebase를 이용하여 타이머의 현재시간과 메모를 저장하고, 불러와서 타이머 밑에 출력해주고 있다. Firebase Firebase에 시간, 메모를 저장해서 불러와주었다. 우선은 타이머 시간과, 적은 내용, 작성된 시간을 저장해주고 있다. Firebase (파이어베이스)란 무엇인가? [용어 정리] Firebase (파이어베이스)란 무엇인가? Firebase 란 Android, iOS, 웹, C++, Unity에서 앱을 빌드하고 출시하는 데 도움이 되는 자세한 설명서와 플랫폼 간 SDK(Software Development Kit, 소프트웨어 개발 키트)를 제공합니다. [공식 홈페이지] < 정리.. shin1303.tistory.com [ Create ] - 코드 길이가 길어서 해당 부분만 작성하..