식초의 지식보관소

이벤트 챕터에서 하려는 것은 다음과 같다 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 함수 끝남 (콘솔에 내용 출력) 끝난 함수는 사라짐 ..

하... 어떻게든 해결법 찾아내느라 ... 정말 고생 많이 했습니다ㅎㅠ localhost에서는 이미지가 잘뜨는데 github page site에서는 안뜬다?? 해결법은 html에서 이미지의 src 표기법 입니다. 원래하던 방식 (이미지 폴더 안에 있는 이미지 경로) src = "img/picture.png " 해결 방식 (./를 붙여준다!!!!!) src = "./img/picture.png" 이렇게 하면 이미지 뜹니다...(감동) 근데 이렇게해도 안 된다면?? html 파일 뿐만아니라 다른 파일에서도 모두 이런 방식으로 바꿔줘야합니다. (저는 json 파일에서 바꿔야되는 걸 겨우 알아서 겨우 고쳤습니다....) 20.10.31 추가) ./ 의미는 같은 디렉토리라는 의미이다

1. 만드는 프로젝트에 .prettierrc 파일을 만들고 아래 내용을 입력한다 1 2 3 4 5 6 7 8 9 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } cs 2. Window일 경우 (ctrl+ , 해서) setting 메뉴로 간다 settings.json 파일을 열어서 아래와 같이 추가 입력한다 (prettier. editor. 포함된 부분만 추가하면 된다) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "workbench.colorTheme": "Community Material Theme", "workbench...