공부기록용

React Component Component 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력_input을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환_output한다. 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { re..

React.js ‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 선호도가 좋다. SPA(Single Page Application) 아키텍쳐 Single Page Application, 한 개의 페이지로 이루어진 애플리케이션이라는 의미로 MPA(Multi Page Application)과는 상반된 개념이다. 기존 MPA의 문제점(super easy version)으로 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 사용감에 불편함이 있을 수 있는데 이를 보완하는 방안으로써 SPA를 사용할 수 있다.(부분적인 요소만 살짝 ..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 🔴getElementById( ) 🔴querySelector() 🔴addEventListener() 🔴Element.classList 🔴toggle( String [, force] ) javascript로 html불러오기 // HTML Grab me > javascript로 id = "title"을 가진 태그를 불러 이 처럼 js에서 html을 가져올 수도 있고, 이런 것들을 활용해서 값을 변경 시킬 수 도 있다. .getElementById( ) 함수 getElemen..

https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 변수 const a = 5; const b = 2; // 변수 생성 let myName = "minhee" console.log('hello ' + myName) // hello minhee // 변수 값 변경(재할당) myName = "kimminhee" console.log("your new name is " + myName) // your new name is kimminhee const 그냥 다 안바뀜_대게 많이 사용 let는 재할당만 가능_변해야 하는 경우 사용..

콜백함수 다른 코드의 인자로 넘겨주는 함수, 어떤 이벤트에 의해 호출되어지는 함수로 간단히 말해 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 다시 말하면, 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘! 즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행 function a() { B() console.log("Hello A") } function B() { C() console.log("Hello B") } function C() { console.log("Hello C") } c() > 함수는 호출을 해야..

Q1. 가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요 // 제시된 틀 var user = { name: "john", age: 20, } var getAged = function (user, passedTime) { // 여기를 작성해 주세요! } var agedUser = getAged(user, 6); var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If you become older, ..