react
-
SWC 이용해서 React + Webpack 세팅해보기개발 블로깅/React 개념 2023. 1. 25. 21:30
한창 블로그 초창기에 CRA(create-react-app)를 쓰지 않고 직접 package.json init부터 React + Webpack + Babel 세팅 블로그를 올린 적이 있었는데, 이미 3,4년 정도 지나고 많은 것들이 변하면서 레거시 글이 되어버렸다. 그래서 이번에 사이드 프로젝트로 인해 새로운 Single Page Application 환경이 필요하게 되면서 오랜만에 다시 세팅을 해보았는데, 요즘 컴파일러로 굉장히 핫한 SWC를 Babel 대신해서 트랜스파일러로 Webpack과 세팅을 해보았다. 그래서 이번에 SWC + Webpack을 이용해서 React 환경을 직접 구성하는 방법으로 다시 정리해보려고 한다. 우선 처음으로 package.json을 세팅한다. $ yarn init -y 다..
-
'Component' cannot be used as a JSX component 원인과 해결방법개발 블로깅/React 개념 2022. 9. 5. 11:53
아래와 같은 문제가 발생하였다. 'Component' cannot be used as a JSX component. 우선 근본적인 원인은, react가 18 버전대부터 많은 변화가 발생하며, @type/react 역시 18버전대부터 타입 정의에 대한 방식이 많이 변경되었다. 그래서 그런지, Next.js 환경에서 Dynamic Import 같은 컴포넌트도 이와 같은 에러가 발생하였다. 따라서 @type/react 버전을 17 버전대로 변경해주면 해결할 수 있다. { "name": "create-react-app", "scripts": { ... }, "dependencies": { "react-dom": "17.0.2", }, "devDependencies": { "@types/react": "17.0...
-
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자)개발 블로깅/Improving Performance 2021. 12. 2. 12:24
Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아..
-
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration)개발 블로깅/Next.js 2021. 8. 12. 21:46
요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd..
-
Next.js의 Hydrate란?개발 블로깅/Next.js 2021. 8. 8. 23:00
Next.js 프레임워크의 동작원리를 제대로 파악하고 있는 개발자라면 Hydrate에 대해선 이미 익숙한 용어일 것이다. 그러나 Next.js의 주요 동작 방식 중 하나임에도, 눈에 잘 띄지 않아 놓치기도 쉬운 개념인 만큼, 한번 제대로 정리를 하고 넘어가보려고 한다. Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다. 이 과정이 왜 필요한지 간략하게 설명하기 위해, 우선 React에 대해 잠깐 얘기해보자. React의 웹 페이지 구성 원리 React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있다. 그래서 실제 HTML 코드는 안에 내용..
-
[2021.06.11] Production Environment에서 SourceMap 보안 이슈 해결개발 블로깅/오늘의 TIL 2021. 6. 11. 19:07
내가 직접 작업하는 프로젝트에 Build 후 Production 환경에 업로드 시 Source map File이 함께 올라가는 이슈가 있었다. 원래 Production 환경에 소스코드를 배포할 때, Webpack Build를 통해 기존 코드를 Uglify하게 만들어 업로드를 한다. 그러나 Source Map 파일이 Production 환경에 같이 올라가면, Source Map 파일을 통해 Uglify JS 파일들이 기존에 어떻게 작성되어있는지 트래킹이 가능하게 되어버리는 보안 이슈가 발생한다. 이러한 기존 코드를 파악하지 못하도록 일반적으로는 Source Map을 따로 업로드를 하지 않는 것이 권장된다. Next.js 환경에서는 Production Build 시에는 Source Map File을 생성하지..
-
[2020.12.28] React 내 Render Stream 처리 기법(with kefir.js)개발 블로깅/기타 개념 2020. 12. 28. 21:41
Render Stream이란, 기능을 동작시키는데 필요한 로직들을 Stream으로 처리하여 단순하게 렌더링 기능을 구현할 수 있는 방식을 말합니다. 아래 예시 코드를 보시면, 각 로직 처리 부분을 단순히 FromStream 컴포넌트의 Stream props로만 내려주기만 하면, FromStream 컴포넌트에서 어떠한 로직이든 상관없이 로직을 수행하고 따로 상태 변경 로직 없이도 리렌더링을 처리하기 때문에, 코드 로직이나 상태가 매우 Less되어 프로젝트 관리나 메모리 성능면으로도 엄청난 이점을 주게 됩니다. Render Stream기법은 반응형 프로그래밍(Reactive Programming) 기반으로 구현한 방식입니다. 해당 글은 작성자 Dmitriy Kharchenko 님의 'how to Render..
-
[2019.11.02] base64 Image Data를 File 객체로 변환하는 법개발 블로깅/오늘의 TIL 2019. 11. 2. 12:45
프로필 이미지를 적용하는 기능을 구현 중, 엄청나게 유용한 라이브러리를 찾아냈다. https://github.com/mosch/react-avatar-editor mosch/react-avatar-editor Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. - mosch/react-avatar-editor github.com 이 라이브러리를 쓰면, Input File 객체로 받은 이미지 데이터를, 유저가 지정한 부분만 Base64인코딩을 통해 잘라내어 반환하게 된다. 그러나 AWS S3 버킷에 저장하기 위해서는 File객체가 필요로 한데, 반환받은 Base64 ..