react

jQuery가 처음 나온 2006년 자바스크립트는 넓게 사용되지 않았고 사용하기 쉽지 않았다.그러나 jQuery는 여러줄의 javascript 코드를 한줄의 코드로 호출할 수 있는 메서드로 래핑함으로써 업계에 혁명을 일으켰다.'write less, do more'AJA

react : 라이브러리vue : 프레임워크 리액트(React.js)와 뷰(Vue.js)의 차이점(https://brunch.co.kr/@skykamja24/573- 뷰가 더 쉽다.개인적인 사용성과 생산성에선 뷰가 좋지만트랜드나 범용성에선 리액트가 우위에 있다

Material-UI : UI component를 제공해주는 프레임워크icons를 설치하면 Material-UI에서 제공하는 아이콘들을 사용가능하다Material-UI 아이콘 검색components 탭 에서 골라서 가져다 쓰면 되는 것 같은데 아직 익숙해지려면 많이 써

주로 강의를 들으면서 공부를 할 때, netlify나 github page 로 프론트를 배포했었는데 실제론 어떻게 배포하는지 궁금해져서 알아보았다.react나 vue도 결국엔 정적인 파일로 빌드가 되기 때문에 AWS EC2보다 값이 싼 S3에 배포를 많이 하는 것 같다

NODE_ENV.env 파일에 REACTAPP(환경변수이름) 과 같이 REACTAPP 으로 시작해야 됨npm start: .env.development.local > .env.development > .env.local > .envnpm run build: .env.p

CRA : Create React App React app 개발환경을 한줄의 커맨드로 구성해주는 boilerplate react와 facebook에서 만듦 CRA가 하는 일 index.html, index.js를 포함한 웹페이지에 필요한 기본 디렉토리 구성 react

집에서 공부하던 next 앱을 클론해서 실행하려는 중

key words리액트 라우터웹팩 설정code splitting : 프로젝트 코드를 빌드 할 때 여러파일로 저장SEO서버사이드 렌더링contents리액트 라우터 사용해보기SPA에 대해 이해, 리액트 라우터(v4)를 사용하여 여러종류의 라우팅 방법 알아보기코드 스플리팅

npm i react-cookie'cookie-name'이 쿠키의 key가 된다.쿠키 세팅 name(string): cookie namevalue(string|object): name에 해당하는 cookie의 값을 저장(object 가능)options(object) :

redux, redux-saga를 강의들을 때 잘 이해가 안됐던 부분을 복습

redux가 처음 접할 땐 복잡해서 어렵게 느껴지는데saga 라는 것 까지 더 해지니 더 복잡해 보였다.그런데 알고보면 그렇게 어려운 개념은 아니었다.saga는 단지 redux가 한번의 이벤트로 두가지 이상 action을 실행해야 할 때 사용하면 좋다.saga는 리덕스

getInitialProps, getStaticProps, getServerSidePropsstatic method로써 어떤 페이지에 추가된 비동기 함수 이다.server side rendering을 가능하게 하고 initial data population을 할 수 있

redux, mobx와 비슷한 상태관리 라이브러리기존 라이브러리 : 요청 -> 참조 혹은 예외처리react-query : 알아서 캐싱, 리패칭전역 state를 client와 server 로 구분client-state : 세션간 지속적이지 않는 데이터, 동기적, 클라이언

상태관리 라이브러리로 아직 가장 많이 사용되고 있는 리덕스를 nextjs에 설치하는 과정을 정리해보려 한다.npm install redux next-redux-wrapper react-redux --savereduxnext-redux-wrapperNext.js의 서버사

hook을 사용을 하지만 가끔씩 이상하게 사용해서 리액트가 rule에 위반한다고 할 때가 있었다.이번에 react에서 hook의 규칙에 대해 알아보자.반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안된다.대신 early return이 실행되기 전에 항상

package.json에서 프록시 서버를 지정하면앱을 한번 껏다 켜야 함터미널창에서 ctrl+c 이후 npm run start그렇지 않으면 프록시 서버가 적용되지 않음

react에서 외부 자바스크립트 파일을 사용하고자 할 때

react에서 string\[] 을 리턴하는데 구분하는 쉼표 다음의 띄어쓰기가 적용이 안되는 문제가 있었다.span으로 감싸서 리턴하던 것을 백틱으로 감싸서 리턴하는 것으로 바꾸니 백틱안에선 ', '의 띄어쓰기도 잘 인식한다.검색해보니  를 사용하라는 포스트들이 많던데

redux store에 loading도 있는데 done이라는 변수는 필요 없을 것 같았는데 필요한 경우가 생겼다.컴포넌트에서 직접 비동기 통신을 하면async await으로 Promise에서 정상 응답이 오길 기다렸다가 진행하는 것이 가능했는데리덕스사가를 이용하게 되면

delete the .next folder at the root of your project.참고 문헌https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-n

내가 이해한 useEffect는 처음에 한번 실행되고 dependency array안의 값이 변경될 때 마다 실행되는 것으로 알고 있다.그런데 가끔 dependency로 함수를 전달하는 것을 보았는데 왜 그걸 전달하는지 이해가 되지 않아서 이번 기회에 찾아보았다.결론

컴포넌트에 list 자체를 전달해서 컴포넌트 안에서 처리 하는 방법좋지 않음 : 기존에 설정된 값들(store read-only 속성제거)을 변경해야 함(방금 작업한 코드)컴포넌트 밖에서 array.map() 을 사용해서 그리기 내일 시도 해보고 비교 글을 블로그에 정

이번에 이벤트 리스너의 콜백함수에로 값을 전달해야 될때 HOF으로도 가능하다는 것을 알았다그 전엔 anonymous 함수를 그 자리에서 만들어서 값을 전달했었는데 더 섹시한 방법이 있는 걸 알게 되니 앞느로 이렇게 사용해야겠다는 생각이 든다그 전에 HOF가 무엇인지 명

지난번 순수 javascript만으로 animation이 있는 drag and drop list를 만들려다가 잘 되지 않았다.javascript drag and drop 구현 시도와 시행착오javascript로 직접 구현하려 했으나 애니메이션발동 도중 DOM을 변경하거

useRef는 DOM 조작을 위해서만 사용하는 줄 알았는데 useState와 비슷하게도 사용할 수 있었다단, useRef에 담긴 값은 useRef.current에 저장되며 화면은 re-render 되지 않는다.(state 또는 prop이 변하지 않았기 때문)useRef

Typesafe utilities designed to reduce types verbosity and complexity in Redux Architecture.Redux 아키텍처에서 유형의 장황함과 복잡성을 줄이기 위해 설계된 Typesafe 유틸리티입니다.액션을

최근까지 package.json에 있는 "dev": "NODE_OPTIONS='--inspect' next dev"스크립트를 NODE_OPTIONS='--inspect' 없이 사용했었다.이번에 이 환경변수를 설정하는 것이 어떤 의미가 있는지 알아보자.브라우저에 위 UR

https://github.com/Ark-inflearn/inflearn-clone-front/issues/83sprint 라고 할 수 있을지 모르겠지만Ark 프로젝트 진행을 하다보니 기술부채를 쌓고 넘어갔던 문제들을 이번에 두 가지만 해결하고자 한다.re-r

렌더링 최적화 : 리소스 로딩 이후 주요 렌더링 경로 분석, React Profiler를 통해 개선메모리 관리 : 사용자의 텍스트 입력, 마우스 클릭과 같은 상호 작용 간에 발생하는 메모리 누수를 찾아 개선네트워크 환경에 따라 달라 질 수 있다.답답함을 느낄 환경모바일

WYSIWYG, 웹 텍스트 에디터, TinyMCE를 리액트에서 사용하기

이번에 Next.js의 버전 12가 나온 것에 대해 알아보자. Next.js 12 공식 영상 및 문서 https://youtu.be/dMBYI7pTR4Qhttps://nextjs.org/blog/next-12Update today by running

Next.js version 12 업데이트 후 .server.js로 페이지 컴포넌트를 만들면 getServerSideProps, getStaticProps 둘다 필요없다고 하는 것 같은데 이것을 실험해보기 전에 getServerSideProps을 먼저 사용해봐야겠다는

https://github.com/react-hook-form/react-hook-form/discussions/6961https://github.com/react-hook-form/resolvers/issues/27112.0.1 버전에선 에러가 안난

이번 next.js 12버전 업데이트에서 Babel 컴파일러에서 SWC(Rust) 컴파일러로 바뀌었다.build time11버전 : 1분 50초(빌드에 걸리는 총 시간)12버전 : 1분 38초(빌드에 걸리는 총 시간)refresh time11버전 : 강의 만들기 ->

"빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.SSG (Static Site Generation) 개념입니다."page가 요청받을때마다" 호출되어 pre-rendering합니다.SSR (Server Si

간단하게 테스트course/id 에 미들웨어를 만들기id가 1이 아니면 404 화면을 띄우기404 화면 컴포넌트 필요\_middleware.ts 에선 리액트 컴포넌트 문법(jsx or tsx)를 사용할 수 없음서버쪽 코드라고 생각하면 될 것 같다console.log도

이번에 next.js의 <Image /> 에서 AVIF 포맷을 지원한다고 해서 Image 태그를 다시 한번 사용해봤다.AVIF 포맷 : 용량이 더 적은 파일 형식(.jpg, .png 같은 것)https://itigic.com/ko/heif-and-avif

https://youtu.be/bjVAVm3t5cQModel : dataController : logicView : 화면View : Controller = n : 1전통적인 Server Side Rendering 방식의 웹phpViewUI View Contro

React.lazy와 Suspense를 사용하면 코드 스플리팅을 하기 위해 state를 따로 선언하지 않고간편하게 컴포넌트 코드 스플리팅을 할 수 있다고 한다.컴포넌트를 렌더링 하는 시점에비동기적으로 로딩할 수 있게 해주는 유틸 함수리액트 내장 컴포넌트코드 스플리팅된

react의 virtual dom은 key값으로 각각의 객체를 구분하고그 객체의 props가 바뀌었는지 확인을 한다Array.prototype.map을 사용해서 반복적인 컴포넌트를 그리는 경우에 React.Children.toArray()으로 감싸주면 자동으로 uniq

Facebook에서 만든 React 상태 관리 라이브러리Redux, MobX의 API는 단순하지 않고, React에서 사용하기 위해 나온 것이 아님react-redux, mobx-react 같이 wrapper 라이브러리가 있음React 스럽게(?) API와 동작 방식으

실행 순서 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행비동기적으로 실행DOM과 인터렉션이 없는 경우에 사용(대부분 경우)실행 순서 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트동기적으로 실행됨렌더링 직후 DOM요소의 값을 읽을 때

infinite scroll을 예전에 구현했을 땐 직접 구현했었는데 회사에서 라이브러리를 사용했기 때문에 이것에 대한 사용방법을 익히고 다시한번 예전에 구현했던 코드를 상기시키는 시간을 가져보려 한다scrollableTarget : 여러 컨텐츠 리스트에 의해 스크롤이

Next에 Redux 세팅 기존 프로젝트 세팅 store 세팅 reducer enhancer : middleware (+composeWithDevTools) Redux(store)적용 - wrapper (== Provider) app.tsx에 적용되어 있음 red

위와같이 표를 그리는데 개수만 채워지고 없는 곳은 테두리가 없는 테이블을 그려야되는 기획이있었다.결론부터 말하자면 위 사진에 빨간색 동그라미 친 부분을 각 칸에서 공통적으로 나타나게 하고첫번째 줄의 border-top각 줄마다 첫번째 아이템의 border-left를 표

list\[] 와 listAchildren\[] 중 하나라도 겹치는 부분이 있는지 검사하는 것을 개선listAchildren의 parentId(listA의 id)를 list\[] 컴포넌트에 전달해서 list\[] 의 아이템들의 parentId가 listA의 id와 같은

react를 사용하지 않고 javscript로 구현시1\. 모달 배경에 eventListener를 달고 2\. 모달 배경에 속한 모달창엔 모달창의 id또는 class 이름을 넣은 다음3\. event.target.closest 메서드를 이용해서 모달창의 아이디가 찾아지

모달창에서 외부 스크롤 막기

react가 아닌 일반적인 서버사이드 웹 사이트와 같이 배포를 하려는 경우nginx에서 설정된 경로에 맞게package.json의 build명령어에 PUBLIC_URL=react앱경로 를 추가해주면 된다그리고 빌드된 파일들을 웹서버(nginx)에 배포할 경로에 넣어주면

react에서 setInterval의 아이디를 useRef로 받으려 했으나 타입이 NodeJS.Timer라는 타입으로 setInterval 리턴이 표시되어서 그것으로 지정하면 되지 않았다그래서 window.setInterval로 수정 후 아래와 같이 지정할 수 있었다일

서버에서 가져온 캐싱된 데이터를 사용해서 useState의 초기값으로 넣어 줄 수 있다useEffect안에서 setState를 이용해서 초기값도 설정해주곤 했는데 이렇게 해주는 것이 가독성이 더 좋은 것 같다책: react native를 다루는 기술

공용 링크 컴포넌트에 라우터로 데이터를 전달할 때 타입을 제네릭으로 받고 싶었다이게 될까 하면서 제네릭으로 만들어봤는데 컴포넌트도 제네릭으로 타입을 받을 수 있다는 것을 알게 되었다라우터로 데이터를 전달하는 방식은 웹에서 좋지 않은 것 같다(새로 고침 시 고장나기 때문

요즘 front-end 라이브러리 또는 프레임워크에선 pjax 방식으로 라우팅 관리를 할 수 있다https://poiemaweb.com/js-spapushState + ajaxreact-router-dom도 같은 방법으로 구현되어 있을 것이다이번에 특정 URL

사용 시 반드시 최상위 컴포넌트(e.g., App.tsx)에서 위 css를 import 해야 함

:first-child is unsafe on server side rendering.

// props로 전달하는 경우text="abc\\n가나다" // 줄바꿈 안됨text={"abc\\n가나다"} // 줄바꿈 됨

react에서 tui editor를 사용하려면 wrapper 패키지인 @toast-ui/react-editor 만 설치하고 사용 가능하다사용방법은 공식문서에 나온 것을 그대로 따라하면 된다onChange에서 전달되는 event 파라미터 또는 어딘가에 value를 저장할

tsconfig.json에서 설정한 절대경로를 인식하지 못 함상대경로로 import해서 해결각 컴포넌트에서 독립적으로 css를 import해야 storybook에 올바르게 표시 됨해당 story에서 공통 css를 import해서 해결이 문제는 다시 찾아봐야겠다 해결 방

CRA를 사용하는 경우 npm i sass 로 패키지 설치 후 바로 사용할 수 있다node-sass도 있지만 m1 맥북에선 sass만 지원된다

이번에 저작도구를 만들면서 사용할 텍스트 에디터를 선택하고자 비교한 것을 찾아보았다폰트변경, 정렬 등 quill에서 지원하는 기능이 저작도구에 더 적합하다 생각되어 Quill을 사용하기로 함참고https://jforj.tistory.com/211https&#x

storybook에 globalStyle을 적용하는 도중 아래와 같은 에러가 발생했다.storybook/preview.cjs 파일의 확장자를 jsx로 변경preview.cjs -> preview.jsx.storybook/preview.jsx 에서 아래와 같은 코드 추가

쓸일은 없겠지만 독특하게 blocking을 구현한 코드를 봐서 메모해 놓으려 한다이 방식은 confirmResult에 따라 동작하는 방식을 달리하는 코드를 구현했다내가 구현한다면 onConfirm에 실행할 함수를 전달하도록 할 것 같다

Swiper는 slide 또는 carousel 을 표현하는 UI 라이브러리이다https://www.npmjs.com/package/swiperreact에서 swiper로 custom pagination 버튼을 만들고 싶은 경우공식 문서 예제는 아래와 같이 st

지난 포스팅에서 react-dom/server 를 사용해서 string으로 element를 사용하는 것 대신 react component를 사용했습니다https://velog.io/@gth1123/react-Swiper-custom-renderBullet이번엔

Swiper onInit 이 아닌 fetching 함수의 onComplete에서 swiper.slideTo(1) 를 사용한다

renderToStaticMarkup 메소드를 사용하면 정적 html만 생성되기 때문에 onClick 같은 이벤트핸들러를 사용할 수 없다 그러나 ...

todo

storybook을 세팅하는 것은 간단하다https://storybook.js.org/docs/react/get-started/installnpx storybook init 을 하면 설치 및 예제까지 세팅이 된다그런데 사내 UI 라이브러리에서 scss를 glo

스토리북에서 스토리를 작성하는 방법에 대해 간단히 정리해보자 스토리북은 한마디로 말하면 컴포넌트의 어떤 props을 전달한 스냅샷을 찍어놓은 것이다

컴포넌트와 컴포넌트에 사용할 관련 로직을 반복해서 사용해야 되는 경우 hook으로 묶어서 제공할 수 있다

react beautiful dnd로 드래그 앤 드랍 UI를 구성하던 중 드래그 중 드래그한 블럭의 위치가 이상한 곳으로 이동되어 위치하는 현상이 발생하였다

웹서버(nginx)에서 루트 경로가 아닌 하위 경로와 리액트 앱을 연결하지 못해서 발생

왼쪽 정렬은 어떤 클래스도 붙지 않기 때문에 ql-align-left 를 붙여주는 것이 이번 목표였다

Nextjs 13버전에서 async 가 포함된 서버 컴포넌트를 사용할 때 타입스크립트 에러가 발생하면 아래와 같이 임시조치할 수 있다{ / @ts-expect-error Async Server Component /}그런데 현재 타입스크립트 5.1.3 기준 위 주석없이

nextjs에서 query param을 설정하고 자식 컴포넌트에서 쿼리파람을 이용해서 다르게 렌더링이 되어야 하는 경우window.history.pushState({}, "", ?category=${category});와 같이 쿼리파라미터를 설정할 수 있지만 이 경우

Nextjs 에서 window is not defined 에러가 발생하고 있는데 window를 사용하고 있는 곳이 없거나 조치가 안되는 경우에러에서 힌트를 얻을 수 있다Apexcharts 라이브러리를 사용하고 있는데 해당 라이브러리에서 window를 사용하고 있어서 발

스토리북 메이저 버전이 6에서 7로 업데이트되었다 이번에 새롭게 시작하는 프로젝트에 7버전으로 적용하면서 7버전 기준으로 사용방법 및 스토리북의 주요 기능에 대해 정리해보자

함수로 전달 후 전달을 받은 컴포넌트에서 props를 직접 제어할 수 있다

검색 같은 곳에서 state의 변화에 따라 자동으로 검색이 되는 경우에 사용하면 좋다

Next.js로 블로그 같은 것을 만든 뒤 contact 메일을 보낼 수 있도록 구성을 해보자app/api에서 이메일 요청을 받는 API를 만든다메일을 보내고 응답을 보내준다Google Account > Security > Signing in to Google2-Ste

컴포넌트 내부에서 전역 상태가 포함된 훅을 직접 사용하는 것보다 props로 필요한 메서드 또는 상태를 주입받는 것이 더 좋다위 그림의 하위 메뉴 같은 작은 컴포넌트가 있을 때,e.g. 1-5. 유튜브 영상 편집하기 글씨가 노출되는 컴포넌트컴포넌트에서 전역 상태와 관련

useState vs. useRef React에서 전역 변수를 만드는 방법은 두 가지가 있습니다 차이점 useState는 렌더링에 영향을 주고 useRef는 렌더링에 영향을 주지 않습니다 또한 useState의 값을 변경하는 setter함수는 비동기적으로 값이 변경..

input 태그의 defaultValue는 최초로 전달된 값만 전달되고 이후 변하지 않는다Next.js에서 input 태그에 defaultValue를 설정하는 경우에 props로 전달받아서 defaultValue값을 설정하는 경우가 있다.서버에서 데이터를 가져와서 전달

이슈 모바일로 접속할 때와 PC로 접속할 때 다른 화면을 보여줘야한다 모바일로 접속 시 기존 앱 경로를 보여주고 PC로 접속 시 v2 앱 경로를 보여준다 해결 Next.js의 middleware를 사용하여 모바일로 접속했는지 PC로 접속했는지 확인 후 의도한

bootstrap에서 important 제거하는 방법에 대해 알아보자

분명 어제까지만 해도 빌드 및 배포가 잘되었는데 오늘 갑자기 빌드 중 prerendering을 하면서 window를 찾을 수 없다는 타입에러가 발생했다로컬에서 깃헙으로 푸시전에 pre-push에서 빌드를 하기 때문에 걱정을 안하고 있었는데깃헙 액션에서 next 버전을