전체 글138 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 21회차 미션 배열에 항목 제거하기 우선 UserList 컴포넌트를 수정한다. /* UserList */ . . function UserList({users, onRemove}){ . . UserList function에 onRemove라는 props를 받아와주고 이것을 user컴포넌트에 전달해준다. /* UserList.js */ users.map( user => () ) 전달을 해 줬으니 이제 user컴포넌트에서 받아와야한다. /* UserList.js */ . . function User({user, onRemove}){ . . 구리고 user컴포넌트 내부에 삭제버튼을 하나 생성해주도록 한다. return( {user.username}({user.email}) 삭제 ) 삭제 버튼이 눌렸을때 onRemove가 호출.. 2020. 9. 27. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션 useRef로 컴포넌트 안의 변수만들기 useRef를 사용해서 컴포넌트 안의 변수를 만들것이다. 여기서 말하는 변수는 예를들어 컴포넌트 내부에서 let키워드를 사용하여 변수를 선언한다고 가정할 때 다음 리렌더링 때는 이 변수값이 초기화된다. 유지를 위해서는 useState를 사용해야하는데 이것은 상태가 바뀌게되면 컴포넌트가 리렌더링된다. 하지만 우리는 값을 바꿨을때 굳이 리렌더링할 필요없는 경우가 있다. 그럴때 useRef를 사용해서 컴포넌트가 리렌더링 될 때마다 계속 기억해야할 값을 관리할 때도 사용할 수 있다. 주로 setTimeout이나 setInterval을 사용할 때 주어지는 id값을 기억해야할 때나 외부라이브러리를 사용해서 생성된 인스턴스를 담을때도 사용하고, scroll위치를 알아야할 때 등.. 2020. 9. 26. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션 userRef 로 특정 DOM선택 html과 js를 사용할 때는 특정 DOM을 선택해야하는 상황에 getElementById, querySelector 같은 DOM selector 를 사용한다. React를 사용하는 프로젝트에서도 DOM을 직접 선택해야하는 상황이 발생 할 수 있다. 예를 들어 scrollbar 위치를 가져와서 설정해줘야 하거나 , focus 를 설정해야한다는지 등 다양한 상황들이있다. 추가로 video.js jwplayer같은 html5비디오 관련 라이브러리나 그래프관련 라이브러리 등을 사용할 때도 특정 DOM에 라이브러리를 적용해야 하기 때문에 DOM을 선택해야하는 상황이 발생할 수 있다. 그럴때는 react에서는 ref를 사용하는데 함수형 컴포넌트에서는 useRef라는 hook함수를.. 2020. 9. 25. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션 input 상태 관리 src > InputTest.js 생성 /* InputTest.js */ import React from 'react'; function InputTest(){ return( 초기화 값 : Lorem ipsum ); } export default InputTest; onChange 함수를 생성 /* InputTest.js */ const onChange = (e) => { console.log(e.target); } . . . 파라미터 e는 수정이벤트가 발생했을 때 그 수정이벤트에 대한 내용이 담긴다. 이 파라미터 e로 받아온 event객체 내부의 properties중 하나인 target은 event가 전달한 객체에 대한 참조를 의미한다. 실제로 렌더링 된 페이지의 input Box.. 2020. 9. 24. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션 이제부터는 리액트 수업을 정리하여 업로드 할예정이다 React JSX 규칙 1. tag는 꼭 닫아야한다. 태그 사이에 별다른 값이 없는 경우 self closing tag 사용 가능 === 2. 2개 이상의 태그는 하나의 태그로 감싸져 있어야함. 로 감싸는 방법도 존재함. return ( ㅎㅇ ㅂㅇ ); //사용 불가. return ( ㅎㅇ ㅂㅇ ); === return ( ㅎㅇ ㅂㅇ ); --- JS값 출력JSX내부에서 javascript 값을 보여주고 싶을 때 변수를 {}로 감싸고 출력하면 된다. ``` function App() { const name = 'jiwon'; return ( {name} ㅂㅇ ); } ``` 스타일 지정style을 지정해 주고 싶을 때 기존 html 에서 style을 지.. 2020. 9. 23. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션 Async - Await async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function MDN 문서 제목의 async function을 보면 async가 function 앞에붙는 키워드인것을 눈치 챘을 것이다. async-await 자체가 promise 객체를 기반으로 하고 있다.먼저 .. 2020. 9. 22. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션 promise2 fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .filnally()를 설정하고, 함수를 인자로 넣는다. function p(){ return new Promise((resolve, reject) => { //pending setTimeout(() => { reject(new Error('bad')); //이후 fullfilled상태로 넘어감 }, 1000); }); } p() .then(message => { //일종의 콜백을 작성하는 공간이된다. console.log('1000ms 후에 fulfilled 된다.', message); }) .catch(error => { console.log('1000ms 후에 reject된다.', error); }) .. 2020. 9. 21. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션 Promise 프로그램에서 간단한 코드가 한 줄 한 줄 실행되면 크게 어렵지 않겠지만 자바스크립트에서 함수를 호출 했는데 함수가 시작되고 끝나는 동안에도 프로그램이 계속 진행되어야 하는 상황이 많은데 이때 프로미스를 이용하여 비동기적인 상황에서 코드를 좀더 명확하게 표현하고 실행하게 만들 수 있다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미.. 2020. 9. 20. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션 get set 게터와 세터 일단 게터와 세터가 뭔지 알 수 없지만 실습을 통해 알아보도록한다. class A{ _name = 'no name'; get name(){ return this._name + '@@@'; } set name(value){ this._name = value + '!!!' } } const a = new A(); console.log(a); a.name = 'jiwon'; console.log(a); console.log(a.name); console.log(a._name); //read only class B{ _name = 'no name'; get name(){ return this._name + '@@@'; } } const b = new B(); console.log(b).. 2020. 9. 19. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 Class ES6에 새로 추가된 문법 객체를 만들 수 있는 새로운 방법 자바스크립트는 객체지향을 지원하기 위해서 프로토타입기반의 방식을 지원하는데 새로 추가된 class라는 키워드를 통해 좀 더 강력한 객체지향 프로그래밍을 지원한다. class라는 키워드가 새로운 객체지향 상속모델을 제공하는 것은 아니다. 기존의 prototype기반의 방식을 보다 명료하게 사용할 수 있게 돕는 역할이라고 보면 좋다. 클래스를 만드는 방식으로는 두 가지가 있다. 선언적방식 class A{} console.log(new A()); class 표현식을 변수에 할당 const B = class{}; console.log(new B()); 함수에서처럼 호이스팅이 일어나지않을까? new C(); class C{} 를 실행해 보면 .. 2020. 9. 18. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 프로토 타입을 이용한 객체 확장 function Person(){} Person.prototype.hello = function(){ console.log('hello'); } function Korean(region){ this.region = region; this.where = function(){ console.log('where', this.region); } } Korean.prototype = Person.prototype; const k = new Korean('seoul'); k.hello(); k.where(); console.log(k instanceof Korean); console.log(k instanceof Person); console.log(k instanceof Objec.. 2020. 9. 17. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 함수, 클래스 ( 틀 ) ⇒ 객체, 개체, oject Oject는 함수 혹은 클래스로 틀을 만드는것을 의미하고 그 틀에서 object를 하나씩 찍어내게되고 이 것을 instance 라고 부른다 생성자 함수로 객체 만들기 function A(){} const a = new A(); console.log(a, typeof a); new a를 통해 객체가 생성되어 a라는 변수에 할당되게 된다. 생성 하며 데이터 넣기 function B(name, age){ console.log(name,age) } const b = new B(); const c = new B('jiwon', 25); console.log(B()); new B();에 인자없이 생성자 함수를 호출할 경우 undefined가 name,age 자리.. 2020. 9. 16. 이전 1 ··· 6 7 8 9 10 11 12 다음
