state를 바꾼다는 것은 화면에 출력할 것 중 변경되는 것이 있다는 것을 의미한다. 그래서 state를 바꾸게되면, render() 함수가 자동으로 호출되어 바뀐 부분만 재빠르게 변경된다. 하지만, 첫번째와 같이 쓰면 state가 변경되지 않고 rerender하지 않는다. 두번째 방법으로 써야 state를 변경하고, render()함수를 호출 하여 원하는 글자를 바꿀 수 있다. this.state.value = 1 // X this.setState({value:1}); // O 가끔 this.state에 있는 값을 참조하여 값을 바꾸는 경우가 있는데, 보통의 경우라면 아래와 같이 쓸 수 있다. plus = () => { this.setState({value: this.state.value + 1}); ..

이번 주제에서 알아볼 주제는 아래 다섯 가지로 나뉜다. (주로 정적 데이터를 활용하는 방법에 대해서 다룬다.) - How to add static files (images, etc) to Next.js. - How to customize what goes inside the First Post Back to home ) } 위와 같이 입력하여 서버를 돌리고, localhost:3000/posts/first-post 로 접속해보면 title이 "First Post"로 바뀐것을 확인 할 수 있다. CSS Styling styled-jsx 라이브러리를 통해 React component를 만들 수 있다. 이외에도 styled-components , emotion 라이브러리를 사용할 수 있다. Layout Com..

node.js 서버에서 child process로 python script를 돌리고, 그 결과를 socket.io 를 통해 출력하는 동안 문제가 발생했다. child process 에서 발생하는 출력이 있을때마다 socket.io 를 통해 front쪽으로 전송해주었었는데, child process의 load시간이 걸리면, 일정시간동안 출력할 것이 없어 socket이 자동으로 closed 된다. (socket.io 에서는 client server 간 통신이 일정 시간 동안 없으면 closed 된다고 한다.) stackoverflow를 조금 찾아보면 setInterval 함수를 이용해 수십초에 한번 연결을 확인하는 ping을 날려서 특정시간동안 통신을 안하는 상황 자체를 만들지 않는 방법이 있었다. sing..

합성 (Composition) 상속 (Inheritance) React에서는 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는것을 권장한다. 컴포넌트에서 다른 컴포넌트를 담기 다른 튜토리얼에서도 이와 같이 잘 쓰고 있었지만, 다시 확인하는 차원에서 살펴보면 아래와 같다. 이렇게 하나의 컴포넌트 안에서 다른 컴포넌트를 가지고 표기하는 방식이다. 자습서에서 알려주는 예시는 아래와같다. props.children 은 자식 엘리먼트의 내용을 그대로 출력할 수 있는 특수한 prop 이다. 아래의 예시에서는 h1태그와 p 태그에 해당된다. function FancyBorder(props) { return ( {props.children} ); } function WelcomeDialog() { return..

직역을 한것인지 최대한 설명을 하려고 노력한것인지 "state 끌어올리기"라는 말이 와닿지 않았다. 지금까지 공부해본 것을 토대로 생각해보면 state는 현재 Component내에서 바뀔 수 있는 값이다. (어떻게 보면 rerender를 위한 값이다.) 그렇다면 아래와 같이 Custom Component 를 다른 Component에서 호출해서 사용할 경우 값을 어떻게 동기화 시킬까의 문제가 발생한다. ex) 화씨와 섭씨의 값을 하나로 동기화 시켜서 관리하고 싶은 경우 class Calculator extends React.Component { render() { return ( ); } } TemperatureInput Component 내에서 state 를 관리하고 있지만, 이 값을 Calculator..

이번 Tutorial을 통해 배울것은 크게 아래 3가지로 나뉜다. 1. file system routing을 이용한 새로운 페이지 추가 2. 'Link' 의 사용법 3. code splitting, prefetching 2021.08.03 - [개발/Next.js] - [Next.js] 1. 프로젝트 생성 및 시작하기 에서 만들었던 프로젝트를 그대로 사용한다. 1. Pages in Next.js Next.js 에서의 페이지란 각 디렉토리의 파일을 뜻한다. 이게 무슨 소리인가 하면 Node.js Express 에서는 원하는 routes 파일을 원하는 routes 폴더 내부 원하는 위치에 만들고 app.js 에서 명시해주었다면, Next.js 에서는 폴더와 파일 그자체가 route를 뜻하게 된다. 예를들어,..