본문 바로가기

Study46

8. 연습 프로젝트 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 연습 프로젝트는 깃허브에 올리고 생략합니다. https://github.com/katf101/React-The_Complete_Guide/tree/katf/03-Practice-project GitHub - katf101/React-The_Complete_Guide Contribute to katf101/React-T.. 2022. 5. 30.
7. 중단점으로 리액트 앱 디버깅하기 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. BreakPoint(중단점) 으로 디버깅 개발자도구에서 sorce 탭으로 이동한다. sorce 의 파일을 살펴보면 User 폴더를 찾을 수 있는데 User폴더 내부에 vscode에서 작성한 파일들이 있다. 디버깅이 필요한 파일들을 살펴본다. 현재 에러가나는 상황을 가정해보면 리스트에서 목록중 하나를 삭제하는데 key .. 2022. 5. 30.
6. 리액트 컴포넌트 스타일링 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 동적 인라인 스타일링 예전 글에서 JSX 태그에 style을 추가하여 css 스타일링을 하였다. style 속성에 삼항 연산자를 사용하면 동적 스타일링을 할 수 있다. return ( Course Goal Add Goal ); 동적 CSS 클래스 설정 백틱을 사용하면 className에서 동적으로 css 클래스를 설정.. 2022. 5. 30.
5.3 리스트 렌더링 및 조건부 Content: 토글 버튼 만들기 (feat. 유데미 React 완벽 가이드) https://www.udemy.com/course/best-react/ 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법 www.udemy.com 이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다. 토글 버튼 토글 버튼을 만들어서 렌더링을 on / off 해보자 state를 만들어 기본값을 false로 준다. const [isEditing, setIsEditing] = useState(false); // 토글용 state, default값을 false로 준다. 2개의 함수를 만들어 실행될때 각각 true와 fal.. 2022. 5. 29.