Front end, Back end 공부

[amkorousagi]

왜 react, node 인가? : https://medium.com/@kiyeopyang/%EA%B0%80%EC%9E%A5-%ED%98%84%EB%8C%80%EC%A0%81%EC%9D%B8-%EC%9B%B9%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%9E%90-1%ED%8E%B8-node-js-react-73d8ad4ed9b8

React 시작하기: https://ko.reactjs.org/tutorial/tutorial.html

[amkorousagi]

JSX라는 html이나 css의 tag와 비슷한 방식의 언어로 더 가독성 좋게 element를 만들수 있다. JSX는 build할때 실제 createElement 함수 코드로 변환된다.

JSX에서 함수의 매개변수를 받을때는 {this.props.[매개변수 이름]}으로 받고, JSX에서 함수로 매개변수를 전달할때는 <[함수 이름] [매개변수 이름]={[매개변수 값]}>으로 준다

[amkorousagi]

이벤트 핸들러의 형식은 자바와 유사하다 <button className="square" onClick={() => { alert('click'); }}>

[amkorousagi]

값을 컴포넌트가 기억하려면 생성자에서 this.state를 선언해야한다. constructor(props){ super(props); this.state = { value : null, };

[amkorousagi]

javascript 클래스는 생성자를 적을때, 반드시 명시적으로 super(props)을 호출해야한다.

[amkorousagi]

Square의 render 함수 내부에서 onClick 핸들러를 통해 this.setState를 호출하는 것으로 React에게 을 클릭할 때 Square가 다시 렌더링해야 한다고 알릴 수 있습니다. --> 랜더링 함수 도중에 외부 값을 호출해도 알아서 재랜더링함

[amkorousagi]

컴포넌트에서 setState를 호출하면 React는 자동으로 컴포넌트 내부의 자식 컴포넌트 역시 업데이트합니다. --> setState 한번 호출하면 자식은 알아서 업데이트됨

[amkorousagi]

Board가 각 Square에 Square의 state를 요청해야 한다고 생각할 수도 있습니다. 그리고 React에서 이런 접근이 가능하기는 하지만 이 방식은 코드를 이해하기 어렵게 만들고 버그에 취약하며 리팩토링이 어렵기 때문에 추천하지 않습니다. 각 Square가 아닌 부모 Board 컴포넌트에 게임의 상태를 저장하는 것이 가장 좋은 방법입니다. 각 Square에 숫자를 넘겨주었을 때와 같이 Board 컴포넌트는 각 Square에게 prop을 전달하는 것으로 무엇을 표시할 지 알려줍니다.

여러개의 자식으로부터 데이터를 모으거나 두 개의 자식 컴포넌트들이 서로 통신하게 하려면 부모 컴포넌트에 공유 state를 정의해야 합니다. 부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달할 수 있습니다. 이것은 자식 컴포넌트들이 서로 또는 부모 컴포넌트와 동기화 하도록 만듭니다.

--> 코딩할 때 자식에게 state를 요청하지말고, 모든 값이 동기화될수 있도록, 부모에서 모든 state를 저장하게 할것

[amkorousagi]

다음으로 Square를 클릭할 때 발생하는 변화가 필요합니다. Board 컴포넌트는 어떤 사각형이 채워졌는지를 여부를 관리하므로 Square가 Board를 변경할 방법이 필요합니다. 컴포넌트는 자신이 정의한 state에만 접근할 수 있으므로 Square에서 Board의 state를 직접 변경할 수 없습니다.

--> 자신이 정의한 state에만 접근할 수 있다, 자식에서 부모의 state를 수정하려면 간접적으로 해야한다.

[amkorousagi]

DOM 엘리먼트의 onClick 어트리뷰트는 내장된 컴포넌트라는 점에서 React에게 특별한 의미가 있습니다. Square같은 사용자 정의 컴포넌트의 경우 이름 지정은 자유롭습니다. Square의 onClick prop이나 Board의 handleClick 함수에는 어떤 이름도 붙일 수 있으며 코드는 동일하게 작동합니다. React에서 이벤트를 나타내는 prop에는 on[Event], 이벤트를 처리하는 함수에는 handle[Event]를 사용하는 것이 일반적입니다

--> 클래스나 함수에 어떤 이름이든 붙일 수 있다

[amkorousagi]

불변성이 왜 중요할까요? 이전 코드 예시에서 기존 배열을 수정하는 것이 아니라 .slice() 연산자를 사용하여 squares 배열의 사본 만들기를 추천했습니다. 지금부터 불변성이 무엇인지와 왜 불변성이 중요한지 알아보겠습니다.

일반적으로 데이터 변경에는 두 가지 방법이 있습니다. 첫 번째는 데이터의 값을 직접 변경하는 것입니다. 두 번째는 원하는 변경 값을 가진 새로운 사본으로 데이터를 교체하는 것입니다.

객체 변경을 통해 데이터 수정하기 var player = {score: 1, name: 'Jeff'}; player.score = 2; // 이제 player는 {score: 2, name: 'Jeff'}입니다. 객체 변경 없이 데이터 수정하기 var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2}); // 이제 player는 변하지 않았지만 newPlayer는 {score: 2, name: 'Jeff'}입니다.

// 만약 객체 spread 구문을 사용한다면 이렇게 쓸 수 있습니다. // var newPlayer = {...player, score: 2}; 최종 결과는 동일하기만 직접적인 객체 변경이나 기본 데이터의 변경을 하지 않는다면 아래에 기술된 몇 가지 이점을 얻을 수 있습니다.

복잡한 특징들을 단순하게 만듦 불변성은 복잡한 특징들을 구현하기 쉽게 만듭니다. 자습서에서는 “시간 여행” 기능을 구현하여 틱택토 게임의 이력을 확인하고 이전 동작으로 “되돌아갈 수 있습니다”. 이 기능은 게임에만 국한되지 않습니다. 특정 행동을 취소하고 다시 실행하는 기능은 애플리케이션에서 일반적인 요구사항 입니다. 직접적인 데이터 변이를 피하는 것은 이전 버전의 게임 이력을 유지하고 나중에 재사용할 수 있게 만듭니다.

변화를 감지함 객체가 직접적으로 수정되기 때문에 복제가 가능한 객체에서 변화를 감지하는 것은 어렵습니다. 감지는 복제가 가능한 객체를 이전 사본과 비교하고 전체 객체 트리를 돌아야 합니다.

불변 객체에서 변화를 감지하는 것은 상당히 쉽습니다. 참조하고 있는 불변 객체가 이전 객체와 다르다면 객체는 변한 것입니다.

React에서 다시 렌더링하는 시기를 결정함 불변성의 가장 큰 장점은 React에서 순수 컴포넌트를 만드는 데 도움을 준다는 것입니다. 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있으며 이를 바탕으로 컴포넌트가 다시 렌더링할지를 결정할 수 있습니다.

shouldComponentUpdate()와 순수 컴포넌트를 작성하는 법에 대해 더 알아보고 싶다면 성능 최적화하기를 보세요.

--> 이전 동작으로 되돌아가는 기능 + react의 rendering 시기 결정에 있어서, 불변성을 유지하는 것이 매우 중요하다, 객체를 직접 변경하는 것을 지양하고, 객체의 사본으로 바꿔치기하는 것을 지향하자

[amkorousagi]

함수 컴포넌트 이제 Square를 함수 컴포넌트로 바꿔보겠습니다.

React에서 함수 컴포넌트는 더 간단하게 컴포넌트를 작성하는 방법이며 state 없이 render 함수만을 가집니다. React.Component를 확장하는 클래스를 정의하는 대신 props를 입력받아서 렌더링할 대상을 반환하는 함수를 작성할 수 있습니다. 함수 컴포넌트는 클래스로 작성하는 것보다 빠르게 작성할 수 있으며 많은 컴포넌트를 함수 컴포넌트로 표현할 수 있습니다.

--> 함수 컴포넌트를 애용하자

[amkorousagi]

목록을 다시 렌더링하면 React는 각 리스트 아이템의 키를 가져가며 이전 리스트 아이템에서 일치하는 키를 탐색합니다. 현재 리스트에서 이전에 존재하지 않는 키를 가지고 있다면 React는 새로운 컴포넌트를 생성합니다. 현재 리스트가 이전 리스트에 존재했던 키를 가지고 있지 않다면 React는 그 키를 가진 컴포넌트를 제거합니다. 만약 두 키가 일치한다면 해당 구성요소는 이동합니다. 키는 각 컴포넌트를 구별할 수 있도록 하여 React에게 다시 렌더링할 때 state를 유지할 수 있게 합니다. 만약 컴포넌트의 키가 변한다면 컴포넌트는 제거되고 새로운 state와 함께 다시 생성됩니다.

React에서 key는 심화 기능인 ref와 동일하게 특별하고 미리 지정된 prop입니다. 엘리먼트가 생성되면 React는 key 속성을 추출하여 반환되는 엘리먼트에 직접 키를 저장합니다. key가 props에 속하는 것처럼 보이지만 this.props.key로 참조할 수 없습니다. React는 자동으로 key를 어떤 컴포넌트를 업데이트 할 지 판단하는 데에 사용합니다. 컴포넌트는 key를 조회할 수 없습니다.

동적인 리스트를 만들 때마다 적절한 키를 할당할 것을 강력하게 추천합니다. 적절한 키가 없는 경우 데이터 재구성을 고려해 볼 수 있습니다.

키가 지정되지 않은 경우 React는 경고를 표시하며 배열의 인덱스를 기본 키로 사용합니다. 배열의 인덱스를 키로 사용하는 것은 리스트 아이템 순서를 바꾸거나 아이템을 추가/제거 할 때 문제가 됩니다. 명시적으로 key={i}를 전달하면 경고가 나타나지는 않지만 동일한 문제를 일으키기 때문에 대부분의 경우에 추천하지 않습니다.

키는 전역에서 고유할 필요는 없으며 컴포넌트와 관련 아이템 사이에서는 고유한 값을 가져야 합니다.

--->

등으로 리스트를 만들고 업데이트 할 때에는 반드시 적절한 key를 할당해주어야한다, 특히 동적일 경우

[amkorousagi]

tutorial을 모두 해봤다

[amkorousagi]

https://ko.reactjs.org/docs/create-a-new-react-app.html react 설치를 해볼것이다

node.js로 된 백엔드와의 제어를 지원하는 react.js의 framework 인 next.js를 해보자 https://nextjs.org/learn/basics/create-nextjs-app

node.js https://nodejs.org/en/

npm 설치 sudo npm insatll -g npm@latest

https://velopert.com/1351 (현재터미널 종료하고 다시 실행해야 적용됨) 모든 명령어 앞에 sudo 붙일 것

[amkorousagi]

This is how you can create different pages in Next.js.

Simply create a JS file under the pages directory, and the path to the file becomes the URL path.

In a way, this is similar to building websites using HTML or PHP files. Instead of writing HTML you write JSX and use React Components. -->html 하듯이 JSX로 간단히 page를 만들고 component를 만들수 있음

[amkorousagi]

If you’ve used instead of and did this, the background color will be cleared on link clicks because the browser does the full refresh --> Link를 통해 full refresh하지 않고 page를 옮길수 있음

Code splitting and prefetching Next.js does code splitting automatically, so each page only loads what’s necessary for that page. That means when the homepage is rendered, the code for other pages is not served initially.

This ensures that the homepage loads quickly even if you add hundreds of pages.

Only loading the code for the page you request also means that pages become isolated. If a certain page throws an error, the rest of the application would still work.

Furthermore, in a production build of Next.js, whenever Link components appear in the browser’s viewport, Next.js automatically prefetches the code for the linked page in the background. By the time you click the link, the code for the destination page will already be loaded in the background, and the page transition will be near-instant!

--> Link를 사용하는 것이 a 태그를 사용하는 것보다, 더 바르고, 더 독립적이며(에러를 한정지음) 다 좋다.

[amkorousagi]

Note: If you need to link to an external page outside the Next.js app, just use an tag without Link.

If you need to add attributes like, for example, className, add it to the a tag, not to the Link tag. Here’s an example. --> 외부 사이트에 링크시킬때, 속성을 추가할때는 Link 말고 a 태그를 사용해야한다

Assets First, let’s talk about how Next.js handles static assets such as images.

Next.js can serve static files, like images, under the top-level public directory. Files inside public can be referenced from the root of the application similar to pages.

If you open pages/index.js in your application and take a look at the

, we refer to the logo image like so:

<img src="/vercel.svg" alt="Vercel Logo" className="logo" /> The logo image exists inside the public directory at the top level of your application.

The public directory is also useful for robots.txt, Google Site Verification, and any other static assets. Check out the documentation for Static File Serving to learn more.

--> "public" directory 안에 있는 image를 next.js에서 쓸수 있다

[amkorousagi]

https://nextjs.org/learn/basics/assets-metadata-css/layout-component 너무 복잡해 여기 기록하기 힘들다. 이제 할때마다 링크로 하겠다

[amkorousagi]

https://blog.kesuskim.com/2017/07/develop-website-using-next-js/ Next.js(react.js)와 Express.js(node.js <--> DB)를 통합하여 웹사이트를 만드는 예제, 가장 많이 참고하게 될것같다

[amkorousagi]

Next.js 예제를 2/3한 결과 이정도하고 그냥 저 위의 예제대로 해봐야겠다

[amkorousagi]

https://velog.io/@bigbrothershin/Frontend-Next.js%EC%99%80-express-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0 이분이 더 좋은듯

[amkorousagi]

https://blog.logrocket.com/how-to-build-a-server-rendered-react-app-with-next-express-d5a389e7ab2f/ 이게 제일 좋은듯

[amkorousagi]

저기 나오는 40분짜리 영상의 결과

[amkorousagi]

2시간 동안했는데 제목 어그로에 낚였다. 그 어디에도 express와 연동하는 부분이 없었다. 거기서 배운건

1. rest api를 nextjs에 쓰는 방법
2. 동적인 페이지 생성

[amkorousagi]

스타일을 적용하는 건 여기서 배우면 될듯 하다 https://velopert.com/3480

DB를 next js 에 바로 적용할수 있는 코드가 있는 듯하다(next js는 node js도 조금 포함해서?) https://vercel.com/guides/deploying-next-and-mysql-with-vercel

[amkorousagi]

내일 공부하자

[amkorousagi]

https://fullstackopen.com/en/ 이게 풀스택 개발을 위한 가이드 북이다 그런데 한 part당 15~20시간 쓰고 그게 10개라서, 지금은 일부만 봐야겠다

[amkorousagi]

결국 react도 node도 js의 모듈이나 프레임 워크 아닌가?

[amkorousagi]

https://calyfactory.github.io/react-node-mysql-%ED%86%B5%ED%95%A9%ED%99%98%EA%B2%BD%EA%B5%AC%EC%B6%95/ 완벽한 자료를 찾은듯? 계속 next라 검색해서 없었던같기더ㅓ

[amkorousagi]

https://www.youtube.com/watch?v=HPIjjFGYSJ4

react js, node js, db를 연결하고 db의 값을 읽고 쓸줄알게 되었다

[amkorousagi]

이제 kubeflow나 머신러닝에 대해 알아보겠다