Today I learned

Today I learn로그인 할 때 백엔드에서 token을 받아오는데 이를 localStorage에 저장한다.이유는 token을 가지고 있는 사용자는회원인 사용자로 분류가 되고 더이상 로그인을 해줄 필요없어야 하기때문에 로컬에 저장해준다.login form이 제출되면

Today I learnsearch창에 어떤 데이터를 입력했을때 그에 맞는 정보들을 filtering 해서 가져온다. 내가 입력한 값을 queryString으로 APIKEY에 포함시켜 전송하는 방법.처음에는 mock데이터로만 작업을 해봤어서 당연히 전체 가져온다음 어떤

Today I learnicon 을 클릭하면 특정 API 주소에 request하고 전달받은 값에 따라 icon의 색을 다르게 설정했다.하지만 이 데이터 요청 또한 토큰 여부를 꼭 확인하기 때문에 로그인을 한 사용자만 아이콘 클릭시 데이터를 전송할 수 있다.( 토큰 있는

Today I learn disappear exact component in routes 전체 페이지에서 전역으로 사용하는 Footer component 를 평가페이지에서는 안보이게 설정을 했어야했다. 첫번째로 생각한 방법은 object 로 속성값을 만들어서 Ro

Today I learn바로 아래글에서 Switch 를 사용하지않고 div 안에 묶어서 route를 render할때 조건을 줘서 성공하는 방법을 사용했는데 생각해보니 엄청 간단하게 구현이 될거같은 느낌적인 느낌이 들었다. 그리고 성공했다 무척이나 간단하게 ...애초에

Today I learn이번 프로젝트에서 가장 공을 들인 탭과 무한스크롤이다.이번 게시글에서는 tab에 관련해서 작성하려고 한다.우선 탭은 3개가 있고 state에 저장해두고 컴포넌트화 해서 map을 돌렸다.전체 데이터를 서버에서 받아온다음 탭에 알맞게 보여주는게 아닌

Today I learn저번 게시글에 이어 infinity scroll에 대해 작성해보려고 한다.내가 원했던 무한스크롤은 특정 박스 안에서 계속 무한스크롤이 생겨야하고 전체 위치는 100vh로 고정이 되어있어야했다. 그래서 스크롤을 해도 전체 높이는 변하지않으면서 박스

Today I learned fetch 요청을 할때 추가적으로 함수를 실행시키고 싶을때 .then().then() 이런식으로 사용해야만 하는줄알았다. 사실 then을 계속 사용했을때 지저분한 느낌이 들었다. 알아낸 방법은 .then()안에서 return 문을 활용하는

Today I learned 📌 배열 구조분해 할당 객체 구조분해 할당을 할때는 const { value } = e.target 이런식으로 사용해줬다. 하지만 배열을 어떻게 사용해야하는지 몰랐는데 이번기회에 배울 수 있었다.배열구조분해 할당을 하지 않았을 때 코드 이

Today I learned지금까지 styled-components를 사용할때 미처 생각지도 못했던 부분에 대해서 써보려고 한다.개인적으로 나는 한 파일에서 component와 styled-component를 같이 사용하는 것을 선호하지않는다. 이유는 파일이 너무 길어

Today I learnedTIL 조건부 렌더링 이제껏 조건부 렌더링을 진짜 렌더링이 되는 부분에만 사용해줬다. 다시말해 컴포넌트 단위로 조건부 렌더링을 사용해줬다.예를들어이런식으로 밖에 사용을 안했는데 만약 재사용성을 고려해서 컴포넌트를 만들었다면 속성값만 바꿔주면

Today I learned(별도의 코드가 없습니다)이번에 숨고라는 고수매칭 사이트를 모티브로한 프로젝트를 진행했다.나는 고객이 원하는 유형을 선택하는 survey page를 맡아서 진행했는데 당연히 저 빨간색 박스를 position absolute 를 줘서 저렇게 배

Today I learnedTIL. survey form

Today I learned이번에는 stepper line에 대해서 작성하려고 한다.이 부분은 내가 꽤 시행착오를 많이 겪은 부분이라서 꼭 기억해두고 싶어서 블로글에 글을 쓴다.survey의 질문이 바뀔때마다 currentQ 라는 임의의 숫자가 1씩 증감하게끔 선언해주

Today I learned이번 프로젝트때는 꼭 animation적인 요소를 넣어보자고 혼자 다짐했는데 다행이 성공했다! 여기저기 찾아보며 했는데 너무 만족스럽다.물론,, 안어울리는 감이 없지않아 있지만 다음에 좀 더 신경써봐야겠다.전체적으로 흐름은 크기가 다른 div

Today I learned✏️ CRM을 만들때 어떤 식으로 개발을 진행 할 것 인가?이번에 사수분과 기획회의를 하면서 이 두가지를 말씀하셨다.이런 단어를 처음 들어보기도 하지만 말로 들었을 때 어느정도 감이 왔다. 누가 리드를 해서 진행 하는가에 대해 여쭤보셨고..

Today I learned아토믹 디자인이란?Atom(원자) 라는 이름에서 알 수 있듯이 아주 작게 컴포넌트로 쪼개고 쪼개서 개발하는 것을 말한다.atom(원자) -> molecules(분자) -> organism(유기체) 이렇게 3단계로 component 를 구성하고

Today I learned✏️docker를 왜 사용하는가?이번 프로젝트를 하면서 docker에 도전했다.사실 사용하면 뭐가 좋은지 잘 모른상태에서 시작했기때문에 뭐가 좋을까에대해 궁금했다.정확히는 프론트엔드 개발자에게 어떤 이점이 있는건가에 대해 궁금했다.그래서 찾아

Today I learned이번프로젝트에서 github 대신 gitlab을 사용하고있다.왜 깃랩을 사용하지? 어떤 이점이 있지? 라는 궁금증때문에 찾아봤다.처음에는 깃헙은 디렉토리가 공유가 되고 깃랩은 비공유가 가능하다는 점이라고 생각했다.최근에 깃헙이 마이크로소프트에

promise 에 대해 어렴풋이 알고 fetch 라는 문법을 사용했고 더 나아가 async await , axois 까지 사용했다. async await 를 사용하면서 사용방법 보다는 근본적으로 어떻게 작동을 하는지 알아야겠다는 생각을 했다.우선 자바스크립트는 동기식(

항상 fetch 만 사용하다가 이번에는 async await 를 사용해봤다.promise 와 then 을 쉽게 만들어주는 ES8 문법이다.우선 async 선언 방법은 function 앞에 써주거나 arrow function앞에 사용해주면 된다.원래대로라면 함수안에 코드

아무것도 모르고 그냥 fetch만 주구장창 했었던 적이있었다.작동하니까! response message 에서 SUCCESS 가 떴으니까! 이런마음으로 로그인과 회원가입을 했었다. 그러면서 매번 프로젝트를 할때마다 회원가입 로그인을 얼른 끝내고 다른 멋진 기능들을 구현하

아토믹 디자인을 처음 접했을때는 그래 다 쪼개야해 원자, 분자단위로 다 쪼개야돼이런 생각으로 접근을 했었다. 아토믹 디자인을 하다보니 나중에는 이게 아토믹이 맞나..? 라는 생각이 들었다. 예를들어 ATOMS, MOLECULES는 잘 쪼갰는데 ORGANISM부분이 굉장

DATA TYPE에 대한 이해코어자바스크립트를 읽고.. 데이터 타입에는 기본적으로 2가지가있다. 기본형(원시형) : Boolean, Number, String, null, undefined, symbol참조형 : 객체, 배열, 함수, 날짜, 정규표현식등 데이터를 복제를

데이터 타입의 종류불변값, 가변값얕은복사, 깊은복사null, undefined의 차이기본형(원시형) : Boolean, Number, String, null, undefined, symbol참조형 : 객체, 배열, 함수, 날짜, 정규표현식등값이 변하지 않는다. 상수 =

실행컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악 할 수 있는 개념이다. 우선 자바스크립트는 싱글스레드 언어이다. 자바스크립트 엔진이 코드를 읽어 내려가면서 실행해야할 함수를 발견한다면 컨텍스트

This 란?함수를 호출할 때 생기는 바라보고 있는 객체를 말한다. (가장이해하기 쉬운방법이 이게 아닌가...)this 는 총 4가지의 각각 다른 뜻? 바라보고있는 곳이 있다.window 그냥 this 를 사용하거나 함수 안에서 this를 사용하면 window 를 가르

회사 프로젝트 중 게시물이 작성된지 얼만큼 시간이 지났는지,또 게시물이 없어지기까지 due date 가 얼마나 남았는지를 계산했다.

예를들어 아래와 같은 Array 가 있다고 가정해보자 이 tagsArr 중 세번째 요소의 select 의 false 를 true 로 바꿔주고 싶다면?convertSelectedTag 라는 함수를 하나 만들어서 그 인자로 각 요소를 넣어준다. convertSelected

나의 목적 요약 : 한 콜렉션안에 documents 와 내가 가진 array 를 비교해서 없는 요소는 새로운 doc 을 생성하고 있는 요소는 doc.count 를 +1 해준다. 과정(문제점) : firestore 에서 transaction 을 사용기로 마음먹고 다양하게