꿈꾸는 개발자의 블로그

사실 내가 진행했던 프로젝트는 Next.js + TypeScritp 기반이였기 때문에, 앞서 React로 구현한 코드는 흐름을 이해할 수 있는 연습 과정이였다. Next.js로 구현하려니.. React와는 다르게 html 파일이 없었기 때문에, Script 태그는 어디에 넣어야하는지에 대한 고민이 생겼다. 결과적으론 Script를 생성하여 넣어주었는데, 왠지 더 좋은 방법이 있을 것 같다...! next에는 'next/script'도 제공하니, 다음에는 이를 사용해서 구현해봐야겠다~! TypeScript + Kakao Map API 사용하기 1. script 요소 생성하기 2. 환경변수로 설정한 앱 키 등록하기 그 외 부분은 앞서 React로 구현한 것과 동일하다! MapContainer.js 참고 20..

인스타그램 클론 코딩을 하면서 상단에 고정적으로 들어갈 내용이 있었다. 이를 페이지 변경 시에도 하나의 레이아웃으로 재사용하기 위하여 을 구현하여 유지하기로 하였다! 공통 레이아웃 적용하기 1. 상단에 공통으로 적용될 컴포넌트 구현하기 2. 페이지 변경 시에도 같은 모양을 유지할 수 있게 레이아웃 컴포넌트 구현하기 3. _app.tsx 구현하기 전체 코드 pages > _app.tsx import '../styles/globals.css' import Layout from '../components/Layout' function MyApp({ Component, pageProps }) { return ( ) } export default MyApp components > Layout.tsx import ..

Next에서 styled-components를 사용하려면 초기 설정이 필요했다. _document 파일은 SSR시에 실행이 되는데, 여기에 스타일 설정을 해주면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 받을 수 있다. 만약 설정해놓지 않았다면, styled-components를 통한 스타일이 적용되지 않고 랜더링 되는 문제가 생길 것이다! SSR 이후 내부 라우팅을 통해 페이지가 이동하면서 CSR을 하게 되는데, 이 때 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 달라서 에러가 발생한다. 이를 해결하기 위해서 바벨 플러그인을 설치해준다. TypeScript + styled-components 사용하기 1. styled-components 설치 2. styled-components용..

Next.js와 TypeScript를 사용하여 프로젝트를 시작하려 한다! 둘 다 처음 써보는거라 걱정이 되긴 하지만.. 괜차나.. React랑 JavaScript랑 비.. 비슷하겠지..ㅎ 여튼! 프로젝트를 생성해보자! 팀원과 함께 개발 환경을 설정하는데, 서로 설치 방법이 달랐기 때문에 정리해보았다. 프로젝트 생성 방법의 2가지 1. 새로운 Next.js + TypeScript 프로젝트 생성하기 2. 기존의 Next.js 프로젝트에 TypeScript 설치하기 1. 새로운 프로젝트 생성하기 $ npx create-next-app --typescript my-project 2. 기존 프로젝트에 TypeScript 설치하기 1) 프로젝트 루트 경로에 tsconfig.json 파일을 생성한다. (touch t..

Next.js 기반의 프로젝트를 진행하면서, CSR과 SSR 방식에 대해서 알게 되었다. 그 외에도 SSG, ISR.. 방식이 있었고, 앞으로 렌더링 과정을 보다 잘 이해하고 효율적으로 구현하기 위하여 이를 공부해보았다. 알아두어야 할 것 Next.js는 React로 만드는 SSR 프레임워크이다. CDN (Content Delivery Network) 서버 : CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다. CDN 서버는 웹 애플리케이션 서버보다 항상 빠르다. WAS (Web Application Server) : 웹 애플리케이션 서버는 쉽게 말하면 생각하는 서버라고 생각하면 된다. 사용자의 요청에 따라 API 서버에 다녀와야함을 알고..