전체 글 (140) 썸네일형 리스트형 [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] 4/11 서버액션 VS 라우트 핸들러 (feat. 서버액션은 간결해) nextJS로 프로젝트를 진행하게 되면서어떤 경우에 서버 액션을 써야 하는지, 라우트 핸들러는 언제 쓰면 좋은지, 어떤게 더 좋은지등등의 궁금증들이 생겼다.마침 팀에서 이 주제로 기술 토론을 했기에서버액션과 라우트핸들러에 대해 정리를 해보려고 한다 서버액션이란?Next.js 13부터 도입된 Server Actions는 서버에서 실행되는 비동기 함수를 간단하게 정의하고 사용할 수 있게 해주는 기능이다.주로 폼 제출처럼 사용자의 입력을 처리하거나, 서버의 상태를 변경하는 데에 적합하다. Server Action은 "use server" 지시어를 통해 서버 함수임을 명시하고,클라이언트 컴포넌트에서 직접 호출할 수 있도록 만들어진다.클라이언트에서 해당 함수를 호출하면 React가 자동으로 서버에 요청을 보내고,.. [TIL] 3/28 최종프로젝트 시작! feat.부리더 최종 프로젝트를 앞두고 나는 부리더에 지원했다리더도 아니고 왜 부리더? 할 수 있는데최종 프로젝트의 리더는 나한테 너무 무겁고 부리더면 괜찮을 것 같았다 매니저님한테 면접을 봤는데 긴장되는건 없었고 하하호호 이야기 하다 왔다왜 리더가 아니라 부리더를 신청했는지, 왜 같이 지원 안하고 혼자 지원했는지도 물어보셨다같이 하고 싶은 사람들이 다 도전반 신청했을 것 같아서 라고 했다ㅋㅋㅋ 그런데 그때 말했던 사람들 중 한 분과 리더로 이 팀에서 만났다이 분도 누구랑 하고 싶냐는 말에 내 이야기를 하셨다고 했다짝사랑(?)이 아니라서 너무 기뻤다 희희 다른 팀원분들도 예ㅔㅔㅔㅔㅔ전에 만났다거나, 오다가다 봤거나 했던 분들이었다한 분만 처음 보는 분다들 밝고 말도 많이 하고 그래서 분위기가 좋았다 정말 다행,, 이번에.. [TIL] 3/27 주특기 플러스 팀 프로젝트 KPT 회고,,커뮤니케이션 Keep - 현재 만족하고 있는 부분하고자하는 마음 가짐질문했을 때 함께 탐구하고 도와주는 태도적극적인 모습끈기와 집념필요한 부분을 스스로 찾아서 반영 및 구현Problem - 불편하게 느끼는 부분매트릭스 테마를 구현하지 못한 것github Discussion, git Action을 사용해보지 못한 것깃 플로우 전략을 사용하지 못한 것필수 기능이 완성되지 못한 것Try - Problem에 대한 해결책, 당장 실행 가능한 것다음 프로젝트에서는 깃 플로우 전략 사용하기기획 단계에서 MVP 확실하게 잡고 가기API 기반 프로젝트를 한다면 해당 API의 서비스가 종료될 수 있다는 것 유의하고 DB화 하기 이번 팀플에서는 트러블 슈팅도 열심히 하리라 마음먹었건만 팀플과 TIL을 같이 가지고 가기에는 너무 정신이 .. [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 등을 가능하게 해주고, 서버 컴포넌트 내에서 만들고 클라이언트 컴포넌트에.. 이전 1 2 3 4 ··· 18 다음
