분류 전체보기19 [React] css 스타일 주는법 , styled-components 를 이용한 스타일 안녕하세요. 슈입니다.오늘은 react 에서 css 스타일 주는법을 알려드릴게요.javascript 로는 주로 css 파일로 했었는데react 로 넘어오고 나서는 styled -components 를 이용해서 스타일을 적용해주고 있어요.먼저 비쥬얼스튜디오의터미널창을 열고npm i styled-components를 통해서 라이브러리를 다운받아줘요. import styled from 'styled-components';그다음 원하는 컴포넌트의 상단에 위에처럼 임포트해줍니다. 그다음 import React from 'react';import styled from 'styled-components';const Div = styled.div`#title{ line-height:2; font-size:2.. 2024. 6. 10. [React] 부드러운 화면전환 페이지전환 하는법 | framer-motion 을 통한 AnimatePresence React 리액트에서 화면이 바뀔때마다,화면전환, 페이지전환 될때마다서서히 나타나는 부드러운 효과를 주고싶다면??framer-motion 을 통한 AnimatePresence 를 사용하는 방법을 알려드릴게요. 먼저 비주얼스튜디오의 터미널에 npm i framer-motion 를 입력하고 다운받아줍니다. import {AnimatePresence} from 'framer-motion';그다음 App.js 파일로 가셔서 윗부분에framer-motion 라이브러리에서 AnimatePresence 를 import 해줍니다. App.js 파일에 여러 페이지가라우트로 걸려있겠죠?그 Routes 밖으로전체를 감싸줍니다. // App.js 파일function App() { return ( .. 2024. 6. 6. [React] 카카오맵 API 넣는법 , 카카오맵 지도 좌표 구하는법 경도,위도 안녕하세요. 오늘은 제가 헤매이던 카카오맵 api 넣는 방법 알려드릴게요.카카오맵 넣는건 쉬우나 제가 원하는 위치의 경도와 위도를 구하는 법이잘 안나와있어서 찾는데 오래걸렸어요.여러분은 고생하지 마시라고 제가 바로 알려드립니다! 1. 먼저 아래의 카카오 개발자 홈페이지 들어가셔서로그인 해주시고요 .내 어플리케이션 새로 하나 만들어주세요.https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 2. 그럼 내 어플리케이션 클릭하면왼쪽에 메뉴가 보일거에요.우리는 홈페이지 만들거니까플랫폼 클릭해줍니다. 3... 2024. 6. 5. [React] 리액트로 게시판 만들기. Quill 을 이용한 텍스트 에디터 블로그 게시판 안녕하세요. 오늘은 리액트에서 게시판 만들때 사용하기 좋은텍스트 에디터 라이브러리를 알려드릴건데요.Quill을 사용하면 편하게 세팅해서 사용할 수있어요.react에서 다양한 라이브러리를 제공해서 편한 거같아요.먼저 비주얼스튜디오의 터미널에 npm i quill 을 해서 quill 라이브러리를 다운받아줘요. 그 다음원하는 컴포넌트에 quill을 import 해줘요.import Quill from 'quill';import 'quill/dist/quill.snow.css'몇가지 테마가 있는데저는 snow를 사용했어요. 개인적으로 이게 보기좋고 제일 예쁜거같아요. const quillElement = useRef(null); const quillInstance = useRef(null); use.. 2024. 6. 4. [React] 리액트에 사진 올리는법 이미지 import 하는법 자바스크립트와 다르게 리액트에 이미지,사진을 올릴때는import 를 해줘야합니다.처음에 저도 react를 배울때 이미지 import 하는게 어색했는데이젠 이게 더 편리하다는 생각이 들어요.먼저 컴포넌트의 가장 위에import 사진 from '../img/사진.jpg'라고 import 해줍니다.from 뒤에오는건 자신의 사진 경로에요.저는 src파일 밑에 img 폴더를 만들어서 그 안에 사진.jpg 라는 파일을 넣어놨어요.그리고나서 import 한 이름 을 src 괄호 {} 안에 똑같이 넣어줍니다.그럼 사진이 불러와질거에요! 주의할 점은 src="사진" 하면 안됩니다.import 한 사진을 불러올때는 { } 괄호를 써야해요. 2024. 6. 3. [React] Link 로 페이지 이동 Routes , Route 사용하는법 React 에서 Link 로 페이지 이동 Routes , Route 사용하는법 Link 로 페이지 이동하고 싶다면 메인페이지 서브페이지이렇게 사용하는데여기서 to = ' 이 안에 적을 주소' 이안에 적을 주소 는 App.js 에서 만들어 줘야 합니다. function App() { return ( }/> }/> );}export default App; 이런 식으로요!그리고 Routes와 Route 를 사용하려면비주얼 스튜디오의 터미널에npm i react-router-dom routes route이렇게 3개를 연달아 다운받아준뒤 Import 해줘야합니다.그리고 마지막으로 index.js 로 이동해서 아래와 같은 부분에const roo.. 2024. 5. 31. 이전 1 2 3 4 다음
