본문 바로가기

React14

[ React ] 콘솔 경고들 수정하기 프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다. 경고 수정 #1  Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다. 원래 코드 {inputtype === 'ColorPicker' ? setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null} {inputtype === 'ColorPicker' ? null : setMeta(meta => ({ ...meta, name: e.target.value }))} />} 수정 코드아.. 2024. 6. 4.
[ React ] Ant design Layout 적용해보기 아래 링크로 이동하면 다양한 구조로 적용이 가능하다.https://ant.design/components/layout Ant design 설치npm i antd   제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자. App.jsimport './App.css';import { Layout } from 'antd'; // Ant design의 layout을 가져온다.const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.function App() { return ( Logo content .. 2024. 5. 21.
[ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25.
[ React ] React Datepicker 원래 React Calendar을 사용하려 했는데 React Calendar는 달력이 바로 떠서 useState로 true일 때 보여주고 false일 때 닫히게 했다. 하지만 이때 문제가 내가 원하는 위치에 달력을 뜨게 하려니 fix를 사용하게 되는데 이렇게 했을 때 유저가 달력을 킨 상태에서 화면사이즈를 변경하니 달력이 잘렸다. 조금 더 검색하던 중 React Datepicker을 알게 되었다. React Calendar와 다르게 날짜 박스를 클릭하면 달력이 바로 아래에 생긴다. https://reactdatepicker.com/ React Datepicker 설치 npm install react-datepicker --save Import DatePicker Library import DatePick.. 2023. 2. 9.
[ React ] React Calendar React Calendar 저번에는 직접 달력을 구현해 보았으니 이번에는 리액트에서 제공하는 달력을 사용해서 구현해 보았다. 훨씬... 간단하다🫠 그래도 그렇게 만들어본 덕분에 라이브러리에 더 감사해지는 것 같다. 설치 import Calendar from 'react-calendar'; 달력 선언 결과물 Calendar CSS 아래 한 줄 import 해 왔는데 저렇게 이쁘게 바뀌었다..! import 'react-calendar/dist/Calendar.css'; setSelectedDate(true)}/> 2023. 2. 8.
[ React ] Hooks의 useState 1. Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. 2. useState useState는 가장 기본적인 Hook이다. 함수형 컴포넌트에서도 상태를 가지고 있을 수 있게 해 준다. 만약 함수형 컴포넌트에서 상태를 관리해야 한다면 useState를 사용하면 된다. 3. useState를 사용한 예제 버튼을 누르면 숫자가 바뀌는 컴포넌트를 만들며 useState를 익혀보았다. Counter.js import React, { useState } from 'react'; cons.. 2023. 1. 31.
[ React ] 하나의 modal로 버튼에 따라 다른 내용 출력하기 modal 창 하나로 수정 버튼에 따라 그에 맞는 내용이 modal 창에 뜨게끔 구현을 해보았다. MyPage.jsx - 수정 버튼 import EditModal from '../../components/MyPage/EditModal/EditModal'; import { Fragment, useEffect } from 'react'; import { MyPageContainer, MyInfoContainer, MyPageTagTitle, MyInfoInput, MyInfoEditButton, NickNameContainer, GithubContainer, MyPageTabsContainer, InputCheckContainer, } from './style.js'; const MyPage = () => .. 2023. 1. 24.
[ 스파르타 / TIL ] 내일배움캠프 #28 [Todo list 만들기 (React)] 오늘 한 것 알고리즘 문제 풀기 Todo list Vercel에 배포하기 튜터님의 Todo list 리뷰 노트 정리 [ 프로그래머스 / Javascript ] 하샤드 수 https://school.programmers.co.kr/learn/courses/30/lessons/12947 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 codesign.tistory.com Todo list 회고 Todo list 만든 결과물이다. Todo list를 만들면서 가장 어려웠던 부분은 Working에서 완료를 눌렀을 경우, Done으로 Todo가 이동을 하는 것이다. 하지만 true로 변경이 된 상태에서 map으로 todo.. 2022. 12. 7.
[ React ] VSCode에서 create-react-app 설치방법, 현재폴더에서 리엑트 설치방법 Visual Studio Code 터미널 열기1. VSCode를 연다.  2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다.쇼트컷으로  control + shift + ` 를 누르면 새 터미널이 열린다.  3. 화면하단에 새로운 터미널 창이 열린다.  4. 프로젝트를 생성하고 싶은 파일 위치로 이동한다.ls : 현제 위치에서의 파일 목록 조회가 가능하다.cd: 원하는 파일을 열고 그곳으로 이동한다.  'ls'를 눌러 현제 위치를 파악한 뒤'cd 파일명'을 적어준다. (파일 루트를 안다면 한 번에 다 적어줘도 된다. Desktop/Code/Frontend) 원하는 파일 위치로 이동했다면 아래 리액트 시작 명령어로 리액트를 설치해 준다.    리액트 시작 명령어 np.. 2022. 11. 30.
728x90

티스토리툴바