2024내일배움캠프 (59) 썸네일형 리스트형 [TIL_기술토론_2] 4/11 우리 팀이 Next.JS를 도입한 이유와 다양한 렌더링 방식 이번 기술토론으로는 우리 팀이 이번 프로젝트에서 Next.JS를 도입한 이유와 Next.JS의 렌더링 방식에 대해서 알아보았다먼저 팀에서 같이 이야기한 내용을 정리한 사진을 같이 첨부한다렌더링 방식은 이미 작성한 글(https://smileys-how.tistory.com/134)이 있어서 넘어가고, 장점에 대해서 적어보고자 한다 Next.JS를 사용하면서 좋았던 점들은,,먼저 프레임워크다보니 강제하는 것들이 많아서 컨벤션이 맞춰진다는 것이다예를 들어 mypage라는 폴더를 만들고 그 하위에 page.tsx를 만들어야 mypage라는 경로의 페이지가 만들어진다거나, 라우트핸들러를 사용할 경우 api폴더/필요한 폴더명/route.ts를 만들어야 한다는 것들이 있었다특히 미들웨어가 정말 좋았다이전 리엑트를 .. [TIL] 3/20 주특기 플러스주차_NextJS를 활용한 팀플! 최종 프로젝트 전 마지막 팀플이다어제 깃헙에 레포지토리 만들고 이슈템플릿, PR 템플릿 설정 등을 했고깃 컨벤션과 코드 컨벤션을 정했다 오늘 발제를 통해 자유주제인게 확실해졌다NextJS를 쓰는 것에 맞게 API를 무조건 활용해서 만들고 싶었는데 도무지 아이디어가 생각나지 않았다3개의 후보 중(버스 첫차,막차 알림 서비스, 레시피 알려주는 서비스, 마지막은 뭐였는지 기억도 안나는)레시피 알려주는 서비스가 뽑혔다 사용자가 원하는 재료와 원하지 않는 재료를 입력하면 그에 맞게 3가지 정도의 요리를 알려주고,클릭한 요리의 레시피를 알려주는게 목표였다 하지만 API의 벽에 막혔다사용하고자 했던 API가 있는 웹사이트가 하필이면 오늘 점검날이었다내일은 되겠지하고 기획을 진행하다 내일 안되면? 이라는 생각이 들었고.. [TIL] 3/19 nextJS에서 서버는 무엇일까? 서버 : 요청이 들어오면 응답을 주는 것ex) 고양이 온도니를 치면 야옹한다 => 고양이도 서버다(?) nextJS에서의 서버는 웹서버다(-> 웹에서 하니까)웹사이트는 GET, POST, DELETE, PATCH등의 요청이 들어오면 처리한다 웹서버의 역할1. HTML제공(정적 사이트 제공) : 사용자가 보는 부분 즉, 프론트엔드2. API 제공 : 백엔드에 가깝다 API - 데이터를 주는 리엑트의 웹서버 역할index.html - div(id:root) + JS번들파일 제공 브라우저가 알아서 JS를 해석해서 브라우저에서 그린다 -> 클라이언트가 렌더링의 주체 = 클라이언트 사이드 렌더링 -> JS 해석해서 렌더링하기까지 TTV가 길다 Next의 웹서버서버라는 역할이 바뀌게 된다 - .. [TIL__LoL_트러블슈팅(4)] 3/18 vercel 배포 후 에러 1. 404:NOT_FOUND배포 후 첫 화면이 404:NOT_FOUND 화면이었다,,,빌드도 잘 되었는데 왜 404가 뜰까 vercel에서는 champion을 찾을 수 없다고 했다로컬에서는 너무나 잘됐기에 도무지 이해가 가지 않았다기존의 @로 import한 부분도 저렇게 상대경로로 넣어주기도 했는데 안됐다그러다가 이 블로그 글을 보게 되었다https://velog.io/@shyuuuuni/Vercel-Cannot-find-module-%ED%8C%8C%EC%9D%BC%EB%AA%85-or-its-corresponding-type-declarations-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0 Vercel - Cannot find module '파일명' or its corres.. [TIL__LoL_트러블슈팅(3)] 3/17 어렵다어려워 1. 함수를 분리하자 안되는 오류밑의 함수는 위의 훅에서 쓰는 queryFn의 내용을 그대로 복붙해서 분리시킨 함수이다그런데 분리해주면 저런 에러가 생긴다는 그냥 내가 형식을 잘못 넣었던 것,,,,어제부터 안됐었는데 흙흙 강의를 다시 돌려보고 알게 되었다2. use Server가 뭔데?server API들을 모아놓은 파일에 use server를 추가해보라는 발제문서의 문항에 따라 use server를 추가했다달라진점은 async 함수만 들어갈 수 있어서 그 파일에서 써서 넣어뒀던 상수들을 다른 파일로 이동해야 했다그것 말고는 뭐가 달라진건지 알 수 없었다 찾아보니 클라이언트 측 자바스크립트 감소, 서버 측 data mutations 등을 가능하게 해주고, 서버 컴포넌트 내에서 만들고 클라이언트 컴포넌트에.. [TIL__LoL_트러블슈팅(2)] 3/13 1. 이미지가 안 나와요!아이템의 이미지를 화면에 렌더링하기 위해 라이엇 공홈에서 제공하는 url를 사용해서 넣어줬다하지만 이런 에러를 만나게 되었다url의 마지막 부분에 이미지의 아이디를 넣었을 때 이미지를 잘 가져오는지 테스트 해보았다이상이 없다해결 : 에러메시지에 적혀있는 see more info(https://nextjs.org/docs/messages/next-image-unconfigured-host)를 따라갔다이미지를 사용하기 위해서는 next.config.js를 수정해야한다는 것을 알게 되었다module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'assets.exa.. [TIL__LoL_트러블슈팅(1)] 3/12 fetch는 했는데,,,, SSG로 만드는 페이지부터 만들어야겠다 하는 생각으로 items의 목록을 보여주는 페이지를 시작했다Riot API에서 items목록을 주는 api를 찾아서 목록을 가져왔다description이 이상하게 나와서 이름만 가져왔다이렇게 이상하게 나와서 일단 중요한 이름, 그리고 이미지를 가져와야 한다아이템리스트를 가져올 때 버전을 명시해줘야 해서 최신 버전을 가져오는 함수를 만들어서최신 버전의 아이템리스트를 가져올 수 있도록 했다이미지 가져오는건 내일,,, [TIL] 3/11 next.js(2) 4가지 렌더링 1. 클라이언트 사이드 렌더링 CSR(Client Side Rendering) - 페이지의 정적인 부분만 서버에서 생성하고, 데이터는 클라이언트에서 자바스크립트를 통해 동적으로 렌더링 장점 : - 서버의 부담 감소 - 최초 한번 로드가 끝나면 사용자와 빠르게 상호작용 가능 - 서버에게 추가적인 요청을 보낼 필요가 없어 사용자 경험이 좋다 단점 : - 첫 페이지 로딩시간(Time To View)이 길 수 있다 - js가 로딩 되고 실행될 때까지 페이지가 비어있어 검색 엔진 최적화(SEO)에 불리하다 'use client';import { useEffect, useState } from 'react';export default function Page() { const [data, setData].. 이전 1 2 3 4 ··· 8 다음 목록 더보기
