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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Today I learnedTIL. survey form

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

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

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

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