🍧 이번 시간에는 리액트에서 배열을 렌더링하는 방법을 알아보겠다. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 예를 들어 이런 배열이 있다고 가정한다. 배열 안에 3개의 객체가 있고, 이것을 각각 렌더링해주어야 하는데 어떻게 할까? UserList.js를 만들고 작업한다. 🍧 비효율적인 방법 function UserList(){ const users = [ { id: 1, username: 'v..

🍈이번 시간에는 input이 여러 개일 때 상태를 관리하는 방법에 대해서 알아보겠다. function InputSample(){ const onChange = (event) => { }; const handleReset = () => { }; return ( 초기화 값: 이름 (닉네임) ) } 위와 같이 InputSample 컴포넌트를 작성한다. 이렇게 보인다. 일단 지금은 값에 해당하는 이름 (닉네임) 을 수동으로 작성해 주었다. 🍈 좋지 않은 방법 input이 이렇게 여러 개 되었을 때는 단순히 useState를 여러 번 사용하여 onChange도 여러 개 만들고, 그렇게 구현을 할 수도 있는데 그 방법은 좋은 방법은 아니다. 🍈 좋은 방법 - useState가 객체를 관리하도록 하기 더 좋은 방법은..

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

10.4 API Adding a Comment part.3 🍒이번시간에 할 것 댓글 추가를 페이크(fake)로 할 것이다. 무슨 말이냐면, 누군가 댓글을 달면 덧글 수가 하나 추가된 거처럼 보이고, 방금 작성한 덧글이 보이도록 할 것이다. (그러니까 지금 현재 덧글을 작성하면 새로고침을 해야 반영이 되니까 새로고침하지 않고도 바로 반영이 된 것처럼 보이고 싶어서 그러는 것이다 → 리얼타임처럼 보이고 싶어서 페이크를 하는 것) 🍒 axios의 status code를 listen할 거고 status code가 200이면 그때 댓글이 추가됐다는 거니까 즉 댓글을 페이크로 달 것이다. addComment 함수 만들기(addComment.js) const addComment = (comment) => { cons..

2.5 ES6 on NodeJS using Babel Babel이란? - 최신의 Javascript 코드를 무난한 예전의 Javascript 코드로 변환해주는 것 - 우리는 Babel을 node에서 쓸 것이기 때문에 많은 방법 중 Babel Node를 사용할 것이다. - 설치 방법 VS Code의 콘솔에서 npm install @babel/node 로 설치한다. - babel의 stage 또 babel이 갖고 있는게 있는데 많은 stage가 있다. 만약 stage3의 Babel을 이용한다면 브라우저한테 절반 정도 받아들여질 것이다. 만약 stage0을 이용한다면 완전 실험적인 걸 얻게 될 것이다.(리스크가 크다는 말인 것 같음) 우리가 사용할 것은 env이다. (가장 최신이긴 한데 실험적인 수준까지는 아..