Next8 Strapi(2) ContentType 설정하기 Strapi 는 프론트에게 매우 유용한 CMS 이다 현재 진행중인 Next.js 프로젝트에 적용해보기 위해 스트라피를 이용해서 직접 API 를 만들어 보는 과정을 포스팅에 담았다 지난 시간에는 Strapi 를 설치하여 어드민 페이지까지 띄웠고, Strapi - 스트라피 설치하기 현업에서는 Strapi 를 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 devbirdfeet.tistory.com 이번 시간에는 어드민에서 Content-Type, 즉 인터페이스를 모델링하는 과정을 정리해보았다 다음시간에는 Content-Type 을 가지고 mock-up 데이터를 추가한 뒤 api 로.. 2024. 2. 29. Strapi(1) 스트라피 설치하기 Strapi 는 프론트에게 매우 유용한 CMS이다 특히 혼자서 프로젝트를 개발할때 말이다. 서버가 필요없이 바로 api 를 만들어 사용할 수 있는 것이 큰 장점이다 현업에서는 Strapi 를 부분적으로 사용하고 있다. 하지만 나도 사! 용! 하고 싶었다 그말인 즉슨 누군가가 차려놓은 밥상말고 나도 요리를 해보고 싶었다는 말과 동일하다 그래서 소원대로 Strapi 로 요리를 좀 해봤다 하지만 잘 꾸며진 정제된 과정 말고, 날것의 실행 과정을 그대로 올려보려고 한다 (누군가에겐 도움이 되길 바라며) Strapi (1) 스트라피 설치하기 터미널에서 설치 명령어를 실행해보자 # --quickstart 옵션은 default로 db를 sqllite을 사용한다 npx create-strapi-app@latest my.. 2024. 2. 23. Next.js - 서버 컴포넌트에서 useContext() 사용하기 넥스트js는 서버컴포넌트와 클라이언트 컴포넌트로 나뉘어진다 그렇기 때문에 React 기반의 훅들을 사용할 때는 한번더 생각해보아야 한다 오늘은 useContext() 를 어떻게 사용하는 지 알아볼 것이다 Next.js - 서버 컴포넌트에서 useContext() 사용하기 리액트에서 전역 변수를 전달하기 위해 redux / useContext 를 사용하였다 Next.js에서 useContext 를 사용하려고 하니 한가지 제약이 있었다 You are using createContext in a Server Component but it only works in Client Components → 바로 클라이언트 컴포넌트에서만 사용이 가능하다는 것이다 createContext in a Server Compo.. 2023. 12. 31. Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) updated 01/13/24 Next.js 로 포트폴리오 사이트를 만들면서 Route 로 관리되는 모달 (Route as Modal) 을 구현하고자 하였다 리액트로 같은 기능을 구현할 때 useHistory 로 구현하였던 기억이 있어 비슷하게 헤매일 줄(?) 알았는데 생각보다 훨씬 간단하였다 (머 - 쓱 😅) Next js 는 그만큼 라우터에 진심이라는 것을 다시한번 느끼며 그때의 감동을 정리해보았다 Next.js - Route 로 관리하는 모달 만들기 (URL 히스토리) 일단 처음 살펴봐야할 개념이 있다. Intercepting Routes 라는 개념이다. 이 친구에 대해 간단히 정리를 하면 원래의 주소의 화면과 다른 라우트를 가진 컴포넌트를 동시에 보여줄 수 있는 기능이다 This allows yo.. 2023. 12. 29. Next.js - global 구글 폰트 적용하기(next/font) 넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다. 폰트를 사용하는 방법은 두가지 정도가 있다. static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나 내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다) 웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다. → FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체) 지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다 웹 최적화 - 구글 .. 2023. 8. 17. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) Next.js 로 프로젝트를 하면서 컴포넌트에서 svg 아이콘을 사용하려고 하니 컬러변경이 되지 않았다. 알고보니 컴포넌트는 svg 형식을 지원하지 않는다고 한다. 그래서 svgr 이라는 툴을 사용하여 리액트 컴포넌트를 svg 파일로 사용할 수 있도록 만드려고 한다. Next.js - SVG 사용해서 컬러, 사이즈 변경하기 (Feat.svrg) 1. svgr 설치하자 npm 명령어를 사용해 인스톨해주자 npm install @svgr/webpack 2. next.config.js 에 아래 설정을 심어주자 // next.config.js const nextConfig = { // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다 webpack : (config) => { config.modul.. 2023. 5. 14. Next.js - Styled-components 적용전 렌더링 되는 이슈 요즘 한창 Next.js 프로젝트를 만드는 중이다. Styled-components 가 첫 렌더에만 적용이 되고 새로고침을 한 후에는 적용이 안되는 이슈가 있었다. 열심히 구글링을 해본 결과, Next.js가 SSR로 동작하기 때문에 style 적용되기 전에 렌더링이 되어서 이슈가 발생한 것을 알게 되었다. 그렇기 때문에 서버로 요청이 들어오면 가장 먼저 실행하게 만들어야 한다. 해결책을 찾던 새발자는 _app.tsx 와 _document.tsx 라는 서버 파일의 존재를 알게 되는데... Next.js - Styled-components 적용전 렌더링 되는 이슈 우리는 빨간 박스에 있는 부분에서 밑작업을 할 것이다. 위치를 잘 알아 놓자. 1. 일단 pages 폴더 안에 _app.tsx 를 _documn.. 2023. 4. 16. Next.js - next dev / build / start 명령어 및 포트 변경하기 요즘은 Next.js 를 공부하는 중이다. 최근까지 CSR 방식을 사용해 개발하며 느꼈던 단점들을 SSR 과 SSG 방식을 통해 보완할 수 있게 되어 매우 들떠있다. Next.js 를 시작하며 명령어가 너무 헷갈렸다. 정확한 명령어를 알고 사용하기 위해 정리해보았다. dev - Runs next dev to start Next.js in development mode // 디벨롭 모드 시작하기 build - Runs next build to build the application for production usage // 프로덕션 빌드할 떄 start - Runs next start to start a Next.js production server // 프로덕션 서버 시작하기 - next dev 는 so.. 2023. 4. 7. 이전 1 다음 반응형
