팀 프로젝트를 끝내고 받은 질문에서 프론트 부분에 해당하는 부분과 그에 대한 내 생각과 답변을 간단하게 정리했습니다.A : 우선 깃헙 페이지와 넷리파이 그리고 버셀 등.. 많은 선택지가 있었는데최종적으로는 넷리파이를 선택하게 되었습니다.우선 가장 중요했던 부분인 편의성

리액트와 리덕스를 사용해 상태를 관리하다 보면 서버의 상태 또한 관리를 해줘야 할 경우가 생기는데리덕스 덕분에 전역적으로 상태를 관리할 수 있게 되었지만 서버의 데이터를 리덕스를 통해서 관리하다보면 클라이언트 데이터와 서버의 데이터가 공존하게 되는 경우가 생겼다.이 경

모든 페이지에서 리액트 쿼리를 사용하기 위해서 최상단(App.js)에서 QueryClientProvider 로 앱을 감싸준다.쿼리 인스턴스를 생성한다. const queryClient = new QueryClient();생성한 인스턴스를 넘겨준다. client={que

리액트의 상태 관리 관련 많은 라이브러리가 있지만 리덕스가 가장 많이 사용되고 있습니다.물론 리덕스는 리액트가 없어도 사용할 수 있고 리액트도 리덕스 없이 Context API를 통해서 글로벌 상태 관리를 충분히 할 수 있습니다.따라서 리덕스를 사용한다면 내 "애플리케

리액트 생명주기

필자는 css 라이브러리 등을 사용하지 않고 pure css로 디자인 하는 것을 좋아하는데, 가끔 생각한대로 동작하지 않을 때가 있다 대표적으로 display 속성이 그러한데 기본적인건 이미 다 알고 있다고 생각하지만 확실하게 알고 가기 위해 기본중의 기본인 CSS에서 매번 사용하는 display의 대표 속성 3가지 inline, block, inline-...

먼저 React hook form의 사용방법에 대해서 익히기 위해서 기본적인 구조를 살펴봅니다.useForm hook에서 가장 기본적으로 사용하게 될 함수들register 함수를 위와 같은 형태로 추가하고submit 이벤트를 핸들링 하기 위해 만들어준 onSubmit

훅을 사용하다보면 useEffect을 자주 사용하게 된다. 이때 useEffect의 실행 시점에 대해서 제대로 알고 넘어가지 않으면 예상치 못하게 코드가 동작할 수 있기에 정리하고 넘어가려한다.

기존에 useState 사용하던 방식도 물론 방법이 어렵다거나 하진 않았지만 input 값이 많아질 수록 계속해서 생겨나는 useState와 그걸 받아주기 위한 onChange들이 마음에 들지 않았다이것들을 해결하기 위한 useForm을 도입해서 useState를 사용

하나의 깃헙 그리고 로컬 폴더에서 클라이언트와 서버를 같은 공간에 두지 않고 서버용 깃헙, 서버용 로컬 폴더 / 클라이언트용 깃헙, 클라이언트용 로컬 폴더 따로 작업하기 때문에 react를 사용한 클라이언트 개발 환경 설정을 해줍니다.yarn create react-a

HTTP - HyperText Transfer ProtocolHTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다.HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다.클라이언트-서버 프로토콜이란

RESTful API에 대해 설명해주세요.RESTful API는 HTTP 프로토콜을 기반으로하는 웹 서비스 아키텍처입니다.자원, 메소드, 메시지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다.또한, RESTful API는 표준 HTTP 메소드(GET, PO

팀 프로젝트로 아주 간단한 웹 사이트를 구현하며 느낀 경험을 담습니다.팀으로 프로그래밍을 한다는 것, 다시 말해 협업을 한다는 것작게는 프론트와 백 개발자만으로 혹은 기획, 디자인, 개발자, DB등 혼자가 아닌, 여러 사람과 협업을 한다는 건 어쩌면 혼자 작업하는 것보

서버에 API 요청을 보내기 위한 대표적인 2가지 방법ES6부터 모던 브라우저에 내장되어 있는 JavaScript 라이브러리패키지 매니저를 통해 설치하여 사용할 수 있는 서드파티 라이브러리로Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트로 이

변수와 호이스팅var, let, const에 대한 내용을 정리했지만 마음에 안들어서 다시 정리함JS에서 변수 혹은 상수를 만들 때 사용하는 사용하는 키워드를 비교변수를 선언할 때 사용 var와 let상수를 선언할 때 사용 const변수를 선언할 때 사용하는 키워드 va

프론트엔드에서 백엔드 서버로 요청을 보낼 때 CORS 에러가 발생하는걸 흔하게 볼 수 있습니다. 이러한 CORS 에러가 발생하는 이유와 에러 해결을 위한 방법 그리고 SOP도 같이 알아보겠습니다. Origin / 출처 SOP / Same-Origin Polic

클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’.- 출처: MDN바로 본론으로 넘어가자면 클로저는 스코프의 연장 개념으로 볼 수 있는데클로저(closure)는 내부 함수가 외부 함수의 맥락(contex

js 원시/참조 타입원시 타입(숫자, 문자열, 불리언...등)은 값 그대로 저장/할당되고 복사하며 값에 의한 전달 혹은 값에 의한 복사라고 합니다.

JS에서 데이터 타입을 크게 2가지로 구분할 수 있습니다.단순한 데이터로 모든 원시 값은 변경이 불가능한번 생성된 원시 값은 읽기 전용으로 변경할 수 없습니다.원시 값을 변수에 할당하면 변수에 실제 값이 저장됩니다.NumberStringBooleanNullUndefin

리액트 디렉토리 절대 경로 세팅하는 방법root경로에 jsconfig.json 파일 생성하고src 하위 경로는 전부 절대 경로로 사용할 수 있다.