JiSoo's Devlog

이벤트 리스닝 및 이벤트 핸들러 수행하기 모든 이벤트 핸들러 props는 값으로 함수가 필요하다 onClick과 다른 on props에 대한 값으로 전달된 함수는 이벤트가 발생했을 때 실행되어야 한다 {console.log("Clicked!");}}>Change Title const ExpenseItem = (props) => { const clickedHandler = () => { console.log("Clicked!!!!"); }; return ( {props.title} ${props.amount} Change Title ); }; 함수 따로 지정해서 onClick={clickedHandler}로 지정만 해줘도 됨 일부 이벤트는 특정한 요소에서만 사용 가능하지만 그건 모두 기본적인 DOM의 동작..

Key React Concepts 페이지 만들기 핵심 데이터 출력하기 할 수 있는 JSX 코드 스니펫 찾기 사용자 지정 컴포넌트 만들고 사용하기 App.js import componentsImage from "./assets/images/components.png"; import stateImage from "./assets/images/state.png"; import eventsImage from "./assets/images/events.png"; import Concept from "./components/Concept/Concept"; import Header from "./components/Header/Header"; function App() { const concepts = [ { tit..

컴포넌트 모든 사용자 인터페이스들은 결국 컴포넌트로 구성된다 각각의 컴포넌트를 구축하고 리액트에게 최종 사용자 인터페이스에서 어떻게 구성할 것인지 명령할 수 있다 리액트가 컴포넌트의 개념을 도입한 것은 재사용 가능하다는 점뿐만 아니라 우려사항들을 분리할 수 있기 때문이다 대부분의 리액트 컴포넌트들은 HTML과 자바스크립트를 결합하는 것에 관한 것으로 물론 CSS도 추가하지만 그게 초점은 아님 리액트는 HTML과 자바스크립트, CSS로 구성된 재사용 가능하고 반응하는 컴포넌트를 만들 수 있게 해준다 리액트는 선언적 접근 방식을 사용한다 최종 상태만 정의하고 어떤 상태를 사용해야 하는지만 정의한다 모든 UI는 결국 여러 빌딩 블록(=컴포넌트)으로 구성되며, 따라서 사용자 인터페이스를 '컴포넌트의 조합'이라고..

변수 let과 const 자바스크립트에는 var만 있다 ES6에는 두 가지 키워드 let과 const가 있다 let은 값을 수정할 수 있는 변수를 선언할 때 사용 const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용 대부분 const를 사용하고 const에는 새로운 값을 할당할 수 없다 화살표 함수 const myFnc = ( ) => { ... } 키워드 this로 인해 생겼던 많은 문제들 해결 화살표 함수 안에 this를 사용하면 항상 정의된 객체를 나타내고 실행 중에 갑자기 바뀌지 않을 것이다 화살표 함수를 작성하는 짧은 버전 - return 생략, 중괄호 생략, 인수 괄호 생략 Exports & Imports (Modules) person 또는 prs 어떤 것도 상관없지만 언제..

Math.random()에 10을 곱하면 0에서 10 사이의 숫자 얻을 수 있다 floor 내림 ceil 올림 const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; quote.innerText = todaysQuote.quote; author.innerText = todaysQuote.author; 이렇게 html로 만들어야 하는 것을 const images = ["0.jpg", "1.jpg", "2.jpg"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElement("img"); consol..

interval은 매번 일어나야 하는 무언가 const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setInterval은 호출하려는 함수의 이름, 매 호출 사이의 시간을 인자로 써주면 된다 설정한 시간마다 반복된다 setTimeout(sayHello, 5000); setTimeout은 설정한 시간만큼 기다렸다가 한 번만 실행 function getClock() { const date = new Date(); console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}..

querySelector 사용할 때는 대상이 id 인지 명확히 해줘야 한다 → querySelector("#login-form") 왜냐면 classname, tagname 모두 검색 가능하기 때문에 Log In const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick() { console.log(loginInput.value); } loginButton.addEventListener("click", onLoginBtnClick); input의 유효성 검사를 작동시키기 위해서는 input이..

JavaScript는 HTML을 읽어올 뿐만 아니라 변경도 가능 브라우저가 우리에게 많은 게 들어있는 document 객체를 준다 JavaScript로 정보를 가지고 올 수 있는 방법은 document 객체와 element를 가져오는 함수 사용하는 것 console.dir()은 element를 더 자세히 보여준다 const title = document.getElementById("title"); console.dir(title); JavaScript는 HTML element를 가지고 오지만 HTML 자체를 보여주는 게 아니라 HTML을 표현하는 object를 보여준다 getElementById 함수를 통해 id로 element를 가져올 수 있고 변경도 가능하다 innerText, className, a..

자바스크립트는 모든 브라우저에 내장되어 있고 프론트엔드 개발자가 사용할 수 있는 유일한 프로그래밍 언어 ! 브라우저가 HTML을 열고 HTML은 CSS와 자바스크립트를 가져오는 것 자바스크립트는 위에서 아래로 읽는다 VSCode에서 [파일] -> [폴더 열기] ->[MOMENTUM] 폴더 열기 ** 파일 생성 시 오류가 뜬다면 VSCode 속성을 관리자 권한으로 변경 두 엔진 동시 실행(CSS, JavaScript) alert("hi"); 자바스크립트에는 type이 있고 알아서 이해한다 Number : 정수(Integer), 실수(float) String : 처음부터 끝까지 문자로 이루어져 있다 "hello " + "my name is jisoo"→ "hello my name is jisoo" conso..

a, b = input().split() print(int(a)+int(b)) input 함수로 입력받고 split 함수로 나누어 a, b에 저장 int형으로 형변환 - 파이썬은 입력받을 때 기본적으로 문자로 인식한다 split함수 - 입력받는 문자 나눌 때 사용 - 공백 기준으로 나눈다