티스토리

jiwondev.log

검색하기

블로그 홈

jiwondev.log

xoxojw.tistory.com/m

Jiwon() 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[TIL] 비동기 코드, 콜백함수, 프로미스, 오류처리, async/await 자바스크립트의 비동기 코드의 처리에 대해 공부한 내용을 정리했다. 블로킹과 논블로킹, 동기와 비동기 비동기 처리 및 그와 관련된 개념을 정리하기 전에 블로킹과 논블로킹, 동기와 비동기에 대한 개념부터 다시 잡고 가야할 것 같아서 내용을 찾아보았다. 동기, 비동기 : 코드의 순서와 실행 순서가 일치하는가 동기(Synchronous) : 코드가 순서대로 실행된다 비동기(Asynchronous) : 코드가 순서대로 실행되지 않는다. 블로킹, 논블로킹 : 코드의 실행이 다른 코드의 실행을 막는가 블로킹(Blocking) : 코드의 실행이 다른 코드의 실행을 막는다. 논블로킹(Non-blocking) : 코드의 실행이 다른 코드의 실행을 막지 않는다. 노드에서는 비동기면 논블로킹인 경우가 많다고 한다. fs같.. 공감수 0 댓글수 0 2024. 1. 26.
[TIL] Recoil Selector 💡 TIL 20231029 - Recoil Selector Selector란? Derived state 입력받은 state를 변형해 반환하는 순수함수를 거쳐 반환된 값 Selector는 파생된 state(derived state)의 일부를 나타낸다. 즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다. atom의 output을 변형시켜 주는 개념 To Do 목록들을 카테고리별로 분류하려면 어떻게 할까? 컴포넌트 자체에서 전체 To Dos 배열을 불러온 뒤 분류할 수도 있지만, 이것은 데이터 자체를 바.. 공감수 0 댓글수 0 2023. 10. 29.
[TIL] React-hook-form 복습 - register, validate, errors, handleSubmit 💡 TIL 20231019 - React-hook-form 복습 - register, validate, errors, handleSubmit React-hook-form import useForm 컴포넌트에서 useForm을 호출하면 register와 handleSubmit을 사용할 수 있다. form 내의 유효성 검사가 필요한 input들에 register 함수를 호출한다. required, minLength/maxLength, pattern, validate 등 💭 Register 함수 ; useForm hook으로 불러올 수 있음 검사가 필요한 input에서 register 함수를 호출 react-hook-form이 알 수 있도록 input에 이름을 부여해야 함 {...register("email.. 공감수 0 댓글수 0 2023. 10. 19.
[TIL] 비동기 함수로부터 받아오는 data에 제네릭 사용하기 💡 TIL 20230914 - 비동기 함수로부터 받아오는 data에 제네릭 사용하기 비동기 함수로부터 받아오는 data에 타입 에러 발생 useMutation.tsx에서 useMutation 훅을 통해 받아오는 데이터의 형식을 아래와 같이 지정해두었다. // src/hooks/useMutation.tsx interface UseMutationState { loading: boolean; data?: object; error?: object; } // src/components/Auth/Auth.tsx // 생략 return ( // ... 중간 생략 {data?.ok ? null : ( {method === "email" ? ( 그랬더니 위의 data?.ok 부분에서 'Property 'ok' does .. 공감수 0 댓글수 0 2023. 9. 14.
[TIL] HTTP 상태 코드 💡 TIL 20230912 - HTTP 상태 코드 자주 쓰는 HTTP 상태 코드 ✅ 200 OK 요청이 성공적으로 되었습니다. (성공) 👎 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. (클라이언트에서 Request할 때 발생한 문제) 🔐 401 Unauthorized 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다. ⛔️ 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다. 🚫 405 Method Not Allowed 요청한 메서드는 서버에서 알고 있지만, 제거되었고 사용할 수 없습니다. (허.. 공감수 0 댓글수 0 2023. 9. 12.
[TIL] JavaScript 동기, 비동기, 비동기 프로그래밍의 필요성 💡 TIL 20230909 - JavaScript 동기, 비동기, 비동기 프로그래밍의 필요성 동기와 비동기 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 되는 단점이 있습니다. 비동기 처리 방식은 현재 실행 중인 태스크가 종료되지 않은 상태라 해도, 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 비동기 프로그래밍의 필요성 자바스크립트는 싱글 스레드 언어입니다. 다시 말해, 자바스크립트는 한 가지 작업밖에 수행하지 못합니다. 그래서 자바스크립트로 코드를 구동하면 ‘순차적’으로 처리합니다. 이로 인해 무거운 작업들을 다량으로 .. 공감수 0 댓글수 0 2023. 9. 9.
[TIL] Tailwind CSS break-all (텍스트 줄바꿈 시 깨지는 현상 해결) 💡 TIL 20230907 - Tailwind CSS break-all (텍스트 줄바꿈 깨지는 현상) 태그의 글씨가 정상적으로 줄바꿈 되지 않는 현상 현재 모바일 반응형 작업 중인데, 왼쪽 이미지처럼 숫자를 길게 쓰면 줄바꿈이 되지 않고 영역 밖을 튀어나가는 현상을 발견했다. (암흑요리왕님께 무한한 감사) 그리고 오른쪽 이미지의 경우 이미지가 있는 다른 컴포넌트들은 정상적으로 나오는데, 저 "새콤달콤 치커리 샐러드"만 사진이 튀어나가는 것이 아니겠는가.. (딥빡) 암튼 치커리 샐러드를 고치다가 원인을 잘 모르겠어서 헤매던 중, 암흑요리왕님의 댓글을 발견하고 좀 찾아보니 tailwind의 Word Break라는 유틸함수를 알게 되었다. 엘리먼트 내에서 문장 또는 문단의 단어 나누기를 제어하는 유틸리티이다... 공감수 1 댓글수 1 2023. 9. 7.
[TIL] 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef 💡 TIL 20230831 - 기술면접 질문 정리 - 버츄얼 돔/리얼 돔, useRef, useEffect 1. 버과 리얼 돔의 차이 먼저 DOM이란 Document Object Model의 약자로 웹 어플리케이션의 HTML 요소들을 노드라는 단위로 나누어 노드들을 연결한 트리 구조의 객체입니다. 실제 DOM은 브라우저 화면을 렌더링할 때 이용하는 HTML 요소(노드)들의 트리 구조이고, 가상 DOM은 실제DOM의 가벼운 복사본이며, 메모리에만 존재하는 가상의 트리구조 입니다. 가상 DOM은 React.js, Vue.js와 같은 라이브러리와 프레임워크에서 사용됩니다. 둘의 가장 큰 차이점은 실제 DOM의 일부를 변경하면 전체 DOM을 한꺼번에 다시 렌더링하기 때문에 성능 문제가 발생할 수 있습니다. 또한.. 공감수 0 댓글수 0 2023. 8. 31.
[TIL] react-hook-form mode 💡 TIL 20230830 - react-hook-form mode mode란? mode란 React-hook-form의 useForm의 props 중 하나로, 사용자가 submit을 하기 전에 유효성 검사를 진행하는 것이다. (validation strategy before submitting behaviour) mode 옵션을 사용하면 사용자가 양식을 제출하기 전에 유효성 검사 전략을 구성할 수 있다. 유효성 검사는 handlesubmit 함수를 호출하여 트리거되는 onSubmit 이벤트 중에 발생한다. 1) onSubmit 유효성 검사는 제출 이벤트에서 트리거되며, 유효하지 않은 입력은 onChange 이벤트 리스너에 연결하여 유효성을 재확인한다. 2) onBlur 블러 이벤트에서 유효성 검사가 트.. 공감수 0 댓글수 0 2023. 8. 30.
[TIL] 일시적 사각지대 TDZ(Temporal Dead Zone) 💡 TIL 20230826 - 일시적 사각지대 TDZ(Temporal Dead Zone) 1. 일시적 사각지대(Temporal Dead Zone)이란? TDZ 는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 의미한다. 즉, 선언 단계와 초기화 사이에 잠시 머물러있는 구간이다. 2. 변수 선언의 3단계 1) 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록한다. 스코프가 참조하는 대상 2) 초기화 단계(Initialization phase) 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다. undefined로 초기화된다. 3) 할당 단계(Assignment phase) 사용자가 undefined로 초기화된 메모리에 다른 값.. 공감수 0 댓글수 0 2023. 8. 26.
[TIL] import { useRouter } from “next/router”와 “next/navigation” 차이 💡 TIL 20230824 - import { useRouter } from “next/router”와 “next/navigation” 차이 next.js 13에서의 useRouter 훅 useRouter는 next/router에서만 불러와야 하는 줄 알았는데, 자꾸 import하려면 next/router와 next/navigation 두 가지가 떠서 궁금하기도 했고 오늘 위와 같은 에러를 마주해서 찾아보았다! 둘의 차이는 무엇? useRouter from next/route Page router으로 라우팅 시 사용 useRouter from next/navigation v13 이후 App router으로 라우팅 시 사용 Next.js 13 App router 이번에 진행 중인 프로젝트는 App rout.. 공감수 0 댓글수 0 2023. 8. 24.
[TIL] Prisma, Planet scale 셋업 및 연결 방법 💡 TIL 20230822 - Prisma, Planet scale 셋업 및 연결 방법 1. Prisma, Planet Scale, Vitess 1) Prisma Prisma는 데이터베이스를 다루기 위한 현대적이고 강력한 ORM (Object-Relational Mapping) 도구이다. Prisma를 사용하면 데이터베이스 스키마를 간편하게 정의할 수 있고, 데이터베이스 쿼리 역시 쉽게 작성하고 실행할 수 있다. Prisma는 다양한 데이터베이스 시스템과 통합할 수 있으며, TypeScript와 JavaScript를 지원하며, 데이터 모델과 데이터베이스 스키마를 동기화하여 개발자에게 강력한 개발 경험을 제공한다. 2) Planet Scale MySQL과 호환되는 서버리스 데이터베이스로, 개발자 경험을 저.. 공감수 0 댓글수 0 2023. 8. 22.
[TIL] Prisma에 대해 💡 TIL 20230820 - Prisma 1. Prisma란? 1) Node.js와 TypeScript ORM ORM은 Object Relational Mapping의 약자이다. 기본적으로 번역기의 개념이라고 생각하면 되는데, JS 또는 TS 코드와 DB 사이에 다리를 놓아주는 역할을 한다. SQL같은 데이터베이스 언어를 작성하지 않고 타입스크립트 코드로 작성하여 오류가 발생하기 전에 알 수 있다. PostgreSQL, MySQL, SQL Server, SQLite, MongoDB와도 사용할 수 있다. 2) schema.prisma Prisma를 사용하기 위해서는 먼저 Prisma에게 DB가 어떻게 생겼는지 설명해주어야 하는데, 이 설명은 `schema.prisma`라는 파일에 작성한다. // sche.. 공감수 0 댓글수 0 2023. 8. 20.
[TIL] Tailwind CSS 장단점, 연습예제 💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제 1. Tailwind CSS란 Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다. 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다. 1) 장점 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다. 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다. 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸.. 공감수 0 댓글수 0 2023. 8. 19.
[TIL] Next.js 13 - getStaticProps, getStaticPaths (feat. 12버전에서의 getServerSideProps) 💡 TIL 20230818 - Next.js 13 - getStaticProps, getStaticPaths (feat. 12버전에서의 getServerSideProps) 1. 12버전 : getServerSideProps Next.js 12버전에서는 Data Fetching시 pre-rendering 하려면 getServerSideProps 함수를 사용했었다. 1) getServerSideProps 코드 예시 import Seo from "../../components/Seo"; import { useRouter } from "next/router"; export default function Detail({ params }) { const router = useRouter(); const [title.. 공감수 0 댓글수 0 2023. 8. 18.
[TIL] Next.js - SSR vs SSG vs ISR 💡 TIL 20230817 - SSR vs SSG vs ISR 저번 글에서는 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점에 대해 공부했다면, 오늘은 SSR, SSG, ISR에 대해 정리해보았다. 1. SSR (Server Side Rendering) 1) 서버 사이드 렌더링 SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 fetch 해야하는 데이터가 빈번하게 변경될 때 사용된다. 2) getServerSideProps getServerSideProps 함수는 serv.. 공감수 0 댓글수 0 2023. 8. 17.
[TIL] Next.js - redirect와 rewrite 💡 TIL 20230816 - redirect와 rewrite 1. redirect, rewrite의 공통점/차이점 redirect와 rewrite 유저가 어떤 path로 접근하는 경우, 다른 path나 경로로 자동으로 이동시켜주는 기능이다. 공통점 next.js에서 기본적으로 제공하는 기능이다. 두 가지 모두 유저가 특정 path로 이동 시 의도한 path로 이동시키 위해 사용한다. 차이점 redirect는 정해진 path로 url이 변경되어 유저가 확인할 수 있다. 반면 rewrite는 redirect 해주는 것은 똑같지만, 유저가 처음 입력한 url 그대로 유저에게 보여진다. 2. redirect, rewrite 설정 방법 1) next.config.js // next.config.js module.. 공감수 0 댓글수 0 2023. 8. 16.
[TIL] React.js와 Next.js의 차이점 - Library vs Framework, CSR vs SSR 💡 TIL 20230815 라이브러리 vs 프레임워크, CSR vs SSR 1. 라이브러리(React) vs 프레임워크(Next.js) React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다. 1) 📚 라이브러리 React는 JavaScript Library 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 응용 프로그램이 라이브러리를 사용한다. 개발자로서 사용하는 것 2) 🛠️ 프레임워크 Next.js는 React Framework 코드를 작성하는 기본 틀을 제공하여 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 응용 프로그램은 프레임워크에 의해 사용된다. 개발자가 코드를 불러오는 것 코드를 적절한 위치에 잘 적기만 한다면 f.. 공감수 0 댓글수 0 2023. 8. 15.
[TIL] npm vs npx vs yarn 🇰🇷 20230815 TIL Next.js 기초 강의를 듣던 중 프로젝트 create를 npx로 하길래 npm과 뭐가 다르지? 그렇다면 yarn이랑은? 궁금해져서 간단하게 찾아보고 정리하였다. 1. npm 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 Node Package Manager라는 말 그대로 노드 환경에서의 패키지 매니저를 의미한다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라고 하는 Getting Started가 많고 사용 빈도가 높다. `npm install 모듈명 -g` : npm을 통해 -g 옵션을 주면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 내 컴퓨터 안에서 글로벌하게 모듈이 설치되어 프로젝트마다 같은 모듈을 공유해서 사용할 수도 있다. 단.. 공감수 0 댓글수 0 2023. 8. 15.
[TIL] 간단한 Recoil 첫 사용기 💡 TIL 20230814 리액트 프로젝트를 빌드하면서 상태관리 라이브러리는 당연하게도(?) Redux만 써봤었다. 하지만 세상에 당연한 것은 없는 법.. Recoil, Zustand, Jotai 등 다른 상태 관리 라이브러리도 써보고 싶다는 생각에 먼저 Recoil부터 설치해서 사용해보게 되었다. 1. Recoil이란? Recoil은 페이스북이 만든 상태 관리 라이브러리이다. React 전용으로 나온 상태 관리 라이브러리인 만큼 리액트에서 최적화되어 작동한다. 아래는 Recoil 공식 홈페이지에서 소개하는 Recoil의 특징인데 설명이 뭔가 귀엽다. 리액트 공식 유튜브에서 설명하는 Atom의 개념도이다. redux에서는 store라는 중앙 상태 관리소에 담아두고 관리하는 개념이었다면, 리코일에서는 뭔가.. 공감수 0 댓글수 0 2023. 8. 14.
[WIL] 심화 프로젝트 - 챗봇, private route, 마이페이지 기능 구현 동작원리 및 트러블슈팅 정리 💡 WIL 20230807-20230811 : TypeScript React - 챗봇, private route, 마이 페이지 구현한 기능 동작원리 및 트러블슈팅 정리 1. 맡은 기능 openai API 사용하여 챗봇 UI 기능 구현 auth 여부에 따라 접근 불가능하도록 private route 설정 마이페이지 프로필 수정 및 내가 쓴 글 모아보기 페이지네이션 2. 사용 라이브러리 react-route-dom, redux-toolkit, react-query, supabase, openai, react-hook-form, styled-components 3. 구현한 기능 동작 원리 1) 🤖💬 챗봇 기능 - openai API, UI 상태관리 (1) openai API openai API를 사용하여 사용.. 공감수 0 댓글수 0 2023. 8. 11.
[TIL] React 챗봇 만들기2 - redux-toolkit으로 챗봇 on/off여부 전역적인 상태관리 1. 챗봇 on/off state 전역 상태관리를 위한 redux 세팅 챗봇 on/off 상태는 모든 페이지에서 똑같이 인식해야하므로 redux-toolkit을 사용하여 전역적으로 관리해주어야 한다. redux에서 모듈 슬라이스 파일을 만들고, 모듈 슬라이스를 리덕스 configStore에 등록해줌 1) redux - module - chatBotUISlice.ts import { createSlice } from '@reduxjs/toolkit'; import { ChatBotState } from '../../types/types'; const initialState: ChatBotState = { chatBotIsActive: false, }; const chatBotUISlice = createS.. 공감수 0 댓글수 0 2023. 8. 8.
[TIL] React 챗봇 만들기1 - OpenAI api 세팅 및 사용 방법 (ChatGPT) 💡 20230807 TIL : OpenAI api 리액트 프로젝트에 세팅한 과정 정리 이번 프로젝트에서 챗봇 기능을 담당하였다. 챗봇은 웹 사이트 어디에서든 모달창으로 접근할 수 있으며, 모달에서 OpenAI api를 이용하여 함수명, 변수명을 지어달라고 요청할 수 있는 챗봇을 만드는게 목표이다. OpenAI api는 처음 사용해보는거라, 공식 문서와 블로그들을 참고하여 일단은 어설프게 구현에 성공하여 그 과정을 정리해보려고 한다. 참고로 진행 중인 리액트 프로젝트는 타입스크립트 기반으로 진행 중이다. 1. 세팅 API 사용 전, API키 발급 및 라이브러리 설치 세팅을 완료하여야 한다. 1) React 프로젝트에 openai 라이브러리 설치 // npm 설치 npm install openai // ya.. 공감수 0 댓글수 0 2023. 8. 7.
[TIL] useMemo, useCallback 1. useMemo 리렌더링 사이에 연산 값(value)을 캐시할 수 있는 리액트 훅으로, 메모화된(memoized) 값을 계산하는 함수를 호출한다. import { useMemo } from "react"; const cachedValue = useMemo(calculateValue, dependencies) 1) 사용 예시 리액트 공식 문서에서 설명하고 있는 사용 예시는 다음과 같다. Skipping expensive recalculations (비용이 많이 드는 재연산 생략) Skipping re-rendering of components (컴포넌트의 리렌더링 생략) Memoizing a dependency of another Hook (다른 훅의 의존성 메모화) Memoizing a functio.. 공감수 0 댓글수 0 2023. 8. 4.
[TIL] 온프레미스(On-premise) vs. 클라우드(Cloud), AWS 소개, AWS의 주요 서비스 💡 20230802 TIL : AWS에 대해 공부한 내용 정리 1. On-premise vs Cloud computing 1) 🏠 On-premise 온프레미스(On-premise)란 기업이 직접 물리적 공간에 실제 하드웨어 장비를 가지고 IT 인프라를 구축하여 운영하는 방식을 말한다. 필요한 인프라 시스템을 구축하기 위해 하드웨어와 소프트웨어를 직접 구입하여, 제공 서비스나 시스템 상황에 맞게 환경을 구성한다. 서버의 유지보수 역시 해당 조직의 IT 인프라를 관리하는 팀이 직접 한다. 간혹 학교나 회사에서 봤었던 서버실 같은 곳들을 떠올리면 된다. 2) ☁️ Cloud computing 클라우드 컴퓨팅(Cloud Computing) 또는 클라우드 서비스(Cloud Service)란 제3자 서비스 공급자.. 공감수 0 댓글수 0 2023. 8. 2.
[TIL] Redux toolkit - createAction, createReducer, configureStore, createSlice 1. createAction + reducer rtk의 createAction 함수를 사용하여 action creator 정의 createAction 함수는 자동으로 action creator 함수를 생성하여 action object를 생성한다. (ex. { type: 'ADD', payload: actionPayload }) 그 후 reducer 함수를 직접 정의하여, action type과 payload를 기반으로 상태가 어떻게 업데이트되는지를 지정 state가 변화하면 state를 직접 변경하지 않고, reducer 함수에서 새로운 state를 생성하여 반환 2. createAction + createReducer rtk의 createAction 및 createReducer 함수를 모두 사용한다. .. 공감수 0 댓글수 0 2023. 8. 1.
[TIL] 중첩 라우팅(Nested Routes) (feat. React-Router-DOM v6) react-router-dom 6 이상 버전에서 nested routes를 구현하는 방법에는 두 가지가 있다. 참고 사이트 - The Guide to Nested Routes with React Router 1. 부모 Route path에 `/*` 부모 route의 path 마지막에 /*를 적어 명시적으로 이 route의 내부에서 nested route가 렌더링될 수 있음을 표시하고, 자식 route를 부모 route의 element 내부에 작성하는 방법 // Router.tsx // Coin.tsx Routes가 상대경로도 지원하기 때문에 path="chart"와 같이 써도 동작한다. 2. 자식 Route를 Route 내부에 작성 자식 route를 부모 element의 내부가 아닌 route 내부에 작.. 공감수 0 댓글수 0 2023. 7. 31.
[TIL] TypeScript로 투두리스트 만들기 - global.d.ts, 이벤트 타입지정 1. global.d.ts Todo List를 만들 때, Todo 객체는 여러 컴포넌트에서 쓰일 것이므로 Todo 객체의 타입은 전역적으로 설정해주면 효율적일 것이다. `global.d.ts` 파일은 TypeScript에서 전역으로 사용할 타입들을 선언하는 파일이다. 일반적으로 `.d.ts` 확장자를 가진 파일들은 TypeScript 타입 선언 파일로서, 프로젝트 전체에서 사용되는 타입들을 정의하기 위해 사용된다. 1) 내가 작성한 global.d.ts 파일 // global.d.ts import { Dispatch, SetStateAction } from "react"; export interface Todo { id: string; title: string; content: string; isDone.. 공감수 0 댓글수 0 2023. 7. 28.
[TIL] TypeScript + React 개발환경 세팅 1. 리액트 앱 생성 // yarn yarn create react-app my-app (--template typescript) // npx npx create-react-app my-app (--template typescript) 디렉토리 구조 package.json 프로젝트 정보와 의존성(dependencies)을 관리하는 문서 파일 안의 script 객체에서는 실행, 빌드 등의 alias를 설정하여 관리할 수 있음 tsconfig.json 디렉토리에 tsconfig.json 파일이 있다면 해당 디렉토리가 TypeScript 프로젝트의 루트가 됨 tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정 2. 절대경로 사용 // tsconfig.json { .. 공감수 0 댓글수 0 2023. 7. 27.
[TIL] TypeScript 언어의 탄생 배경 기본적인 특징 1. TypeScript의 탄생 배경 1) JavaScript와 Node.js 원래 JavaScript는 HTML, CSS와 함께 사용되어 웹 페이지에서 동적인 효과를 주기 위해 만들어진 스크립트 언어 시간이 지나면서 자바스크립트의 성능을 높이고자 하는 니즈 발생 구글 V8 엔진의 탄생 → Chrome 브라우저에 내장되어 있음 구글 V8 엔진의 우수한 성능을 기반으로 Node.js라는 플랫폼이 탄생하고, 이를 통해 JS 언어로도 백엔드 프로그래밍이 가능해짐 2) Node.js의 잠재적 위험성 프론트엔드에서의 에러는 사용자가 보는 뷰를 해칠 수는 있어도, 웹 페이지를 이용하는데 전반적인 동작에 피해를 끼치는 경우는 많지 않다 하지만 백엔드에서의 에러의 경우, 에러에 대한 예외 처리가 제대로 되지 않으면 단.. 공감수 0 댓글수 0 2023. 7. 25.

문의안내

티스토리
로그인
고객센터

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