FrontEnd

[Typescript] 자주 쓰는 문법 정리

1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {..

[Next.js] router query(props) 값이 비어있는 오류

1. 개요 Next.js에서 router를 사용해서 페이지 이동을 할때, query에 keyword를 담아서 페이지 이동을 시키려고 했습니다. search라는 페이지에 해당하는 tsx에서 props로 저 쿼리가 읽혀야 하는데 props.data에 값이 비어있었습니다... 2. 해결 방법 const router = useRouter(); const queries = router.query; // 전달받은 쿼리 내용 useEffect(() => { if (!router.isReady) return; console.log(queries) }, () => { }) }, [router.isReady]) 위와 같이 전달 받은 tsx에서 useRouter() 객체를 가지고 초기화를 해서 사용해야 합니다. 이유는 정적..

[React] Redux 사용하기(2) - 카운터 구현

1. 개요 첫번째 글에서 흐름을 설명했던 카운터를 실제로 구현해보겠습니다. 코드는 아래 블로그를 참고했습니다. https://react.vlpt.us/redux/04-make-modules.html 4. 리덕스 모듈 만들기 · GitBook 4. 리덕스 모듈 만들기 이번에는, 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 react.vlpt.us 2. 코드 작성 결과물은 위와 같습니다. 인풋 값으로 숫자를 입력받아 그 값만큼 현재값에서 +하거나 -하는 카운터 기능입니다. 프로젝트 폴더 구조는 위와 같습니다. module/counter.js /* 액션 타입 만들기 */ // Ducks 패턴을 따를땐 액션의 ..

[React] Redux 사용하기(1) - 개념과 흐름

1. 개요 React 기반으로 웹 프로젝트를 개발할때, 컴포넌트의 상태 관리를 해야할 경우가 생기는데, 이때 사용하는 것이 Redux입니다. 리액트의 꽃이라고 할 수 있고, 처음 접하는 사람에게 굉장히 러닝 커브가 높은 부분입니다.(저도 그랬습니다.) (상태 관리 하는 이유 : 리렌더링에 의한 자원 소모를 줄이기 위해서) 사실 Redux가 어렵기도 해서 사용하기 쉽게 라이브러리들이 개발이 되어서 MobX, xstate, recoil, zustand 등 여러가지 라이브러리가 등장하고, Redux를 굳이 사용하지 않아도 위 라이브러리로 간편하게 상태 관리를 할 수 있게 되었습니다. 하지만, 리액트 프로그래밍을 시작하는 사람으로서 어떤 맥락으로 상태관리가 이루어지는지 파악하는 것은 중요하다고 생각합니다. 2...

[Next.js] Proxy Axios 설정

1. 개요 Axios를 사용해 Next.js서버가 아닌 다른 도메인으로 url을 요청할 때가 있는데, 이때 프록시 설정을 하지 않으면 CORS 오류로 인해 호출이 되지 않는 경우가 있습니다. 또한, React에서 package.json에 프록시를 명시한 것과 다르게 Next.js에서 Proxy는 조금 다른 방법으로 설정을 해야만 했습니다. 2. 코드 Axios 호출 useEffect(() => { async function get() { try { const result: AxiosResponse = await axios.post("/redis/visit"); console.log(result.data) if (result) setVisitor(result.data) } catch (e) { } } ge..

[Next.js] SSG, SSR 개념 정리

1. 개요 전 글에서는 Hydrate에 대해서 알아봤는데, 이번에는 SSG(Server-Side-Generation, Static-Site-Generation)와 SSR(Sever-Side-Rendering)에 대해 알아보려고 합니다. CSR에 알고 싶으신 분은 아래 링크 참고 부탁드릴게요! https://narup.tistory.com/264?category=1044606 [React] SSR과 CSR(SPA) 차이 1. 개요 먼저 브라우저가 동작되어 우리에게 정보를 표현할 때, HTML의 정보를 읽어 이를 내부적으로 렌더링 한 후 js나 css를 반영해 최종적으로 정보를 표현합니다. 이러한 렌더링을 하는 방식이 narup.tistory.com React: CSR(Client-Side-Rendering..

[Javascript] RxJS란?

1. 개요 Nest.js에서 Microservice를 구현하면서 RxJS개념을 사용이 되어 정확하게 이해하고자 정리를 합니다. 듣기로는 Angular에서 사용되는 개념이라고 하네요(Angular를 쓸 기회가 있을지는 모르겠지만...) RxJS는 Reactive Extensions For JavaScript 라이브러리라고 해서 리액티브 프로그래밍을 javascript에서 지원하기 위해 만들어진 라이브러리입니다. 리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 변화에 유연하게 반응하는 프로그래밍을 의미합니다. 이 리액티브 프로그래밍은 Push 시나리오 방식으로 외부와 통신합니다. *Push 시나리오 : 외부에서 명령하면서 응답이 오면 그때 반응하여 처리함. 데이터를 가지고 오기 위..

[Next.js] Hydrate란?

1. 개요 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 일단, Client Side Rendering인 기본 React에서는 js파일만을 이용하여 public/index.html의 기본 뼈대만 있는 내용을 제외하고 src/index.js의 자바스크립트 코드에서 모든 화면을 렌더링 한 뒤, HTML DOM 요소 중 root라는 엘리먼트를 찾아 하위로 주입을 하여 웹 화면이 구성합니다. Next.js에서는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 합니다. Pre-..

[Javascript] 클로저(Closure) 요약

정의 클로저의 정의는 클로저는 독립적인 변수를 가리키는 함수이며, 클로저 안에 정의된 함수는 만들어진 환경을 '기억한다',라고 MDN에서 정의하고 있습니다. 간단한 예제 function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'variable 1' 위처럼 getClosure()를 호출하면 getClosure 내부에서 선언된 변수는 사라지지 않고 제대로 된 값을 가지고 있는 것을 확인할 수 있는데, 만들어진 환경을 기억하고 있는 이 var closure 변수에 담긴 함수를 바로 클로저라고 합니다. 자세하게 클로..

[React] Immer (produce)

1. Immer란? 리액트에서 배열이나 객체를 업데이트할 때 직접 수정하지 않고 불변성을 지켜주면서 업데이트를 해야하는데, 이때 쉽게 불변성을 유지하면서 업데이트를 도와주는 라이브러리가 Immer 라이브러리 입니다 2. 사용법 npm install immer 위 명령어로 먼저 immer 라이브러리를 받습니다. import produce from 'immer'; 불변성을 관리할 코드에서 상단에 immer를 import해줍니다. produce 함수를 사용하는데, 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다. 보통 produce(state, draft) 형태로 사용합니다 const state = { number: 1, dontChangeMe..