본문 바로가기

분류 전체보기

(78)

[ React ] Suspense란 무엇일까? React의 Suspense는 React 18에서 정식으로 지원된 비동기 처리를 지원하는 React의 내장 컴포넌트로, 비동기 처리가 진행되는 동안, 사용자에게 로딩에 대한 상태를 보여주는 기능을 제공한다. Suspense는 Suspense의 경계를 설정하고, 경계 내에서 비동기적으로 로드되는 컴포넌트나 데이터에 대한 로딩 상태를 관리한다. 이런 로딩 상태는 fallback프로퍼티를 통해 사용자에게 표시된다. Suspense의 자식 컴포넌트(children)가 실제 비동기 처리 이후에 렌더링 되는 컴포넌트이다. 위와 같이 {children}로 사용되며, React Suspense는 주로 React 애플리케이션의 비동기 데이터 로딩을 위해 사용되는 React.lazy와 함께 사용된다.(React.lazy..

[ TypeScript ] 협업을 위한 interface 에 힌트 주석 달기. ts로 프로젝트를 개발 중에 interface에 추가적인 설명이 있으면 좋겠다~! 라는 생각이 들어서 평소에는 method나 method parameter에 대한 설명을 달아줄 때 자주 사용하던 JSDoc을 이용하여 interface 설명을 추가해 보았다. 먼저 JSDoc에 대해 설명하자면, JSDoc은 자바스크립트용 API 문서 생성기로 자바스크립트 애플리케이션 또는 라이브러리의 API를 문서화하는 목적으로 사용한다. module, namespaces, classes, methods, method parameters 등과 같은 항목들을 문서화할 수 있다. JSDoc은 코드 자체와 함께 소스코드에 직접 문서 주석을 추가하는 기능을 가지고있다. JSDoc 주석은 일반적으로 문서화하려는 코드 바로 앞에 위치..

[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준) 회사에서 새로운 프로젝트를 Next13을 도입하여 만들기로 결정하여 개발 진행중에, 우리는 Google Font가 아닌 Local Font를 사용하게 되어, 삽질을 조금 하다가... 세팅한 내용을 정리하려 한다. 우선, Next 공식 홈페이지에서 App Router 사용 방식으로 Font를 설정하는 부분을 보면 1. Google Font를 사용하거나, 2. Local Font를 사용하는 방법으로 크게 나뉜다. 우리가 사용하려는 Font는 Pretendard 였는데, Google Font에 없는 폰트여서 Local Font를 적용해야 했다...^_ㅠ 만약 Google Font에서 지원하는 폰트일 수 있으니 해당 사이트에서 서치해본 후 없다면 Local Font를 사용하는 걸로.... (Google Font..

[ Next.js ] Next13의 주요 기능에 대해 알아보자. Vercel팀이 Next.js의 13버전이 2022년 10월 26일 Next.js 공식 페이지에 소개되었지만, 자세히 살펴보지를 않았는데 새로 이직하게된 회사에서 Next13으로 프로젝트를 새로 세팅하기로 이야기가 되어 공식 블로그 내용을 살펴보았다. ++Next.js 13.4(현재 기준 최신 버전)을 사용하려면 아래의 명령어를 통해 설치할 수 있다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest 앱 라우팅 (App Directory) - Next.13.4(현재)기준 Stable 기존에 pages/ 디렉토리에서 라우팅 되던 방식과 다르게, app/ 디렉토리로 라우팅 하는 방식이 추가되었다. - Tree : 계층 구조를 ..

[TS] 프로젝트에 tsconfig 설정하기. 프로젝트를 처음 세팅할 때, TypeScript 로 타입 체크를 어디까지 허용할지, 어떤 설정으로 우리의 프로젝트를 쓸지 고민하던 중 팀원들(+나)의 타입스크립트 능숙도가 그리 높지 않다는 것을 알게되어 기본 타입스크립트 세팅을 하며 쓰는 글. tsconfig.json 설정 fucntion add(a,b){ return a+b; } add(10, null); // noImplicitAny 설정이 꺼져있다면 위의 코드는 타입체커를 통과하고, // noImplicitAny 설정이 켜져있다면 오류가 된다. **위의 예시의 경우, 타입스크립트의 설정에 따라 동일 코드라도 타입 체커의 통과 가능여부가 달라진다. 타입스크립트는 설정이 100개 가까이 되기때문에, 우리 프로젝트에서 어떤 타입스크립트 설정을 사용하는지..

[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand 회사에서 새로운 React 프로젝트를 세팅중인데, 전역 상태관리 툴 중에서 팀원들이 빠르게 배우고 활용할 수 있도록 쉽게 React 프로젝트의 상태 관리가 가능한 툴 2가지를 비교해 보게 되었다. Recoil (v0.7.7 기준) 전체 카운터 코드 counter sample code Recoil은 아래처럼 쓰인다. (테스트 코드 일부) import "./App.css"; import { countState } from "./state/countState"; import { useRecoilValue, useSetRecoilState, useResetRecoilState } from "recoil"; function App() { const count = useRecoilValue(countState); ..

[ Safari ] 아이폰의 사파리 모바일 웹 디버깅 하는 방법 아이폰으로 모바일 사파리 웹의 디버깅을 맥북을 이용하여 하는 방법. 1. 아이폰의 설정앱을 연다. 2. 설정의 Safari - 고급에서 웹 속성 설정을 활성화 한다. 3. 케이블을 사용하여 맥북에 연결한다. 4. 맥북에서 사파리를 열고 메뉴 탭에서 개발자용 탭을 확인한다. 5. 맥북 사파리의 환경설정 - 고급 - 메뉴 막대에서 개발자용 메뉴 보기를 활성화 한다. 6. 맥북 사파리의 개발자용 탭에서 iPhone을 선택한다. 7. 아이폰의 사파리 웹페이지를 탐색하며, 맥북 사파리로 개발자용 콘솔을 통해 디버깅을 한다.

[ WEB ] CSR과 SSR 비교하기 CSR(client-side-rendering)과 SSR(server-side-rendering)은 웹 페이지와 콘텐츠를 사용자에게 렌더링하는 기술이다. SSR과 CSR은 렌더링 과정이 일어나는 위치에서 차이가 있다. CSR (Client-Side-Rendering) CSR은 클라이언트 측에서 렌더링을 하는 기술로 사용자의 웹 브라우저의 JavaScript를 통해 웹 페이지를 렌더링한다. 서버에서 최소한의 HTML 파일을 보내고, 클라이언트 측 JavaScript 코드가 콘텐츠를 가져와 렌더링한다. 이 경우 사용자에게 보다 더 인터렉티브하고 동적인 사용자 경험을 제공할 수 있고 전체 페이지를 다시 로드하지 않고도 콘텐츠를 업데이트할 수 있는 기능이 있다. 하지만 초기 페이지 로딩 시간이 오래 걸리는 경우..

이전 1 2 3 4 5 ··· 10 다음

티스토리툴바