티스토리

라바덕

검색하기

블로그 홈

라바덕

alsxor5.tistory.com/m

찐 광기 개발로그

구독자: 1

방명록 방문하기

주요 글 목록

[React]테이블 컬럼에서 key와 dataIndex 분리의 필요성 React 기반 테이블 컴포넌트에서 컬럼을 정의할 때 key와 dataIndex 속성을 분리하여 사용하는 것은 단순한 중복이 아닌, 명확한 기술적 이점을 제공합니다. 이 문서에서는 이 두 속성을 분리해야 하는 주요 사례와 그 근거를 설명합니다.1. 동일한 데이터 필드를 다른 방식으로 표시기술적 근거동일한 데이터 필드를 여러 형식으로 표시해야 하는 경우, 동일한 dataIndex를 사용하면서 서로 다른 key 값으로 컬럼을 구분할 수 있습니다.코드 예시// 데이터const drivers = [ { id: 1, name: "김철수", birthDate: "1985-03-15", // YYYY-MM-DD 형식 registrationDate: "2023-01-10" }]// 테이블 컬럼.. 공감수 0 댓글수 0 2025. 4. 7.
[JavaScript] 로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie) 로컬 스토리지(Local Stroage), 세션 스토리지(Session Stroage), 쿠키(Cookie)는 모두 웹 브라우저에서 데이터를 저장하는 데 사용되는 브라우저 저장소이다. 이들은 모두 클라이언트 측에서 데이터를 저장하고 관리할 수 있으며, 서버와의 통신 없이도 정보를 보존할 수 있다. 각각의 목적과 사용 방법을 알아보자 1. 로컬 스토리지 (Local Storage) 로컬 스토리지는 영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.주로 영구적인 사용자 환경 설정, 로그인 정보 등을 저장하는 데 사용된다.사용자가 명시적으로 삭제하지 않는 한 데이터는 계속 유지된다.일반적으로 5MB ~ 10MB의 용량을 가지고 있다. (도메인 당)// 데이터 저장localStorage.se.. 공감수 0 댓글수 0 2024. 5. 9.
[Vite] SockJS, Stomp 사용하여 WebSocket 연결 중 발생 이슈 정리 현재 진행하고 있는 사이드 프로젝트에서 실시간 웹소켓 구현을 위해 SockJS와 Stomp를 사용하였는데 위 사진과 같이 소켓을 연결하고 결과를 확인해봤더니..!!!!!!!! global is not defined 에러가 발생했다 일단 에러를 서칭해보니 vite에는 global 객체를 지원하지 않았고 SockJS는 global을 의존하는 라이브러리여서 에러가 발생하는거였다. 해결방법을 찾아보니 //vite.config.ts export default defineConfig({ define: { 'global': {}, }, }); vite.config.ts 파일에 위와 같이 작성해주면 에러가 발생하지 않는다고 한다!! 그래서 적용을 해봤는데? 에러는 없어졌지만 Socket이 연결되지 않았다 ㅠㅠㅠㅠㅠㅠㅠ.. 공감수 2 댓글수 6 2024. 3. 22.
[NextJS - ERROR-LOG] 카카오지도 초기 렌더링 이슈 이슈 페이지 초기 렌더링 이후 콘서트 디테일 페이지 접근했을 때 카카오지도 렌더링 안되는 이슈 원인 개발자 도구에서 카카오지도부분 확인했을 때 스크립트 파일이 로드가 안됨을 확인 export default function KakaoMap({ x, y }: { x: string; y: string }) { const API_KEY = process.env.NEXT_PUBLIC_KAKAO_API_KEY; const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${API_KEY}&autoload=false`; console.log(x); return (x && y) ? ( ) : null; } 기존 코드는 카카오 지도를 렌더링하는 컴포넌트에 스크립트 코드.. 공감수 0 댓글수 0 2023. 7. 6.
[NextJS] SWR - 프로젝트에 네트워크 상태관리 적용해보기 개요 요즘 콘서트 일정 플랫폼 서비스를 NextJS로 개발하면서 SWR을 적용해보고있다. NextJS랑 SWR 모두 Versel에서 개발을 하였고, 호환성이 좋다고 들어서 네트워크 상태관리를 리액트쿼리가 아닌 SWR을 적용해서 개발을 진행하고 있지만 실제로 SWR이 어떤값을 반환하고 어떤식으로 동작하는지는 잘 모른채로 개발하고 있었다. 오늘은 SWR이 무엇이고 어떻게 사용하는지 구체적인 사용법을 알아보자. Optimistic UI란? Optimistic UI란 특정 요청이 성공 할 것이란 가정을 하고 먼저 그 요청의 결과를 보여주는 방식의 UI이다. 이번에 진행하고 있는 프로젝트에서 예를 들어보자. 예시 - 북마크 1. 사용자가 북마크 아이콘(빈하트)을 누른다. 2. 서버에 북마크 등록 요청을 보낸다. .. 공감수 0 댓글수 0 2023. 7. 4.
[NextJS] error - Hydration failed because the initial UI does not match what was rendered on the server. NextJS 개발 도중 어느 순간 다음과 같은 경고 문구가 생겼다. Hydrate란? Hydrate는 Server Side에서 렌더링 된 정적 페이지와 번들링된 JS 파일을 클라이언트로 보낸 뒤, 클라이언트 단에서 HTML 코드와 React JS코드를 서로 매칭 시키는 과정을 말함 NextJS 공식문서에서 찾아보니 내 경우는 HTML 규칙을 잘 못지킨 초보적인 실수였다. https://nextjs.org/docs/messages/react-hydration-error react-hydration-error | Next.js Text content does not match server-rendered HTML While rendering your application, there was a differe.. 공감수 0 댓글수 0 2023. 6. 11.
[React] key prop - 리액트에서는 반복되는 엘리먼트를 추가할 때 'key' prop을 왜 필요할까? - 그럼 key는 어떤 값을 넣어야 하는걸까? map함수 등을 사용하여 반복되는 엘리먼트를 추가하였을 때 key prop을 추가하지 않아 다음과 같은 에러가 뜨는 것을 한번씩은 봤을 것이다. 그럼 key prop은 왜 필요한걸까? 리액트 공식문서에는 'key' 가 필요한 이유를 다음과 같이 설명하고 있다. Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get i.. 공감수 0 댓글수 0 2023. 5. 14.
[React] React-Query 사용법 예제코드 리액트 쿼리 리액트 쿼리는 비동기 네트워크 상태관리 라이브러리이다. 리액트 쿼리는 React 컴포넌트에서 데이터를 가져오고 관리하기 위한 간단하고 직관적인 방법을 제공한다. 이를 통해 컴포넌트가 더욱 유연하고 재사용 가능하며, 다양한 데이터 소스에서 데이터를 쉽게 가져올 수 있다. 리액트 쿼리는 대표적으로 useQuery와 useMutation과 같은 React Hooks를 사용하여 작성된다. 이를 통해 데이터 로딩과 변경을 처리할 수 있다. useQuery는 GraphQL, 또는 REST API와 같은 데이터 소스에서 데이터를 가져오는데 사용되며 useMutation은 데이터를 업데이트하거나 삭제하는 데 사용된다. 리액트 쿼리는 캐싱을 사용하여 데이터를 저장하고, 새로운 데이터를 로드하기 전에 캐시에서.. 공감수 0 댓글수 0 2023. 4. 27.
[React] 전역 상태관리 라이브러리 장단점 비교 정리 React로 개발을 진행하다보면 Component의 상태관리를 하게된다. 그런데 해당과정에서 컴포넌트의 Depth가 깊어질수록 반복적인 코드작성이 많아지고 그 횟수가 1000번이라고 생각하면 시간도 어마어마하게 걸릴것이다. 이와 같은 경우 전역적으로 상태를 관리해주는 라이브러리를 사용해서 해결할 수 있으며 종류마다 장단점이 있다. Redux 상태관리를 위해 사용하는 자바스크립트 라이브러리이다. 리액트에서만 사용할 수 있는 라이브러리가 아닌 독립적으로 분류되어있는 라이브러리이기 때문에 리액트 뿐 아닌 Vue나 앵귤러 등에서도 사용이 가능하다. Redux는 가장 많이 사용되는 전역 상태 관리 라이브러리 중 하나이며, 컴포넌트 간의 상태를 트리 구조로 관리하며, 액션(Action)과 리듀서(Reducer)를 .. 공감수 0 댓글수 2 2023. 4. 26.
[React] useEffect란 무엇이고 언제 사용해야 할까? useEffect란? useEffect는 간단하게 설명해서 React Component에서 Side Effect를 수행하는 Hook입니다. Side Effect란 상태 변화 이외에 작업을 말합니다. 예를 들면, API 호출, 이벤트 등록, 타이머 설정 등이 있습니다. useEffect 사용법 useEffect는 컴포넌트가 렌더링 된 이후에 실행되며, 컴포넌트가 Unmount 될 때 정리(claen-up)작업을 수행합니다. useEffect는 기본적으로 렌더링 이후에 매번 실행되며, 두 번째 인자로 의존성 배열(Defendency Array)을 전달하여 해당 의존성이 변경될 때만 실행되도록 설정할 수 있습니다. import React, { useEffect, useState } from 'react'; f.. 공감수 0 댓글수 0 2023. 4. 17.
[React] 리액트 라우터(React Router) 사용법 OutLet, Param 리액트 라우터란? 리액트 라우터는 리액트에서 SPA(Single Page Application)을 구현하기 위한 라이브러리입니다. SPA는 페이지 전환이 일어나도 화면이 새롭게 로드되지 않고, 동적으로 화면을 갱신합니다. 쉽게 말씀드리면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라 생각할 수 있습니다. 리액트 라우터는 리액트에서 브라우저의 URL과 컴포넌트를 매핑시켜주는 역활을 합니다. 이를 통해 브라우저의 URL에 따라서 보여줄 컴포넌트가 변경됩니다. 사용법을 알아보기 전에 리액트 라우터를 사용하면 어떤 기능을 구현할 수 있는지 간단하게 정리해 보겠습니다. URL에 따른 다른 페이지를 보여주기 브라우저의 뒤로 가기, 앞으로 가기 버튼을 사용하여 라우터 이력 관리하기 URL.. 공감수 0 댓글수 0 2023. 3. 31.
[React] Todo-App을 만들어보자 (1) 한가지 기술을 사용하더라도 그 기술이 어떤식으로 동작하는지 알고 조금 더 깊이있는 지식을 습득하는 것이 이번 프로젝트의 목표이다. 리액트를 Todo-App 만들기 목표 1. jsx문법 연습하기 2. 리액트 상태관리 기술 연습하기 (여러가지 리액트 Hook 사용해보기) 3. tailwind 사용해보기 4. 컴포넌트의 구조를 어떻게 잡아야 추 후 리팩토링이나 유지보수가 편할지 생각하면서 구현해보기 구현계획 1. Todo CRUD 구현하기 2. 다크모드 구현하기 3. 반응형으로 구현하기 4. localStroage에 저장하여 새로고침하거나 창을 새로 열어도 데이터 유지하기 (백엔드 연동 전까지) 5. 가능하다면 외부API와 연동시켜보기 6. 프론트 기능을 완성하면 백엔드와 연동시키기 프로젝트 구조 프로젝트 구.. 공감수 0 댓글수 0 2023. 3. 28.
[React] 컴포넌트 효율적으로 재사용하기 리액트는 컴포넌트를 만들고 조합해서 웹페이지를 만듭니다. 그럼 예를들어서 프로필 컴포넌트를 만든다고 하면 프로필 컴포넌트 안에 이미지만 있을수도 있고, 이미지와 간단한 자기소개를 같이 넣는 경우도 있을 것입니다. 이렇게 같은 종류의 컴포넌트라고 해도 다양한 경우가 있는데 그렇다고해서 비슷한 컴포넌트를 상황에 맞게 여러개 만드는 것은 매우 비효율적입니다. 그렇다면 이런경우 컴포넌트를 어떻게 재사용할 수 있을까요? 다음과 같은 경우 가장 위 사진에는 이미지만 있고, 중간 사진에는 이미지와 간단한 인사말이 있습니다. 그리고 마지막 사진에는 인사말이 있습니다. 이런 경우 공통적으로 사용되는 부분은 검정색 배경의 박스입니다. 즉, 여러 경우의 컴포넌트를 비효율적으로 각각 만드는 것이 아니라 공통적으로 사용되는 부.. 공감수 0 댓글수 0 2023. 3. 24.
[JS] 이벤트 전파 - 버블링 & 캡처링 웹 개발에서 이벤트 전파는 매우 중요한 개념입니다. 이벤트 전파란, 하나의 이벤트에 대해 여러 개의 엘리먼트가 반응하는 과정을 말합니다. 이벤트 전파 방식으로는 버블링과 캡처링이 있습니다. 이벤트 버블링 버블링은 이벤트가 발생한 엘리먼트에서 시작하여 상위 엘리먼트들로 전파되는 방식입니다. 즉, 이벤트가 발생한 엘리먼트에서 시작하여 부모 엘리먼트, 그리고 조부모 엘리먼트로 전파됩니다. 이벤트 전파가 완료되면 마지막으로 document 객체까지 전파됩니다. 이벤트 캡처링 캡처링은 버블링과는 반대로, 이벤트가 발생한 엘리먼트에서부터 하위 엘리먼트들로 전파되는 방식입니다. 즉, 이벤트가 발생한 엘리먼트에서 시작하여 자식 엘리먼트, 그리고 손자 엘리먼트로 전파됩니다. 이벤트 전파가 완료되면 마지막으로 docume.. 공감수 0 댓글수 0 2023. 3. 16.
[JS] 프로토타입(Prototype)이란? 자바스크립트에서 객체를 생성할 때, 다른 언어들과는 다른 방식으로 프로토타입을 이용합니다. 이러한 방식을 "프로토타입 기반 언어"라고 합니다. 객체 생성 방법 자바스크립트에서 객체를 생성할 때는 클래스를 정의하지 않습니다. 대신 생성자 함수를 이용하여 객체를 생성합니다. 예를 들어, 아래와 같은 Person 생성자 함수를 정의할 수 있습니다. function Person(name, age) { this.name = name; this.age = age; } 위 코드에서 Person은 객체를 생성하는 "생성자 함수"입니다. 생성자 함수를 이용하여 객체를 생성할 때는 "new" 키워드를 사용합니다. const person1 = new Person('John', 30); const person2 = new P.. 공감수 0 댓글수 0 2023. 3. 14.
HTML / CSS 미션 후기 HTMl / CSS 를 공부하면서 느낀점 처음 HTML / CSS 강의를 들으면서 생각이 들었던건 태그 종류나 속성들이 너무 방대하다는 것이였다. 이걸 어떻게 다 외우고 사용하지? 라는 생각에 막막하였지만 막상 공부를 진행하다보니 그럴 필요가 없었다. 태그나 속성을 다 외우고 사용하기보다는 어떤 기능을 가진 태그가 있다는 내용만 알면 필요할 때마다 찾아서 사용하면 되기 때문이다. 그리고 과제를 진행하면서 요구사항을 맞추면서 완성하다보니 여러 기능들을 사용해 보면서 점점 실력이 늘어가는걸 느꼈다. HTML / CSS 공부하면서 가장 어려웠던 개념과 이유 화면 레이아웃을 맞추는게 가장 어려웠다. 아직 어떤 방식이 효율적인 방식이 잘 모르겠고 내가 한 방식이 맞게 한건지 계속 의문이 들었다. width나 he.. 공감수 0 댓글수 0 2023. 3. 10.
[HTML] HTML5 시멘틱 태그와 웹 표준을 지키는 이유 시멘틱 태그와 웹 표준을 지키는 이유에 대해서 알아보겠습니다. 1) 시멘틱 태그를 사용하는 이유 시멘틱 태그란, 해당 컨텐츠가 어떤 의미를 가지고 있는지를 명확하게 설명하는 태그입니다. 시멘틱 태그를 사용하면, 웹 페이지가 보다 의미론적으로 정확하게 작성되며 검색 엔진이나 스크린 리더 등에서 컨텐츠의 의미를 파악하는 데에도 도움을 줍니다. 시멘틱 태그의 사용은 웹 페이지의 가독성과 접근성을 향상시키며, 유지보수성과 검색 엔진 최적화에도 도움을 줍니다. 예를 들어, 다음과 같은 코드를 보겠습니다. 위 코드는 일반적인 div 태그를 사용하여 웹 페이지의 헤더를 만든 예시입니다. 그러나 이 코드는 시멘틱하지 않습니다. 즉, 이 코드만 보고는 이것이 웹 페이지의 헤더임을 알기 어렵습니다. 반면, 시멘틱 태그를 .. 공감수 0 댓글수 0 2023. 3. 8.
[React] 객체의 가변성과 불변성 자바스크립트에서 객체의 가변성과 불변성은 객체가 변경 가능한지 여부를 나타냅니다. 객체의 가변성(Mutability)은 해당 객체가 생성된 이후에도 내부 상태를 변경할 수 있는 능력을 말합니다. 즉, 객체의 내부 속성을 변경할 수 있습니다. 예를 들어, 다음과 같이 객체를 생성하고 객체의 속성을 변경할 수 있습니다. 객체의 불변성(Immutability)은 해당 객체가 생성된 이후에는 내부 상태를 변경할 수 없는 능력을 말합니다. 객체를 변경할 경우, 새로운 객체를 생성하고 기존 객체를 변경하지 않습니다. 예를 들어 다음과 같이 객체를 생성하고 객체의 속성을 변경할 수 없습니다. React에서 불변성은 매우 중요합니다. React는 Virtual DOM을 사용하여 컴포넌트의 상태가 변경될 때마다 새로운 .. 공감수 0 댓글수 0 2023. 3. 2.
[React] jsx 문법에서 논리 && 연산자로 If를 인라인으로 표현 jsx 문법에서 논리 && 연산자로 If를 인라인으로 표현하기 jsx 문법에서는 중괄호 '{}' 를 이용해서 표현식을 포함 할 수 있습니다. 여기서 표현식 내부에 && 논리 연산자를 사용하면 엘리멘트를 조건부로 넣을 수 있습니다. 조건이 true일때 엘리멘트 활성화됨 다음과 같이 코드를 구성하면 버튼을 눌렀을 때 isBool값이 true, false로 반복하게 되고 값이 true일때만 h1 태그가 활성화됩니다. 다음과 같이 중괄호 {} 내부에 {조건 && 엘리멘트} 를 입력하면 조건이 true일 때 엘리멘트가 활성화됩니다. 공감수 0 댓글수 0 2023. 3. 1.
[HTML] form 드랍다운 & input checkbox & radio 사용자에게 여러 정보를 미리 제공해주고 사용자가 그 중에서 선택하도록 할 수 있는 방법이 select 태그이다. Dropdown select태그는 option태그와 같이 쓰인다. 다음과 같이 select 태그 안에 option 태그를 넣어서 사용자가 선택할 데이터를 입력해주면 오른쪽 사진과 같이 드랍다운 형태로 데이터를 선택해서 제출할 수 있게된다. 여기서 form 데이터를 제출할 경우 select 태그의 name의 value값이 key값이 되고 option의 value값이 value값이된다. 서버에서는 보통 한글 데이터보다는 영어 데이터 처리가 많기 때문에 사용자가 선택할 때는 한글 데이터로 보여주고 form을 통해 서버로 데이터를 전송할 때는 영어 데이터를 보내줘야 하므로 option의 value값에.. 공감수 0 댓글수 1 2023. 2. 21.
[CSS] SASS 기초 문법 정리 1. variable 변수를 사용하는 방법은 $변수명 : 저장할 내용; 다음과 같은 형식으로 사용할 수 있다. 다음과 같이 $title 변수에 blue 색상을 할당하고 body 태그 색상을 $title 변수로 지정하면 우측과 같이 body태그에 작성되어 있는 글의 색상이 변경되는걸 확인할 수 있다. 2. nesting scss 파일은 nesting 구조로 코드가 작성된다. ex) body태그 내부에 있는 .box 다음과 같이 nesting 구조는 css와는 다르게 body .box 로 가져오는게 아니라 중괄호 내부에 .box{} 형식으로 코드가 작성된다. 3. mixin 사용방법은 예제사진으로 확인 @mixin 사용하면 css를 확장해서 사용할 수 있다. (메서드형식?) @include 함수명(변수) 를.. 공감수 0 댓글수 0 2023. 2. 12.
[JavaScript] 자바스크립트 문자를 숫자로 (아스키코드) 자바스크립트에서 문자 --> 숫자 || 숫자 --> 문자로 바꾸는 방법 숫자 >>> 문자 (아스키코드) 문자 >>> 숫자 공감수 0 댓글수 0 2023. 2. 4.
[JavaScript] DOM 다루기 JavaScript에서 DOM을 다뤄보자 DOM이란? DOM을 풀어서 약자로 써보면 Document Object Model의 약자입니다. Document는 문서이고 Object는 객체로 번역이 됩니다. Model은 말그대로 모델로 많이씁니다. 즉 번역하면 문서 객체 모델이라고 할 수 있는데 이렇게 보면 이해가 잘 가지 않습니다. 그럼 문서 객체란 것이 도대체 무엇일까요?? 문서 객체란 이나 같은 html 문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. 예를 들어서 보겠습니다. 다음과 같이 id가 'target'인 태그가 있습니다. 가장 위쪽에 타겟이 이에 해당되는 부분이고 이 부분을 JavaScript에서 사용할 수 있는 객체로 가져와보겠습.. 공감수 0 댓글수 0 2023. 1. 18.

반응형

문의안내

티스토리
로그인
고객센터

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