🖥️Frontend/React15

• 

  [React] 지정한 시간 마다 백그라운드 이미지 변경하기 (with TypeScript) 개요 프로젝트 진행 중 메인 화면에서 지정된 시간마다 변경된 이미지를 보여줘야했다. 코드 Main.tsx const Layout = styled.div` width: 100%; height: 100%; background: url(${(props) => props.url}); background-size: cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.7); `; const Main = () => { const [ activeIndex, setActiveIndex ] = useStat.. 🖥️Frontend/React 2024. 3. 29.

• 

  [React] Vite를 사용해서 React 프로젝트 생성 및 실행 Vite 란? 현재 CRA의 지원이 중단되었고 여러 가지 대체 프레임워크가 추천된다. Vite(비트)는 프로젝트를 CSR(Client Side Rendering)로 생성해주는 ESbuild 기반의 빌드 툴이다. Native ESM을 지원하기 때문에 빠른 HMR(Hot Module Replacement)을 지원한다. ESM을 이용해서 전체 코드를 번들링하지 않고 수정된 모듈만을 반영한 뒤 요청이 오면 해당 모듈만 전달한다. 그러나 CSR로 동작하기 때문에 SEO에 약하다는 단점이 있다. SEO를 우선시 하는 사이트에서는 Next.js 및 Remix 같은 대체 프레임 워크의 사용을 권장하고 있다. 하지만 클라이언트 사이드 핸들링만을 하는 경우에는 Vite 또는 Parcel 사용을 권장하고 있다. Vite로 .. 🖥️Frontend/React 2024. 2. 7.

• 

  [React] canvas & x, y좌표 값으로 길 그리기 Canvas API 자바스크립트와 HTML의 canvas 엘리먼트를 통해 그래픽을 그릴 수 있게 제공하는 API로서, HTML5의 구성요소이다. 주로 2D 그래픽을 다루는데 사용되고 있다. 비트맵 데이터의 픽셀 하나 하나를 조작할 수 있고 그래픽 처리 성능이 좋은 편이다. Method 자주 사용되는 canvas의 메소드는 아래와 같다. 메소드 기능 beginPath() 새로운 경로(path)를 생성한다. 새 경로를 생성하는 메소드이기 때문에 최초에 호출하지 않아도 된다. closePath() 경로를 닫는다. 마지막 경로에 있는 점과 시작점을 연결한다. stroke() 경로에 선을 그려준다. fill() 경로의 내부를 채운다. moveTo() 아무것도 그리지 않고 시작 위치를 옮긴다. lineTo() 현재.. 🖥️Frontend/React 2023. 11. 28.

• 

  [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.

• 

  [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.

• 

  [React] Inflearn 처음 만난 리엑트(React) - Handling Event 강의 (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 8강. Handling Event 이벤트를 처리하는 것 ( = Event Listener ) DOM의 Event onclick 속성을 통해서 문자열로 전달한다. clicked React의 Event onClick 속성을 통해서 함수 자체로 전달한.. 🖥️Frontend/React 2023. 2. 20.