와챠의 우당탕탕 개발 기록장

* #3, #4는 생략 및 다른 강의노트에 추가함. 목차 시작하기 전에 사용자 입력에 따라 실행: 폼 제출 시마다 폼 입력값으로 고양이 짤방 만들기 웹 시작 시 실행: 웹 시작 시에 first cat이 써진 고양이로 메인 고양이 사진 초기화하기 useEffect란? setState의 성능 개선 1. 시작하기 전에 open API 모음 깃허브에서 고양이 짤방 api를 사용하여 고양이 짤방 기능을 추가할 것임 fetch 사용하기 문서에서 가져온 fetch 사용법 fetch('http://example.com/movies.json') .then((response) => response.json()) .then((data) => console.log(data)); js 비동기 처리와 콜백 함수 문서 비동기 처리..

목차 리스트(배열) 기능 추가: 하트 버튼 누르면 아래 리스트에 사진 추가 폼 다루기 입력 문자 그대로 출력 소문자 입력 시 대문자로 변환 폼 검증(form validation) 한글 있는지 검사 에러 메시지 출력 빈 값 방지 데이터 유지 데이터 유지: JSON 1. 리스트(배열) 리스트: 배열에서 map을 돌면서 리액트 UI를 반환한다. map은 아래와 같이 사용함 {favorites.map(image => ) } 현재 이는 아래와 같은 코드로 이루어져 있는데 이거를 리스트를 사용해서 바꿔보자 이때 리스트에는 고유한 값인 key값이 필요한데, 지금은 그냥 url로 해줌, function Favorites() { const CAT1 = "https://cataas.com/cat/HSENVDU4ZMqy7K..

목차 스타일링(css 클래스, 인라인 스타일링) Emotion TailWind Css 핸들러 네이밍 컨벤션 Event: form 제출 시 리프레시 막기 useState로 상태 만들기 상태 끌어올리기(lifting state up) 1. 스타일링 두가지 방법이 있다. CSS 클래스명을 넘기는 것 인라인으로 스타일링하는 것이다. 기존 css코드는 아래와 같다. .favorites img { width: 150px; } CSS 클래스: 리액트 태크랑 html 태그랑 조금 다르다. class => className 위험 인라인 스타일링: 위험 다른 예시로는 중괄호 2개! 오브젝트 사용해서 써주기! key, value에서 value는 string으로 써주기! 요소 여러개면 쉼표로 구분! 최근 리액트 스타일링 트렌..

목차 Ant Design Component 만들기 log 찍기 인자가 있는 함수 만들기 Component: 기본 함수, 화살표 함수 함수에 인자를 넣어주는 2가지 방법 태그 닫기 전에 넣기 태그 닫고 넣기 return 생략한 함수 props 사용 안 하고 인자 바로 받기 1. Ant Design 리액트 개발 == 컴포넌트 개발 컴포넌트는 리액트에서 함수를 사용해서 만듦. ui 라이브러리 Ant Design 에서 다양한 컴포넌트를 확인할 수 있음 Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix the..

나름의 목차 개발자 도구 단축키 리액트 사용하면 멋진 점 React 1분 안에 추가하기 babel이란? 중괄호 사용해서 중복코드 줄이기(JSX) 중괄호에 연산자, 함수 등도 가능! 여러 요소를 한꺼번에 렌더시키기 +리액트에서 렌더를 시키는 방법 서론 졸프 때 어떤 기술을 사용할지 고민중이다. 일단 웹이면 리액트, 앱이면 플러터를 사용해보기로 했다. 주제에 맞게 웹 또는 앱을 고를 생각이다. 리액트와 플러터를 고른 이유는 리액트: 취업 시장이 넓고 많은 사람들이 사용함. 플러터: 리액트 네이티브와 고민했는데. 시장 점유율은 리액트 네이티브가 더 컸지만, 플러터의 인기가 리액트 네이티브를 넘고 있음(구글 트렌드). 궁금해서 플러터로 결정! 졸프 시작까지 시간이 좀 있고, 주제가 확정되기 까지는 시간이 좀 있..