🖥️Frontend/React18

• 

  [React] 이미지 파일 미리보기 개요사용자가 이미지 파일을 업로드했을 때 해당 이미지를 미리보기 할 수 있도록 하는 기능을 구현하려고 한다. 파일 업로드이미지 파일을 업로드 후 미리보기로 보여주는 페이지를 작성해준다. 업로드한 File 객체를 저장할 상태를 useState()를 사용해서 생성해준다.그리고 파일을 업로드할 수 있게 type이 file인 input 태그를 만들어준다.const Previewer = () => { // 사용자가 업로드한 파일을 저장할 상태 const [ imageFile, setImageFile ] = useState(); return ( {/** 이미지 파일 업로드 버튼 */} );};export default Previewer; 파일 업로드 시 onChange.. 🖥️Frontend/React 2025. 5. 20.

• 

  [React] 검색어와 동일한 단어 강조 개요원티드의 8월 프리온보딩 사전 미션을 진행하면서 간단한 검색창을 구현했다. 검색창에 검색어가 입력되면 해당 단어가 강조되는 기능을 구현해야 했다.  구상처음 생각한 방법은 해당 단어가 있는 문자열을 split() 함수로 자르고 해당 문자열 사이에 단어를 넣는 방법을 생각했다. 하지만 이 방법을 사용하기엔 같은 단어가 여러 번 반복되는 문자열인 경우에는 적용할 수 없다고 판단했다. 그래서 래퍼런스를 찾아보던 중 태그를 사용해서 강조 처리하는 방법을 찾아 적용했다.  코드// 1const highlight = useCallback((text: string, query: string) => { // 2 const parts = text.split(new RegExp(`(${query})`, 'gi').. 🖥️Frontend/React 2024. 7. 30.

• 

  [React + TypeScript] Kakao Map API 적용해보기 개요사이드 프로젝트 진행 중 Kakao Map API를 활용하여 개발을 하고싶었다. 공식 문서와 블로그들을 찾아봤고, 미숙하지만 적용 방법을 작성해 보려고 한다.  Kakao API 사용 신청하기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 먼저 kakao developers 사이트에서 API 사용을 위해 프로젝트 생성을 해준다.  버튼을 눌러 정보를 입력해서 애플리케이션을 추가해준 후 생성된 애플리케이션 목록을 클릭해준다.  그림2 처럼 우측의 플랫폼 메뉴로 들어가면 Web 플랫폼을 등록할 수.. 🖥️Frontend/React 2024. 7. 3.

• 

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