이번 주는 모던 리액트 딥다이브 첫 번째 북스터디 시작 주차다.1장은 리액트 개발을 위해 꼭 알아야할 자바스크립트 라는 주제로 리액트의 역사 부터 미래,자바스크립트와 함수, 클래스, 클로저 등의 개념 정리와 타입스크립트 활용까지 간단하게 살펴보았다. 우선 리액트는 모르는 사람이 있어도 페이스북을 모르는 사람은 없을 것이다.페이스북 현재 메타는 리액트를 활용한 대표적인 예시이다.페이스북 개발 중 제안 되었던 아이디어 중 하나는 애플리케이션에서 API의 변화에 따라 무어가 변경되면 단순히 UI를 초기화하고 새로 렌더링 하자는 아이디어로 시작되어채팅 수준과 같은 댓글과 좋아요 기능을 갖게 되었다.과거의 리액트는 클라이언트에 초점을 맞추고 있었고, 앞으로도 브라우저와 클라이언트에서의 작동을 개선할 예정이라고 한..

npm install @mui/material 을 했는데도 오류가 발생했다. npm install @material-ui/core --legacy-peer-deps 를 해주고 해결함

eslintrc.cjs 파일에서 endOfLine: "auto"와 trailingComma: "all" 이라는 규칙 추가해주기. 설정에서 Prettier - Trailing Comma - all로 변경 설정완료 후 터미널에서 한번 쳐주고! npx eslint --fix src/

영어는 잘 저장되지만, 한글을 파일로 저장했을 때, 알수 없는 모양으로 깨지는 경우가 있다. multer 안에서 파일 이름을 저장할 때 한줄을 추가해주어 해결. file.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");

저번에 만들어두었던 header, footer 컴포넌트를 사용 https://narii.tistory.com/43 [React] 컴포넌트 활용하기_헤더와 풋터 만들기 위쪽 헤더부분을 컴포넌트로 만들어서 App.js 혹은 원하는 페이지에서 import 하여 이렇게 간편하게 사용 할 수 있습니다. header import React from 'react'; import './style.css'; export default function Header() { return narii.tistory.com Board의 구조는 이렇게 크게 3개의 컴포넌트로 나누었습니다. 가장 작은 단위 post 하나를 표현하는 boardPost에는 BoardPost.js function BoardPost(props) { const..

컴포넌트에서 recoil을 사용하려 했을 때 발생했습니다! 해결 방법은 App.js 에서 recoil이 import 되어 있는지 확인 후 로 감싸주기만 하고 해결 !!

startsWith 인풋박스를 3개로 나누지 않고 타입을 text로 받되, 숫자만 입력을 받고, 형태에 맞게 하이픈이 자동 입력될 수 있도록 하고 싶었습니당 3번째 자리가 입력되면 뒤부터 - 하이픈 일단 생성 연락처가 12자리라면 4번째 뒤부터 - 이 붙도록 10자리를 쓴다면 두 개의 경우 (02로 시작하는 경우와 아닌경우) 시작이 02라면 02-0000-0000 형태로, 02가 아니고 10자리라면 000-000-0000 형태로, 그래서 앞자리는 select가 좋....습니다ㅎㅎㅎㅎㅎㅎㅎ const [phone, setPhone] = useState(''); const handlePhoneChange = (event) => { let value = event.target.value.replace(/\D/..

위쪽 헤더부분을 컴포넌트로 만들어서 App.js 혹은 원하는 페이지에서 import 하여 이렇게 간편하게 사용 할 수 있습니다. header import React from 'react'; import './style.css'; export default function Header() { return ( LOGO Home About Contact ); } .header { background-color: #020202; display: flex; justify-content: center; } .headerObj { display: flex; justify-content: space-between; padding: 0; width: 90%; text-align: center; margin: 0; } a..

1. npm 설치해주기 $ npm i @fortawesome/fontawesome-svg-core $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons $ npm i @fortawesome/react-fontawesome 2. https://fontawesome.com/icons/ 에서 사용할 아이콘 찾아주기 Coding Icons | Font Awesome Coding icons from Font Awesome, the world's favorite icon library and toolset. fontawesome.com 저는 faBars를 토글에 사용해..