메인 프로젝트 작업을 진행하고 있다. 마이페이지에 닉네임을 수정할 수 있도록 컴포넌트를 제작하는데 조금 더 사용성을 좋게 하고자 아래의 기능을 넣어보았다. > 1. 닉네임 옆 편집버튼을 눌렀을 때 input 창으로 변경하기 > 2. 편집버튼을 눌렀을 때 생성되는 input 창에 자동으로 focus가 되기 > 3. input 작성 후 엔터 버튼으로 마이페이지의 닉네임 변경하기 하나하나 차근차근 작성하는데 focus부분을 구글링해서 진행하던 도중 떡 하니 에러가 나왔다 아예 focus를 읽지 못한다니 이게 뭔소린가 싶어서 에러문구를 긁어 스택오버플로우에 검색해보았다. 알아보니 비동기처리가 되지않아 생긴 문제였다. 해당 useRef로 넣어둔 변수에 값이 들어가기도 전에 focus 메소드가 진행되

피그마로 구현하기 정말 최대한 간단하게 구현한 투두리스트 해보고싶은 애니메이션 기능들을 넣어보긴 했는데 구현은 어려울 것 같아서 고민중 컴포넌트 정리 📝 CreateTodo todo 추가하는 컴포넌트 useInput custom Hook으로 구현해보기 (input, submit) 추가하기 버튼 클릭 후 input창 애니메이션으로 나오도록 하기 (onClick 사용) 📝 TodoItem 내용 앞부분에 checkbox 추가해서 checked시 내용에 밑줄표시 checkbox의 checked 여부 상관없이 왼쪽으로 드래그 하면 삭제버튼 나옴 삭제버튼 클릭시 해당 TodoItem 삭제 📝 TodoList CreateTodo로 추가된 TodoItem이 나열되는 컴포넌

Bare Minimum Requirement 상세 컴포넌트 구현하기 Tweet 컴포넌트 (Tweet.js) // 이미지, 유저 이름, 트윗 생성 일자, 메시지 데이터 연결하기 // 내용이 들어가는 구간에 {tweet.데이터키}로 맞춰서 기입 // 생성일자는 날짜형식이 정해져 있어 상단에 추가된 변수로 대체 // 트윗 생성 날짜 변경 = new Date(tweet.key).toLocaleDateString('ko-kr'); 페이지 컴포넌트 구현하기 MyPage 컴포넌트 (MyPage.js) // parkhacker의 정보만 보이도록 dummyTweets.filter() // 상단에 만든 변수를 이용해서 내용이 들어가는 구간에 {변수[0].key} 기입 // filteredTweets.map() 사용해서 ; props로 각 트윗의 정보전달 // 컴포넌트 하단에 추가

이벤트 핸들링 기본 방식 소문자 대신 카멜 케이스(camelCase) 사용 JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수 전달 onChange 입력값이 바뀔 때마다 발생하는 이벤트 폼(Form)엘리먼트 `, , ` 에 입력되는 입력값(변경될 수 있는 입력값)을 state로 관리하고 업데이트한다. 이때 해당 이벤트를 사용하면 그 입력값을 읽어올 수 있다. 예제 onChange 이벤트가 있는 input에 내용이 입력되면 {handleChange}라는 변수에 할당된 setName 함수에 들어간 (e.target.value)로 인해 입력값을 읽을 수 있게 되고, 그러한 입력값은 name이라는 변수에 할당되며 마지막으로 h1태그에 나타난다. onClick 사용자가 클릭이라는 행동을 할때 발생하는 이벤트 `, ` 처럼 링크 이동 등과 같이 사

Props Props ? 컴포넌트의 속성(property)을 의미한다. 외부로부터 전달받은 값 & 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 * 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값* 객체 형태 (어떤 타입의 값도 넣어 전달할수 있도록) class 문법, 함수 문법으로 만들 수 있다. 읽기 전용(read-only)으로 함부로 변경 ❌ > ### JSX 속성 및 값을 할당하는 방법 > 전달방법 1 전달방법 2 State State ? 컴포넌트 내부에서 변할 수 있는 값 (check box, toggle switch, couter 등..) 사용법 useState useState를 호출한다 === "stats"라는 변수를 선언한다 상위의 예시에 있는 state 변수에 저장된 값을 사용하려면, 엘리먼트 안

* SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. SPA ? 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹사이트를 말한다. SPA의 장점 전체 페이지가 아니라 필요한 부분의 데이터만 받아 업데이트 하면 되기 때문에 사용자와의 인터렉션에 빠르게 반응한다. 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다. 전체 페이지를 렌더링할 필요가 없어 더 나은 유저경험을 제공한다. > 유튜브, 페이스북, G메일, 에어비앤비, 넷플릭스 등 SPA의 단점 JavaScript 파일의 크기가 커서 파일을 기다리는 시간으로 인해 첫 화면 로딩 시

학습목표 React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 만들 수 있다. React 3가지 특징 선언형이다. JSX를 활용한 선언형 프로그래밍으로 코드만 보고 어떠한 내용인지 확인하기 쉽다. 컴포넌트 기반이다. 서로 독립적이고 재사용이 가능하기 떄문에 기능 자체에 집중하여 개발할 수 있다. 다양한 곳에서 활용할 수 있다.(범용성) 자바스크립트 프로젝트 어디에든 유연하게 적용될 수 있다. 페이스북에서 관리되어 안정적이고, 가장 유명하다. JSX ? JavaScript 를 확장한 문법 실제 브라우저에서는 실행이 불가능하여 Babel 로 컴파일 해야함. 기존에 HTML 파일에서 자바스크립트