#02 리액트 입문:: 아이디 & 비밀번호 입력 Input 컴포넌트 만들기

위치: App.js import React from 'react'; function app() { return ( 아이디: 비밀번호: 로그인 ); } export default app; 1. 리액트 App.js의 return문에는 하나의 큰 가 있어야함 2. 태그는 onChange & value값을 이용하여 입력되는 값을 받을 수 있음 3. 비밀번호는 1234 이렇게 보이면 안되니 태그의 type을 password로 처리하기 const [id, setIdValue] = useState(''); const [pw, setPwValue] = useState(''); //아이디 const onChangeHandlerID = function (event) { const inputValue = event.targ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 1.
• textsms

#01 리액트 입문 :: App.js에서 JSX 실습 (컴포넌트)

위치: App.js 파일 1. 버튼을 클릭하면 alert창이 나오도록 하기 [오류] onClick의 Click은 대문자여야한다. 클릭! 2.부모-자식 컴포넌트 [오류] 컴포넌트 대문자로 미작성. (mother => Mother) function mother() { return ; } function GrandFather() { return ; } function App() { return ; } 3. 태그에 클래스 넣기 : JSX문법은 이렇게 사용해야함! 4.태그에 style 적용하기 - 인라인으로 넣을땐, 객체!

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 31.
• textsms

개인과제 (#1 영화 TOP 20 검색 사이트 구현 ) 피드백 개선점 반영

1. 개인과제 : #1 영화 TOP 20 검색 사이트 구현 https://zerotonine2da.tistory.com/40 #1 영화 TOP 20 검색 사이트 구현 (+오픈 api 사용) 1. 필수 사항 (1) jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용 (2) TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기 (3) 영화정보 카드 리스트 UI 구현 * 필수정보: title(제목), overview( zerotonine2da.tistory.com #1 영화 TOP 20 검색 사이트 구현 개인과제 피드백 [장점] - 필수구현사항들을 잘 구현해주셨습니다. - 카드 마우스오버 시 호버애니메이션 멋지게 잘 구현해주셨습니다. - 파비콘까지 적용해주신 부분 너무 좋습니다. - 배포까지 해..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 30.
• textsms

JS 비동기/동기 async + await 사용

1. 오늘 만난 에러 1. 비동기/동기의 활용하고싶음 - JS코드는 비동기 + 동기가 있을때 동기부터 실행됨 - 비동기 코드를 먼저 사용하기 위해서 사용하는 것 : async + await - async function() { const result = await fecth(~~~)를 활용하기 2. 인자와 매개변수의 혼란 - function add(매개변수) { return 1;} //매개변수: 문지기 - add(인자) // 인자 : 손님 2. 접근방식 1. async function() { // 여기는 비동기 방식만 사용하는 줄 알았음 //(1) 필요한 데이터 (외부에서 가져오는 데이터 = fetch)만 비동기로 사용 //(2) 그 후에 함수는 동기방식으로 사용하기 가능 } - 함수를 쓰고 후에 함수를..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 27.
• textsms

Fetch API 데이터로 정렬 (평점순 / 제목순 / 개봉일순)

TIL 1. fetch함수는 비동기함수여서 데이터를 가져와도 전역변수에 할당 불가능하다고 생각함 > 아님 (가능함) 2. fetch함수에서 데이터를 html로 append하는 것이여서, 다시 호출해야한다고 생각함 > 아님 (그럴필요없음) 3. flow * fetch함수에서 데이터 부분을 전역변수에 저장 * html에 append하는 구간을 함수 생성 + 정렬종류는 함수 인자값으로 받기 * 정렬종류가 선택되면 전역변수를 해당값에 맞게 정렬 후 html에 append하는 함수(정렬된 데이터값) 실행 let data = {}; fetch('https://api.themoviedb.org/3/movie/now_playing?language=ko-US&page=1', options) .then((response)..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 26.
• textsms

[보충] 함수 / 배열

1. 함수 //함수:풀어씀 let a = function (input) { return output; }; 동일: 짧게씀 function a(input) { return output; } console.log(typeof a); //object //참조형(배열,객체,함수) typeof : object //3을 반환하는 함수 let f1 = function () { return 3; }; //동일 let test1 = 3; let test2 = f1(); //인자(parameter) = input let f2 = function (a) { return a; }; let test3 = f2(1); // 1 //1. 인자를 3개 받아서, 모든 값을 더해서 출력하는 함수 let func01 = function ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 10. 25.
• textsms