![]()
테스트를 마치고 나면 사용자의 별점과 등수가 표시되는데, 해당 정보를 트위터와 카카오톡에 공유하는 기능을 만들었다. 트위터 공유 트위터에 공유하기는 굉장히 간편했다. 아래와 같이 url에 공유를 원하는 url 주소를 입력하고, text에 추가로 필요한 텍스트를 입력하면 된다. window.open() 메서드를 버튼 형태로 만들면 해당 코드가 바로 열린다. https://twitter.com/share?url=url&text=text { window.open( `https://twitter.com/share?url=https://divdivdiv.com/cinephile&text=나의 시네필 평점은?${starCount}` ); }} > 트위터 공유하기 ; 카카오톡 공유 카카오톡 공유 기능을 쓰려면 카카오..
![]()
시네필 테스트에는 크게 4가지 타입의 페이지가 있다. 먼저 인덱스 페이지에서는 사용자의 닉네임을 입력받을 수 있고, 하단 버튼을 누르면 테스트 페이지로 이동한다. 테스트 페이지에는 테스트를 위한 문제들을 순서대로 보여준다. 마지막 문제인 25번째 문제에서 하단 버튼을 누르면 결과 페이지로 이동한다. 결과 페이지의 하단에는 참가자의 테스트 결과를 포함해 트위터/카카오톡 공유, 재도전, 해설지 버튼이 있다. 해설지 페이지에는 모든 문제의 정답과 해설을 제공한다. 모든 페이지는 비슷한 레이아웃을 공유하고 있으면서도 페이지 타입에 따라 서로 다른 콘텐츠와 기능을 가지고 있다. 이를 효율적으로 반영하기 위해 상태 변수를 활용하는 방식을 선택했다. pageType이라는 상태 변수는 하단 버튼(handleButton..
![]()
모듈화의 필요성 이 프로젝트는 영화에 관한 25개의 퀴즈를 풀 수 있는 사이트인데, 코드를 짜면서 문제를 여러 번 수정하거나 삭제하는 과정을 거쳤다. 그런데 중간중간 문제를 새로 추가하거나 순서를 바꾸는 일, 해당 부분을 찾아 블록 단위로 코드를 옮기거나 변경하는 일이 매우 불편하게 느껴졌다. 결과적으로 프로젝트를 완성한 다음, 모든 문제를 별도의 라이브러리에 모듈 형태로 저장하는 리팩토링 작업을 했다. 모듈 활용 각각의 문제를 객체 형태로 만들고 난 뒤, question, answer, options를 키로 설정했다. 또 문제의 type과 caption, reference라는 특수 항목을 만들어 문제가 주관식인 경우, 그리고 문제를 다 풀고 나서 제공되는 해설지에서도 이 모듈을 효과적으로 활용할 수 있..
![]()
CRUD, 몽고DB 카버차트는 위 사진처럼 스포티파이 API를 통해 가져온 음반 정보, 내가 임의로 추가한 텍스트를 합쳐 하나의 포스트로 표시한다. 그런데 데이터를 추가할수록 이를 지속적으로 관리할 수 있는 방식, 그러니까 특정 데이터베이스에 포스트를 업로드하고, 가져오고, 수정하고, 삭제하는 로직이 필요하다는 생각이 들었다. 이를 흔히 CRUD(Create, Read, Update, Delete)라고 한다. 몽고DB는 데이터를 JSON 구조로 저장해 사용자의 직관적인 이해를 돕고, 다른 데이터베이스에 비해 사용 방법이 쉽다. 무료 플랜의 경우 저장된 데이터를 불러오는 속도가 다소 느리긴 하지만, 사용하지 못할 정도는 아니다. MongoDB: 애플리케이션 데이터 플랫폼 업계 최고의 최신 데이터베이스를 토..
![]()
다음 링크에 Next.js에서 다이나믹 라우트를 처리하는 방법이 자세하게 설명되어 있다. Routing: Dynamic Routes | Next.js Using Pages Router Features available in /pages nextjs.org 예를 들어, 블로그 사이트는 pages/blog/[slug]와 같은 라우트 페이지를 포함할 수 있다. 여기에서 [slug]는 블로그 포스트에 대한 다이나믹 세그먼트(데이터가 표시할 수 있는 형식으로 변환된 형태)이다. [slug]는 원하는 이름으로 얼마든지 변경 가능하다. 이 프로젝트에서는 음악 장르 페이지에 해당하므로 이름을 [genre]로 설정했다. 다이나믹 세그먼트에 해당하는 컴포넌트에서는 다음과 같은 방식으로 경로의 이름을 가져와 이용할 수 있다..
![]()
다음 링크에서는 전세계의 각종 날씨 정보 API를 무료로 제공한다. 사이트에 가입하고 나서 무료 플랜을 신청하면 개인별 API 키가 생성되는데, 해당 정보로 API를 호출해 원하는 날씨 정보를 가져올 수 있다. Current weather data - OpenWeatherMap openweathermap.org async & await 문법으로 API를 비동기 처리했다. JSON 형식으로 서울의 현재 온도 및 날씨 아이콘 정보를 한국어로 가져온 뒤, weather라는 상태 변수에 해당 데이터를 객체로 저장했다. 참고로 API 키는 원래 긴 문자열 형태지만, 보안 문제로 줄임 표시했다. export const fetchData = async (setWeather: React.Dispatch) => { tr..
![]()
시계 컴포넌트 사이트 상단바에 현재 시각을 실시간으로 표시하는 시계 기능을 넣었다. 시계는 1초마다 렌더링을 발생시켜 주어진 함수에 의해 현재 시각을 체크한다. 그런데 이 부분이 Next.js의 서버 사이드 렌더링과 충돌하면서 런타임 에러가 발생했다. 브라우저에서만 동작하는 서드파티 라이브러리나 모듈을 사용할 때 종종 이런 이슈가 발생된다고 한다. 이 경우 서버 사이드 렌더링을 직접 해제해야만 한다. 컴포넌트가 window 객체 또는 로컬 스토리지 속성에 접근해야 한다면 서버 사이드 렌더링이 불필요하다. 프로젝트에서 서버 사이드 렌더링을 사용할지 여부는 개인의 선호도 문제이다. export default function Clock() { const language = useContext(LanguageC..
![]()
자식 컴포넌트로 props를 통해 필요한 값 전달하기 부모 컴포넌트인 Main에서 모바일 화면 여부, 이미지 주소와 캡션, 클릭 이벤트에 해당하는 값을 넘겨준다. export default function Main() { // ... const [showImage, setShowImage] = useState(false); const [imgSrc, setImgSrc] = useState(""); const [imgAlt, setImgAlt] = useState(""); const [windowWidth, setWindowWidth] = useState(window.innerWidth); const isMobile: boolean = windowWidth < 630; // ... return ( {sho..
![]()
아이콘 컴포넌트 divdivdiv의 메인 화면 아이콘은 총 세 가지 종류(폴더, 이미지, 포춘쿠키)로 구성되어 있으며, 각각의 아이콘은 서로 다른 정보와 기능을 갖고 있다. 그러나 일부 스타일을 공유하고 있고, 더블 클릭 시 동작을 수행하며, 사용자가 원하는 위치로 드래그할 수 있다는 공통적인 특성이 있다. 따라서 이 아이콘들을 우선 하나의 컴포넌트로 묶은 뒤, 아이콘 상태를 개별적으로 관리해야 할 필요가 생겼다. 컴포넌트 이름은 DraggableComponent()로 지었다. function DraggableComponent(props: { className: string; path: string; type: string; title: TitleProps; width: number; height: nu..
![]()
Next.js는 기본적으로 SEO(검색 엔진 최적화)를 지원하도록 설계되어 있다. SEO는 웹 페이지를 검색 엔진에서 노출시키고 높은 순위로 노출되도록 최적화하는 작업을 의미한다. 이는 웹 사이트의 방문자 수를 증가시키고 검색 결과에서 더 많은 유기적인 트래픽을 유도할 수 있다. Next.js에서 SEO를 개선하는 방법은 다음과 같다: Head 컴포넌트 사용: Next.js에서 제공하는 Head 컴포넌트를 사용해 각 페이지의 head 섹션을 커스터마이징할 수 있다. 이를 통해 페이지의 메타 태그(meta tag), 제목(title), 설명(description), 키워드(keywords) 등을 설정할 수 있다. 서버 사이드 렌더링(SSR): Next.js는 기본적으로 서버 사이드 렌더링을 지원한다. 이는..
![]()
Nextjs에서 데이터를 가져오는 방법은? 여러 가지가 있다. 그래서 애플리케이션의 사용 용도에 따라 다른 방법을 사용해주면 된다. 보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져온다. 하지만 Next.js에서는 다른 방법을 사용해서 가져오는데 하나씩 살펴보자. getStaticProps Static Generation으로 빌드(build)할 때 데이터를 불러온다. (미리 만들어줌) getStaticPaths Static Generation으로 데이터에 기반해 pre-render시 특정한 동적 라우팅 구현(pages/post/[id].js) getServerSideProps Server Side Rendering으로 요청이 있을 때 데이터를 불러온다. getStaticProps get..
![]()
pages 이 폴더 안에 페이지들을 생성한다. index.tsx가 처음 "/" 페이지로 된다. _app.tsx 는 공통되는 레이아웃을 작성한다. 모든 페이지에 공통으로 들어가는 걸 넣으려면 여기에 넣으면 된다. (url을 통해 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지이다.) 만약 about이라는 페이지를 만들려면 pages 폴더 안에 about.tsx를 생성하면 된다. public 이미지 같은 정적(static) 에셋들을 보관한다. styles 말 그래도 스타일링을 처리해주는 폴더이다. 모듈(module) css는 컴포넌트 종속적으로 스타일링하기 위한 것이며, 확장자 앞에 module을 붙여야 한다. next.config.js Nextjs는 웹팩을 기본 번들러로 사용한다. 그래서 웹팩에 관한 ..
![]()
Next.js란? React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. (리액트는 라이브러리) 리액트로 개발할 때 SPA(Single Page Application)을 이용하며 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색 엔진 최적화(SEO) 부분이다. Client Side Rendering을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석해 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없다. 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하며 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링..
