FE가 되고싶니? 나도✨

리액트 강의를 들으며 평화롭게 설치를 하던 중 난데 없는 날벼락이 발생하고 말았다.

두둥-

아니 강사 양반 나는 설치가 안되는데 어찌하여 그대만 혼자 쭉쭉 나간단 말이오.🤷🏻‍♀️

알수 없는 오류만 잔뜩인 채 해결하기 위해 구글링을 시작했다.

a complete log of this run can be found in

라고 검색해보면 관련된 후기 및 해결 방법 블로그들이 잔뜩 나타났다.

그 중 대표적인 방법으로 우선 캐시를 지워주는 일.

npm cache clean --force

하지만 이 역시 리액트가 설치되진 않았다.

그 다음으로 해본 일은 명령어 수정,

npm init react-app .
이라고 작성했던 명령어를 대신해서

npx create-react-app .
이라고 작성해주었다.

하지만 이것도 역시 오류가 발생했고,,,

전역으로 설치해보라는 글도 있어서 전역으로 설치도 시도 했으나 마찬가지였다.

npm install -g create-react-app
create-react-app C:\Users\사용자명\Desktop\hello_react

혼자서는 도저히 답이 나오지 않는것 같아 머리를 부여잡고 강사님을 찾아갔다.🥲

오류가 나는 화면을 들고 찾아가 도움을 요청 드렸더니 흔쾌히 요청을 수락해주셨다. (강사님껜 악몽의 시작이셨을지도 모를..) 그렇게 줌으로 강사님께 화면 공유를 했고, 강사님께서 이것저것 확인해보시며 나의 상황에 대해서 파악 해주셨다.

1. create-react-app이 deprecated (더 이상 업데이트 없음) 되서 node 최신 버전이랑 안맞을 수 있음
→node 버전 더 낮은 거 설치
→ nvm 설치해서 node 버전 여러 개 설치 가능
→ 혹은 vite 로 설치해서 확인 

2. 알약 같은 보안 프로그램이 실행을 막음 → 알약 및 보안 프로그램 삭제 필요
→ npm create vite@latest . -- --template react

으로 축약되어 해결을 위해 같이 열심히 2-3시간 동안 붙잡고 있었다.

(고치는 과정 사진이 없는게 조금 아쉽긴 하다.)

하지만 환경변수를 들여다보고, node를 삭제했다 다시 깔아보고, nvm을 깔아봐도 도무지 해결되지 않는 나의 리액트,,🥲

강사님께선 왠지 경로에 한글이 들어가 있어서 깨지는 걸수도 있다고 하셨다.

C드라이브\Users\여기에 들어가는 사용자명을 내가 윈도우 설치할 때 한글 내 별명으로 해버렸다.

과거의 노트북 구매 당시의 나 자신아.. 왠만하면 앞으로 사용자명은 영어로 하자..(멘토님께서 대문자 상관 없긴 하지만 혹시모를 오류 방지를 위해 소문자로 쓰자고 당부하셨다.)

그렇게 주말 강사님과 함께 지지고 볶던 시간이 지나고,, 울적한 마음에 사설 디스코드 방에서 신세한탄을 하고 있었다.

그렇게 시작된 멘토님의 도전! 😂

갑자기 원격제어로 한번 봐주시겠다면서 원격제어를 걸어 상태를 살펴봐 주셨다. (이 때도 캡쳐를 못해서 아쉽긴 하다.)

환경 변수를 다 지워도 보고, 관리자 권한도 줘보고, 버전도 계속 체크해보고, VS코드의 bash와 powershell에서도 해보고, 경로에 한글이 들어가지 않게 C드라이브 바로 밑에 폴더를 만들어서도 해보고,, 하여튼 할 수 있는건 다 해본것같다. 장장 2시간 동안...

진짜 너무너무 고생해주신 멘토님,,🥲날 봐주신다고 돈이 되는것도 아닌데 자신의 일처럼 열정적으로 나서주셔서 감사했습니다.

그래서 이 때부턴 백업준비에 들어갔었다. 월-금은 평일 주강사님이 봐주시고, 토요일은 주말 주강사님이 봐주시는데 내가 문제가 발생했던게 금요일 저녁이라 토요일 낮에 주말 주강사님이랑 뚝딱뚝딱하고, 토요일 저녁에 멘토님이랑 뚝딱뚝딱했는데도 되지 않아서 이 땐 마음을 어느정도 해탈하고 노트북에 있는 자료들을 열심히 클라우드로 옮겼다.

그러다 파트 1 때 같은 팀이었던 다른 수강생분이 "저도 리액트 설치과정에서 오류가 났었는데 평일 주강사님과 해결했어요, 한번 찾아가보시는게 어떨까요?" 라는 의견에 화요일에 조심스럽게 평일 강사님께 DM을 드렸다.

역시나 오류를 찾아가는 과정중에 나는 한가하게 캡쳐 같은걸 하고 있을 수가 없으니, 강사님께서 보내주신 명령어들만 남아있다.

자세한건 잘 모르겠지만 환경 변수에 설정되어 있는 경로들을 찾아가서 npm, nvm 폴더들도 깔끔히 삭제하고, 환경 변수에 지정 되어있던 %NVM_HOME%과 %NVM_SYMLINK%도 삭제하고,, 로컬 C 파일 탐색기에서 node와 nvm도 따로 검색해서 더 이상 뜨는게 없는지 점검하고, c드라이브 바로 아래에 있는 디렉토리에서 vs코드 열어 명령어 입력 뚝딱뚝딱 해줬더니 두둥..!

와아..!! 백업의 마음준비를 하고 마지막 끈으로 찾아갔던 평일 강사님이 해결해주셨다.😂😂😂

상황이 어찌 됐던건지 어리둥절한 나를 위해 강사님께서 말씀해주시기를

1. 환경변수가 꼬임
2. 삭제가 제대로 안됨
3. 경로에 한글이 있어서

-앞으로 파워쉘로 해야한다.
-C드라이브에서 어플리케이션 수행할 것 (미션도 C드라이브 밑에다가 할 것!)

이라고 하셨다. 와아아..! 포맷 안해도 된다!😂

진짜 너무너무 감사했고, 죄송스러웠던 강사님들과 멘토님... 인사는 계속 드렸지만 그래도 회고록을 빌어 한번 더 인사를 전하고 싶습니다. 당신의 일들도 아닌데 열심히 봐주고 해결해주려고 노력해주셔서 정말정말 감사드립니다.🙇‍♀️❤️

리액트 공부... 열심히 해야겠다.🥲👍

+추가 (25.01.01)

결국엔 포맷엔딩을 탔다.

브라우저

웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어이다. 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지, 파이어폭스 등이 브라우저이다.

웹 브라우저의 동작 원리는 여러 단계로 나뉘어져 있는데 사용자가 웹 페이지를 요청하고 이를 렌더링하는 과정에서 다양한 기술이 활용된다.

브라우저의 구조

1. 사용자 인터페이스(User Interface) : 주소 표시줄, 각종 버튼(이전/다음, 새로고침, 설정, 닫기 등), 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이 사용자 인터페이스에 해당한다.
2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진. 자료 저장소를 참조하며 로컬에 데이터를 읽기/쓰기 하면서 다양한 작업을 한다.
3. 렌더링 엔진 : 요청한 콘텐츠를 표시한다. 요청한 웹 페이지의 HTML과 CSS를 파싱하여 화면에 표시
4. 통신 : HTTP 요청과 같은 네트워크 호출에 사용
5. 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행
6. UI 백엔드 : input, select 와 같이 기본적으로 지원하는 요소를 그린다. OS 사용자 인터페이스에서 정해준것들을 사용한다.
7. 자료 저장소 : 쿠키, 로컬 스토리지와 같이 로컬 영역에 저장해야 하는 모든 종류의 데이터들을 저장한다.

1. URL 입력 및 요청

사용자가 웹 브라우저에 URL을 입력하면, 브라우저는 해당 URL을 해석하여 웹 서버에 요청을 보낸다. 이 과정에서 DNS(Domain Name System)를 통해 도메인 이름을 IP 주소로 변환한다.

2. 요청 전송

브라우저는 HTTP(HyperText Transfer Protocol) 또는 HTTPS(HyperText Transfer Protocol Secure) 프로토콜을 사용하여 웹 서버에 요청을 전송한다. 이 요청은 보통 GET 요청으로 이루어지며, 서버에게 특정 리소스(예: HTML 파일, 이미지 등)를 요청한다.

3. 서버 응답

웹 서버는 요청을 처리한 후, 요청된 리소스를 포함한 HTTP 응답을 브라우저에 반환한다. 이 응답에는 상태 코드(예: 200, 404)와 함께 HTML 문서, CSS 파일, JavaScript 파일 등이 포함될 수 있다.

4. HTML 파싱 및 DOM 생성

브라우저는 응답받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성한다. DOM은 HTML 문서의 구조를 나타내는 객체 모델이다.

5. CSS 파싱 및 CSSOM 생성

브라우저는 HTML 문서와 함께 요청한 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성한다. CSSOM은 스타일 정보를 구조화하여 브라우저가 렌더링을 할 수 있도록 돕는다.

6. JavaScript 실행

브라우저는 HTML 문서 내의 JavaScript 코드를 실행한다. 이 과정에서 JavaScript는 DOM과 CSSOM을 수정할 수 있으며, 브라우저는 이를 반영하여 페이지를 업데이트한다.

7. 렌더 트리 생성

브라우저는 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 렌더 트리는 화면에 표시될 요소들만 포함하며, 각 요소의 스타일과 위치 정보가 포함된다.

8. 레이아웃 및 페인팅

렌더 트리를 기반으로 브라우저는 레이아웃을 계산하여 각 요소의 정확한 위치와 크기를 결정한다. 이후, 이 정보를 바탕으로 화면에 각 요소를 그리는 과정을 페인팅이라고 한다.

9. 최적화 및 재렌더링

브라우저는 페이지가 동적으로 업데이트될 때 최적화를 통해 불필요한 렌더링을 줄인다. JavaScript가 DOM을 수정하면, 브라우저는 필요한 부분만 다시 렌더링한다.

결론

웹 브라우저는 이러한 여러 단계를 통해 사용자가 요청한 웹 페이지를 화면에 표시한다. 이 과정에서 다양한 프로토콜과 기술이 사용되며, 각 단계는 브라우저의 성능과 사용자 경험에 큰 영향을 미친다.

참고자료1

💭 var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 보자.

중복 선언 허용

• 한 스코프에서 같은 변수를 let이나 const로 두 번 선언하면 에러가 발생한다.
• var는 변수의 중복 선언을 허용하는데 var로 같은 변수를 여러번 중복으로 선언할 수 있다.
• 하지만 이미 선언된 변수에 var를 사용하면 두번째 선언문은 무시된다.

let user;
let user; // SyntaxError: 'user' has already been declared

var user = "Pete";
var user = "John"; // 이 "var"는 아무것도 하지 않는다(이전에 이미 선언됨).
// ...에러 또한 발생하지 않는다.

alert(user); // John

스코프

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력
}

sayHi();
alert(phrase); // Error: phrase is not defined

호이스팅

• let과 const로 선언한 변수는 선언되기 이전에 사용될 수 없다.
• 하지만 var 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능하다.
• var 선언은 함수가 시작될 때 처리된다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리
• 함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의된다.

function sayHi() {
  phrase = "Hello";

  alert(phrase);

  var phrase;
}
sayHi();

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}
sayHi();

var phrase가 위로 이동한것처럼 적용되서 위의 두 코드는 동일하게 작동한다.