Today I Learned

01 깃이 뭐냐깃은 간단히 말해서 파일의 버전을 관리하는 툴 이다. 대학에서든 회사에서든 협업을 하다보면 자료를 수정하거나 삭제하는 '업데이트'를 무조건 하게 되어 있다. 최종 파일에 파이널 표시를 하는 걸 잊는다면, 착각해서 최종 파일을 삭제했다면, 진짜 큰일이다.

팀이 진행하고 있는 프로젝트에 대한 피드백에 '하드코딩'이라는 말이 있었다. 워킹하드나 하드코어 같은 게 생각나서 열심히 하고 있다는 건가 했다. 그런데 좀 싸해서 찾아보니까 '비효율적인 코드 작성' 을 뜻하더라. 조금 더 효율적으로 코드를 짜려면, 짜기 전에 구조를

자기 소개 웹페이지를 완성했다.공부에 도움이 될 거라는 생각으로 각자 같은 목업으로 웹페이지를 만들었고,서로 공유하고 비교, 분석하는 시간을 가졌다.그리고 각 페이지에서 눈에 띄는 기능을 선별해 조립해서 하나의 웹페이지를 만들었다.팀원들이 내 방명록을 마음에 들어해서

오늘 깃으로 Pull Request까지 하는 걸 성공했다. SSH키를 터미널에서 발급하고 깃허브 계정에 연동시키는 것부터 시작했다. 협업을 해야 하는 레포 클론이 도무지 이유를 모르게 안 되서 1~2시간을 허비했는데, 이유는 간단했다. 경로가 잘못되었다는 것. 스테이지

깃으로 협업을 하다 보니 문제가 생겼다. 명명법을 포함해 코드를 짜는 스타일이 다르다보니까 혼자 작업할 때와는 다른 문제들이 생겼다. 다음 프로젝트부터는 기획 단계에서부터 서로 코드 짜는 스타일을 정하면 좋겠다고 생각했다. 이 부분을 공유하니 그런 걸 코드 컨벤션이라고

템플릿 리터럴 (Template Literals)템플릿 리터럴은 문자열을 더 손쉽게 다룰 수 있게 해준다. +를 사용하면 데이터마다 따옴표를 붙여줘야 되서 피곤한데, 템플릿 리터럴을 사용하면 논스톱으로 작성할 수 있어 편하다. 그리고 문자열에 변수나 함수를 가져오기도

파이썬 기초 문법 강의를 들었다. 자바스크립트 문법과 비교하면서 생각해보니 자바스크립트가 좋은 말로 왜 유연한 언어인가 깨닫게 되었다.'use strict';자바스크립트는 프로그래밍 언어치고 유연한 면이 있다. 이것 때문에 발생하는 문제들이 있는데, 이 문제를 피하기

앞으로 협업할 일이 많아, 깃과 깃허브 사용법을 복습 겸 총정리했다.시간 엄청 오래 걸림... 3시간...? 그래도 공부를 확실히 됐다.여기에 정리했음cd, ls, ls-al, mkdir, touch, echo 등 깃 사용에 기본이 되는 것들을 정리했다.input에 저

✏️ 무엇을 배웠나 1. 2. 3. 🥵 무엇이 어려웠나 1. 2. 3. 🔎 더 찾아보고 싶은 것 1. 2. 3. 🏷️ 오늘의 코멘트 > 입력

본격적인 자바스크립트 공부를 위해, 그 동안 배웠던 기초 문법을 복습하고 정리했다. 강의보고 정리한 거긴 하지만, 예시 코드는 전부 내가 다시 짜봤다.정리된 글은 아래에 있고, 이 정도는 안 봐도 알 수 있게 주말 동안 반복해서 쳐봐야지.여기예전에 마케터 일할 때 사서

if...else문을 조건연산자를 이용해 심플하게 만들 수 있다 여기 정리함map() 메소드를 이용하면 배열의 모든 원소에 특정 함수를 적용시킬 수 있다여기 정리함프로그래머스에서 자바스크립트로 문제 8개를 풀었고, 깃허브 레포에 저장해놨다. 다른 사람들의 풀이를 보면서

프로그래머스에서 최빈값 구하기 문제 풀다가 오늘 배운 JS 내용들이다.Array생성자Math.amxfill() 메소드forEach() 메소드indexOf() 메소드lastIndexOf() 메소드sort() 메소드최빈값 문제가 내 선에서 해결이 안 되서, 같은 부트캠프

MPA는 HTML 파일을 서버의 계속 요청하고 뭔가 할 때마다 그걸 받아 와야 되는데 SPA는 처음에 모든 리소스를 다 받아버리고 사용자가 뭔가를 클릭할때마다 보여줘야 되는 거를 다운 받아 놓은 거에서 그냥 꺼내서 보여 주는 거다. SPA 같은 경우에는 사용성이 굉장히

스파르타코딩클럽 내배캠 3주차에 와 있다. 공부할 것이 다양하고 많아서 집중력을 잃으면 놓쳐버릴 것 같다. 조금씩 그런 기분이 들어 계획을 정비했다. 다른 것은 재껴두고 자바스크립트 / 리액트에만 집중하기로 했다. 다른 기술이나 지식은 필요하면 그때그때 공부하기로 한다

유저가 추천하는 동네 카페를 지역별로 나눠서 볼 수 있는 '히든카페'라는 웹을 만들 것이다.팀원들과 피그마를 띄워놓고 화면 레이아웃, 구현할 기능 등을 정하고 SA를 작성했다.각 컴포넌트에 들어갈 데이터들을 정리했다.이번에는 포킹 플로우 방식 말고 깃허브 플로우 방식으

로그인 / 회원가입 / 마이페이지 레이아웃을 구현했다. 로컬에서는 문제가 없었는데, 프로젝트 레파지토리에 PR하고 다시 보니까 다른 CSS 파일에 영향을 받아서 레이아웃이 뭉개져 있었다. 어디서부터 상속받았는지 확인하고 다시 잡았다.벽에 머리 박고 죽고 싶었다. SPA

회원가입 시 자동으로 로그인하고 메인페이로 이동하기구글 계정으로 가입하기 기능정규식을 이용한 로그인 / 회원가입 유효성 검사 기능회원가입 시, 아이디 기억하기 체크박스 감추기 구현정규식은 예제도 많고 문법도 간단하니까 외울 필요 없이 인터넷에서 그때그때 찾아 쓰면 된다

게시글 북마크 기능을 구현하려고 했다. 했지만 하지 못했다. 기능 구현의 큰 흐름은 알겠는데 중간중간 실제로 어떻게 코드를 구성해야 할지 막막한 상황이다. 파이어베이스 디비에서 내가 원하는 데이터를 받아오는 건 됐는데, 북마크를 누르면 북마크 수를 업데이트 하는 게 힘

바닐라 자바스크립트와 파이어베이스를 사용해서 북마크 기능을 구현했다. 수요일 아침부터 목요일 저녁까지 내내 삽질만 하다가 드디어 성공했다. 북마크 기능을 구현하는 과정에서 안 풀리던 문제가 있었다. 파이어베이스 데이터베이스의 문서 ID를 가져와야만 했는데, 그게 생각보

AWS S3와 Route53을 활용해 정적 웹사이트를 만들었다. SPA 방식이라 이걸 활용해서 무관하고, 여기서 얻은 엔드포인트를 가지고 가비아에서 도메인을 등록했다. 뭔가를 출시하는 기분을 느낄 수 있어 좋았다. 가이드를 따라하니까 어려운 건 없었다. 프로젝트가 끝나

오늘 드디어 프로젝트 발표를 했다. 일주일 동안 공을 들인 프로젝트라 발표를 안 한 내가 다 떨렸다. 발표가 끝나고 팀원들이랑 얘기를 하면서 마무리를 했다.일단 오늘은 쉬고 내일부터 다시 열심히 하자.

기억나는 키워드 : 기본형 데이터, 참조형 데이터, 불변객체기억나는 키워드 : VariableEnvironment, LexicalEnvironment, ThisBinding, Hoisting, Redcord, Outer기억나는 키워드 : 함수에서의 This는 windo

DOM / BOM 복습 + 추가학습이벤트 관련 학습크롬 개발자 도구로 디버깅하는 방법childeNodes가 배열인 줄 알고 있는데 유사 배열 객체였다. \- 그래서 Array.from을 썼구나.innerHTML과 textContent의 차이 \- innerHTML

객체참조에 의한 객체 복사Closure객체가 가진 프로퍼티 다루기 \- 점 표기법 \- EX) obj.property \- 대괄호 표기법(프로퍼티 이름에 공백이 있을 때) \- EX) obj\["this is preperty"]메모 : JS에서는 거의 모든

변수의 유효범위와 클로저공부를 하다 보니까 렉시컬 환경과 실행 컨텍스트는 관련되어 있는 것 같다. 같은 내용을 바라보는 관점의 차이인 것 같다는 느낌을 가지고 있고, 명확하게 어떤 관계인지 더 공부하려고 한다.목표 : 주말에 JS 공부한 것 리캡하기.

알고리즘 문제 풀다가 map을 이용해서 접근했는데 결과가 불리언값으로 나오는 걸 보고 공부하게 됨.공통점 : 두 메서드 모두 배열을 반환함차이점 : map은 불리언값을 반환함. filter는 배열값을 반환함.JSX 표현식리액트에서 자바스크립트를 사용하기 위해 나온 문법

코드를 작성하기 전에 구현해야 할 것들을 순서에 맞춰 빠짐없이 정리해보자. 오늘 투두리스트 대충 생각이 가는 대로 코드 짜다가 중간에 빠뜨린 부분이 있다는 걸 깨달았다. 이것저것 검색하고 공부하면서 짠 코드라서 스트레스가 상당했는데 빠뜨린 요소 때문에 코드 구조를 바

기본적으로는 SPA 방식임프로젝트를 처음 생성했을 때 index.html, index.js, app.js가 서로 어떻게 연결되어 있는지 확인해봤다. index.html에 있는 root div를 index.js에서 받아 React DOM으로 전환해주고, 그 안에 App.

배열을 다루는 상황이 꽤나 많아졌다. 배열 까먹은 게 많아서 다시 한 번 연습해봤다. 반복하면 전에는 보이지 않던 게 보이는 경우가 많은 것 같다. 아래는 연습으로 끄적인 코드.생활코딩 2022 프론트엔드 강의에서 리액트 상에서 CRUD가 어떻게 이루어지는지 조금 더

리액트 입문 과제였던 투두리스트 만들기 코딩 설명을 들었다. 코딩 과정을 차근차근 따라갈 수 있었는데 내가 짰던 코드의 흐름과 비교해서 볼 수 있어 좋았다. 코드를 짤 때 전체적인 흐름을 어떻게 만드는 게 좋을지 감이 잡히지 않아서 막막했던 한 부분이 시원해진 느낌이다

구조 분해 할당(Destructuring assignment)은 참조형 데이터를 원시형 데이터가 변수 할당을 하듯이 하게 해주는 문법이다. 물론 객체나 배열에서 데이터를 따로 뽑아 변수 할당을 할 수는 있지만 코드를 길게 쳐야 되고 번거롭다. 구조 분해 할당은 1) 함

컴포넌트에서 디스패치 함수를 통해 액션을 주면 그 액션을 리듀서에서 어떻게 받아 state 관리를 하는지 오늘 해봤다. 역시 실제로 써보는 게 이해가 잘 된다!여러 컴포넌트에서 쓰이는 state를 담으면 된다, 가 맞다. 그런데 그게 직관적으로 잘 보이지 않았다. 그래

리액트와 리덕스를 사용해서 투두리스트를 만들고 있었다내가 원했던 건 TodoListSection.jsx(컴포넌트)에서 할 일 완료 버튼을 누르면 해당 할 일이 완료한 할 일이 있는 영역으로 보내주는 동시에 완료 버튼이 취소 버튼으로 바뀌도록 하고 싶었다.완료 버튼을 누

리액트와 리덕스를 하다보니 자바스크립트 객체와 함수에 대해서 조금 더 상세히 알 필요가 있다고 느꼈다.리액트와 리덕스로 투두리스트를 만들 때 분명 배열인데 데이터 타입이 object로 떠서 당황했다. 위의 그림처럼 JS에서 객체는 배열과 함수 그리고 객체 리터럴로 표현

드디어 처음으로 투두리스트를 완성했다. 물론 거지 같은 UI를 가지고 있으나 기능은 다 되니까. 그걸로 오늘은 만족.오늘 완성한 투두리스트를 리덕스 툴킷으로 부분적으로 리팩토링하려고 했다. store, module은 예제대로 만들어봤는데 컴포넌트에서 할 일 추가할 때

Axios는 서버 통신을 위해 사용하는 패키지다. GET, POST, DELETE, PATCH를 이용해 투두리스트 코드에 적용해봤다. Fetch API와 무슨 차이가 있는지 잘 모르겠다. 내일 그 차이가 무엇인지 확인해보자.리덕스 툴킷에 포함된 미들웨어다.Thunk를

리덕스 리듀서 만들어놓고 action creator를 안 쓰고 그냥 나름대로 필요한 데이터를 보내주고 있었는데, action creator 쓰면 action을 리턴하는 함수를 만들 수 있고 거기 인자로 payload를 넘겨줄 수 있다. action creator 그냥

이번 프로젝트에 완성할 웹 메인에 배너를 넣기로 했다. 시간이 없기 때문에 빠르게 사용할 수 있는 라이브러리가 없나 찾아보니 React Slick이라는 라이브러리가 있어서 사용해봤다. Quick start 문서와 API 문서를 보니까 되게 쉽게 사용할 수 있도록 되어

UI를 구현하는 과정에서 material ui theme이랑 styled-components가 충돌해 화면이 뜨지 않았다. 에러메시지를 읽어보니 styled-components를 임포트하는 라인에서 에러가 나고 있어서 styled가 중복되서 그런줄 모르고 애먼 데서 삽

프로젝트에서 최종적으로 사용할 json-server를 heroku로 배포했다. CLI로 배포하면서 좀 헷갈려서 3번 시도한 끝에 성공했다. heroku 앱이랑 프로젝트가 연결이 안 되서 계속 시도한 것이었는데 알고 보니까 내가 터미널에서 heroku 로그인을 안 한 상

게시물 검색 기능을 구현하는 과정에서 json-server에 유저에 입력한 값으로 쿼리 요청을 해 받아낸 데이터를 다른 페이지에 렌더링해주고 싶었다. 데이터를 어떻게 전달할지 고민한 방법은 아래와 같다.1) props : 부모 자식 관계로 컴포넌트를 묶으면 props를

터치가 가능한 항목을 만들어 주고 싶을 때는 TouchableOpacity를 쓰면 된다. View의 일종인데 onPress 속성 사용이 가능하다. 처음에는 이걸 모르고 View랑 Text를 사용해서 항목들을 만들었는데 속성 추가가 안 되서 왜 이러나 싶었다.너무 바보

문제 상황 : 분명 최상위 태그에 id로 key prop을 줬는데 콘솔 창에 key prop 달라는 메시지가 계속 떴음해결 방법 : 코드 맥락에 따라 다르겠음. 하지만 이번 경우에는 리덕스툴킷 slice에서 state를 가져와서 map을 돌리는 과정에서 코드 상 전혀

프로젝트에서 몇 번 사용했던 useEffect에 관해 스스로 정리를 위해 기록해본다.useEffect는 2개의 인자를 가질 수 있다.함수의존성 배열 (선택)공식 문서에 따르면 useEffect 안에 있는 함수는 '화면 렌더링이 끝난 후에' 실행된다고 나와있다. 의존성배

웹에서는 react-router-dom을 사용했는데, 앱에서는 react-navigation을 사용한다. screen이 page와 비교된다. useNavigation이랑 합쳐진 느낌임. —-이미지 안에 이미지와 텍스트를 겹쳐 넣는 게 어렵다. 오늘 결국 못 했는데, 이

렌더링이 되자마자 실행시켜줘야 할 서버 통신 관련 함수가 3개여서, 각자 useEffect를 썼다. 렌더링이 좀 이상하게 꼬이길래 1개의 useEffect 안에 함수 3개를 넣어줬더니 작동은 했다. 그런데 함수가 늘어나니까 코드도 길어지고 각 함수의 비동기처리가 완료될

React Native에서 ScrollView는 중요한 역할을 해주는데, 이 컴포넌트 안에 데이터 리스트가 많을 수록 리소스를 많이 잡아먹고 성능이 저하되는 문제가 있음. 왜냐하면 당장 화면에 보이지 않는 데이터들도 모두 불러오기 때문임. FlatList는 이 문제를

도서 정보 api를 이용해 도서 리뷰 앱을 만들기로 했다.기획, 와이어프레이밍, 구현할 기능 리스트업 및 api 명세서 작성을 끝냈다. 일정도 잡아놨으니 앞으로 남은 건 코딩뿐...브랜치 명에 &를 넣었더니 터미널에서 자꾸 커맨드 에러가 났다. &를 문자로 인식하지 않

각자 맡은 UI 구현이 거진 완료 되었다. 내가 맡은 리뷰 쪽도 끝!이번 프로젝트에서 Stack과 Tab 이렇게 2가지 네비게이션을 사용했다.내가 상상한 그림은 이렇다.Tab에 있는 BookBox screen에서 useNavigation을 사용해 Stack에 있는 De

git reflog를 입력하면 아래 같은 화면이 나온다.브랜치 변경사항이 기록된 건데 여기서 pull한 직전 상태로 돌아가고 싶다면HEAD@{1}로 돌아가면 된다.글을 올린 사람의 닉네임을 UI에 렌더링하고 싶었다. 회원가입할 때 email, password, nick

파이어베이스에 저장된 리뷰 데이터를 불러오려고 위 코드처럼 쿼리 요청을 하고 onSnapshot을 사용했다. 이렇게 하니까 아래 같은 에러가 떴다.쿼리에 색인이 필요하다는 얘기이고 메시지에 안내된 링크로 가면 색인을 만들 수 있다고 해서 들어가보니까 친절하게도 자동으로

오늘 수정 기능을 끝으로 도서 리뷰 CRUD 구현을 모두 끝냈다. 혼자 CRUD를 다 해보는 게 처음이었고 파이어베이스를 백엔드로 사용해서 알아야 할 게 많았다. 어제 알게 된 함수 사이에서 값을 주고 받을 때 꿀팁(어제자 TIL에 있음)을 기억하니 수정 기능은 생각보

⭐️ 동네북 소개 노션 바로가기위 링크에서 동네북 팀의 깃허브와 프로젝트에 대한 전박전인 설명을 보실 수 있습니다 :)팀내 룰을 정하고 적극적으로 소통하기분위기가 좋으면 결과가 좋은 것 같다. 우리 팀은 서로 적극적으로 소통하려고 노력했고 나는 팀장으로서 관계적인

MDN에 설명되어 있는 것처럼 JS는 동적 언어다. 동적 언어라고 할 때 핵심은 변수의 타입이 특정되지 않고, 모든 타입의 데이터로 할당하고 재할당이 가능하다는 것. 이 사실을 모르더라도 JS를 사용한다면 몸으로 알고 있을 것임.반대로 정적 언어(C, Go, Rust

axios로 get 요청을 하는 getDusty 함수는 네트워크 및 콘솔에서 잘 들어오는 것이 확인되는데,useQuery로 받아오는 data 값이 undefined로 찍혔다.일단 get요청 자체에는 문제가 없으니 의심이 되는 건1\. useQuery를 똑바로 사용하고

TS 설정하자 맞아 나를 반겨주는 문제 10개.일단 문제의 90%를 차지하고 있는 이 에러부터 해결해보자.리액트를 import 해달라는 거 같아서 눈치껏 아래 코드를 넣어줬더니 해결됐다.그런데 리액트는 이제 위 코드를 작성하지 않아도 되는데, 다른 방법이 없나 구글링을

state를 업데이트할 때는 불변성(Immutable)을 지켜줘야 해서 원본이 아니라 스프레드문법을 사용해서 복사본을 사용해야 한다고 알고 있었는데 생각해보니 리듀서를 작성할 때 스프레드문법을 사용한 적이 없다는 걸 깨닫고 왜일까 찾아봤다.위 이미지 상단 코드처럼 하는

공교롭게도 이번 프로젝트에 카카오맵 api를 사용한 아웃소싱 웹을 만들게 되었다.독립서점 빅데이터를 활용해서 독립서점지도를 만들어보려고 한다. 항상 리덕스만 사용해왔는데 이번에는 시간이 좀 널널할 것으로 예상이 되서 리코일로 상태 관리를 해보기로 했다. 좀 하드코어할

fuzzy-search 기능을 구현하기 위해 fuse.js 라이브러리를 사용했다. 앙골리아 같은 라이브러리보다 사용하기 훨씬 쉽고 굳이 앙골리아까지 사용할 필요가 없어서 fuse.js를 선택했다.fuse.js 공식문서공식문서를 보고 프로젝트에 세팅을 했는데 너무 간편해

검색어 + 카테고리 + 주차 가능 여부 + 카페 운영 여부 + 영업 여부를 모두 검색 옵션으로 넣어서 이 모든 조건을 만족하는 결과 값을 받아서 렌더링을 해야 했다.검색어에 따른 검색 결과 렌더링이나 카테고리, 주차 가능 여부 등 각 옵션에 대해서는 필터된 값을 가지고

PC 웹에서 잘 돌아가는 걸 확인하고 배포했는데 모바일(IPhone) 웹으로 들어가보니 내가 만들어 둔 UI가 아니라 좀 바뀌었다.검색 옵션 선택하는 버튼들은 텍스트 색상이 아이폰 고유 색상으로 바뀌었다.검색 버튼에 해당하는 input button 텍스트가 보이지 않는

쟈-스민은 카카오맵 API를 이용한 전국 독립서점 지도입니다.쟈-스민 바로가기(https://jasminebook.vercel.app/](https://jasminebook.vercel.app/)쟈-스민 깃허브 레포이번 프로젝트를 진행하면서 상태 관리

로직을 짤 때 논리 연산자를 사용할 경우에 헷갈려서 자주 찾아봤었다. 보완해줄 필요가 있어서 오늘 다시 한 번 공부했다. 로그인/회원가입 유효검 검사 로직을 짤 때 논리 연산자의 리턴값이 왜 이렇게 나오는지 몰랐었는데 뒤늦게 보완.let과 const로 선언한 변수는 호

next.js 공부하기 전에 추가 공부 겸 리액트 문서를 읽었다.리액트 문서에서 제공하는 튜토리얼을 보며 틱택토 게임을 만들어봤다.리액트의 기본적인 개념을 가지고 진행했기 때문에 난이도는 어렵지 않았지만, 튜토리얼에서 기본 개념들을 활용하는 방식을 볼 수 있었다.컴포넌

지난 프로젝트 쟈스민 발표 이후 여러 개로 나뉘어 있는 상태를 하나로 묶어서 관리하면 좋겠다는 피드백을 받았다. 검색 필터링 옵션인 주차 여부, 카페 여부, 영업 여부를 각각 개별적인 상태로 관리했고, 각각 set함수와 상태 변수가 파생됐다.위 3가지 상태를 하나의 상

next.js 공식 문서에서 제공하는 튜토리얼을 진행했다. 앱을 만들어서 배포하는 과정을 따라했고 가비아에서 도메인을 구매해 연결해뒀다.산의 블로그기존에 작성했던 TIL을 모두 옮겨놨다. 튜토리얼을 하면서 next.js에 대한 일반적인 패턴과 전반적인 감을 익힐 수 있

title: '075 개발공부 2023-02-07 화요일'date: '2023-02-07'프로젝트 SA 작성 및 와이어프레임 만들기와이어프레임오늘 프로젝트를 같이 할 디자이너님이 오셔서 기획 부분을 설명드리고 UX/UI 관련해서 얘기를 나눴다. 일단 확실히 배울 점이

이번 프로젝트는 한 달을 잡고 진행하게 되었다. 디자이너님과의 첫 협업이었는데 디자이너님 개인 사정으로 프로젝트 시작 후 3일 뒤에 본격적으로 대화를 시작하게 됐다.일단 주어진 시간은 변함이 없었기 때문에 미리 프로젝트 세팅을 해두고 디자이너님에게 전달할 와이어프레임

프로젝트가 다소 밋밋해 위와 같이 디벨롭 회의를 했고 기존 기획에서 많이 달라지게 됐다.추가 논의 사항웹의 포커스를 서비스를 모각코 메이트 매칭에 둔다.매칭 기능을 강화한다.호스트가 있고 참가자들이 있다참가자 현황과 모각코 모임의 현황을 파악할 수 있도록 한다실시간 대

오늘 드디어 기획을 마무리 지었다. 기존 사이즈에서 사이즈도 커졌고 핵심 기능의 흐름도 더 매끄러워져서 정돈되었다는 느낌을 준다. 그래도 오늘 끝나서 너무나도 다행스럽다 👾현재 마무리된 기획을 바탕으로 디자이너님이 UI 뽑아주시고 있는 중기획 회의를 하면서 명확해지는

중간 피드백을 통해서 데이터 흐름을 조금 더 명확하게 할 필요가 있다는 걸 깨달았다. 내일 오전에 팀원들과 데이터 흐름을 명확하게 텍스트로 정리하기로 했다. 여러 데이터가 참조되는 기능이 몇 있는데 그 기능들을 수월하게 구현하려면 먼저 데이터가 어디서 나오고 어디로 들

파이어베이스 getAuth.currentUser를 console.log로 찍어보면 안에 displayName과 profileImg가 뜬다.유저 닉네임을 보여줄 용도로 currentUser.displayName을 변수에 넣어 로그를 찍어보면 에러가 뜨게 된다.그래서 유저

파이어스토어에서 데이터를 가져오는 코드를 줄어볼 심산으로 방법을 찾던 중 react-firebase-hook을 발견했다. 파이어베이스 코드를 커스텀훅처럼 줄여서 사용할 수 있게 해주는 라이브러리인데, 파베 코드가 확 줄어드는 효과가 있고 가독성도 좋아서 좋다 싶어 바로

다중 필터링 & 정렬 기능을 구현했다.selectedTech는 배열인데 셀렉터에서 고른 기술 스택이 객체 형태로 들어간다.사용자가 고른 기술이 데이터 안에 있는지 확인하고 사용자가 고른 기술이 있는 데이터만 보여주려고 했다.일단 사용자가 1개만 선택했을 때는 위 코드가

패키지 매니저로 yarn을 쓰고 있는데, 실수로 npm으로 설치한 라이브러리가 섞였다. ( yarn으로 하든 npm으로 하든 서로 호환은 되지만 충돌이 생길 가능성이 있어 한 가지 패키지 매니저만 사용하는 게 보통임)그 후로 pull을 받을 때 종종 yarn.lock

신규 유저일 때 추가 정보를 등록할 수 있는 모달을 띄워줘야 했다.검색해보니까 AdditionalUserInfo를 이용하면 불린값으로 신규 유저 판별이 가능하다고 해서 시도해봤다.결과 : 실패이건 소셜 로그인을 이용할 때만 사용이 가능했다. 이메일로 가입한 경우에는 판

서버 데이터가 필요할 때 각 컴포넌트에서 파이어베이스에 데이터를 요청해서 받아왔는데, 조금 더 효율적으로 그리고 간편하게 다루고 싶었다 .리액트 쿼리로 파이어베이스 데이터를 가져오는 코드를 커스텀훅으로 만들어서 해당 데이터 필요한 곳마다 커스텀훅을 사용해줬더니 코드도

배포할 때까지 정상화되어야 할 부분부터 작업한다배포 후 트러블 슈팅과 추가 기능 개발을 진행한다 ( vercel로 배포는 미리 해놨다 )amplitude를 사용해 유저 피드백을 받는다로그인 안 한 유저를 기준으로 상호작용 예외처리추가로 발견한 에러 수정 \- 모달창을

유저 피드백 받기 계획 수립.evn 환경변수 설정모코챗 추가 기능 개발 착수CRA에서 .evn 파일에 환경변수 세팅해서 api key 감춰놓을 때 유의사항아무리 봐도 환경변수 세팅에 문제가 없는데 api key를 못 불러와서 이거 하나로 삽질을 열심히 했다. 삽자루를

벌써 피드백이 몇 개 도착했는데, 피드백은 날카롭지만 응원 메시지에 진심이 담겨 있어서 힘이 됐다. 내가 만든 서비스에 대한 반응을 직접 살필 수 있다는 게 이렇게 흥분이 될 일일 줄이야.유저가 작성한 메시지와 모코의 답변 메시지는 하나의 배열 안에서 관리한다배열을 하

리액트에서 특정 돔 노드에 접근해야 할 때가 있다, 나의 경우에는 채팅 메시지가 새로 생길 때마다 자동으로 채팅창의 가장 아래 화면을 보여줘야 해서 useRef를 사용했다.useRef를 사용하면 리액트가 평소에는 자동으로 관리해주는 돔에 접근할 수 있고 아래처럼 사용할

이번주 금요일을 마지막으로 모든 프로젝트 작업을 마무리지어야 한다.이번주 할 일은 크게 5가지.이런 스케쥴로 진행할 예정.구글폼으로 받은 유저 피드백을 오늘 정리했다. 예상했던 것보다 개선해야 할 점들이 수두룩한데, 지금 남은 일들을 고려했을 때 전부 개선하지는 못 할

북마크 버튼을 클릭했을 때 그 반응 속도가 늦어져서 서비스 자체가 느리다는 인상을 줌JS 내 prefomance API를 사용해서 확인해본 결과,북마크 업데이트 요청에 대한 응답이 오고 난 뒤에야 UI가 변경되고 있음북마크 업데이트 응답 속도는 약 180ms이었고 늦는

버그는 파도 파도 끝없이 나온다.버그가 버그인 이유도그레이스 호퍼가 '왜 안돼!' 문제를 찾다가 컴퓨터 안에서 나방을 발견해서 그렇다는데...과연, 적절한 네이밍이 아닐 수 없다.웹 로고 이미지를 public 폴더에 넣어놓고 불러와서 사용했는데, 잘 보이다가 가끔 엑박

서비스에서 토스트 메시지를 사용하기 위해 라이브러리를 찾아봤다. 주간 다운로드 수가 1,422,280회라 자료도 꽤 있을 거고 검증된 거라 판단해 사용했다.아래 링크로 들어가면 npm에서 확인할 수 있다.https://www.npmjs.com/package/r

시간복잡도와 공간복잡도는 모두 특정 연산 작업이 얼마나 효율적이냐를 판단할 수 있는 척도로 사용된다. 1) 시간복잡도는 해당 연산이 얼마나 시간이 걸리느냐를 나타내는데, 연산을 완료하기 위해서는 몇 단계의 절차를 밟아야 하는지 그리고 실행 시간은 얼마나 걸리는지를 기준

리액트에서 Props Drilling을 해결할 수 있는 방법 중 하나다. useContext를 사용해 어떤 자식 컴포넌트일지라도 부모 컴포넌트에 있는 데이터를 사용할 수 있다.Props 전달로 해결되지 않는 경우컴포넌트를 추출해 JSX를 children으로 내려줘도 해

1) 자료 구조에서 말하는 배열정의메모리에 빈틈없이 연속적으로 나열되어 있는 자료 구조 \- 전문 용어로 밀집 배열이라고 표현함 \- 지하철 좌석을 한 사람이 여러 자리를 자리한 것과 같음각 요소의 데이터 크기가 같음특징인덱스를 통해 특정 요소에 접근이 빠름

데이터 구조(자료 구조)는 데이터를 어떻게 구성하고 저장하는지 그리고 개별적인 데이터를 어떻게 식별하고 데이터 사이의 관계는 어떤지 보여주는 개념이다. 데이터 구조는 메모리 같은 자원을 효과적으로 관리하기 위해 존재한다.알고리즘은 어떤 문제를 해결하기 위해 밟아야 하는

브라우저는 HTML 파일을 받아 여러 단계를 거쳐 웹페이지를 렌더링한다.서버에서 받은 HTML 파일을 토큰화해서 DOM을, CSS 파일을 분석해 CSSOM을 생성한다. DOM과 CSSOM은 이 단계에서 렌더 트리로 합쳐지며 렌더 트리는 페이지의 최종 레이아웃을 나타내는

호이스팅은 변수 선언문이 코드 맨 위로 끌어 올려진 것처럼 작동하는 자바스크립의 특징을 가리킴.자바스크립트는 순서대로 한 줄씩 실행되는데 me가 어떻게 undefined일까?변수 선언문이 실행되는 건 '런타임'이 아니라 '평가 과정' 단계에 해당하기 때문임. 평과 과정

객체 내 메서드를 사용할 때, 메서드가 같은 객체 내 프로퍼티를 사용할 수 있도록 해주는 키워드다.this는 자신이 속한 객체나 자신이 생성할 인스턴스를 가리킬 수 있게 해주는 자기 참조 변수다. this로 프로퍼티나 메서드를 참조할 수 있다.전역에서 this를 쓰면

require와 import는 파일 또는 모듈을 불러오는 데 사용하는 키워드다. 하지만 require는 node.js에 내장된 Common JS 모듈에 일부이고, import는 ES6에 추가된 모듈 시스템의 일부다.require는 node.js Common JS 모듈의

생성하기불러오기옵션 설정Expires와 Max-Age는 쿠키의 만료 기간을 설정하는 속성이다. 이 속성을 설정하지 않으면 쿠키는 세션 쿠키로 작동한다. 세션 쿠키는 메모리에만 저장되므로 브라우저를 닫으면 쿠키는 사라진다. 일정 기간 유지해야 하는 쿠키라면 반드시 Ex

순수 함수를 활용해 외부 상태 변경을 최소화해서 불변성을 지향하는 프로그래밍 패러다임이다.함수형 프로그래밍이 해결하고자 하는 것은 다음과 같다.조건문과 반복문이 코드를 복잡하게 만드는 것실수로 변수가 변경되어서 오작동하거나 오류가 발생하는 것순수 함수는 다음과 같다.외

시멘틱 태그 (Sementic Tag)는 말 그대로 '뜻이 있는 태그'를 말함. html 관점에서 다시 말하면, 역할과 용도가 정해져 있는 태그라고 할 수 있음.div나 span은 역할과 용도가 딱히 정해져 있지 않아서 범용적으로 사용할 수 있는데 mdn에서는 시멘틱

자바스크립트에서 객체를 복사하는 방법은 2가지다. 얕은 복사와 깊은 복사. 둘 다 복사이기 때문에 원본 객체와 다른 객체가 된다.얕은 복사console.log로 확인해보면, 내용이 같지만 다른 객체라는 것을 확인할 수 있다.그러면 shallow의 프로퍼티를 변경해보자.

이분 탐색 aka 이진 탐색은 정렬된 데이터 내에서 특정 데이터를 찾을 때 선형 탐색보다 효율적인 탐색 방법이다.이분 탐색의 핵심은 분할과 반복이다. 먼저 전체 데이터를 2개로 분할한 다음, 내가 찾는 데이터가 어느 범위에 속하는지 판단한다. 이것을 반복하면서 지속적으

props의 데이터 타입은 객체다. 타입스크립트에서 객체의 타입을 정의할 때 type과 interface를 고려해볼 수 있는데, 가능하다면 interface를 사용하는 게 낫다.why?확장이 가능함 (type은 확장 불가)function 키워드를 사용해서 선언하는 일반

변수는 값을 저장하고 참조할 수 있게 해주는 식별자다. 컴퓨터는 연산 데이터를 메모리에 저장한다. 반대로 그 데이터를 사용하고 싶으면 꺼내서 써야 하는데 메모리 위치를 가리키는 주소는 사람이 읽고 쓰기가 쉽지 않다. 변수는 메모리 주소 대신 사용하는 라벨 같은 것이다.

window.postMessage 메서드는 브라우저의 동일 출처 정책을 지키면서도 서로 다른 origin끼리 안전하게 통신할 수 있게 해준다.부모 컴포넌트와 iframe이 있는 자식 컴포넌트 간에 데이터를 주고 받아야 하는 문제가 있어서 공부하게 됐다.MDN windo

어제 시도했을 때는 실패했다. 자기 전에 문제 무엇이고 문제와 관련된 것들은 무엇이 있고 어떻게 풀어나가면 좋을지 글로 적어놨는데 이게 큰 도움이 됐다. 오늘 다시 시도하면서 글로 써놨던 것을 보면서 따라가니까 길을 잃지 않을 수 있었다.여튼 어떻게 했느냐. 무엇이 문

사용자가 저장한 상태를 로컬 스토리지에 저장해서 브라우저를 껐다 켰을 때 마지막으로 저장한 상태로 렌더링되도록 하기 위해서 useEffect와 로컬 스토리지를 사용했다.여기서 무한 실행 발생.요즘 리액트의 새로운 공식 문서에 트러블슈팅이 잘 정리되어 있어서 useEff

tsconfig.json 파일 내에서 타입 검사 설정을 해줄 수 있다. 타입스크립트 공식문서에 의하면 noImplicitAny와 strictNullChecks가 주요한 옵션이다.noImplicitAny변수의 타입이 암묵적으로 any로 추론되는 기능을 끄거나 켤 수 있음

서비스명 : Better(가제)서비스 내용 : 사용자의 운동 기록과 신체 상태를 추적하고 통계와 현황 대시보드를 제공한다.메인 기능운동 \- 기록 \- 신체 부위 - 종목 / 세트 수 / 세트 별 중량 / 횟수 / 휴식 시간 / 운동 볼륨 / 체감 난이도 \-

next.js는 SSR이나 SSG 같은 pre-rendering이 기본값이다. 서버에서 HTML이 미리 렌더링된 다음에 클라이언트에 전달되는 구조다. 서버에서 받은 초기 HTML은 상호작용이 불가능하다. 웹을 동적으로 만들어주는 건 JS 코드인데 JS 코드는 클라이언트

UI를 변경했다. 모바일 반응형 만들 때 양쪽으로 나뉘어진 박스들을 한 줄로 재정렬해주면 편할 것 같다. 무엇보다 전 디자인보다 훨씬 좋은 것 같다. 아이패드 위젯 디자인을 따왔다.오늘 할 운동을 작성하는 페이지에서 테이블을 활용했다. 운동 종목 종류와 테이블을 use

next.js에서 동적 라우팅을 사용해 url 파라미터를 앱 내부로 가져와야 했다. 공식 문서를 보고 구현해보니 이렇게 됐다.URL : localhost:3000/workout/가슴???문제 : 한글이 이상한 문자로 변환되서 나온다원인 : URL 인코딩이 일어났기 때문

Home/workout/운동부위운동을 하면서 유튜브에서 운동 자세 영상을 많이 찾아보는데 서비스 안에서 간단히 운동 영상을 볼 수 있도록 Youtube API를 사용해 운동 관련 영상을 가져오도록 함.원래는 chart.js를 사용하려고 했으나 recharts가 리액트

prisma를 사용해 postgreSQL 기반 데이터베이스를 만든다Next.js 13 api route를 이용해 데이터베이스에 대한 api end-point를 만들 수 있다firebase만 사용해봐서 다른 방법으로 백엔드를 어떻게 해야할지 혼란스럽다 🥹 흐름이 확실히

원래는 이번 주 내내 PostgreSQL과 Prisma를 이용해서 데이터베이스를 구축하려고 했으나... 일정이 있어 금, 토, 일엔 작업을 할 수 없는 상황이라 supabase로 DB를 구성하기로 했다.supabase는 firebase의 오픈 소스 대체재인데 여러모로

신체 상태 기록 대시보드최근 운동 기록 대시보드운동 배우기 섹션 (Youtube API 이용)supabase 내장된 기능을 사용했는지 그게 JS 기반이라서 서버 컴포넌트에서 안 돌아간 것이었음.깃허브에 next.js + supabase 관련 프로젝트 찾아보니 내장 기능

HTTP는 애플리케이션 계층에서 사용되는 통신 프로토콜한 번 연결하면 한 번만 요청할 수 있어서 요청할 때마다 매번 연결해야 함.단점 : 위 이유로 RTT 증가단점을 보완하기 위해 고완된 방법 \- 이미지 스플리팅 : 여러 스티커가 담긴 종이처럼 한 이미지에 여러 이

title: '124 개발공부 2023-05-25 목요일'date: '2023-05-25'진행 중인 운동 \- 운동 종료 기능 \- DB에서 지금 진행 중인 운동만 가져오기TCP/IP 4계층인터넷에서 컴퓨터들이 통신하는 프로토콜들을 인터넷 프로토콜 스윗트라고 하는데 T