2024내일배움캠프/TIL (30) 썸네일형 리스트형 [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] 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].. [TIL] 3/10 next.js next.js는 공장이다공장에서 일을 하려면 정해진 규칙을 따라야 한다. next도 마찬가지이다 정해진 규칙이 있고 그걸 따라서 하기만 하면 된다 page를 만들려면 먼저 폴더를 만들고 그 안에 page.tsx를 넣어야 한다 다른 파일명을 넣으면 안된다같은 폴더 안에 layout를 넣으면 이 layout은 같은 폴더 안에 있는 page에만 적용이 된다 detail/id와 같은 파일을 만들고 싶다면 detail폴더 안에 [id]폴더를 만들고 그 안에 page.tsx를 만든다그리고param을 이용해서 id값을 가져온다 즉 폴더 = 라우팅이다그럼 어떤 폴더가 라우팅되지 않으면 좋겠다면? 폴더명을 괄호로 감싸주면 오로지 폴더의 역할만 하고 라우팅되지 않는다 [TIL] 3/7 TS(제네릭)! TS를 익히고 아직 사용이 익숙하지 않은 TQ와 Justand를 연습하기 위해TS, TQ, Justand, Axios를 사용해서 투두리스트를 만들어보기로 결심!쉽지 않을 것 같다어디까지 타입을 넣어줘야하는지도 아리송한 상태,,1. axios를 통해서 받아오는건 앞에 Axios를 붙여준다!axios.get의 반환 형식은 AxiosResponse이다여기에 내가 넣은 값 Todo[]가 들어갔다2. 제네릭이란 무엇일까?제네릭은 보통 T를 많이 사용한다. 아니면 주로 대문자 하나(R, S, U,,,,)제네릭은 타입을 변수화한 것으로 생각하면 쉽다! 우리가 보통 함수에서 인자를 받아서 사용할 때의 그 인자. 혹은 매직넘버를 상수화해놓은 변수라고 생각하는게 나는 이해하기 쉬웠다function toArray(a: T,.. [TIL] 3/6 새로운 주차, 새로운 팀 심화주차가 끝이 나고 주특기 플러스 주차가 시작되었다이번 주차에서는 TS와 Next.js를 배운다ts,,,,타입 명시만 하면 되겠지 가볍게 생각하고 시작했는데 타입 명시를 이렇게나 다양하게 할 수 있구나를 느꼈다 이번 팀에서는 내가 리더를 맡게 되었다단순히 팀내 유일한 E라는 이유로,,,,사실 한번쯤을 해보고 싶었는데 이렇게 일찍 하게 될 줄 몰랐다근데 다시 생각해보니 이번 팀플이 끝나고 다음 팀플은 최종 팀플이라 규모가 너무 커서 이번이 시도해보기 좋은 타이밍인 것 같기도 하다솔직히 부담이 꽤 많이 되기는 하지만,,,나는 너무 부족한데 내가 어떻게,,,제일 부담이 되는 부분은 프로젝트 세팅 부분이라서 미리미리 노션에 정리해두고 있다이전의 팀플에서 팀장님들이 보여줬던 세팅을 생각하며 나도 열심히 해야지 [TIL] 2/26 개인프로젝트 끝나자마자 또 팀플이요? 어제 개인 프로젝트가 끝났고 오늘 오전에 팀프로젝트 발제가 있었다이번에는 지도 api이나 유튜브 api를 활용한 사이트를 만들어야 한다 이전 프로젝트에서는 쓰지 못했던 zustand와 tanstack query, tailwind css를 써야 하는게 부담이 된다하지만 zustand나 tanstack query는 익숙하지 않아서 그렇지 막상 해보면 쉽다고들 이야기해서이번 기회에 제대로 써보자. 라는 생각으로 강의 복습을 하고 있다 기획과 피그마로 디자인 조금 하고, 레포지토리 초기 세팅으로 오늘은 끝냈다내일부터 본격적인 팀플이 시작될텐데, 이전 팀플에서 아쉬웠던 점들이 이번 팀플에서는 개선할 수 있기를 바란다 이전 1 2 3 4 다음 목록 더보기
