[TIL] #Error : React_yarn과의 사투_221125

🥰 웹 꾸미기 재밌어!

이제 드디어 주특기 React 입문 주차가 시작됐다!
첫 번째로 오늘 개인 과제는 간단한 form을 만들고 Netlify에 배포하는 것이었다.
https://jolly-cannoli-340a48.netlify.app/

React S.A Assignment

 

그저 웹폰트를 가져와서 색깔을 넣었을 뿐인데 예쁜 색을 보니 마음이 편안해졌다. 리액트 파비콘도 만들어서 넣었다. 리액트 로고 색감도 모양도 마음에 든다. React를 오늘 처음 만났지만 마치 나와 함께라면 어디든 갈 수 있어!라고 말하는 우주를 품은 별 같다.

- 개발환경 세팅

*윈도우 cmd 란? Command Prompt 윈도우에서 DOS 명령을 실행하도록 도와주는 프로그램
cmd는 GUI(Graphical User Interface) 기반인 윈도우에서 CLI(Command-line Interface, 가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식) 기반 명령어를 실행시킬 수 있도록 도와줍니다.
*npm(node package manager) 자바스크립트 프로그래밍 언어를 위한 패키지 관리자
*compile 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정. 이 것을 자동으로 수행해주는 소프트웨어를 compiler라고 한다.
*IDE(Integrated Development Environment) 통합 개발 환경은 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어
*Runtime vs Compile time?
런타임(Runtime)과 컴파일 타임(Compiletime)은 소프트웨어 프로그램 개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다.
프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일 타임(Compiletime)이라고 부른다.
컴파일 과정을마친 프로그램은 사용자에 의해 실행되어지며, 이러한 응용프로그램이 동작되어지는 때를 런타임(Runtime)이라고 부른다.

- HTML by MDN

<aside> : 별도 구획 요소. 문서의 주요 내용과 간접적으로만 연관된 부분, 주로 사이드바 혹은 콜 아웃 박스.
<datalist> : <option> 요소 여럿을 담음
<details> : "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯 생성. 요약이나 레이블은 <summary> 요소를 통해 제공할 수 있음

- HTML 기본 태그 예제 따라 해 보기

<pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현
<b> vs <strong> strong 태그는 매우 중요, 긴급, 경고의 의미 가지고 있음
<I> vs <em> <I>는 기술 용어/외국어 구절/등장인물의 생각 등 특정 이유로 주위와 구분할 때 사용, <em>은 주위 텍스트보다 해당 부분을 강조하고 싶을 때 사용함
<mark> 관련성 뜻함(형광펜 효과)
<cite> 저작물 출처 표기 시 사용
<dfn> 해당 컨텐츠나 문장에서 정의하는 용어

[More] HTML <input>: 양식 입력 요소 [More] form 객체, 이벤트 핸들링

🤔 이번 과제에서 고민했던 것

1. input에 입력 다 안 하고 제출 버튼 눌러도 이전 입력 값 안 사라지게 하기

form. 자체에 이렇게 submit( ) 이벤트가 있음

        <form action="" onsubmit="submit()">

여기서 action은 form 데이터를 처리할 프로그램의 URI를 지정함. action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면, 브라우저의 루트(route)가 해당 웹문서로 이동하는 것을 확인할 수 있음
onsubmit은 양식 제출 이벤트가 발생할 때의 동작을 지정함. onsubmit은 <form> 태그 내부에서 <input type="submit">로 인해 발생하는 이벤트를 처리할 수가 있습니다. 이벤트 발생과 action에 지정된 URL이 적용되는 그 사이의 시점에 처리할 동작을 이 onsubmit 속성을 통해 지정할 수 있는 것

function submit(e){
  e.preventDefault(); //submit 이벤트를 무시 - 폼의 동작 막아서 버튼 클릭해도 액션 취하지 않음
}

preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정함

2. form 다 입력해야 제출 완료 alert 보여주기

<input class="submit" type="submit"/>

js의 submit() 안에 alert("제출완료") 띄우기
*onclick 이벤트를 달면 빈 칸인 상태에서도 버튼 누를 때마다 alert이 뜨게 됨

3. 언어 checkbox 하나 이상 선택해야 넘어가게 하기

<input type="checkbox" name="lang" value="html_box" required
          oninvalid="this.setCustomValidity('하나 이상을 선택해주세요')"
          oninput="this.setCustomValidity('')"/>HTML
<input type="checkbox" name="lang" value="java_box" oninput="this.setCustomValidity('')"/>JAVA
<input type="checkbox" name="lang" value="js_box" oninput="this.setCustomValidity('')"/>JavaScript

//위와 같이 쓰면 HTML input만 required가 됨

- input의 required 입력값 바꾸기
→ 입력값은 바뀌나 HTML 을 선택해야만 다음 input으로 넘어갈 수 있었다.
결국 javascript 로 input 하나하나를 선택할 때마다 그 개수를 세서 length===0일 때 "하나 이상을 선택해주세요"를 띄우게 하는 방법밖에 없었다. 갓전공자분의 조언에 따라 자바스크립트로 구현은 포기하고 과제를 제출한 후 React 강의를 들으러 떠났다.

🤣 [ERROR] React yarn과의 험난한 사투, 그리고 허망한 결말...

React 강의대로 따라하는데 정말 엄청 많은 에러들을 만났다.
오늘 내내 매달린 yarn start 험난한 대장정은 다음과 같다.

1. yarn start 에러 발생
2. 해당 폴더 삭제 후 node도 삭제
3. 18.12.1 LTS 로 node 설치(이전에는 19.1.0 였음)
4. 폴더 다시 만들고 yarn create react-app 폴더명
5. 다시 yarn start
6. sudo chown -R $USER:$GROUP ~/.npm
7. sudo chown -R $USER:$GROUP ~/.config
8. 이때 chown: /users/choesubin/.config: no such file or directory 이런 에러가 뜬다면
9. yarn add eslint-config-react-app
10. 다시 yarn start 하면 localhost:3000 으로 정상 작동! 도움 주신 혜지님 승우님 신원님 머리 숙여 감사드립니다💖
11. 나는 정말 기뻤다. 그런데 파일을 수정하고 저장할 때마다 Insufficient permissions. Select 'Retry as Sudo' to retry as superuser. 에러가 떴다…
12. 터미널에 sudo chown -R [USER이름] [HOME디렉토리] 입력 : USER 이름은내 이름이고 HOME 디렉토리 이름은 cd .. 입력 시 보이는 것 ex) sudo chown -R choesubin /User
13. 이제 수정>저장>파일 열기는 됐는데 onClick 이벤트 후 Plugin "react" was conflicted between "package.json » eslint-config-react-app » 이런 에러가 떴다.
14. 해결 방법 링크
15. [eslint] Failed to load plugin 'jest' declared in 'package.json » 그리고 [eslint] failed to load plugin 'testing-library' declared in 'package.json 계속 구글링을 했지만 결국 해결을 못 했다.
16. 새벽에 민승님께 도움을 받아 yarn 폴더 다 지우고 처음부터 npm으로 다시 설치했다...

- 사용자 권한이 필요한 경우는 super user do 즉 sudo를 앞에 붙여야 한다!!!
- chown(change owner)명령어는 파일 소유권을 변경할 때 사용하는 명령어! root 권한일때 소유권 변경이 가능함 chown -R (변경 소유자).(변경 그룹) (디렉토리명)을 입력하면 디렉토리 안에있는 파일들 전부 소유자와 그룹명이 바뀌게 됩니다. 이렇게 -R옵션을 사용하면 한번에 소유권을 변경할 수 있습니다.
- 크롬(Chrome)브라우저 개발자 모드 콘솔에서 "DevTools failed to load source map: Could not load content for --" 메시지 숨기기

👊🏻 오늘 한 일

• 9시 주특기 입문주차 발제
• 11시 [혼공자] 언어스터디 6-3 객체와 배열 고급
• S.A 과제 제출
• React 강의 듣기
• yarn 과 지겹게 싸우기
• 모니터 받침대 설치/의자 조립/웹캠은 실망이야

😲 오늘 느낀 점

리액트 강의를 들었던 시간보다 에러를 해결하려고 구글링했던 시간이 훨씬 더 길었다. 강의에서는 너무나 간단하게 yarn start 를 하라고 하는데 나는 도대체 몇 시간이나 걸렸는지 모른다. 결국 yarn은 포기하고 npm start로 실행시켰다. 이제 이름만 들어도 지긋지긋하다. 항해99 자체의 시스템이나 강의보다 지금 우리 반에 좋은 분들이 정말 많아서 그게 제일 좋다. 오늘 에러도 혼자였으면 해결하는데 도대체 얼마나 걸렸을지 깜깜하다.

코드를 한 줄씩 쓸 때마다 바뀌는 걸 보는 게 제일 재밌다. React는 굉장히 직관적인 것 같다. 나는 단순한 사람이어서 직관적인 사람과 무언가가 좋은가 보다. 내일도 열심히 배워야겠다!

👏🏻 오늘의 칭찬

거의 이틀 만에 공부에 집중했다.

🤔 오늘 아쉬운 점

운동을 못 함.

⛵️ 내일 할 일

• React 강의 듣기
• React 관련 자료 보기
• React 핵심 정리
• 알고리즘 문제 1개 풀기
• 웨이트 - 루틴 까먹었으니 하체?!