리액트 PDF 사용방법 관련 깃허브 링크는 다음과 같다.https://github.com/wojtekmaj/react-pdf GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.Display PDFs in your React app as easily as if they were images. - wojtekmaj/react-pdfgithub.com설치 방법 >npm install react-pdforyarn add react-pdf이후 react-pdf를 설치하고 withResolver가 없다는 에러를 막기 위해 core-js도 설치해 준다npm install core-jsimportimport { Documen.. 2025. 3. 13. Vite로 리액트 프로젝트 시작하기 create react app 지원이 중지되었기에, 다른 방식으로 프로젝트를 만드는 것을 추천한다. 방법은 많다. 그중에서 Vite를 이용해서 리액트 프로젝트를 빌딩 하는 방법을 작성하고자 한다.(create react app 지원 중단 관련 글)왜 쓰는가?이유는 되게 간단하다. 프로젝트가 커져도 빠른 속도를 유지해주기 때문이다.작은 프로젝트에서는 잘 못 느낄 수 있지만, 프로젝트가 커지면 npm start시 "미리 보기" 서버를 여는 속도가 매우 늦어진다. (심하면 '분' 단위까지 늘어날 수 있음.) 그리고 코드를 수정하고 저장하고 반영하는 속도도 느려진다.이런 부분을 방지하기 위함이다.Vite 설치하기아래와 같은 명령어를 입력하여 설치할 수 있다.Vite를 사용하기 위해서는 14.18+, 16+의 N.. 2025. 3. 8. create react app 지원 중단 create react app이 지원 중단에 따라서 새로운 프로젝트의 빌딩 방법을 다르게 해야 한다. 기존까지는 npx create-react-app my-appcd my-appnpm start이 명령어로 만들게 되었다. 뒤에 my-app이 자신의 프로젝트 이름이 된다. (대문자 금지)(관련 리액트 글)https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html 새로운 React 앱 만들기 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org이제 이런 방법을 리액트에서는 권장하지 않는다. 다른 방법으로 빌딩해야 한다.그럼 어떻게 해야 하는가?하는 방법은 여러 개가 있다.. 2025. 3. 7. 리액트 로딩창 구현 리액트에서 로딩창을 구현하는 방법은 여러 가지가 존재하지만, 그중 React spinners 라이브러리를 이용하는 방법을 작성하고자 한다.(참고로 npm으로 깔 때 오타내서 react-spinner라고 쓰면 리액트는 이해를 못 한다. 이 부분 조심하자.)React spinner 설치하기npm install react-spinners사용법 - Spinner 모양 선택하기 https://www.davidhu.io/react-spinners/ React Spinners www.davidhu.io 이 사이트에 들어가서 여러 가지 스피너 중 마음에 드는 스피너를 선택하면 된다.사이트 내에서 커스텀할 수도 있고 리액트 코드에서 확인하면서 커스텀할 수 있다.색깔 같은 것은 사이트 내에서 바로 확인 가능하다.(예시코드.. 2025. 2. 25. 리액트 emotion 사용법 Emotion 은 JS로 css 스타일을 작성하도록 설계된 라이브러리다.Emotion은 프레임워크에 구애받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 특히 이 라이브러리를 토스에서 쓰고 있다.https://tosspayments-dev.oopy.io/cc9367e4-4ff6-4241-8189-9f3cf250f5d2#162ece7b-e09f-4711-92a1-7100aa27aeb6 토스 프론트엔드 챕터의 모든 것토스 프론트엔드 챕터를 소개합니다! 이 문서에는 프론트엔드 챕터에 대해서 궁금하신 분들께서 꼭 알았으면 하는 정보들이 담겨 있습니다.tosspayments-dev.oopy.io특히나 css의 props를 이용한 방법을 즐겨 쓴다고 한다.https://emotion.sh/docs/.. 2025. 2. 23. 리액트 zustand란? 이번 글은 리액트의 상태 관리 라이브러리 중 하나인 zustand를 알아보도록 하겠다.리액트 zustand란?프론트엔드에서 상태는 렌더 하는 데 있어서 영향을 미칠 수 있는 값을 뜻한다. 상태를 어떻게 관리하느냐에 따라 웹을 렌더 하는데 영향을 미칠 수 있다. 즉, 프론트엔드 개발자에게 상태관리는 중요한 임무가 되었다.리액트는 독립적인 컴포넌트 단위로 구성되어 있다. useState hook을 사용하여 하나의 컴포넌트에서 상태를 관리하고 props를 통해 부모-자식 간에 상태를 전파할 수 있다.상태가 시작된 지점과 어떤 컴포넌트를 거쳐가는지, 모든 흐름을 이해하고 기억한다면 useState와 props를 사용하는데 무리가 없다. 하지만 프로젝트의 규모가 커짐에 따라 관리해야 할 상태의 개수는 늘어날 것이.. 2025. 2. 21. 리액트 쿼리란? 이번 글은 "리액트 쿼리"에 대한 전반적인 내용을 담은 글이다. 리액트 쿼리가 무엇인지 시작해서, 코드는 어떻게 작성하는지? 언제 사용하는지 등등.. 이야기할 것이다.제대로 시작하기 전에, 공식 문서가 궁금하다면?공식 문서https://tanstack.com/query/latest/docs/framework/react/examples/basic React TanStack Query Basic Example | TanStack Query DocsAn example showing how to implement Basic in React using TanStack Query.tanstack.com위 링크 들어가면 리액트 쿼리의 베이직한 예시를 확인할 수 있다. (문서도 있으니 확인하자.)리액트 쿼리란?공식문서.. 2025. 2. 20. 리액트 Swiper (슬라이더) 적용 리액트 slick도 있긴 한데, DOM 요소의 부분에서 문제가 생길 수 있고.Swiper는 리액트에 좀 더 친숙해서 이 라이브러리를 채택하였다.관련 글을 링크로 달아두겠다.https://velog.io/@ooo3289/React-Swiper-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-Navigation-Pagination React Swiper 적용하기 (Navigation, Pagination)Swiper 공식 문서 참고퍼블리셔일 때 슬라이드 써야하는 일이 있으면 무조건 Swiper를 사용했었다.React 환경에서는 처음 쓰는거라 기대 만빵확실히 html, javaScript위에서 쓰는 것 보다 더 쉬웠음!!일단velog.io사람마다 라이브러리 선택은 당연히 다르겠지만.내가 써본.. 2025. 1. 27. 리액트 - 유튜브 영상 넣기 리액트에 mp4로 영상을 넣는 방법도 있지만, 좀 더 편하게 유튜브 영상을 넣는 방법이 있다.(mp4로 하려면 mp4를 다운로드하고, 라이브러리도 깔아줘야 하고... 아무튼 복잡함)1. 라이브러리 깔기$ npm install react-youtube일단 npm 라이브러리를 깐다. 코드는 위와 같다.2. import 설정import YouTube from 'react-youtube';jsx 파일에 import문을 작성한다. 코드는 위와 같다.3. 예시 코드 >.jsx.youtube { display: flex; justify-content: center; align-items: center; margin: 0 auto; padding-top: 20px; padding-bottom: 20px;}리.. 2024. 11. 27. 리액트 - 카카오 Map API 이번에는 카카오 지도 api에 대한 글이다. 저번에는 네이버를 이용해서 지도 api를 연동하였다.나의 개인적인 생각이지만, 지도 api에서는 네이버가 1황이라고 생각이 든다. 다만, 한 가지 단점이 "유료"라는 점이다. 그 점에서 카카오 지도 api는 한 달 30만 회의 호스팅을 무료로 버틸 수 있기에 비용 절감의 측면에서 꽤 매력적이다.또한, 저번에 했던 네이버 지도 api의 "API 키 오픈" 문제를 어느 정도는 해결한 글이기도 하다. 시작해 보자.카카오 api 키 받기https://apis.map.kakao.com/여기로 들어가서 애플리케이션을 등록해줘야 한다. 그러면 api 키를 받을 수 있다. 리액트는 자바스크립트 기반이니깐 자바스크립트 api의 키를 쓰면 된다. (강조한다. api 키는 함부로.. 2024. 10. 9. 리액트 - 환경 변수 관리하기 [API key] [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key)환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Passwordrominlamp.tistory.com 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임이다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 존재한다.이런 환경 변수를 세팅해서 노출하고 싶지 않은 key 아이디나 시크릿을 관리할 수 있다.자세한 것은 글을 참고하자. 영상은 밑의 영상을 참고하자.h.. 2024. 10. 9. 리액트 - 네이버 Map API 리액트에서 네이버 지도 api를 쓰는 법에 대해서 글을 써본다. 여러 차례, 삽질을 끝에... 어느 정도는 해결이 되었다.(어느 정도라는 건, 완벽히는 해결되지 않았다는 뜻... 돈이나.. 가끔 에러가 뜨기도 하고...)https://velog.io/@qldudgh/React-%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%A7%80%EB%8F%84-api-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] 네이버 지도 api 사용하기react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한velog... 2024. 10. 3. 리액트 Routing으로 페이지 이동하는 법 리액트에서 라우팅 방식은 좀 다르게 된다. 리액트는 SPA, 즉 단일 페이지인 html 하나로 돌아가게 된다. 그래서 경로 이동에 따라서 Ul을 바꾸고 싶다면 라우팅 기능을 해주는 react-router-dom을 깔아야 한다. npm을 이용해서 깔아주면 된다.npm install react-router-dom(참고로 리액트로 안 만들고 일반적인 HTML / CSS / JavaScript으로 만들게 되면 그냥 html 파일을 연동해 주면 끝이다.)// Router.jsimport React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Main from './pages/Main';import Main f.. 2024. 10. 2. (2024) 리액트 트렌드 라이브러리 정리 https://youtu.be/k0oqyokMm5Y?si=XJvgDYyccSvdI9eq영상 참고하자. 2024. 9. 4. React Spring(애니메이션 라이브러리) https://youtu.be/jOSu8VzJbpQ?si=Dgv7v-blQvQuYozP(출처 ㅣ 코딩 알려주는 누나)리액트 프로젝트를 좀 더 풍성하게 만들어 줄 수 있다.리액트 스프링을 이용해서 라이브러리를 세팅, 이후 편하게 애니메이션을 줄 수 있다. 세세한 것은 영상 참고. 2024. 9. 4. 리액트에서 외부링크 열기 온클릭 이벤트를 이용해서 외부링크 여는 법. React에서 클릭시 외부링크로 열기React에서 Link태그는 Router와 연관되어 내부의 route로 이동시키기 때문에 다른 외부 링크를 연결하기위해 a태그를 사용할 수 있다. 그렇지만 a태그 없이 클릭 이벤트로 외부링크를 연결하고 싶다면velog.io window.open("외부링크 URL")} ~~ 2024. 9. 3. 리액트 삽질...(타입 검사) 미니 프로젝트인 블로그를 만들면서 3시간 정도 삽질을 했다. (살려줘....)이 삽질에 대한 정리를 짧게 하고자 한다.일단 문제의 파일은 "페이지" 부분이었다.문제는 간단하다.useParms의 타입은 문자열이지만 postid의 타입은 숫자인 것이다.문제는 내가 코드를 "==="으로 해두었다는 것이다.자바스크립트에서는 타입 검사를 엄격하게 하거나 혹은 좀 더 유하게 검사할 수 있다.문법은 "==" 혹은 "==="이다. 전자는 그냥 값만 같으면 True가 되지만, 후자는 타입도 같아야 True가 된다.당연히 문자열과 숫자는 다른 타입이니 False가 나오고, 이는 곧 오류를 뜻한다.tilte를 가져오지 못하는 이유는 tilte의 타입은 "문자열"이기 때문이다. 근데 나는 이게 숫자 타입도 같아야만 데이터를 .. 2024. 8. 25. 처음 만난 리액트 V2 (로드맵) 카카오 구름 EDU에서의 "처음 만난 리액트 V2"이다. 소플님이 진행하신 강의이다. 이 강의는 버전 1 / 버전 2가 존재한다. 버전 1은 2020년이고 버전 2는 2022년에 나왔다. 그래서 최신 버전으로 진행하게 되었다.이 글은 한 번 로드맵을 정리할 겸해서 작성하게 되었다.로드맵은 위의 사진과 같다. 물론 리액트의 "전체"는 아니지만, 그래도 많은 부분을 내포하고 있다.특히 컴포넌트와 렌더링, JSX , 엘리먼트 등등... 중요 개념들은 무조건 배우고 넘어간다고 보면 된다.배우면서 느낀 점.새로운 개념들이기는 하지만, 어디까지나 리액트는 "자바스크립트"을 좀 더 잘 다루기 위한 라이브러리이기 때문에, 어느 정도 친숙한 부분도 존재한다. 본질적으로 볼 때에는 똑같다. ("객체" / "함수"라는 본질.. 2024. 8. 11. 리액트 삽질 < 매우 중요 (이 삽질은 카카오 구름 강의를 들으면서 생기게 되었는데..)npm start로 리액트 앱을 가져오는데... 이때 호완성, 버전 등 여러 문제 때문에 에러가 나고 있다. 처음엔 내가 친 코드가 문제인 줄 알고 있었지만,"챗 지피"을 노동 착취한 결과 몇 가지 힌트를 얻게 되었다.이게 오류가 나고 있는 문법인데... 문제는 "챗지피"에 의거하면 현재 코드를 보면, React 18에서 ReactDOM.createRoot를 사용하지 않고 ReactDOM.render를 사용하고 있기 때문에 오류가 발생하고 있습니다. ReactDOM.render는 React 18에서 제거되었고, 대신 ReactDOM.createRoot를 사용해야 합니다.- 챗 지피티-이게 맞다면 이미 제거된 문법을 나는 배우고 있다는 셈이 되.. 2024. 8. 8. 리액트 기초 역시 형이야. 믿고 있었어https://youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP&si=9gcW-e4b6OS_2ql4 2022 코딩애플 리액트 강의 www.youtube.com(리액트 기초로 블로그 프로젝트 만들기 영상)//https://youtu.be/qcphnSqneE0?si=mLI1Ua6dPPLv9c7f(이건 코딩 알려주는 누나 영상)더 딥한 건 다른 영상 참고하자.https://www.youtube.com/playlist?list=PLo3AHtncM26y0qX58gjc_QrkYlBCzQ2R_ 처음 만난 리액트 v2새롭게 리뉴얼 된 '소플의 처음 만난 리액트' 강의입니다.www.youtube.com(구름 - 소플) 2024. 8. 3. 이전 1 다음
