티스토리

개발해해원

검색하기

블로그 홈

개발해해원

riversun1.tistory.com/m

riversun1 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Canvas 사용법 오늘 canvas에 대해서 듣게 되었다.수료생들이 볼 수도 있는 블로그라자세한 내용은 아직 말할 수 없지만. canvas에 관한 내용을 정리해보려한다! 내 깃허브에 있는 gitanimals도 canvas로 만든거라는 사실을 알게되었다...⭐개발자라면 이런 것들도 뜯어볼 생각을 해야할 것...👀 Canvas 기본 사용법Canvas는 HTML5에서 제공하는 그래픽을 그릴 수 있는 강력한 도구이다.웹 애플리케이션에서 2D 및 3D 그래픽을 생성하는 데 사용되며, 게임, 데이터 시각화, 애니메이션 등에 활용된다. 1. Canvas 요소 추가하기HTML 문서에 Canvas를 추가하기 위해 태그를 사용한다. 아래는 기본적인 Canvas 요소의 예시이다.id 속성을 통해 JavaScript에서 해당 Canva.. 공감수 0 댓글수 2 2024. 8. 9.
Next.js에서 제공하는 4가지 렌더링 방식 요즘들어 모의면접을 보는데렌더링 방식에 대해서 질문하시는 경우가 있었어서정확히 알아두고자 다시 정리한다! 1. SSG - 정적 생성 (Static Generation) : 정적 생성은 빌드 타임에 페이지를 미리 생성하는 방식입니다. getStaticProps와 getStaticPaths 함수를 사용하여 데이터를 가져오고, 이 데이터를 기반으로 HTML 파일을 생성합니다. 이 방식은 빠른 페이지 로딩 속도를 제공하며 SEO에 유리합니다. 페이지의 내용에 있는 데이터가 자주 바뀔 필요가 없고, 검색엔진 최적화가 필요한 페이지에 적합하다. 블로그, 뉴스 등 정보성 페이지 🎀📚 fetch한 데이터는 영원히 변치 않는다. 계속 컴포넌트를 갱신할 .. 공감수 0 댓글수 0 2024. 8. 8.
react-dnd, react-beautiful-dnd, hello-pangea/dnd 최종 프로젝트 MVP 이후 단계에서📚 칸반보드 구현을 맡게 되었다! 그래서 Drag and Drop 라이브러리를 직접 써보는데react-beautiful-dnd를 쓰는데 id 부분에서 계속 에러가 났다. 내가 잘못 코드를 짠건가 싶어서 다른 예제를 그대로 들고와서 했는데도 똑같은 상황의 반복이었다... 그래서 그냥 react-dnd를 사용해봤다. react-dnd는 뭔가 아이템을 옮길때 딱딱 끊어진다고 해야하나.옮길때 애니메이션이 매끄럽지 못했다.찾아보니까 매끄러운 애니메이션을 원한다면 react-beautiful-dnd를 써야한다고 했다...ㅠㅠ 그래서 이왕 만드는거 잘 만들면 좋으니까...! 다시 react-beautiful -dnd에 도전...! 진짜 저 에러 잡겠다고 하루를 날렸는데...알고보니.. 공감수 0 댓글수 0 2024. 8. 7.
모의 면접 후기 장례식을 다녀오느라 못본 모의면접...튜터님께서 오늘 오전 9시 30분에 보자고 연락이 오셔서 면접을 봤다, 아침이라서 그런지 머리도 안돌아가고 잘 못본것 같다...(+ 젤 따르고 싶은 튜터님께 본거라 너무 긴장을 한 것 같기도😥) 초반에 태도랑 자신감에서 지적을 주셨다.웃으면 좋은 줄 알았는데 그래도 진지하게 면접에 임해야하는 것 같다.그리고 자신감이 없어보였던 것 같다. 질문은1. 배열과 객체 (순서가 있는 리스트, key-value)2. Props drilling (필요없는 컴포넌트까지)3. 타입 단언 (as, 개발자인 우리가 타입을 더 잘알때)4. SEO (상위노출, 시맨틱 태그사용, head-title, meta, script...) SEO를 하기위해 Next.js를 써서 SSR을 해야한다.. 공감수 0 댓글수 0 2024. 8. 6.
최종 프로젝트 중간발표 + 그동안의 일 최종 프로젝트를 한참하던 중,,,7월 31일에 친척분이 돌아가셔서8월 1일 오후부터 8월 2일까지 자리를 비우게 되었다. 최종 프로젝트지만 나에게 있어서 차마 안갈 수 없는...그런 분이셔서 팀원들께 양해를 구하고 출발하게 되었다. 그래도 내 분량인 공통 컴포넌트는 다 만들고8월 1일 오전까지 열심히 문제 해결도하고,, 출발하여서마음의 짐이 조금은 덜했다. 폭염이었는데 햇볓 쨍쨍 내리쬐는 산소에 있었던터라,, 두피랑 피부가 빨갛게 부어올랐다.아직도 너무너무 아프고 약바르고 있는데 그래도 프로젝트는 해야지! 다녀와서 바로 중간발표 PPT를 도맡아 만들었다.우리의 프로젝트랑 같은 느낌의 아주 심플한 PPT를 만들었다. 그리고 8월 5일 오늘 중간발표가 있었다.개인적인 생각으로 우리팀 PPT가 제일 보기 .. 공감수 0 댓글수 0 2024. 8. 5.
Modal과 Dialog의 차이 요즘 디자이너와의 최종 팀프로젝트를 진행 중이다. 나는 MVP 구현 단계에서 시스템 컴포넌트 제작을 맡았다.그동안 팀프로젝트에서 각자 맡은 페이지의 컴포넌트는알아서 만드는 식으로 진행했었다. 이번 기회에 공용 컴포넌트를 만들어보는 좋은 경험을 할 것 같다.겸사겸사 storybook도 배워두면 좋을 것 같다. 공용 컴포넌트를 어떻게 만들어야다른 팀원이 편하게 쓸지... 고민을 많이 해보는 중이다. 오늘 시스템 디자인 도안이 나와서 둘러보던 중,다이얼로그를 보게 되었는데개발자들은 이걸 모달이라고 부르는 것 같은데무슨차이가 있는지 궁금해졌다. Modal과 Dialog는 비슷한 개념이지만 약간의 차이가 있다.둘 다 사용자와 상호작용할 수 있도록 도와주는 창이다. Modal (모달):모달은 사용자가 현재의.. 공감수 0 댓글수 0 2024. 7. 25.
Next.js에서 @next/font 패키지를 사용하여 구글 폰트 적용하기 Next.js에서 구글 폰트를 간편하게 적용하려면 @next/font 패키지를 사용하는 방법이 있다.이 글에서는 @next/font 패키지를 설치하고, 구글 폰트를 프로젝트에 적용하는 방법을 단계별로 알아보자. 1. @next/font 패키지 설치하기먼저, 프로젝트에 @next/font 패키지를 설치해야 한다.npm install @next/font 2. 구글 폰트 가져오기구글 폰트를 가져오는 방법을 살펴보자. 예를 들어 Noto Sans 폰트를 사용해보겠다. 2.1. 폰트 설정하기Next.js에서는 @next/font 패키지를 사용해 구글 폰트를 쉽게 설정할 수 있다. pages/_app.tsx 또는 pages/_document.tsx 파일에서 다음과 같이 폰트를 가져오고 적용할 수 있다.pages/.. 공감수 0 댓글수 0 2024. 7. 24.
Chromatic을 활용한 Visual 테스트 웹사이트나 앱을 만들 때, 디자인이 의도한 대로 잘 나오는지 확인하는 건 아주 중요하다.이를 확인하기 위해 Visual 테스트를 사용할 수 있는데, 여기서 Chromatic이라는 도구가 큰 도움이 된다.Chromatic을 활용한 Visual 테스트가 무엇인지, 어떻게 사용하는지 알아보자. Chromatic이란?Chromatic은 웹 애플리케이션의 UI를 시각적으로 테스트할 수 있는 도구이다. 주로 Storybook과 함께 사용되며, 컴포넌트의 시각적인 변화를 자동으로 감지해준다. 이 도구는 개발자가 디자인이 의도대로 작동하는지 쉽게 확인할 수 있게 도와준다. Visual 테스트란?Visual 테스트는 웹 페이지나 앱의 화면이 정확히 어떻게 보이는지 확인하는 과정이다. 사용자는 UI의 디자인이 변경되었는지.. 공감수 0 댓글수 0 2024. 7. 23.
TDD (테스트 주도 개발)란? 프로그래밍을 할 때, 코드를 작성하기 전에 먼저 테스트를 작성하는 방법론이 바로 TDD, 즉 테스트 주도 개발이다.TDD는 크게 세 가지 단계로 이루어져 있다. 1. 테스트 작성먼저 프로그램이 어떻게 동작해야 하는지에 대한 테스트를 작성한다. 예를 들어, 어떤 함수가 2와 3을 더해서 5를 반환해야 한다고 생각해보자. 그렇다면 이 함수가 2와 3을 입력받았을 때 5를 반환하는지 확인하는 테스트를 작성한다. 이 단계에서는 당연히 테스트가 실패한다. 왜냐하면 아직 해당 기능을 구현하지 않았기 때문이다. 2. 코드 작성테스트를 통과할 수 있는 최소한의 코드를 작성한다. 위의 예시에서 2와 3을 더해서 5를 반환하는 함수를 만든다. 이 단계의 목표는 테스트를 통과하는 것이다. 따라서 아주 간단하게 구현해도 된다.. 공감수 0 댓글수 0 2024. 7. 21.
팀 프로젝트 시작 시 주제 설정기한 및 의사소통 문서, 도구 결정한다.기획 / 와이어프레임 디자인코드 컨벤션 맞추기개발 담당 분리개발 시작 공감수 0 댓글수 0 2024. 7. 16.
supabase - ssr 수업내용 정리 원래 평소에 하던 프로젝트에서는슈퍼베이스를 쓸 때 슈퍼베이스는 브라우저에서 돌아가고 있었다.그래서 브라우저에서 데이터페칭을 편하게 할 수 있었던 이유는 슈파베이스가 authentication 같은 것도 포함하고 있었기 때문이다.근데 이제 서버사이드에서는 요청을 주는 이 사람이로그인을 한 사람인지 안한 사람인지 그걸 직접적으로 알기가 어렵다.그래서 그거를 Next.js의 서버에도 브라우저에서 지금 로그인한 상태인지를 전달할 수 있는가. 그거를 어떻게 하면 Next.js의 서버에도 브라우저에서 지금 로그인한 상태인지를 전달할 수 있는가. 이제 같이 알아보도록 하자. 기존 브라우저에서 initiallization 하는 방식. 근데 이 방법이 아니라 조금 다르게 설치를 해야한다.아래를 참고하자. Setting.. 공감수 0 댓글수 4 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 파일을 추가하여 커스.. 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 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", 울.. 공감수 0 댓글수 0 2024. 7. 13.
파라미터 (Parameter)와 인자 (Argument) 문득 파라미터와 인자의 차이점에 대해 궁금해져서 찾아보게되었다.비슷해보이지만 엄연히 차이가 있었다! 프로그래밍에서 '파라미터'와 '인자'는 함수와 메서드를 다룰 때 자주 사용되는 용어이다.이 둘은 비슷한 개념이지만 서로 다른 맥락에서 사용된다. 파라미터 (Parameter)파라미터는 함수를 정의할 때 사용된다.함수가 호출될 때 외부로부터 전달받을 값을 지정하는 변수입니다.함수의 선언부에서 함수 이름 옆에 괄호 안에 작성되는 변수가 파라미터입니다.예를 들어, 다음은 두 개의 파라미터를 가지는 함수의 정의입니다.def add(a, b): return a + b 여기서 a와 b가 파라미터입니다. 인자 (Argument)인자는 함수를 호출할 때 전달하는 실제 값이다.파라미터가 함수 정의 시에 사용되는 변.. 공감수 1 댓글수 1 2024. 7. 13.
Next.js에서 Suspense 사용하기 몇 주전, 팀 프로젝트 기간에다른 팀의 팀원이 엄청 고민에 빠져있는 것을 보고 무슨 일인지 물어봤다. Suspense를 사용하려는데 서버 컴포넌트에서는 잘 작동하는데클라이언트 컴포넌트에서 잘 작동이 되지 않는다고 하였다. 나는 Next.js 프로젝트를 시작한지 얼마되지 않아서,suspense의 개념만 알고 사용해본적이 없었어서 도움이 되지 못했다. 이번에 생각난 김에 나도 공부해두면 좋을 것 같아서 정리하게되었다. Suspense란?Suspense는 React에서 비동기 작업(예: 데이터 패칭)을 처리할 때 사용된다.컴포넌트가 비동기 작업을 완료할 때까지 대기 상태를 표시하도록 도와준다.import React, { Suspense } from 'react';const DataComponent = Reac.. 공감수 0 댓글수 0 2024. 7. 11.
Tanstack query에서 Hydration - SSR Next.js로 프로젝트를 진행하다가 Tanstack query를 사용시 클라이언트 컴포넌트가 된다는 것을 알았다.Tanstack query를 쓰더라도 서버 컴포넌트로 만들 수 없을까? 하는 생각이 들었다. 그러다가 나는 왜 굳이 서버 컴포넌트를 고집하는가? 하는 생각이 들면서 다시 정리를 해봤다. [ 서버 컴포넌트를 사용하는 이유 ]SEO 최적화서버에서 HTML을 생성해 클라이언트로 전달하면 검색 엔진 크롤러가 더 쉽게 페이지 내용을 인덱싱 가능. 이는 검색 엔진 최적화(SEO)에 도움이 됨.빠른 초기 로드 속도클라이언트에서 JavaScript가 실행되기 전에 미리 렌더링된 HTML을 제공함으로써 초기 로드 속도가 빨라짐. 사용자는 더 빠르게 콘텐츠를 확인 가능.데이터 페칭 효율성서버에서 데이터 페칭.. 공감수 0 댓글수 0 2024. 7. 10.
캐러셀 캐러셀을 들어만 봤지, 한 번도 만들어본 적이 없었는데 이번 기회에 배워본다! 캐러셀(Carousel)은 웹 디자인과 사용자 인터페이스(UI) 디자인에서 흔히 사용되는 구성 요소 중 하나다. 캐러셀은 여러 콘텐츠 아이템(이미지, 텍스트, 카드 등)을 순서대로 표시하며, 사용자가 이전 또는 다음 버튼을 클릭하거나 자동으로 아이템이 순환되도록 하는 방식으로 작동한다. 캐러셀은 종종 이미지 슬라이더(Image Slider)라고도 불린다. 캐러셀의 주요 특징연속적인 순환: 캐러셀은 콘텐츠 아이템이 끝없이 순환되도록 설계된다. 사용자가 마지막 아이템에 도달하면, 다시 첫 번째 아이템으로 넘어간다.내비게이션 버튼: 사용자는 일반적으로 이전 또는 다음 버튼을 클릭하여 원하는 아이템으로 이동할 수 있다.자동 재생: 많.. 공감수 0 댓글수 0 2024. 7. 9.
Firebase + Chat 웹 트러블슈팅 회원가입 후 자동으로 로그인이되면서 (firebase는 회원가입 시 바로 로그인이된다.)바로 채팅화면으로 넘어갈 시, 프로필 이미지랑 닉네임이 뜨지 않는 문제가 있었다. 회원가입이나 로그인을 하고 인증된 사용자가 존재하면채팅 페이지로 넘어가도록 구현하기로 생각했다. 회원가입, 로그인 컴포넌트는 따로 있고useAuth 훅을 만들어서 전체 컴포넌트를 감싸는 부모 컴포넌트인Layout 컴포넌트에 훅이 실행되도록 작성했다. 콘솔을 찍었을 때 user의 uid는 출력이되는데 프로필 이미지와 닉네임이 전혀 찍히지 않았다.useAuth 훅에서도 일단 user가 있으니까 인증된 사용자를 감지하고 채팅 페이지로 넘어가긴했지만프로필 이미지와 닉네임은 null값이어서 화면에 표시되지 않았다. 문제는 회원가입 로직에 있.. 공감수 0 댓글수 0 2024. 7. 1.
Absolute로 지정된 요소의 부모는 Relative - CSS 레이아웃 이해하기 웹 개발을 하다 보면 다양한 CSS 속성을 사용해 요소를 배치하게 됩니다.그 중에서도 position 속성은 레이아웃을 조정하는 데 매우 중요한 역할을 합니다.이번 글에서는 absolute로 지정된 요소와 그 부모 요소가 relative일 때 어떻게 동작하는지에 대해 알아보겠습니다. Absolute와 Relative의 차이먼저 position 속성의 기본적인 개념을 살펴보겠습니다.relative: 요소 자신을 기준으로 위치를 조정합니다. 즉, 원래 위치를 기준으로 top, right, bottom, left 값을 이용해 이동할 수 있습니다.absolute: 가장 가까운 relative, fixed, sticky 속성이 적용된 조상 요소를 기준으로 위치가 결정됩니다. 만약 그런 조상 요소가 없다면 init.. 공감수 0 댓글수 0 2024. 6. 19.
Github 으로 협업하기 저는 혼자서 주로 개발공부를 했어서그냥 github에 프로젝트 올리는 것은 엄청 쉽지만병합하고 브랜치를 이동하고 pull 받고 하는건 익숙치 않았습니다. 이번 기회에 블로그에 정리를 하려고 합니다. Git에서 팀원이 올린 pull request를 merge하여 최신 코드로 업데이트된 dev 브랜치의 코드를자신의 feature 브랜치에 합치는 절차는 다음과 같습니다.이 과정에서 병합 충돌이 발생할 수도 있으며, 이 경우 직접 해결해야 합니다. 1. 로컬 저장소에 dev 브랜치의 최신 코드 가져오기: 먼저, 현재 작업 중인 브랜치에서 변경 사항이 있는지 확인하고 커밋을 저장합니다. 그런 다음 dev 브랜치로 전환하여 최신 코드를 가져옵니다.# 현재 feature 브랜치에 있는 변경 사항을 커밋 (아직 커밋.. 공감수 0 댓글수 0 2024. 6. 18.
React에서 Link 태그와 useNavigate 훅의 차이점 리액트에서 네비게이션을 구현할 때 많이 사용하는 방법으로 Link 태그와 useNavigate 훅이 있습니다. 이 두 가지 방법은 모두 페이지 간의 이동을 가능하게 하지만, 그 사용 방법과 용도가 약간 다릅니다. 이번 글에서는 Link 태그와 useNavigate 훅의 차이점에 대해 간단한 예제와 함께 설명해 보겠습니다. Link 태그Link 태그는 리액트 라우터에서 제공하는 컴포넌트로, 사용자에게 클릭 가능한 링크를 제공합니다. HTML의 태그와 유사하게 작동하지만, 전체 페이지의 리로드 없이 클라이언트 사이드 네비게이션을 구현할 수 있습니다.import React from 'react';import { BrowserRouter as Router, Route, Routes, Link } from 'r.. 공감수 0 댓글수 0 2024. 6. 17.
클라이언트 상태관리 vs 서버 상태관리: 로그인/회원가입 및 지출 관리 시스템 구현 회고 최근에 진행한 '개인 지출 관리' 프로젝트에서 탠스택쿼리(TanStack Query)를 활용해회원가입/로그인 기능과 지출 관리 기능을 구현했습니다. 프로젝트를 하면서 드는 의문점은인증/인가, 데이터 CRUD를 탠스택 쿼리를 쓰면서 서버에서 상태를 관리하게 되었고그럼 현재 프로젝트에서 굳이 리덕스를 써서 클라이언트 상태관리를 할 필요가 없겠네? 였습니다. 굳이 클라이언트 상태 관리할게 있다면 사용자의 로그인상태나, 사용자의 정보 정도...?근데 탠스택 쿼리로 기능 구현이 충분히되는데 리덕스로 같은 작업을 2번이나 할 필요가 있을지 의문이 들었습니다. 진지하게 의문을 갖고 튜터님께 찾아가 위의 내용에 대해 질문을 드렸습니다. 돌아온 튜터님의 말씀은,"사실 현재 프로젝트에서는 크게 클라이언트 상태관리가 중요하.. 공감수 0 댓글수 0 2024. 6. 14.
Zustand Zustand는 경량 상태 관리 라이브러리로, React 애플리케이션에서 쉽게 상태를 관리할 수 있도록 도와줍니다.Redux와 같은 다른 상태 관리 라이브러리와 비교했을 때,API가 간단하고 보일러플레이트 코드가 적다는 장점이 있습니다. Zustand 설치하기먼저, Zustand를 프로젝트에 설치합니다.npm install zustand 또는 Yarn을 사용하는 경우yarn add zustand Zustand 기본 사용법Zustand는 상태 저장소를 생성하는 함수를 제공합니다. 이 함수는 상태와 상태를 업데이트하는 방법을 정의합니다. 1. 상태 저장소 생성하기import create from 'zustand'const useStore = create(set => ({ count: 0, increase.. 공감수 0 댓글수 0 2024. 6. 13.
React에서 API 호출하기: Axios를 활용한 예제 React 애플리케이션에서 백엔드 서버와의 통신은 자주 발생합니다.React 애플리케이션에서 API를 호출하는 방법에 대해 알아보겠습니다.우리는 Axios 라이브러리를 사용하여 백엔드 서버에 HTTP 요청을 보내고 응답을 처리할 것입니다. Axios 소개Axios는 JavaScript 및 TypeScript를 위한 강력한 HTTP 클라이언트 라이브러리입니다. 우리는 이 라이브러리를 사용하여 간편하게 서버에 요청을 보내고 응답을 처리할 수 있습니다.yarn add axios 예제: React 애플리케이션에서 Axios 사용하기아래의 예제를 통해 Axios를 사용하여 React 애플리케이션에서 서버 API를 호출하는 방법을 살펴볼 것입니다.import React, { useState } from 'react.. 공감수 0 댓글수 0 2024. 6. 12.
TanStack Query를 사용한 서버 상태 관리 React 애플리케이션에서 서버 상태를 관리하는 것은 복잡한 작업일 수 있습니다.이를 간단하고 효율적으로 처리하기 위해 TanStack Query(이전의 React Query)를 사용할 수 있습니다.이 글에서는 TanStack Query의 기본 개념과 사용 예제를 통해 서버 상태 관리를 쉽게 하는 방법을 설명하겠습니다. TanStack Query란?TanStack Query는 서버 상태를 효율적으로 관리할 수 있도록 도와주는 React 라이브러리입니다. 서버에서 데이터를 가져오고, 캐시하고, 업데이트하는 등의 작업을 자동화하여 개발자가 서버와 클라이언트 간의 데이터 동기화 문제를 쉽게 해결할 수 있습니다. TanStack Query의 주요 기능데이터 페칭과 캐싱: 서버에서 데이터를 가져오고, 이를 클라이.. 공감수 0 댓글수 0 2024. 6. 11.
JSON Server와 Axios를 사용한 간단한 RESTful API 구현 JSON Server와 Axios를 사용하면 몇 분 만에 완벽한 API를 구축하고 데이터를 조작할 수 있습니다.JSON Server로 API를 설정하고 Axios로 데이터를 가져오고 조작하는 방법을 단계별로 설명해보겠습니다.1. JSON Server 설치 및 설정JSON Server는 JSON 파일을 기반으로 가상의 REST API를 생성해주는 도구입니다. 이를 통해 백엔드 없이 프론트엔드 개발을 빠르게 시작할 수 있습니다. Step 1: JSON Server 설치먼저, JSON Server를 설치합니다.yarn add json-server Step 2: 데이터 파일 생성JSON Server가 읽을 수 있는 db.json 파일을 생성합니다. 이 파일에 초기 데이터를 넣어줍니다.{ "posts": [ .. 공감수 0 댓글수 0 2024. 6. 10.
콜백함수, Primise, async, await 콜백 함수(Callback function)는 다른 함수에 인수로 전달되어 실행되는 함수입니다. 콜백 함수는 특정 이벤트가 발생했을 때나, 특정 작업이 완료되었을 때 실행되도록 설계됩니다. 이를 통해 프로그램의 유연성과 모듈성을 높일 수 있습니다.콜백 함수의 일반적인 사용 사례는 다음과 같습니다:비동기 프로그래밍: 자바스크립트와 같은 비동기 환경에서 주로 사용됩니다. 예를 들어, 서버에서 데이터를 받아오는 동안 코드의 나머지 부분이 실행될 수 있도록 합니다.function fetchData(callback) { setTimeout(function() { const data = "some data from server"; callback(data); }, 1000);}f.. 공감수 0 댓글수 0 2024. 6. 8.
withCredentials: true 리액트에서 axios를 사용할 때withCredentials: true를 설정하는 것은클라이언트가 서버와 통신할 때 쿠키를 포함한 자격 증명을 함께 보내겠다는 뜻입니다.쉽게 설명하자면, 서버와의 요청에서 로그인 상태나 사용자 정보를 유지하기 위해 필요한 설정입니다. 예를 들어, 어떤 웹사이트에 로그인한 상태에서 다른 페이지로 이동하거나 데이터를 요청할 때,서버는 이 사용자가 누구인지 알아야 합니다.이때 쿠키가 사용자 정보를 담고 있으며,withCredentials: true를 설정하면 이 쿠키를 서버로 함께 보내어 서버가 사용자를 인식할 수 있게 합니다. 다음은 withCredentials 옵션을 사용하는 간단한 예제입니다.import axios from 'axios';axios.get('https://.. 공감수 0 댓글수 0 2024. 5. 25.
styled-components의 장점과 단점 styled-components는 React 애플리케이션에서 CSS를 작성하고 관리하는 방법을 제공하는 인기 있는 라이브러리입니다. 이 라이브러리는 JavaScript 안에 CSS를 직접 작성할 수 있게 해주며, 컴포넌트 단위로 스타일을 관리할 수 있는 장점을 가지고 있습니다. 그러나, 모든 기술이 그러하듯 styled-components에도 장단점이 존재합니다.장점컴포넌트 기반 스타일링:스타일을 컴포넌트 내부에 포함시킴으로써 스타일과 로직을 함께 관리할 수 있습니다. 이는 각 컴포넌트의 스타일이 독립적으로 유지될 수 있게 하여 유지보수를 쉽게 합니다.동적 스타일링:props를 통해 스타일을 동적으로 변경할 수 있습니다. 이를 통해 조건부 스타일링이 쉬워지고, 스타일 재사용성이 높아집니다.자동 중첩 및 .. 공감수 0 댓글수 0 2024. 5. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.