Today, What I learned? Axios 라이브러리를 알게 되었다. 이전에도 넌지시 들어는 봤지만 이번 기회로 제대로 접하게 되었다는 말이 더 맞겠다. Axios를 알고나니 fetch와 어떤 차이가 있길래? Axios가 성능이 더 좋은가?? 같은 것들이 궁금해져서 한번 정리해보려 한다. Axios 공식문서에서는 'Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다.' 라고 소개를 하고 있다. 즉 Promise를 기반으로 HTTP를 이용해서 서버와 비동기로 통신하는 라이브러리이다. 아래와 같은 키워드로 설치할 수 있다. npm에서 사용할 경우 $ npm install axios yarn에서 사용할 경우 $ yarn add axios 공식 문서는 이쪽에서 확..

Today, What I learned? 전체적인 과제 리뷰를 듣고, 랜덤 하게 뽑힌 다른 분들의 결과물과 코드를 보다 보니 내 코드에서 고치고 싶은 부분들이 생겼다! 안 그래도 제출하고 뭔가... 부족한 이 느낌..🤔 같은 생각이 들었는데 역시 갈길이 멀다!.. 일단 우선적으로 리팩토링한 부분들을 정리해본다. TodoList에 뿌려주는 불필요한 props 제거 왜 생각하지 못했을까 싶은 부분!.. 어차피 리덕스로 상태관리를 하고 있고 리듀서로부터 todos 라는 동일한 데이터를 가져와서 뿌려주는데, 굳이 props로 넘겨줄 필요가 없었다. TodoList 컴포넌트로 useSelector 훅을 옮겨서 바로 데이터를 렌더링 할 수 있도록 변경했다. 반복되는 label, input 컴포넌트화 투두 입력 부분..

두 번째 투두 리스트 react-router-dom, styled-components와 redux에 대해 좀 더 공부한 후에 기초 투두 리스트를 업그레이드해서 다시 한번 만들어보는 시간을 가졌다. 투두 리스트를 만들며 UI/UX 적으로나, 기술적으로 고민했던 부분들과 깨달은 점.. 같은 것들을 회고해보려 한다. 완성된 투두리스트를 배포한 링크는 아래! https://todolist-redux-theta.vercel.app/ React App todolist-redux-theta.vercel.app UI/UX 지난번에 만들 때는 꽤 자유분방하게 만들어봤으니 이번에는 요구되는 틀을 유지하되 사용자의 편의를 생각해서 레이아웃을 짜보았다. 투두 하단부의 버튼은 우선순위를 따졌을 때, 유저 입장에서는 '완료'가 ..

Today, What I learned? redux와 styled-components, react-router-dom을 이용해서 좀 더 업그레이드된 투두 리스트를 만드는 중!.. 이전보다 컴포넌트를 좀 더 세분화 하다보니 버튼 컴포넌트도 분리하게 되었다. 문제는 버튼 컴포넌트에 전달되는 여러 함수들을 어떻게 실행시킬 것이냐!.. 였는데... 리액트에서 onClick 이벤트에 매개변수가 있는 함수를 어떻게 넘겨줄 것인지를 알게 된 과정을 정리해본다. 기존의 코드 type에 따라서 props로 받아온 다른 함수들을 실행시키도록 하고 싶었다. 저기까진 좋았는데, 기능이 추가됨에 따라 타입이 추가되다 보니 삼항 연산자로는 버거운 상황이 발생.. 계속 이렇게? 줄줄이 소세지처럼? 간다고? 이렇게 쓰는 것은 삼항 ..

리액트로 투두 리스트 만들기 useState와 useRef 훅 만을 이용해서 투두 리스트를 만들었다. 배포된 주소는 아래. https://todolist-phi-rouge.vercel.app/ 다른 훅은 이용하지 않았기 때문에 새로고침을 했을 때 유지가 된다거나.. 이런 부분은 안되지만! 한동안 바닐라 자바스크립트만 하다가 리액트로 다시 돌아오니 State란 녀석이 새롭게 다가와서 투두 리스트를 만들며 좀 헤맨 부분을 정리해보려 한다. 투두 객체에 id값 넣어주기 투두마다 각각의 아이디를 달아주기 위해서 여러 방법이 있지만, useRef 훅을 이용해보았다. useRef() useRef는 current라는 속성을 가지고 있는 객체를 반환한다. 이때 인자를 갖고 있다면, 이 값을 초기값으로 current에 ..

Today, What I learned? 어느덧 프로젝트가 중후반 정도 왔다. 😇 나의 담당 기능을 얼추 마무리 한 날!... 오늘은 파이어베이스의 DB에서 데이터를 집계해주는 함수에 대해서 정리해보려 한다. 삽질을 꽤 많이 하기도 함 ㅎ (2시간가량..) getCountFromServer getCountFromServer 라는 파이어베이스 API가 있다. 이 메서드는 스냅샷을 찍어서 데이터의 개수를 가져올 수 있는 함수이고, 현재 백엔드 서버에서 직접적인 응답을 통해서만 동작하는 함수다. 아래와 같은 방식으로 구동한다. const coll = collection(db, "cities"); const query_ = query(coll, where('state', '==', 'CA')); const sn..

Today, What I learned? 내 기능 구현도 하고 팀원들 에러도 봐주다보니 살살 녹는 하루... 🫠🫠🫠 프로젝트를 진행하며 파이어베이스에서 실시간으로 DB를 반영이 필요한 기능이 있었다. 오늘은 이 부분에 대해서 정리해보려고 한다! 파이어베이스에서 실시간으로 DB 반영하기 onSnapShot() 이라는 메서드를 이용한다. 이 메서드는 문서 스냅샷을 즉시 생성하고, 내용이 변경될 때마다 다시 호출되어 문서 스냅샷을 업데이트한다. 자세한 내용은 아래 파이어베이스 문서에서 확인해볼 수 있다. https://firebase.google.com/docs/firestore/query-data/listen Cloud Firestore로 실시간 업데이트 받기 | Firebase Firebase Summit..

Today, What I learned? 바닐라 JS로 SPA를 구현하는 프로젝트 진행 중!.. 담당 페이지를 마크업 하고, 버튼을 클릭했을 때 이벤트 일어나는 것을 SPA 방식으로 어떻게 구현하는가.. 🤔 에 대해서 좀 헤맸던 지라 오늘은 이것에 대해 정리해보려 한다. Cannot read properties of null (reading 'addEventListner') 오늘 만난 에러. 이 전에도 한 번은 만난 적이 있던 것 같은 녀석.. 일단 저 에러는 이런 이유로 발생한다. html이 로드되기 전에 script를 먼저 불러왔다. 아직 html이 로드되기 전이기 때문에 addEventListener를 부여할 DOM을 찾지 못했다. 고로 null 값이 뜬다. 이 경우는 보통 script 태그를 ht..

Today, What I learned? 본격적으로 프로젝트가 시작된 첫날.. 😂 기획과 와이어프레임을 잘 잡고~ 프로세스와 스레드에 대한 강의를 들었다. 쉽지 않은 개념인데 나름대로 풀어서 정리해본다. 프로세스? 운영체제로부터 할당받은 작업의 단위를 말한다. 이 각각의 작업들은 운영체제로부터 시스템 자원을 할당받는데, 자원이라는 것은 CPU 시간과 실행에 필요한 메모리 영역이다! 쉽게 말하면 프로세스는 실행되고 있는 하나의 프로그램이다. 아래와 같이 윈도우의 작업 관리자나 맥의 활성 상태 보기에서 실행되고 있는 많은 프로세스들을 볼 수 있다. 프로세스 주소공간 각각의 메모리를 할당받은 프로세스는 메모리를 관리하기 위한 프로세스 주소 공간을 갖는다. 프로세스 주소 공간은 이렇게 구성되어 있다. Code ..

Today, What I learned? 프로젝트 시작을 앞두고 파이어베이스 특강을 들었다..! 파이어베이스에서 제공하는 많은 기능 중에서 몇 가지에 대해 정리해보려 한다. 그 몇 가지는 바로 Authentication, FireStore, Storage 다!.. 왜 이것만 다루냐면 일단 당장 쓸 것들이기 때문 ㅎ Authentication 이 서비스는 파이어베이스에서 제공하는 회원가입과 로그인을 위한 인증 서비스다. 아래와 같이 다양한 방법들을 추가해서 인증할 수 있다. 이 인증 서비스를 이용해서 회원가입, 로그인뿐만 아니라 프로필 관리까지도 가능하다. authService.currentUser 라는 객체에 다양한 정보들이 담겨있기 때문이다!.. 프로젝트 때 주구장창 써먹는 객체이지 않을까 싶다. Fi..