취업하기 전에 JS 프레임워크로는 ReactJS만 주구장창 파왔었는데취업하고나니 Vue를 공부해야 되는 상황이라서아무래도 React가 익숙한 저에게는 React와 같은 기능을 가진 Vue를 비교하면서 공부하려고 작성하는 글입니다.기본적인 npm이나 node, vue설치

이 포스트는 전에 올렸던 React Hooks의 종류 및 개념에 대한 총 정리를 이어서 작성하는 글 입니다.useState를 대체할 수 있는 함수이다.state보다 복잡한 상태관리가 필요한 경우 reducer를 사용할 수 있다.reducer는 이전 상태와 Action을

오늘 면접을 보고왔는데, 기술면접을 보던 중 React Hooks에 대한 질문을 받았는데, 대답을 제대로 하지 못한 부분이 있어서 이를 회고할 겸 모든 React Hooks에 대해 총 정리를 해보려고 한다.Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할

프론트엔드 공부를 하다보면 Virtual Dom이라는 얘기를 많이 들었을 것이다.하지만 Virtual Dom이 뭔지, 어떤 과정으로 브라우저가 렌더링 되는지에 대해서는 모르는 경우가 많기에 이번 글에 정리해보려 한다. 말그대로 실제의 DOM이 아닌 가상의 DOM을 말한

시간복잡도와 공간복잡도란 무엇인가요?시간 복잡도는 특정 알고리즘이 어떤 문제를 해결하는데 걸리는 시간을 의미하고 공간 복잡도는 작성한 프로그램이 얼마나 많은 메모리를 차지 하느냐를 분석하는 방법입니다.공간 복잡도는 대용량 메모리 보편화로 인해 중요도가 떨어진 반면 시간

Promise, async/await를 알기 전에 JS에서 비동기처리가 왜 필요한지에 대해 먼저 알아야 할 필요성이 있다.JS는 동기적인 언어이지만, 서버에 데이터를 요청하는 등 대기시간 긴 작업의 경우 비동기 작업을 한다.위의 코드처럼 데이터를 요청하는 작업 보다 콘

var는 함수레벨의 스코프이고 중복선언이 가능하다.가장 간단한 예시로는 아래의 코드로 설명할 수 있다.var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하고 마지막에 할당된 값이 변수에 저장된다. 위의 코드를 보면 에러없이 각자 다른 출력값을 보여주

이번 프로젝트에서 React-Query를 선택하게 된 이유에서 얘기해볼까 한다. React-Query는 서버의 상태를 다루는 라이브러리이고 mobx와 redux 등은 클라이언트의 상태를 다루는 라이브러리이다. > ## 💥 redux를 사

길고 길었던 실전 프로젝트가 드디어 끝이 났다. 6주동안의 프로젝트를 하면서 백엔드, 디자이너와 협업했는데 많은 것을 느끼고, 또 많은 것을 배웠던 6주였던 것같다. 이번 프로젝트때 redux 대신 react-query를 사용했는데, react-query를 사용하다

이번 실전 프로젝트 기간 중 맡은 부분의 일부가 카카오 로그인 파트였다.저번에 미니프로젝트때 시도했었는데, 3일동안 머리를박았지만 실패해서 솔직히 시도하기 겁이좀 났다.하지만 이번엔 무조건 해야했기에 약 이틀간 머리를 박아서 해결했다..!!저같은 경우에는 Node.js

프로젝트 협업 도중 dev 브랜치의 파일들을 pull 받아온 후npm i 를 했는데, 자꾸 sourcemap warning이 떠서 신경이 쓰여서 찾아 봤는데,package.json 파일에 Debug 부분에위와 같이 GENERATE_SOURCEMAP=false 를 sta

저저번주 부터 실전 프로젝트를 시작했다.우리 조의 주제는 슬랙,노션,지라 등을 참고해 각 사의 장점들만 뽑은 팀 내 일정관리 툴을 만들기로 정했다.주제를 정하는데만 1주일이나 걸려서 시작이 조금 늦어진 감이 있다.내가 맡은부분은 로그인/회원가입 , 캘린더 , 게시판 이

실전 프로젝트에 들어가기 앞서 클론 프로젝트를 1주일간 진행 했다.우리 조는 과거에 서비스 했던 싸이월드를 클론 코딩 하기로 했다.내가 맡은 부분은 다이어리, 다이어리 댓글, 플레이리스트, 프로필 이다.우선 다이어리를 작성할 때 사진이 올라가게 했는데,사진을 서버로 보

프로젝트 회고

node.js 와 브라우저를 위한 Promise 기반 http 클라이언트이다.다시말해 http를 이용해 서버와 통신하기 위해 사용하는 패키지이다.API서버는 FE에서 만드는 json-server를 사용한다.필자는 로컬환경에서 실행할 것 이기에, 프로젝트 내의 3001번

라이프사이클?생명주기를 말하고, 컴포넌트가 렌더링을 준비하는 시점부터, 페이지에서 사라질때(unmount)까지의 사이클을 말한다.라이프사이클에는 9가지 단계가 있는데, 크게는 3가지로 나눈다.Mount : 컴포넌트가 생성되고, 브라우저에 처음 나타났을 때Update :

우리가 redux를 사용하는 이유는 부모컴포넌트에서 자식컴포넌트로 prop를 내려주는 방식으로 state값을 수정하는 것에 대한 불편함이 있어 사용을 하니까, state를 redux로 수정하는 방법에 대해 알아야 한다.counter를 예시를 들어서 store 값을 변경

컴포넌트에서 컴포넌트로 state를 보내기 위해서는 원래 반드시 props로 전달을 해야 하기 때문에, 부모 관계가 되어야 했다.조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모컴포넌트를 거쳐야만 한다. 즉 부모컴포넌트는 해당 값이 필요가 없어도

리액트 컴포넌트가 렌더링 될때마다 특정작업을 수행하도록 설정할 수 있는 Hook함수이다.정리하면, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면, 또는 어떤 컴폰너트갛 ㅘ면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.실행하

기존에 우리가 사용하던 방식함수형 업데이트 방식위와 같이 setState안에 수정할 값이 아닌, 함수를 넣을 수 있다. 그리고 함수의 인자에서는 현재의 state를 가져올 수 있고, {}안에서는 이 값을 변경하는 코드를 작성할 수 있다.두 방식의 차이점을 예제로 들면왜