[TIL] 211223

12.23 목요일 회고

1. 오늘의 도전과 배움
   real world project에서 cypress로 테스트 코드를 작성하는 것과 typescript interface 설정, props를 내려주고 useState를 사용하며 리액트를 다시 배웠당. 오후엔 토끼님께 영어문서 읽는 법을 배워서 많이 도움을 얻었지만 결국 영어 공부는 하지 않았다^^
2. 궁금하거나 어려웠던 점
   어려운 건 딱히 없었던 것 같고 cypress 관련 자료들을 찾아서 공부하고 싶다
3. 내일은
   내일은 시간을 더 아끼기,,,,,,, 게임에 빠지지 않기ㅜㅜㅜ

---

realworld clone

1. cypress 실행 & 테스트 코드 작성
   https://www.cypress.io/
   cypress program 열고 작업중인 폴더를 연결?하면 내 ./project/cypress 폴더 내부에 폴더와 파일 몇 개가 생성됨.

// describe - 대주제, 설명, 묘사하다
describe('메인 테스트', () => {
  // it - 테스트할 기능 대상
  it('1. 메인 페이지로 이동', () => { // 테스트 설명 제목
    cy.visit('http://localhost:3000');
  });
  it('2.', () => {
    // cy.get('selector').contains('innerHtml'); // 문자열이 포함된 것을 찾음
    cy.contains('회원가입').click();
  })
  ...
});

2. component 분리
   https://react-redux.realworld.io/#/?_k=sia642
   복붙해온 realworld 사이트의 html 코드를 NavBar.tsx와 ArticlePreview.tsx 파일로 분리
   컴포넌트 이름은 자세히? Article -> ArticlaPreview
3. props interface 설정,

// Home.tsx
function Home() {
  const article = {
    author: {
      username: 'Gerome',
      image: 'https://api.realworld.io/images/demo-avatar.png',
    },
    createdAt: 'Wed Nov 24 2021',
    favoriteCount: 452,
    title: 'Create a new implementation',
    description: 'join the community by creating a new implementation',
    tags: ['implementations'],
  };
  return (
    <div id="main">
      <div data-reactroot="">
        <NavBar />
        <ArticlePreview {...article} />
		...
      </div>
    </div>
  );
}
export default Home;

// ArticlePreview.tsx
import React from 'react';
interfacee ArticlePreviewProps {
  // username: string, image: string -> 공통
  author: {
    username: string;
    image: string;
  };
  createdAt: string;
  ...
  // tags: string[];
  tags: Array<string>;
}
// 구조분해 할당 https://ko.javascript.info/destructuring-assignment
const ArticlePreview = ({
  author,
  createdAt,
  favoriteCount,
  title,
  description,
  tags,
}: ArticlePreviewProps) => {
  return (
    ...
  );
}

---

Git

2.1 필요한 프로그램 설치

• git은 명령어를 기본으로한 프로그램이라 터미널에서 command로 사용법을 익히는 게 좋음. 순수 명령어를 이용하는 것보단 기능이 작지만 UI Tool인 Sourcetree 등도 많이 이용함. git을 잘 이해하고 활용할 수 있지 않다면 버튼을 클릭했을 때 어떤 일이 발생하는지 정확하게 알기 어려우므로 처음엔 터미널로 공부하는 거나 병행하는 것을 추천!
• 기본 내장 터미널을 이용하거나 조금 더 편리한 기능이 포함된 터미널을 사용하려면 윈도우는 cmder, Mac은 iTerm 이용. 기본적으로 Git이 설치되어 있음.
• Git 설치 - https://git-scm.com/downloads / 설치된 지 확인하려면 터미널에 git --version 입력

2.2 사용자 설정 및 필요한 셋팅들

• git을 설치하게되면 git 관련 모든 환경설정이 .gitconfig 파일에 저장되고 터미널에 git config --list 를 작성해 설정들을 확인할 수 있음.
• 사용자 관련된 정보 설정

git config --global user.name "v"
git config --global user.email "v@email.com"
// 설정 확인
git config user.name

• core.autocrlf?! 찾아보기
• 명령어 단위. https://git-scm.com/docs

// git 명령어 -option
git commit -m ""

2.4 깃 초기화 하고 삭제하기

• 깃 초기화! git init
• ls 명령어로 조회시 폴더 이름 앞에 .이 붙으면 숨겨진 파일? ls -al option 찾아보기
• git 삭제 rm -rm git

---

리액트를 다루는 기술 - 4장 이벤트핸들링

• 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 event라고 함. 버튼을 클릭하는 onclick, form 요소의 값이 바뀔 때는 onchange 등의 이벤트를 실행.
• 주의 사항
  • 이벤트 이름은 카멜 표기법으로 작성 ex) onclick -> onClick
  • 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 // ?
  • DOM 요소에만 이벤트를 설정할 수 있음
• input의 개수가 많아질 땐 useState에 객체를 넣어서 관리 (react hook form은 어떤 경우에 쓰는 것이 좋을까 회원가입에만 쓴다면 용량이 차지하지는 않을지?)

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    userId: ''
  });
  const { username, userId } = setForm;
  
  const onChange = (e) => {
    const { name, value } = e.target;
    setForm({
      // 불변성..? 
      ...form, // 기존의 form
      [name]: value // js object key에 []를 쓰는 이유가 뭐였지?!
    });
  };
  
  return (
    <form> 
      <input
        type="text"
        name="username"
        placeholder="이름"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="userId"
        placeholder="아이디"
        value={userId}
        onChange={onChange}
      />  
    </form>
  );
}