react-project 너의 전화번호 (0.기본셋팅)

입사하고 5월-6월 리액트공부했다가 7-8월 프로젝트를 들어갔다. 8-9월 코로나걸려서 정신없었고 , 프로젝트다시 한다고 해서 그러다가 .. 미뤄졌다... 묵언의 압박이 몰려왔고,, 난 리액트 공부를 졸라해야된다.. 올해말까지... 결론은 졸라 공부해야한다... 그래서 지금 내 위치를 보려고 그때 당시 (5-6월)에 했던 예제들을 다시 돌아보며 내 위치를 잡으려 한다.

그 예제중 하나다 전화번호부 입력해서 데이터 state에 저장하고 지우고 수정하고 추가하는것. 아마 김velopoter님의 강의에서 보고했는데 이번에도 김민준님의 블로그를 참고할것같다.

출처,참고 https://react.vlpt.us/ [벨로포터와 함께하는 모던 리액트]

npx create-react-app .

디버깅 vscode extension 에서 Debugger for Chrome 검색 후 설치
특정 포트의 특정 경로에 로드된 JS 코드에 debugger를 listen 시킬 수 있음!

• continue
  다음 breakpoint로 이동, 다음 breakpoint가 없을 시 디버깅 종료
  - step over
  현재 break 된 파일에서 다음 라인으로 이동
• step into
  break된 라인에서 실행되고 있는 내부 함수로 이동
• step out
  break라인에서 호출한 곳으로 이동합니다.
• restart
  debugger 재실행
• stop
  debugger 종료

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "chrome debugger",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

F5누르면 열림!

준비완료라고 생각했지만 component 불러오니까 css 기본셋팅이 안되어있음.. 그래서 reset.css 생성하려고 했는데 먼가 라이브러리가 있을 듯 해서 찾아보니까 있음.

npm install styled-components styled-reset

설치! 자세한건 아래 링크 참조.
https://styled-components.com/ [styled-components 공홈]

Components/GlobalStyles.jsx 만들기

*GlobalStyle.js

import reset from "styled-reset";
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    ${reset}
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:14px;
        color:#000;
    }
`;
export default GlobalStyle;

여기서 주의할점!!!
백틱 줄바꿈이 이상하게 되면 시멘틱 애러뜸 ㅜㅜㅜ 잘 확인하고 컴파일해야함 ㅜㅜ

App.js에 import 해주기

*App.js
import GlobalStyle from "./component/GlobalStyle";
function App() {
  return (
      <GlobalStyle />
  );
}
export default App;

이렇게하면 전역에서 GlobalStyle 사용이 가능해짐.
레알 이제 준비다함. 다음편은 input 가져오기편