식초의 지식보관소

이벤트 강의에서 한 것 : Subject.js 파일에 있던 코드를 App.js의 Subject 컴포넌트가 있던 자리에 복붙해서 작업했다. 옮겨놨던 코드를 비활성화 한다. 그리고 원래 Subject 컴포넌트 코드를 돌려 놓는다. 이벤트 생산자가 된다! [제목을 클릭했을 때, welcome화면으로 바꾸고 싶다] [Subject 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때, 이벤트에 설치한 함수를 설치하도록 만든다] App.js 에서 Subject 컴포넌트에 onChangePage 이벤트를 입력한다. onChangePage라는 함수는 props의 형태로 Subject.js에 전달된다. Subject.js 에서 a 태그를 onClick 했을때, 함수가 실행되고, ..

※모든 사진과 자료의 출처는 나동빈 [이것이 취업을 위한 코딩 테스트다] 입니다※ 수 자료형 정수형 a = 777 a = a + 5 print(a) 특정한 변수의 값을 증가/감소 시키는 것이 가능하다. 실수형 a = 5. a = -.7 소수부, 정수부 0인 경우, 0인 부분 생략 가능하다. a = 0.3 + 0.6 (출력: 0.89999999) 컴퓨터 시스템은 실수 정보를 표현하는 정확도에 한계를 가진다. 2진수를 사용하기 때문이다. a = 0.3 + 0.6 print(round(a, 4)) (출력: 0.9) round()함수 : round(실수, 반올림하려는 자릿수) 지수 표현 방식 1e9 = 10의 9제곱 = 10억 e나 E 다음에 오는 수는 10의 지수부 이다. 임의의 큰 수를 표현하기 위해 자주 ..

이벤트 챕터에서 하려는 것은 다음과 같다 1. 제목 WEB에 링크를 달아서 -> 클릭하면 Welcome 화면을 보이게 한다 2. 목차 링크를 클릭해서 -> 해당 본문으로 이동한다 이벤트 state props 그리고 render()함수 [제목에 링크를 단다] 제목 파일은 Subject.js 이다. 를 제목을 포함해서 넣는다. [현재 페이지가 Welcome 페이지인지 Read 페이지인지 알아햐 한다] App.js 파일에서 App 컴포넌트 안 State에서 mode 값을 준다. mode: 'welcome' 그리고 mode: 'Welcome'일 때, Content 영역에 있을 내용 넣는다. welcome: {title: 'Welcome', desc: 'Hello, React!!!'} 리액트에서는 props나 S..

props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것 state : props의 값에 따라서 내부의 구현에 필요한 데이터들이다, 복잡한 컴포넌트 만들 때 사용 State 사용 State 값 초기화 : render() 보다 먼저, constructor()함수 이용해서 코드를 짠다 constructor에서 this.state ={} : 초기화 subject: {title:'WEB', sub: 'World Wid Web'} : subject의 값을 스테이트화 시킨다 Subject 컴포넌트에서 : 리액트에서 코드를 인식하게 하려면 { }를 쓴다 외부에서 볼 수 없게 철저히 은닉하는 것이 좋은 사용성이다. 상위 컴포넌트의 state를 하위 컴포넌트로 props로 전달 가능하다. this.state ={}..

: pure.html 파일 : App.js 반드시 1개의 최상위 태그로 시작해야 한다 1. Subject 컴포넌트를 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, Element -> 리액트가 내용을 로 바꿔서 적용해준다 (웹 브라우저는 리액트를 모르기 때문이다) jsx : 자바스크립트 유사 언어, 페이스북에서 만들었다 2. TOC 컴포넌트 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, 리스트 추가된다 3. Content 컴포넌트 만들고, App 컴포넌트 넣는다 라이브 서버를 보면, 본문 추가된다 결론: 컴포넌트 이름에만 집중하게 함으로써 획기적으로 복잡도를 줄였다 컴포넌트의 내용을 다르게해서 이용하고 싶을 때! 효율적으로 사용하고 싶다면 이용한다. Subject 컴포넌트에서 코드 변경 { ..

오류 'react-create-app'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결법 npm install -g react-scripts 입력후 이어서 설치 터미널 -> npm run start 터미널-> ctrl + C 리액트는 class type으로 이용한다 (오른쪽) 화면에 표시되는 내용은 연결된 App.js 파일 안에 내용 이다. import로 연결된 index.css 에서 작성한다. 저장하면 자동 실행. 오른쪽 클릭 -> 캐시 지우고 강력새로고침 버튼 create-react-app은 무겁다! 터미널 -> npm run build 입력 -> build 폴더 생긴다 build 폴더 : src 폴더의 내용을 최적화 했다 (버그해결, 심미적 문제 해결) 실..

자바스크립트는 잘못 쓴 내용도 최대한 출력하려고함 ㅎ (아래처럼) coercion => conversion (자바스크립트가 강제적으로 값을 변환시킴) console.log(66 + true) : 67, true => 1 변환시킴, false => 0 console.log(55 - true) : 54, + - * / 다 해당한다 console.log(66 + "false") : 66false console.log(25 - "1") : 24, - 는 문자열을 숫자열로 변환한다 console.log("" === true) : false, "" => 0 변환시킴, "" 0 NaN undefined null 모두 false이다 console.log("1" ==1) : true, == : type coercion ..

console.log(b) 결과값으로 50이 나온다 2줄 : a 값(Value)을 복사해서 b 에 붙여 넣기 했다 4줄 : a=10으로 바뀌어도 b는 영향 받지 않는다 console.log(pretty) 결과값으로 ["kimchi", "potato", "hELLO"]가 나온다 4줄 : sexy를 변경하자, pretty가 업데이트 되었다 1줄 : sexy는 배열을 참조하는 것이다 = Reference 2줄 : pretty는 sexy를 참조하고 있다 = Reference pretty와 sexy는 같은 배열을 참조하고(가리키고) 있다 console.log(x) 결과는 { a: 'hello' } 이다 x를 b를 통해서 업데이트 할 수 있다 Value는 string, number, boolean, NaN, und..

primitive : 기본적, ex) string, number, true/false, null, undefined, NaN

Call Stack - 자바스크립트의 함수 실행 핸들 방법, 쌓은 덩어리 -자바스크립트는 함수를 스택 위에 올린다 -함수를 다 실행하면 제거한다 -스택을 다 처리하면 실행할 것이 없다 -자바스크립트의 todo list 같은 것 zero는 one을 부르고, one은 two를 부르고, two는 three를 부르고, three는 console.log(내용) 콘솔에서 결과는 i love js 라고 뜬다 Sources에서 함수 실행을 일시멈춤한다 call stack 항목을 본다 , 한 단계식 진행할수록 끝내야 하는 함수 리스트 보여준다 이름모를 함수 -> zero함수 -> one 함수 -> two 함수 -> three 함수 콘솔로그 만나면 출력 -> three 함수 끝남 (콘솔에 내용 출력) 끝난 함수는 사라짐 ..