ㄱ 부터 ㅎ 까지

공부를 시작하며... 이직하면서 짧은 기간동안 빠르게 리엑트를 공부하고 프로젝트에 투입되었던 경험이 있었습니다. 리엑트 첫 프로젝트이며, 혼자서 초기 구축부터 진행을 해야하는 상황이였습니다. 그렇다보니 리엑트 친화적인 개발과 성능 최적화를 염두하며 진행하지 못하였습니다. 그때의 저의 시작이 최선이였다면, 발전을 위해서 리엑트 성능 최적화를 목적에 두고 공부를 진행하려 합니다. 이번 글에서는 React의 함수형 컴포넌트를 통한 성능 최적화에 대한 내용을 다루고 있습니다. React의 유용한 경고 리엑트는 기본적으로 개발하기 편한 유용한 경고가 많이 포함되어 있습니다. 하지만 이 경고들은 리엑트가 더 무겁고 느리게 만들기 때문에 앱을 배포할 때에는 프로덕션 버전을 사용해야합니다. 기본적으로 create-re..

const setExample1Selector = selector({ key: "Selector/SetExample", get: ({ get }) => { const getExample1State = get(example1State); return getExample1State; }, set: ({ get, set }, newValue) => { // get을 통해 다른 atom이나 selector로 부터 값을 찾을 수 있습니다. // set을 통해 값을 가져올 수 있는데, // 첫 번째 매개변수에는 Recoil 상태를, 두 번째 매개변수는 설정할 새로운 값입니다. set(example1State, newValue); }, }); Recoil 패키지 설치하기 // npm $npm install recoi..

공부 레퍼런스 우아한 테크 세미나 영상을 통해 React Query , React Query를 이용한 상태관리에 대해서 공부를 진행했습니다. 세미나에서 다룬 내용을 공부하였으며 세미나 발표 내용 그대로 정리하였습니다. 세미나 영상 바로가기 : https://youtu.be/MArE6Hy371c 공부의 목적은 React Query의 사용법 보다는 사용하는 이유에 대해서 초점이 맞춰져 있습니다. React Query 를 알아보기 앞서서 우선 상태에 대해서 언급합니다. 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있습니다. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터를 말합니다. -> 쉽게말해서 관리해야하는 데이터들의 상태를 말합니다. 상태관리는? 프로덕트가..

Next js 테스트 환경 설정하기 Next js 에서 테스트환경을 만들기 위한 방법중 하나로 Jest와 React Testing-Library 를 사용합니다. Jest와 React Testing Library는 단위 테스트(Unit Testing) 에서 함께 자주 사용된다고 합니다. 이번 공부의 목적은 테스트 환경을 설정하는데 있어 구체적인 사항은 따로 공부를 진행하고 기초적인 세팅만 다루려고 합니다. 패키지 설치하기 ( Jest , Testing Library ) 따로 설치하기 $ npm install --save-dev @testing-library/jest-dom $ npm install --save-dev @testing-library/react $ npm install --save-dev ba..

함수에서 타입확인 이전에 작성했던 파일에서 함수에 마우스를 올리면 해당 함수에서 받는 매개변수와 리턴되는 값의 타입 정보를 확인할 수 있습니다. 간단하게 살펴보자면 any 는 아무 타입의 값을 다 받을 수 있다는 의미입니다. 또한 void (빈공간) 는 해당 함수의 return 되는 값이 없다는 뜻이고요 . 타입 지정 sayHi 함수에서 받는 매개변수들의 타입을 지정해 주고 싶습니다. 이름이 숫자를, 나이가 문자열을 등등.... 엉뚱한 값을 넘기게 되면 안되니까 말이죠. string 문자열 , number 숫자 다음과 같이 " 변수 : 타입 " 으로 타입을 지정해주면 됩니다. name은 이름이니 문자열로, age는 나이니 숫자로, gender은 "male" 혹은 "female" 문자열로 받을거라 stri..

섬세한 Typescript 타입스크립트는 선언을 할때마다 어떤 종류의 변수와 데이터인지 설정을 해줘야합니다. 해당 변수가 number인지 string인지 number형 배열인지 object, object의 값은 어떻게 설정되어 있는지, function의 매개변수값의 타입은 뭔지, 리턴되는 값의 타입은 뭔지 등등 신경써야할 내용이 많습니다. 기본 Typescript 규칙 다음과 같은 코드가 있습니다. name, age, gender 변수를 sayHi 함수로 넘기고 실행시켜 콘솔에 찍게 하는 로직입니다. // index.ts const name = "테스트", age = 24, gender = "male"; const sayHi = (name, age, gender) => { console.log(`Hell..