미국산 귤

리액트로 다크 모드를 구현하는 것은 useTheme을 사용하면 돼서 생각보다 간단했다.나는 리액트 코드를 짤 때 page와 style 코드를 분리하는데, page 코드에 다크모드 선언을 해두고 옵션만 달아주면 style 코드에서 다크 모드 on/off 스타일을 설정만 하면 돼서 간편했다.물론 모든 줄에 옵션을 달아야 하는 게 귀찮았지만 할 만 했다.import { useTheme } from "../contexts/ThemeContext";const { isDarkMode } = useTheme(); isDarkMode={isDarkMode}color: ${(props) => (props.isDarkMode ? "#fff" : "#3D3A3A")};background-image: url(${(props)..

태그 맨 앞 S.은 수정해서 사용import Pagination from "react-js-pagination"; // 전체 코드export const PaginationContainer = styled.div` .pagination { display: flex; justify-content: center; margin-top: 15px; cursor: pointer; margin-left: -70px; } ul { list-style: none; } ul.pagination li { width: 30px; height: 30px; font-family: "Pretendard Variable"; font-style: normal; f..

import { motion } from "framer-motion";// 전체 코드const pageTransition = { initial: { x: "100%" }, // 오른쪽에서 시작 animate: { x: "0%" }, // 가운데로 이동 exit: { x: "-100%" }, // 왼쪽으로 이동};

프론트엔드는 백엔드가 기능을 구현하여 코드를 넘겨주면,자신이 개발한 프론트 화면과 기능을 연동할 수 있어야 합니다.리액트와 쟝고 연동은 DRF와 axios 문법을 이용하여 진행합니다. 오늘은 연동 시 백엔드 쟝고 서버 여는 방법을 알아보겠습니다~     1. 먼저 깃허브에서 클론 받은 파일 중 가장 최상위 폴더에서 아래 명령어로 가상환경을 생성합니다.사실 가상환경 위치는 크게 상관없는 것 같은데, 최상위 폴더에 두는 것이 편하더라고요python -m venv    이제 cd 명령어를 이용해 requirements.txt 파일이 있는 폴더로 이동합니다.    *여기서 requirements.txt란?: django, pillow, python 등 백엔드 서버 실행에 있어 필요한 것들을 모두 넣어놓은 파일 ..

1. 일단 프로젝트를 내려받을 깃허브 레포지토리에 접속한다.  2. 레포지토리의 메인 브랜치에서 클론 코드를 복사한다.내려받을 브랜치 x, 메인 브랜치에서 복사  3.아래 명령어를 Git Bash에 차근차근 입력git clone --branch    cd //   여기서 클론된 폴더 안에 package-lock.json 혹은 yarn.lock 파일이 있는 경우반드시!!! 아래 명령어로 모두 제거rm    lock 파일이 모두 제거됐다면npm install   npm install을 하면서 package-lock.json 폴더가 다시 생기는 경우가 있다.혹시 lock 파일이 또 생겼다면 또 rm 명령어로 지워주기 반!드!시!!!!!!   lock 파일 없고, package.json 파일만 잘 있다면npm..

7주차 멋사 과제로 기획디자인 파트에서 넘겨준 피그마 디자인을 리액트로 넘겨받아 간단한 기능을 구현해야 한다.  그간 세션에서 두 세 번 연습해봐서 생각보다 화면 구현은 간단하게 할 수 있었다.   1. 먼저 피그마 프로젝트에 접속하여 우측 상단 토글을 눌러 Dev Mode 상태로 만든다.(사진처럼 UI가 초록색으로 변해야 함) Dev Mode 상태에서 요소를 선택하면 이렇게 우측에 CSS 코드와 사용된 파일들이 보인다.   2. VS code로 넘어와 리액트 프로젝트를 생성하고, public 폴더에 images 폴더를 생성한다. 여기다가 피그마 디자인에서 사용된 이미지 파일을 넣을 것이다. src가 아니라 public에 만드는 이유는, public에 넣어두면 굳이 이미지를 import 해오지 않아도 바..

*DOM 엘리먼트에서의 이벤트 처리 방식과 차이점1. 카멜케이스 문법을 사용한다.- DOM의 경우 onclik, oninput 과 같이 모두 소문자(ex. onclick, oninput)로 입력하여 이벤트를 처리하였다. 하지만 리액트에서는 lowerCamelCase 형태(ex. onClick, onInput)로 입력한다.  2. 이벤트 핸들러를 JSX 문법의 함수로 전달한다.(ex. onClick={addNumber})- DOM의 의 경우 문자열(ex. onclick="addNumber()")로 이벤트 핸들러를 전달하였다.    *리액트에서 지원하는 이벤트 종류1. onClick- 요소를 클릭하는 경우 2. onChange- 주로 input 요소에서 사용, input 값에 변화가 생길 경우 3. onIn..

이전 포스팅에서 언급했듯이 리액트에는 state라는 개념이 있다. {/*리액트에는 이 컴포넌트의 상태를 나타내는 개념이 있다.글자 그대로 이해하면 되는데, 리액트는 바로 이 상태 변화에 따라 업데이트를 진행한다.무슨 말이냐하면, 리액트의 DOM 내에서 현재 상태(state)를 이전 상태(state)와 비교하여 변화가 있는 컴포넌트만을 찾아서 업데이트 한다는 것이다.*/}    이 state 때문에, 리액트에서는 어떤 변수의 값이 바뀔 때 return 값도 함께 바꿔주기 위한 useState라는 Hook이 필요하다. 리액트 개발을 하기 위한 아주 기본적인 훅이다.     🧐훅(Hook)이 뭔데......?      - Hook 이란?Hook이라는 개념은 리액트 16.8 Version부터 나온 개념이다. ..

*리액트(React)란?: 페이스북에서 개발한 자바스크립트 라이브러리UI 구축 용도로, 특히 싱글 페이지 애플리케이션과 모바일 애플리케이션 개발에 많이 사용된다.복잡한 UI를 보다 쉽게 만들 수 있고, 관리가 용이하기 때문에 널리 사용 중이다.        리액트를 본격적으로 공부하기 전, 학습량이 생각보다 방대함을 알아야 한다.그치만 지레 겁먹을 필요는 없다. 기존과 다른 방식의 라이브러리이기 때문에 새로운 개념이 많을 뿐이다.그러니 기초부터 차근차근 꼼꼼히 공부하면 좋을 것 같다!(또, 모든 프로그래밍이 그렇듯 리액트도 계속해서 버전 업데이트가 이루어지니 꾸준히 공부해야 한다.)       먼저 리액트가 여타 라이브러리와 구별되는 큰 특징이 있는데바로 state(컴포넌트의 상태)라는 개념이 존재한다...