appmaster

다음과 같이 Subject를 두번입력하면 그냥 똑같은것이 두번출력됩니다. 이부분에 대해서 react는 아쉽게 생각하게 됩니다. 이것을 해결하기위해서 props를 이용하게 됩니다. 하단 링크에서 참고하세요! ko.reactjs.org/docs/components-and-props.html Components and Props – React A JavaScript library for building user interfaces ko.reactjs.org 확인해보면 props사용방법을 알 수 있게 됩니다. 이제는 이 개념을 본인이 만든 소스코드에 접목 시켜보겠습니다. 이부분을 바꿔보도록 하겠습니다. Subject 클래스와 App클래스의 변경사항을 쉽게 비교하기 위해서 잠시 Subject클래스를 밑에 내렸습니..

우선 왼쪽부분에 html코드가 완성된 코드라고 봅니다. 그리고 header태그 영역을 컴포넌트로 만들고자 합니다. 그럼 클래스를 선언해야하는데, 클래스의 이름을 Subject라고 하고 Component를 상속받게합니다. 그리고 밑에 render()은 함수인데, function render()라고 선언하지않아도 같은 기능을 하게 업데이트 되었습니다. return안에 header태그를 넣어줍니다. 그럼 header태그는 컴포넌트로 만들어 진것인데, 이것을 사용하려면 Subject태그를 내가 원하는 위치에 사용하면 되는것입니다. 브라우저에서 어떻게 보이는지 볼까요? 보면 header태그는 App클래스 div태그 안에 들어있는것을 보실 수 있습니다. 신기한것은 웹브라우저는 react의 존재를 모릅니다. 왜냐하면..

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

1. import에 대해서 우선 CSS코딩하기전에 알아두어야 할 것이 있습니다. 이것은 컴포넌트 이름을 지정하는곳으로 두개의 동그라미 안에 있는 문자들은 서로 같아야합니다. 저곳은 파일경로를 말하는겁니다. 그래서 컴포넌트와 별개로 경로와 파일의 이름을 동일하게 해줘야합니다. 2. CSS코딩하는방법 우선 스타일링하기전에 app.css와 index.css 안에있는 소스들을 다 지웁니다. src파일 안에있는 css소스코드를 완벽하게 지웠습니다. 이로서 스타일링 작업준비는 끝나게 됩니다.

코딩하기전에 디렉터리 구조부터 파악하겠습니다. 1. public 폴더 우선 public 폴더에 들어가면 index.html 파일에 들어갑니다. 이 html 파일이 우선 UI가 어떻게 보이는지 설정해주는곳인데요, 여기서 눈여겨 볼만한곳이 빨간색 네모 박스 친 부분 입니다. 만약에 컴포넌트를 만들어갈때는 저기에 있는 "id=root"라는곳에 넣어야 합니다. create react app은 그렇게 약속을 했습니다. 그 컴포넌트 수정 과정은 다른 폴더 속에서 해야합니다. 2. src 폴더 컴포넌트를 수정하고 추가하는곳은 src폴더입니다. 그래서 개발작업을 할때는 거의 대부분 src폴더에서 이루어질 것입니다. 우선 index.js를 확인해 보겠습니다. 아까전에 언급한 root 부분이 index.js에서 연결된것을..

1. Visual Studio Code에서 Terminal을 여신후에 다음과 같이 입력하시면 됩니다. npm run start run을 생략하셔도 됩니다. 그러면 다음과 같은 화면이 나올겁니다. 잘 동작하고 있는겁니다. 나와있는 그림은 react가 최소한의 UI를 그냥 잠시 보여주고 있는겁니다. 2. 주소 확인하기 그리고 VSCode에서 Terminal안에 내용을 보면 개발중인 앱을 확인하는 주소가 나옵니다. 이 주소로 들어가면 현재 얼마나 개발되어가고 있는지 확인 할 수 있습니다. 또한 둘중에 하나 주소로 들어간다는 뜻입니다. 3. 중지시키는 방법 Terminal에서 Ctrl+C를 입력하면 실행을 중단하게 됩니다. 일괄 작업을 끝내겠습니까? 에서 "y"를 입력하면 작업을 끝냅니다.

appdevelopmaster.tistory.com/501 npm 과 npx 차이점 (feat. create react app 만들기) ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 우선 react 홈페이지에서 "시작하기" 버튼을 클릭해줍니다.. appdevelopmaster.tistory.com 이 개시글에 가장 밑에 부분을 확인해보고 오세요! 내 pc에서 바탕화면에 react-app 파일을 만들어줍니다. **주의** 여기서 react만 입력하게 된다면, 특수한 문자이기때문에 create react app이 거절한다고 합니다. 그..

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