🖥️Frontend65 [React] RTK & TypeScript RTK 기본 사용법 https://tlseoqja.tistory.com/44 [React] Redux & RTK 상태 관리 라이브러리 처음 리액트를 접하고 리덕스 강의를 보고 문법이 어렵다고 느껴졌다. 그래서 리덕스 대신 상태 관리 라이브러리인 zustand를 사용해서 상태를 관리했다. 확실히 zustand의 문 tlseoqja.tistory.com 이전 링크에서 RTK의 기본 사용 방법을 알아보았다. 이 코드를 TypeScript를 적용해서 사용하는 방법을 작성해보려고 한다. 타입스크립트란? 기존 자바스크립트의 단점을 보완하기 위해 개발된 정적 타입 언어(Static Type Language)이다. 자바스크립트의 확장된 언어이기때문에 자바스크립트의 모든 기능을 사용할 수 있다. 브라우저에서 실행하기 위.. 🖥️Frontend/React 2023. 11. 20. [React] zustand zustand 리액트를 처음 접하는 개발자라면 Redux를 사용하기엔 무리가 있을 것이다. 이유는 복잡한 사용 방법때문이다. 그래서 프로젝트를 시작할 때 zustand를 채택해서 사용했다. zustand는 Redux, Mobx와 같이 상태 관리 라이브러리 중 하나이다. Redux와 같은 방식으로 상태를 관리하지만 라이브러리가 가볍고 사용 방법이 간단하다. zustand는 Redux와 같은 Flux 방식으로 한 곳에서 상태를 관리한다. 한 곳에서 상태를 관리하게 되면 여러 컴포넌트에서 공유하는 상태를 관리하는데 효과적이다. 더욱 자세한 내용은 아래 블로그에 잘 정리되어있다. https://velog.io/@greencloud/%EC%9A%B0%EB%A6%AC-%ED%8C%80%EC%9D%B4-Zustand.. 🖥️Frontend/React 2023. 11. 18. [React] Redux & RTK 상태 관리 라이브러리 처음 리액트를 접하고 리덕스 강의를 보고 문법이 어렵다고 느껴졌다. 그래서 리덕스 대신 상태 관리 라이브러리인 zustand를 사용해서 상태를 관리했다. 확실히 zustand의 문법이 더 쉬웠고, 더욱 편리하게 상태를 관리할 수 있었다. 하지만 리덕스의 사용법을 모르고 넘어가면 안될 것 같아서 간단하게 학습을 진행하기로 했다. 리덕스 리덕스는 상태 관리 라이브러리이다. 리덕스 자체로도 사용 가능하지만 리액트와 함께 사용하면 더욱 편리하게 상태를 관리할 수 있게 된다. 리덕스는 단일 스토어에서 상태를 관리한다. 그래서 동일한 데이터는 항상 하나의 스토어에서만 관리하게 된다. Store 리덕스를 사용하려면 먼저 스토어를 생성해줘야 한다. 스토어의 상태에 접근할 수 있게 하기 위해 Red.. 🖥️Frontend/React 2023. 11. 17. [TypeScript] 공변성, 반공변성 타입의 공변성, 반공변성 타입 스크립트 강의나 블로그를 보면 공변성, 반공변성 이란 단어가 등장하게 된다. 처음 들어보는 단어라 블로그 예시를 찾아보았다. 공변성(Covariance) A가 B의 서브타입이면, T는 T의 서브타입이다. 반공변성(Contravariance) A가 B의 서브타입이면, T는 T의 서브타입이다. 이변성(Bivariance) A가 B의 서브타입이면, T → T도 되고, T → T도 된다. 불변성(Immutability) A가 B의 서브타입이더라도, T → T도 안되고, T → T도 안된다. 이는 타입 스크립트에서 타입 간에 서로 대입을 할 때 되는 경우와 안되는 경우를 파악하기 위해 알아두어야 하는 단어이다. 타입 스크립트를 사용하다보면 어떤 타입은 다른 타입에 들어가는데 어떤 타.. 🖥️Frontend/TypeScript 2023. 11. 13. [TypeScript] never never Type은 가능한 값의 집합이다. 예를 들면 string 타입은 가능한 모든 문자열의 집합을 의미한다. 따라서 변수의 타입을 지정하면, 해당 변수는 오직 지정한 타입에 가능한 값만을 가질 수 있다. TypeScript에서 never 타입은 값의 공집합이다. 그래서 never를 TypeScript의 바닥타입이라고 부르기도 한다. 집합에 어떤 값도 없기 때문에 never 타입은 any 타입의 값을 포함해 어떤 값도 가질 수 없다. type IsNever = T extends never ? true : false; type A = IsNever; type B = IsNever; 위 코드에서 Type A는 true, Type B는 false를 반환할 것 같지만 그렇지 않다. 코드를 직접 작성해서 확인.. 🖥️Frontend/TypeScript 2023. 11. 9. [JavaScript] Exception & trycatch & throw 예외란? 개발을 하면서 '예외(Exception)'라는 단어를 자주 접하게 된다. '예외'란 생성된 정상적인 동작에서 어긋나 예외 상황이나 에러가 발생하는 경우를 뜻한다. JavaScript에서는 예외 발생을 처리하기 위해서 try/catch문을 사용해서 작성하게 된다. try/catch/finally문 try문 안에는 예외가 발생할 지도 모르는 동작의 코드를 작성한다. catch문 안에는 try문의 예외 발생 시 처리할 동작의 코드를 작성한다. finally문 안에는 try문, catch문의 동작이 끝나면 실행될 코드를 작성한다. catch문과 finally문은 생략해서 사용해도 되지만, try문을 사용하는 의미가 없어지기 때문에 하나 이상의 블록과 같이 사용하는 것이 좋다. 아래는 try/catch/.. 🖥️Frontend/JavaScript 2023. 10. 17. [JavaScript] overflow-x 적용 시 stacky 적용 안되는 현상 개요 반응형 웹을 만들던 도중 모바일에서 x축 스크롤이 생겨났고 body에 overflow-x: hidden을 적용했다. 그로 인해 모바일 웹에서 position: sticky가 적용된 태그가 동작하지 않는 현상이 발생했다. 해결 방안 Stack Overflow를 찾아보니 sticky는 overflow의 hidden, auto, scroll 속성에서는 동작하지 않는다고 한다. overflow-x에 clip속성을 적용해주니 정상적으로 동작하는 것을 확인할 수 있었다. 코드 body { overflow-x: clip; } .no-scroll { position: sticky; left: 0; top: 0; } 참고 사이트 https://developer.mozilla.org/en-US/docs/Web/CSS.. 🖥️Frontend/JavaScript 2023. 10. 12. [React] xlsx & file-saver & csv 엑셀(xlsx) 파일과 csv의 차이 엑셀 파일 업로드 및 다운로드 기능을 구현하면서 csv라는 확장자를 처음 알게 되었다. 엑셀로 두 파일을 실행시켜 보니 같은 양식이었고 두 라이브러리의 차이점을 모르겠어서 찾아보았고 차이는 아래와 같다. csv 1. 단순히 읽기, 쓰기 용도에 적합한 라이브러리이다. 2. 라이브러리가 가볍다. 3. 가벼운 만큼 기능이 제한적이다. xlsx 1. 라이브러리에서 제공해주는 기능이 많다. 2. csv에 비해 라이브러리가 무겁다. csv 를 사용해 코드를 작성한 후 xlsx 로도 작성해보니 확실히 csv를 사용하는 것이 간단하게 작성할 수 있어서 편했다. 구현하려는 기능을 파악한 후 사용할 라이브러리를 선택하면 될 것 같다. CSV 사용 1. react-csv 라이브러리 설치.. 🖥️Frontend/React 2023. 9. 14. [React] React 배포 시 CORS 이슈 웹 프로젝트를 진행하면서 CORS 정책 위반으로 에러가 발생했다. 이전 프로젝트를 진행할 때는 서버 담당자가 해결해 주었지만, 프로젝트를 React로 리뉴얼하는 과정에서 서버를 수정할 수 없었고 클라이언트에서 CORS 에러를 해결해야만 했다. 아직 100% 해결된 상태는 아니지만 CORS 에러에 대해 찾아보면서 적용했던 해결 방안을 정리해보려고 한다. CORS 란? Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 할 수 있다. 개발자의 입장에서는 CORS 정책때문에 골치아플 수는 있지만, CORS에 의해 출처가 분명한 리소스만 제공받을 수 있다. 그렇다면 CORS에서 말하는 "출처"가 무엇인지 간단하게 알아보겠다. 출처(Origin) 란? 우.. 🖥️Frontend/React 2023. 9. 13. [React] Inflearn 처음 만난 리엑트(React) - Context 강의 (Inflearn) 처음 만난 리엑트(React) - SOAPLE님 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard 14강. Context Context Component Tree를 통해 어떤 Component든지 쉽게 데이터에 접근할 수 있게 해준다. 여러 Component에서 계속해서 접근이 일어날 수 있는 데이터는 Context를 사용하는 것이 좋다. * 하지만 Component와 Context가 접촉하면 재사용성이 떨어진다. 그래서 무조건적으로 Context를 사용하는 것은 좋지 않다. 자주 사용하는 데이터 로그인 여부, 로그인 정보, UI 테마, .. 🖥️Frontend/React 2023. 2. 24. [React] Inflearn 처음 만난 리엑트(React) - Composition vs Inheritance 강의 (Inflearn) 처음 만난 리엑트(React) - SOAPLE님 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com 13강. Composition 합성, 여러 개의 Component를 합쳐서 새로운 Component를 만드는 것 1. Containment 하위 Component를 포함하는 형태의 합성 방법 Sidebar, Dialog 같은 Box 형태의 Com.. 🖥️Frontend/React 2023. 2. 24. [React] Inflearn 처음 만난 리엑트(React) - 조건부 렌더링 강의 (Inflearn) 처음 만난 리엑트(React) - SOAPLE님 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com 9강. Conditional Rendering Conditional Rendering 조건부 렌더링, 어떠한 조건에 따라서 렌더링이 달라지는 것 예시 회원인 경우 UserGreeting Component를 보여주고 비회원인 경우 GuestGree.. 🖥️Frontend/React 2023. 2. 22. 이전 1 2 3 4 5 6 다음