본문 바로가기

분류 전체보기

 (200)
TypeScript의 interface는 설계도다! 안녕하세요 웹파트 OB 손지유입니다.TypeScript를 통해 과제를 하다 interface 때문에 오류가 종종 뜨는 것을 보고..."내가 interface 개념에 대해 완전히 이해하지 못했구나!" 싶어서 쓰게 된 아티클 :)오늘 이 아티클을 통해 interface의 기본 개념을 뿌셔봅시다!1. TypeScript Interface란?TypeScript의 interface는 객체의 모양, 즉 객체가 가져야 할 속성과 그 타입을 미리 정해두는 설계도라고 할 수 있습니다.따라서 interface를 따라 객체를 만들면 실수로 속성을 빼먹거나 잘못된 타입의 값을 넣지 않도록 해주는 것이죠. JavaScript에서는 이런 구조를 강제하지 않아서,코드 작성 도중 실수를 하더라도 오류가 발생하지 않고 그대로 실행되는..
[TypeScript] 'error'은(는) 'unknown' 형식입니다. ts(18046) 안녕하세요:) 웹 파트 YB 유서연입니다! 저는 4주차 과제를 하던 중 다음과 같은 에러를 마주했습니다. 이는 타입스크립트에서 axios를 사용할 때, catch 문에서 error의 타입을 unknown으로 정의하기 때문에 발생한 에러였습니다.이번 글에서는 이 에러를 해결하는 방법에 대해서 알아보겠습니다.TypeScript에서 Axios Error를 처리하는 방법1. any 타입 지정export const PostLogin = async (name: string, password: string) => { try { const response = await instance.post("/login", { username: name, password: password, }); ..
TypeScript Generic 타입 정복하자 안녕하세요! YB 김민정입니다 :) 이번 4주차 과제하면서, 타입 문제 중 제너릭을 사용하면서 해결했던 것이 있었는데 그 과정에서 제네릭 타입을 좀 더 깊이 톺아보면 좋을 것 같아서 알아보려 합니다  제네릭(Generic) 이 뭘까?  우리는 '변수' 라는 저장소를 사용하기 때문에, 변할 수 있는 것을 다룬다. 근데 우리가 배운 타입은 number, string, undefined 등 고정되어 있다.따라서 타입을 직접적으로 고정된 값으로 명시하지 말고 '변수' 를 통해 언제든지 변할 수 있는 타입을 통해 보다 유연하게 코딩할 수 있는 장치가 필요한데, 그것이 바로 '제네릭(generic)' 타입이다.-> 간단하게 말하자면.. 타입을 변수화 한 것이다!  빠르게 코드로 톺아보자.  function iden..
globalStyle? ThemeProvider? 안녕하세요 웹 YB 이윤지 입니다.벌써 4주차네요! 합동 세미나도 당장 이번 주를 앞두고 있네요 ㅎㅎ오늘은 구현 명세서에 제일 상단에 있던 ThemeProvider, GlobalStyle 에 대해서 알아볼까 합니다!왜냐하면 제가 처음 봤거든요! (사실 뭔들 처음이 아닐까 싶지만)사실 어떻게 사용해야되는지 물음표를 굉장히 많이 띄운 상태로 과제를 냅다 시작했기 때문에정리하는 차원에서 이번 주차 아티클을 작성하게 되었습니다. 😊 1. globalStyle(전역 스타일링)globalStyle 이란 우리가 만들고 있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미합니다. 그니까 한 마디로 모든 html 요소에 대해서 공통적인 스타일을 가지는 거죠.예를 들어 모든 li 태그에서 list-style 제거하..
프로젝트 초기 세팅하는 법 벌써 시간이 빠르게 지나서 합동세미나를 해야 하는데 프로젝트 초기세팅 하는 법을 제대로 알고 시작해야겠다는 반성의 의미로 이번 아티클을 작성하려고 한다. ⚙️ 초기 설정 목록프로젝트 디렉토리 구조 설계코드 가이드라인 및 스타일 가이드 설정프레임워크 및 라이브러리 설정  📂 프로젝트 디렉토리 구조 설계프로젝트를 진행할 때 초기에 폴더 구조를 설계해두고 해당 폴더에 파일을 추가하면서 진행해야 효율적이다. 어떤 폴더에 코드가 위치해있는지 명확하게 예측 가능하며 같은 성격의 코드들이 하나로 모여있기 때문에 그러하다. 어느 프레임워크를 사용하는지에 따라 디렉토리 구조가 달라지는데, 프론트엔드에서 현재 가장 많이 사용되는 React로 프로젝트 빌드할 때 사용되는 디렉토리 구조를 설명하려고 한다. project/ ..
리액트 useParams 와 Query String useParams() 란??리액트에서 라우터 사용 시에 useParams 훅을 사용해서 url 의 동적인 파라미터 정보를 가져올 수 있다. 여기서 말하는 동적인 파라미터란? url 구조에서 ...url/path/1 에서 이 1이 파라미터가 되는 것이다.{ path: "/post/:postId", element: ,},function UserProfile() { const { postId } = useParams(); // 현재 URL에서 postId 값을 가져옴} 리액트의 useParams 훅으로 게시글 ID에 따라 다른 URL로 이동하는 예제로 이해해보자.우선 라이브러리를 설치해주고,라우터를 설정해준다.// App.jsimport React from 'react';import { BrowserRo..
타입 좁히기 -> 타입 가드에 대해 알아보자! 안녕하세요 웹 YB 박희선입니다 😃 저는 현재 웹부스 스터디에 참여 중인데요, 바로 지난주 공부 범위에 타입 가드가 포함되어 있었습니다. 그때는 실제 프로젝트를 진행하면서 "자주 사용을 할까?"라는 의문이 들었었죠. 그런데 이번 과제를 진행하면서 실제로 타입 가드를 사용하게 되었고, 그 과정에서 타입 가드가 전용 문법이 있는 것이 아니라, 흔히 쓰는 제어문(예: if 문 등)을 활용해서도 오류를 최소화할 수 있다는 점을 알게 되었습니다. 그래서 이번 4주차 공유과제 주제로 타입 가드를 선택하게 되었습니다. 일반적으로 타입 가드에서 사용되는 키워드1. typeof: 일반 타입 체킹2. instanceof: 클래스 체킹3. Array.isArray(): 배열 체킹4. .type / in: 객체 속성 체킹 ..
💥 로딩/에러처리 및 데이터 패칭 라이브러리 💡 로딩 / 에러 처리를 하는 방법에는 어떤 것들이 있을까?1. (패칭 라이브러리를 사용하지 않고) 선언적으로 처리하기 - Suspense, Error BoundarySuspense : Suspense는 children의 로딩이 완료될 때까지 다른 컴포넌트를 대신 보여줄 수 있게 해준다. REST API와 같이 비동기로 데이터를 가져오는 작업에서 활용도가 높다.-> 개발자가 Loading 상태를 선언적으로 관리 가능ErrorBoundary : ErrorBoundary는 하위 컴포넌트 트리의 렌더링 중 발생한 에러를 감지하여 컴포넌트 트리 대신 폴백 UI를 보여줄 수 있는 컴포넌트다. 아래 컴포넌트에서 에러 발생 시 throw 하여 에러에 관한 책임을 Error Boundary가 갖도록 한다.-> 생명주..

티스토리툴바