전체 글50 팀 프로젝트 시작 시 주제 설정기한 및 의사소통 문서, 도구 결정한다.기획 / 와이어프레임 디자인코드 컨벤션 맞추기개발 담당 분리개발 시작 2024. 7. 16. supabase - ssr 수업내용 정리 원래 평소에 하던 프로젝트에서는슈퍼베이스를 쓸 때 슈퍼베이스는 브라우저에서 돌아가고 있었다.그래서 브라우저에서 데이터페칭을 편하게 할 수 있었던 이유는 슈파베이스가 authentication 같은 것도 포함하고 있었기 때문이다.근데 이제 서버사이드에서는 요청을 주는 이 사람이로그인을 한 사람인지 안한 사람인지 그걸 직접적으로 알기가 어렵다.그래서 그거를 Next.js의 서버에도 브라우저에서 지금 로그인한 상태인지를 전달할 수 있는가. 그거를 어떻게 하면 Next.js의 서버에도 브라우저에서 지금 로그인한 상태인지를 전달할 수 있는가. 이제 같이 알아보도록 하자. 기존 브라우저에서 initiallization 하는 방식. 근데 이 방법이 아니라 조금 다르게 설치를 해야한다.아래를 참고하자. Setting.. 2024. 7. 15. Next.js 404 에러 페이지 만들기 Next.js 팀 프로젝트를 진행 중에 404 페이지를 만들게되었다. 내 생각엔 뭔가 프레임워크니까loading.tsx처럼 파일명만 Next.js에서 제공하는대로 쓰면 (예를들어 404.tsx)404 페이지가 뜨도록 갖춰져 있지 않을까 싶어서 검색해보게 되었다. 내 생각이 정답이었다...!! 다만 방식이 2가지여서 여러 시도끝에 적용할 수 있었다. Next.js에서 404 페이지 만드는 방법Next.js는 매우 강력하고 유연한 프레임워크로, 404 페이지를 커스터마이징하여 사용자 경험을 향상시킬 수 있다.Next.js에서 404 페이지를 만드는 방법과 함께 예상치 못한 오류를 처리하는 방법을 작성해보겠다. 1. 404 페이지 만들기Next.js에서는 pages 디렉토리에 404.js 파일을 추가하여 커스.. 2024. 7. 13. Callback 함수 콜백함수는 전달인자로 다른 함수에 전달되는 함수이다. 콜백 함수는 다른 함수의 인수(파라미터)로 전달되어, 특정 작업이 끝난 후 실행되는 함수이다.자바스크립트에서는 비동기 작업을 처리할 때 많이 사용된다.비동기 작업이란, 코드가 순서대로 실행되지 않고, 시간이 걸리는 작업이 끝나면 그때서야 실행되는 작업을 말한다. 콜백 함수의 예제콜백 함수를 이해하기 위해 간단한 예제를 보자.function greeting(name) { console.log(`Hello, ${name}!`);}function processUserInput(callback) { const name = prompt("Please enter your name."); callback(name);}processUserInput(greeti.. 2024. 7. 13. Object.keys() - 객체의 key값을 뽑아서 배열에 저장하기 최근 채용공고 api를 가지고 프로젝트를 하고있어서키워드에 따른 결과만 보여주도록 만들기 위해 키워드의 대한 정보를 다루던 중. 서울 R3010 인천 R3011 대전 R3012 대구 R3013 부산 R3014 광주 R3015 울산 R3016 경기 R3017 강원 R3018 충남 R3019 충북 R3020 경북 R3021 경남 R3022 전남 R3023 전북 R3024 제주 R3025 세종 R3026 해외 R3030 이 데이터를 객체로 변환하였다.export const locationOptions: { [key: string]: string } = { 서울: "R3010", 인천: "R3011", 대전: "R3012", 대구: "R3013", 부산: "R3014", 광주: "R3015", 울.. 2024. 7. 13. 파라미터 (Parameter)와 인자 (Argument) 문득 파라미터와 인자의 차이점에 대해 궁금해져서 찾아보게되었다.비슷해보이지만 엄연히 차이가 있었다! 프로그래밍에서 '파라미터'와 '인자'는 함수와 메서드를 다룰 때 자주 사용되는 용어이다.이 둘은 비슷한 개념이지만 서로 다른 맥락에서 사용된다. 파라미터 (Parameter)파라미터는 함수를 정의할 때 사용된다.함수가 호출될 때 외부로부터 전달받을 값을 지정하는 변수입니다.함수의 선언부에서 함수 이름 옆에 괄호 안에 작성되는 변수가 파라미터입니다.예를 들어, 다음은 두 개의 파라미터를 가지는 함수의 정의입니다.def add(a, b): return a + b 여기서 a와 b가 파라미터입니다. 인자 (Argument)인자는 함수를 호출할 때 전달하는 실제 값이다.파라미터가 함수 정의 시에 사용되는 변.. 2024. 7. 13. Next.js에서 Suspense 사용하기 몇 주전, 팀 프로젝트 기간에다른 팀의 팀원이 엄청 고민에 빠져있는 것을 보고 무슨 일인지 물어봤다. Suspense를 사용하려는데 서버 컴포넌트에서는 잘 작동하는데클라이언트 컴포넌트에서 잘 작동이 되지 않는다고 하였다. 나는 Next.js 프로젝트를 시작한지 얼마되지 않아서,suspense의 개념만 알고 사용해본적이 없었어서 도움이 되지 못했다. 이번에 생각난 김에 나도 공부해두면 좋을 것 같아서 정리하게되었다. Suspense란?Suspense는 React에서 비동기 작업(예: 데이터 패칭)을 처리할 때 사용된다.컴포넌트가 비동기 작업을 완료할 때까지 대기 상태를 표시하도록 도와준다.import React, { Suspense } from 'react';const DataComponent = Reac.. 2024. 7. 11. Tanstack query에서 Hydration - SSR Next.js로 프로젝트를 진행하다가 Tanstack query를 사용시 클라이언트 컴포넌트가 된다는 것을 알았다.Tanstack query를 쓰더라도 서버 컴포넌트로 만들 수 없을까? 하는 생각이 들었다. 그러다가 나는 왜 굳이 서버 컴포넌트를 고집하는가? 하는 생각이 들면서 다시 정리를 해봤다. [ 서버 컴포넌트를 사용하는 이유 ]SEO 최적화서버에서 HTML을 생성해 클라이언트로 전달하면 검색 엔진 크롤러가 더 쉽게 페이지 내용을 인덱싱 가능. 이는 검색 엔진 최적화(SEO)에 도움이 됨.빠른 초기 로드 속도클라이언트에서 JavaScript가 실행되기 전에 미리 렌더링된 HTML을 제공함으로써 초기 로드 속도가 빨라짐. 사용자는 더 빠르게 콘텐츠를 확인 가능.데이터 페칭 효율성서버에서 데이터 페칭.. 2024. 7. 10. 캐러셀 캐러셀을 들어만 봤지, 한 번도 만들어본 적이 없었는데 이번 기회에 배워본다! 캐러셀(Carousel)은 웹 디자인과 사용자 인터페이스(UI) 디자인에서 흔히 사용되는 구성 요소 중 하나다. 캐러셀은 여러 콘텐츠 아이템(이미지, 텍스트, 카드 등)을 순서대로 표시하며, 사용자가 이전 또는 다음 버튼을 클릭하거나 자동으로 아이템이 순환되도록 하는 방식으로 작동한다. 캐러셀은 종종 이미지 슬라이더(Image Slider)라고도 불린다. 캐러셀의 주요 특징연속적인 순환: 캐러셀은 콘텐츠 아이템이 끝없이 순환되도록 설계된다. 사용자가 마지막 아이템에 도달하면, 다시 첫 번째 아이템으로 넘어간다.내비게이션 버튼: 사용자는 일반적으로 이전 또는 다음 버튼을 클릭하여 원하는 아이템으로 이동할 수 있다.자동 재생: 많.. 2024. 7. 9. 이전 1 2 3 4 5 6 다음
