DEV/React, Next (7) 썸네일형 리스트형 [Next] Next13에서 appRouter와 Colocation 도입해보기! 프로젝트를 진행하면서 기존에 작업중이었던 Next12 기반의 앱을 13버전으로 마이그레이션 하는 일이 있었는데요! 기존의 폴더 구조와 많이 달라진 탓에 기존 디자인 패턴을 걷어내고 새로운 구조를 도입하는 것을 고려하다보니 Co-Location 이라는 개념이 들어오게 되었어요! 오늘은 이 부분을 공유해볼까 합니다. App directory? Nextjs 13버전에서 제시한 새로운 구조인 appRouter을 사용하기 위한 directory이며, docs에 따르면 next.js의 라우팅 및 레이아웃 경험을 개선하고 디렉토리 도입과 함께 React의 미래에 맞추어 조정하는 과정에서의 app레이아웃 후속조치라고 합니다. app 디렉토리는 아래와 같은 지원을 포함하게 됩니다 레이아웃 : 상태를 유지하고 비용이 많이.. [Next] 정적 라우팅과 동적 라우팅 지금 개인적으로나 업무적으로 사용하고 있는 Next.js 에서는 자체적인 라우터를 내장하고 있다. 이번엔 라우터를 통한 라우팅에 대해 적어보고자 한다. 라우팅이란? 위의 사진에서 나와있듯 라우팅은 쉽게 말해 페이지를 이동하는것이다. Next.js 환경에서는 위의 사진처럼 useRouter을 통해 내장된 라우터를 사용하게 되는데 보편적으로 많이 쓰이는 방식으로 router.push("path")가 있다. 또한 라우팅은 정적라우팅과 동적라우팅으로 나누어 지게 된다. 정적라우팅 정적라우팅은 쉽게 말하자면 라우팅을 할 때 경로를 하나하나 수동으로 추가해야되는 프로세스이다. 당연히 장단점이 존재 할 수 밖에 없다. 장점 - 정적라우팅은 다른 네트워크를 거치지 않아 동적라우팅에 비해 보안성이 좋다 - CPU의 부하.. [React/Next] NextJS의 장점 저는 next.js 환경에서 개발을 하고있는데요! 처음에는 그저 부트캠프에서 배운게 next라서, 그리고 ssr에 용이하다 해서 사용했어요! 근데 지금 시점에서 돌아보면 부트캠프에서 배워서 라는 말은 말도 안되고.. react18 버전 부터 SSR도 자체적으로 지원하는데 왜 사용해야 될까요? next.js의 장점 1. 직관적인 라우터 구조 NextJS 는 React와는 다르게 내장되어있는 라우터를 사용하게 됩니다. /pages폴더 하위폴더로 만들어진 폴더명에 따라 페이지의 path를 부여해주기 때문에 react router dom 을 사용 하는것에 비해 더욱 직관적으로 라우터를 관리할수 있습니다. * react와 다르게 pages폴더가 src폴더 외부에 있는 이유입니다. 2. 라우터 구조에 따른 다이나밍.. [Next] next/legacy/image 사용해보기 프로젝트 진행중에 eslint에게 Next/Image를 사용하라는 경고가 나왔는데요.. 처음엔 img 태그를 쓰는데 굳이? 라는 생각으로 무시하고 넘어갔지만 하나 둘 늘어날수록 점점 거슬려져서 도입해보기로 하였습니다! next/image? next에 내장되어 img 태그를 대체하여 사용할수 있게 해주는데 정말 많은 기능을 지원하고 있습니다. 사실 이녀석도 img 태그 기반이라서 css 태그선택자로 img를 잡으면 같이 잡히긴 하는데.. 대체 어떤 장점이 있길래 자꾸 사용하라고 하는것일까요? next/image를 사용해서 얻는 장점은? 자동으로 스켈레톤 UI를 지원해주고 CLS방지도 할수 있다. Lazy Loading 을 통해 이미지 최적화를 해주기도 하고 pre loading이 필요할경우 끌수도 있다. .. [React] JSX는 무엇일까? 일전에 어떤분에게 그런 질문을 받았다, "css-in-js의 단점은 무엇일까요?" 나는 멍청하게도 jsx요? 라고 대답하였고 내 얕은 지식이 드러나게 되었다. 그래서 jsx와 css-in-js를 공부해보았고 일단 jsx부터 정리를 해보려 한다. jsx문법이란? React공식 문서에 따르면 jsx는 자바스크립트의 확장이라고 한다. jsx는 React "엘리먼트"를 생성한다. React는 본질적으로 렌더링 로직이 UI로직과 연결횐다는 사실을 받아들이고 별도의 파일에 마크업과 로직을 넣에 인위적으로 분리하는 대신에 둘다 포함하는 '컴포넌트'라고 부르는 유닛으로 사용한다. 물론 React에서 필수적으로 사용해야되는것은 아니지만 시각적으로 더욱 도움이 될거라고 한다. 그래서인가 React공식문서에서는 HTML보다.. [React] 라이프 사이클(클래스형) "React를 사용하여 개발을 하는 프론트엔드 개발자" 요즘 정말 많이 보인다. 물론 최근에 개발에 입문하게된 나또한 React환경에서 프론트 개발을 하고있다. 그런데 일을하다 문득 든 생각이 있었다. 이놈의 라이프 사이클은 어떻게 될까? 그래서 오늘은 블로그에 적어보려 한다. 라이프 사이클이란? 흔히들 말하는 생명주기, 리액트로 말하자면 컴포넌트의 수명이라고 말할수 있을것같다. 리액트의 라이프 사이클은 페이지가 랜더링 되기 전 준비단계 부터 페이지에서 사라질때까지를 한 사이클로 보면 될것같다. 리액트의 라이프 사이클은? 리액트에서의 라이프 사이클은 크게 세가지 단계로 볼수있다. 마운트 -> 업데이트 -> 언마운트 이렇게 세단계로 볼수있는데 각각의 단계에서는 메서드를 이용하게 된다. 1. 마운트 단계 1.. [React, Node] Crypto를 통한 sha256해시 생성 이전에 프로젝트에 결제모듈을 연동하면서 해시 생성이 필요했는데 그 부분을 프론트엔드 파트에서 처리하게 되어 잊기 전에 적어보려 합니다! 사실 이건 Next.js나 react에서 별도의 로직을 통해 생성하는 것이 아닌 node.js의 내장함수인 crypto를 이용하는 방법입니다. 사용하기에 앞서 우리는 crypto라는 친구를 import 해야 합니다! import를 하고 마우스오버 해보면 아래와 같이 나오게 되는데, crypto의 간단한 사용방법을 알려줍니다. 저는 SHA256해시를 생성하길 원했고, 아래와 같은 간단한 로직으로 해시를 생성하였습니다. 간략하게 설명하자면.. base_str : 해시를 생성할 문장 또는 단어를 입력하는 부분 crypto.createHash("sha256") : 크립토를 이용.. 이전 1 다음
