본문 바로가기

분류 전체보기

 (77)
[React-Query] useInfiniteQuery로 무한스크롤 구현하기 이번 프로젝트를 진행하면서 무한스크롤을 구현해봤습니다.타 회사에서 무한스크롤 구현하는 포스팅을 보고 참고해서 비교해 보면서 코드 리팩토링을 할 부분에 대해 작성해보겠습니다. NoticeTable.tsx"use client";import { DataTable } from "@/components/common/table/table";import { columns } from "./notice-columns";import { Row, getCoreRowModel, useReactTable } from "@tanstack/react-table";import { useRouter } from "next/navigation";import { useGetNoticeQuery } from "../queries/get-..
[우아한 타입 스크립트 with 리액트] 타입이란 1. 자료형으로서의 타입모든 프로그래밍 언어는 변수를 선언하는 것부터 시작한다. 프로그래밍 언어에서 변수란 값을 저장할 수 있는 공간(메모리)이자 값을 가리키는 상징적인 이름이다. 개발자는 변수를 선언하고 그 변수에 특정한 값인 데이터를 할당한다.// 변수선언 과 데이터할당var name = "zig";var year = 2022;이 예시에서는 name과year라는 이름으로 선언한 변수에서 각각 zig와2022 라는 값을 할당하고 있다. 컴퓨터의 메모리 공간은 한정적이다. 따라서 특정 메모리에 값을 효율적으로 저장하기 위해서는 먼저 해당 메모리 공간을 차지할 값의 크기를 알아야 한다. 값의 크기를 명시한다면 컴퓨터가 값을 참조할 때 한 번에 읽을 메모리 크기를 알 수 있어 값을 훼손하지 않고 가져올 수 ..
Tailwind CSS, CSS-in-JS, Styled Components 비교: 왜 Tailwind를 선택했는지? 이번 프로젝트를 진행하면서 Tailwind CSS를 사용했습니다. 이를 선택한 이유와 다른 스타일 라이브러리와의 비교를 통해 설명드리겠습니다.1. 스타일링 접근 방식Tailwind CSS: 유틸리티 클래스 기반의 프레임워크로, 미리 정의된 클래스들을 HTML 요소에 적용하여 스타일링합니다. CSS 파일을 작성할 필요 없이, 필요한 스타일을 HTML에서 바로 적용할 수 있습니다.CSS-in-JS: 스타일을 자바스크립트 파일 내에서 직접 작성하고 관리할 수 있게 해주는 접근 방식입니다. 대표적으로 Emotion, Styled Components 등이 있으며, 스타일을 컴포넌트 내부에 작성해 스타일링과 자바스크립트를 결합할 수 있습니다.Styled Components: CSS-in-JS의 한 종류로, 컴포넌트..
[우아한 타입 스크립트 with 리액트] 타입스크립트의 등장 4. 타입스크립트의 등장시간이 자나 마이크로소프트는 자바스크립트의 슈퍼셋(Superset) 언어인 타입스크립트(Typescript)를 공개했다. 다트와 달리 자바스크립트 코드를 그대로 사용할 수 있었고, 아래와 같은 단점을 극복할 수 있었기 때문에 많은 환영을 받았다. 💡 슈퍼셋( Superset ) 기존 언어에 새로운 기능과 문법을 추가해서 보완하거나 향상하는 것을 말한다. 슈퍼셋 언어는 기존 언어와 호환되며 일반적으로 컴파일러 등으로 기존 언어 코드로 변환되어 실행된다. ⭐️ 안정성 보장타입스크립트는 정적 타이핑을 제공한다. 컴파일 단계에서 타입 검사를 해주기 때문에 자바스크립트를 사용했을 때 빈번하게 발생하는 타입 에러를 줄일 수 있고, 런타임 에러를 사전에 방지할 수 있어서 안정성이 크게 높아진..
[우아한 타입 스크립트 with 리액트] 자바스크립트의 한계 1.2 자바스크립트의 한계1. 동적 타입 언어자바스크립트의 특징 중 하나가 동적 타입 언어라는 것이다. 이 말은 변수에 타입을 명시적으로 지정하지 않고 코드가 실행되는 런타임에 변숫값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정된다는 것을 의미한다. 예를 들어, 변수 a의 타입이 number 인지 string 인지는 실제 코드가 동작할 때 a 에 값이 할당되는 순간, 그 값이 숫자 1인지 문자 1 인지에 따라 결정된다.2. 동적 타이핑 시스템의 한계// 이 함수는 숫자 a, b의 합을 반환한다.const sumNumber=(a,b)=>{ return a + b;};sumNumber(1,2); // 3위 코드를 실행하면 어떤 에러도 발생하지 않고 정상적으로 동작한다. 즉, 정상적인 코드이다.// ..
데이터교환형식 JSON과 직렬화와 역직렬화 JSON이란? javascript 객체 문법으로 구조화된 데이터 교환 형식, python, javascript, java 등 여러 언어에서 데이터 교환형식으로 쓰이며 객체 문법말고도 단순 배열, 문자열도 표현 가능1. Javascript 객체 문법key와 value로 구성됨이미 존재하는 key를 중복선언할 경우 나중에 선언한 해당 key에 대응하는 value가 덮어쓰이게 됨Json으로 작성했을때 kundol이라는 값을 꺼내고 싶을때 어떻게 할까?[ { "name":"kundol", "age" :30, }, { "name":"yang", "age" :20, },];둘 다 같은 값을 뽑아낼 수 있다!2. 데이터 + 교환형식데이터는 추상적인 아이디어에서부터 시작해 구체적인 측정에 이르기까지 다양..
데이터교환형식 XML XML이란? 마크업 형태를 쓰는 데이터 교환 형식html과 xml의 차이html xml데이터표시저장 및 전송태그미리 정의된 태그 존재고유한 태그를 생성 및 정의 가능대소문자구분 x구분 ojson과 xml의 차이json과 비교했을 때 닫힌 태그가 계속해서 들어가기 때문에 json과 비교하면 무겁다.또한 javascript object로 변환하기 위해 json보다는 더 많은 노력이 필요하다.xml의 활용sitemap.xml으로 사용하며 여러 언어에서도 독립적으로 쓰임.
Node.js를 이용한 간단한 API구축 Node.js란? 비동기적 이벤트 주도 방식, 논블로킹 I/O 모델을 사용하는 구글의 V8 엔진을 장착한 자바스크립트 런타임Express란? Node.js 웹 애플리케이션 프레임 워크Node.js와 Express는 무슨 관계일까? Node.js는 크롬의 V8엔진을 이용하여 javascript로 브라우저가 아니라 서버를 구축하고, 서버에서 javascript가 작동되도록 해주는 런타임 환경 요약하면 Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체 http 기본 port number : 80https 기본 port number : 443const express = require('express')const app = express()const port ..

티스토리툴바