로그인 페이지를 만드는 과정

우리 팀은 대면 회의를 마치고 로그인과 회원가입 페이지에 대해서 조금 더 정확해진 방향을 잡았다.

이를 바탕으로 계속 이리저리 찔러만 보던 내 학습방향도 어느정도 갈피를 잡았다.

참고 사이트 : https://backend-intro.vlpt.us/5/01.html

학습하며 알게된 리액트 지식을 정리한 글입니다.

react 폴더명은 대문자 X

• 소문자로 작성

절대경로 설정하기

• 참고하고 있는 사이트에서 파일을 불러올 때에, 절대경로로 불러 올 수 있도록 하기 위해서는

package.json 의 scripts를 수정하라고 한다.

  "scripts": {
    "start": "NODE_PATH=src react-scripts start",
    "build": "NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

• 하지만 이 코드를 붙여넣은 뒤에 npm start를 할 경우에 오류가 발생한다.

• 구글링을 해보니, 이 코드는 구버전이 되었다고 한다.

따라서 폴더에 jsconfig.json 파일을 하나 생성하고 아래 코드를 붙여 넣으면 절대 경로로 사용가능하다고 한다. ( 위의 코드는 무시하고 초기에 기본 설정되어있는 scripts 객체를 그대로 이용한다. )

{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}

참고한 사이트 : https://reference-m1.tistory.com/351

• 다른 사이트에서 라이브러리를 다운받으라고 되어있어서 밑의 코드로 라이브러리를 다운받았더니, scripts 객체를 수정해도 오류가 나지 않았다.

$ npm add cross-env --dev

참고한 사이트 : https://velog.io/@devpark/React-%EC%9E%85%EB%AC%B88-React-Router1-last-update-2020.12.24

import registerServiceWorker 오류

• registerServiceWorker의 역할: 네트워크가 느리거나 오프라인 상태에서도 온라인인 것처럼 리소스를 캐싱해서 것.
• 필수 모듈 X
• // 주석 처리를 했다.

참고한 사이트 : https://velog.io/@devpark/React-%EC%9E%85%EB%AC%B88-React-Router1-last-update-2020.12.24

– 그럼에도.. 오류는 없지만, http://localhost:3000/ 페이지와 http://localhost:3000/auth 페이지를 열었을 때,,,

Home / Auth 텍스트가 제대로 보여지지 않고 있다…