🚩 React CSS Module 📝 설명 css module을 사용하면 css 클래스가 중첩되는 것을 방지할 수 있다. css 파일명 뒤에 .module을 붙여주면 됨 ✒️ 예제 코드 작성 입력 App.js Button1.jsx Button1.modul

🚩 React useContext 사용해서 다크모드 구현 📝 설명 useContext를 사용해서 다크모드 toggle버튼 구현해보기 ✒️ 코드 작성 입력 App.js App.css components 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는

🚩 React useState로 만들었던 내용을 useReducer로 변경(기존배열) ✒️ 코드 작성 입력 App.js CreateUser.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 useReducer() useState로 만들었던 내용을 useReducer로 변경(배열객체) <b

🚩 React useCallback 📝 설명 React Hooks 중 하나, useMemo와 비슷 useMemo는 특정 결과값을 재사용, useCallback함수를 재사용 함수 안에서 사용하는 props가 있으면 꼭 deps로 포함시켜야 함 -> 최신값을 인식하게 ✒️ 사용법 useCallback(함수선언구, 변화요소(dependency)) 예제...

🚩 React 배열 추가, 삭제, 속성 수정(응용2) 📝 설명 어제 마지막으로 한 내용에서 변수의 이름을 통일하지 않고 다시 코딩 ✒️ 사용법 입력 App.js CreateUser.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 &

🚩 React 배열렌더링 prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js UserList1.jsx UserList2.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [React] 배열렌더링 useRef 📝 설명 컴포넌트의 속성

🚩 React useState(중첩된 객체) prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js 출력 이미지로 대체 ![](https://velog.velcdn.com/images/raumschiff_/post/02

🚩 React 리액트로 가위바위보 만들기 3일차(완성) 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 버튼 클릭할 때 마다 컴퓨터의 이미지 랜덤으로 변경됨 가위 ![...

🚩 React 리액트로 가위바위보 만들기 2일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 아직 승패 관련글씨는 구현x 버튼 클릭할 때 마다 컴퓨터의 이...

🚩 React 리액트로 가위바위보 만들기 1일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면(미완성) >각 버튼 클릭 시 콘솔 출력

🚩 로컬에 리액트 설치하는 방법 yarn으로 설치 권장! -> npm보다 용량이 훨씬 적음 https://yarnpkg.com/ $ npm install -g yarn -> 예전 버전으로 설치됨 (1.22.19) $ corepack prepare yarn@stab

🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Input.jsx Input2.jsx 출력 이미지로

개인사정으로 하루 결석하여 나중에 추가 예정 🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Count

🚩 React 컴포넌트와 props를 사용하여 card 만들기 ✒️ 사용법 입력 css는 따로 기재x App.js Avata.jsx Profile.jsx Wrapper.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 React 기초 컴포넌트 📝 설명 리액트에서 앱을 이루는 가장 작은 조각을 말한다. 재사용성 높음 데이터(props)를 입력받아 출력하는 함수 컴포넌트 이름은 대문자로 시작한다. ✒️ 코드 작성 입력 React Button.jsx Box.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 codesandbox

🚩 React 기초 codesandbox 📝 설명 온라인 코드 에디터 개발 환경 구축 없이 간단하게 웹으로 코딩해 볼 수 있다. > 리액트 개발 화면 html + javascript -> jsx방식(javascript syntax extension) 수정을

🚩 Canvas canvas tag / API 📝 설명 화면에 그림을 그릴 수 있는 공간을 만들어서 마우스로 그림을 그릴 수 있도록 하게 해 주는 tag / API ✒️ 사용법 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [Canvas API](https://de

🚩 javascript fake API 📝 내용 JSON Placeholder를 이용해 데이터를 가져와서 사용 ✒️ 사용법 입력 index.html css html js user.js css html js 출력 이미지로 대체 🔗 참고 링크

🚩 bootstrap 부트스트랩을 이용하여 사이트 제작 📝 내용 부트스트랩으로 만들 사이트를 하나 정해서 제작해보기 ✒️ 사용법 입력 css html 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 Bootstrap

🚩 bootstrap 부트스트랩 기초 📝 설명 부트스트랩이란, 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. css 파일을 따로 추가하지 않아도 스타일을 지정할 수 있다. 파일을 직접 다운받아 사용하거나 cdn으로 포함하여 사용할 수 있다