YoonStudyNote

1. 비디오 폴더는 무조건 public 폴더 밑에 종속되어야한다. 2. src위치 설정해줄때는 비디오폴더가 어디 있던지 간에 앞에 경로위치 다 무시하고 "/videos/video-2.mp4" 라고 선언해야한다, ----> 즉, 만약 내가 있던 자바스크립트 파일에서 비디오 경로가 "../../videos/video-2.mp4"여도 무조건 "/videos/video-2.mp4"라고 선언해야한다.

Link 컴포넌트 앱 내에서 다른 라우트로 이동 할 때에는, 일반 foo 형식으로 하면 안됩니다. 왜냐하면, 이렇게하면 새로고침을 해버리기 때문이지요. 새로고침을 하기 위해선, 리액트 라우터에 있는 Link 컴포넌트를 사용해야합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다.

1. 아이콘 추가하는방법 yarn add styled-components react-router-dom react-icons VScode 터미널에서 이렇게 명령어를 쳐보세요. 2. 화살표함수를 제대로 쓰자 다음 화살표 함수를 보면 중괄호로 사용했습니다. 그러자, menuData.js에 있는 내용이 제대로 출력되지 않았습니다. 다음과 같이 소괄호로 사용해야지 menuData.js 내용이 제대로 출력된것을 볼 수 있습니다.

만약 터미널에 warning이 뜨는게 보기싫으면 맨 위 상단에 /*eslint-disable*/ 을 입력해주시면 됩니다. count는 초기값을 지정해주는것이고, countChange는 함수인데, count의 값이 어떻게 변경되게 하는지 정해주는 함수 역할을 해줍니다. count의 초기값은 0으로 해줬네요. 그래서 onClick이벤트를 선언했을때 countChange함수를 호출하고 소괄호 안에 count+1로 증가되게 만들어 주었습니다. 이번에는 배열의 있는 string값을 변경해보도록 하겠습니다. onClick이벤트에 함수명을 넣을건데 반드시 함수명만 넣지 "함수명()"이렇게 넣으시면 안됩니다! 함수를 실행한다는뜻이 되므로 성립되지 않습니다. deep copy해서 수정하는방법도 알려드리겠습니다. 만약 배..

이제는 변수로 값을 정의하는것이 아닌 state로 값을 정하는 방법을 보여드리도록 하겠습니다. React에 있는 내장함수중 state를 사용하겠다는 뜻입니다. 즉 리엑트의 데이터 저장공간 state를 만드는 방법입니다. ES6 destructuring 문법으로 array,object에 있던 자료를 변수에 쉽게 담고싶을때 사용하는 방법을 가르쳐주도록 하겠습니다. var [a,b] = [10,100] 이렇게 선언한다면 a=10, b=100인 상태가 됩니다. 다음과 같이 선언하면 title = '코트 추천' 이라는 값이 성립이 됩니다. 그래서 h3안에 title을 넣었으므로 출력값은 '코트 추천'이라고 나오게 될겁니다. 두번째 변수인 titleChange는 앞으로 바뀌는 데이터값을 받아오는 용으로 쓰겠습니다...

1. props는 스마트폰의 볼륨버튼이라면 사용자가 볼륨버튼을 누르면 state는 스마트폰안에서 스스로의 상태인 볼륨이 바뀌게 해놓은 모든 조치(회로,프로그래밍 등등)라고 할 수 있습니다. 2. 상위 컴포넌트는 하위 컴포넌트에게 props를 통해 값을 전달해 내부의 state를 바꾸기 때문에 컴포넌트 스스로 외부에서 전달되는 props를 변경하는 것은 금지되어 있습니다. 또한 하위 컴포넌트가 상위 컴포넌트를 동작시키려면 props를 전달하는 것이 아니라 상위 컴포넌트 안에 이벤트를 심고 그 안에 setState로 값을 바꿔야 합니다. props state 고정값 가변값 상위값 하의값, 사용자가 이벤트 요청시 변경 상위 컴포넌트 > props > 하위 컴포넌트 하위 컴포넌트 > 이벤트 실행 > 상위 컴포넌..

구글에서 검색후 React Developer Tools를 다운받습니다. 그리고 새로운창을 띄워서 F12를 누르고 옆에 가면 React 로고와 함께 Component가 있습니다. 이곳에 보면 실제 react 소스코드의 모습을 확인 할 수 있습니다. 또한 내용도 수정할 수 있게 됩니다.

1. Empty Cache and Hard Reload 이것은 아주 강력한 reload 입니다. 보통 성능을 위해서 다운로드해서 보관해 두었다가 그다음에는 접속하지 않습니다. 그리고 이것을 하면 캐시를 다 없애버립니다. 그리고 Network에 가면 1.8mb가 다운되어져 있는데 이것은 react에서 편의를 제공해주기위해 여러가지 기능들을 추가해 놓은 상태이기 때문입니다. 개발자들은 이렇게 무겁게 돌아가는것은 상관없지만, 사용자들까지 이렇게 무거우면 안됩니다. 1.8MG나 되는 무거운 환경입니다. 2. npm run build (배포버전 보기) 다시 VScode로 돌아가서 terminal에 명령을 해줍니다. npm run build 다음과 같이 명령을 하면 디렉터리에 build 폴더가 생성되어 있습니다. ..

feat. 요즘 React는 클래스형 컴포넌트가 아닌 Hooks + 함수형 컴포넌트를 이용합니다. Interaction이 자주발생하고 이에 따라 동적으로 UI로 표현해야 되는 웹페이지를 만들때 Javascript를 이용해서 DOM을 변경할때 정말 복잡해지고 관리하기도 힘들어집니다. React는 신기하게 어떻게 DOM을 업데이트할지 규칙을 정하는것이 아니라 아애 다 날려버리고 처음부터 새로운것을 보여주는게 어떨까? 라는 발상에서 나왔습니다. 그럼 업데이트를 어떻게 해야할지에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워집니다. 하지만, 정말 동적인 UI를 보여주기 위해서 모든걸 다 날려버리고 모든걸 다 새로만들게 된다면 속도가 굉장히 느릴겁니다. 작은 웹 어플리케이션이라면 상관이 없지만 규모가 큰..