프론트에서 서버에 데이터 요청하는 방법 https://youtu.be/d6suykcsNeY?si=MonlhGzomiU_uCXv(반복 기록용) 2025. 8. 10. TypeScript와 TypeScript+SWC의 차이 우리가 리액트를 vite로 프로젝트 빌드를 할 때에 조건을 선택하게 되는데, 이 중 그냥 타입스크립트랑 타입스크립트 + SWC인 부분이 있다. (자바스크립트도 똑같이 나옴)그 차이가 무엇인지에 대한 좋은 글이 있어서 공유해 본다.https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4 TypeScript와 TypeScript+SWC의 차이Vite를 사용해 React 프로젝트를 설정할 때마다 보이는 두 가지 선택지가 있다. 바로 TypeScript와 TypeScript+SWC. 이 두 옵션은 어떤 차이가 있기에 나뉘어 있을까? 단순히 옵션을 선택하는 것보다 그 차velog.io 2025. 5. 22. 리액트 훅에 취하다. 리액트에서 빠지면 섭한 "리액트 hook"이에 대한 설명을 모아둔 유튜브 재생목록이 있어서 내가 복습할 겸... 여기 티스토리에 공유하겠다.https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기 www.youtube.com(개인적으로 깔끔하게 잘 알려주셨음.) 2025. 5. 12. 리액트 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. 이전 1 2 다음
