바닐라 자바스크립트 프로젝트 드디어 완성

CSS,HTML으로만 구성된 프로젝트를 배포할 때는 

쥬니어네이버 옷입히기 게임할때만큼 진짜 쉽게 휘리릭 했는데

 

SPA...바닐라 자바스크립트...

 

와 이건 진짜 배포하는것도 험난했다.

 

바닐라 자바스크립트를 해보기 전에 리액트를 먼저 배웠는데

 

이때 디렉토리를 그냥 그런가보다~ 하고 넘겼지만 이번 프로젝트를 진행하면서

 

왜 디렉토리가 저런건지 이해도 가고, 리액트가 얼~마나 편리한 프레임워크인지 잘 깨우칠 수 있는 소중한 기회였다..

 

1. 초기목표 :

 

자바스크립트 활용 및 다른 프레임워크 사용하지 않기.

 

2. 실제 일어난 일 :

 

목표했던대로 다른 프레임워크는 사용하지 않았다. 하지만 JSX문법을 사용할 수 없어서

return문으로 html을 리턴하는 방식으로 작성했다.

 

 

node.js를 활용하며 서버를 연결하면서 이때 HTTP상태 코드 200과 301에 대한 차이를 알 수 있었고 블로그로 포스팅하면서 다시 검색을 한 덕분에 잊어버리진 않을 것 같다..

https://hans-j.tistory.com/190

babel(자바스크립트의 최신문법을 이전 버전의 문법으로 변환해주는 도구), Webpack(정적 모듈 번들러)를 사용하면서 컴파일되는 과정에서 엄격 모드가 활성화 되기 때문에 Liver server로 확인했을 때는 문제 없이 작동이 되어도 

로컬 호스트로 연결했을때는 오류가 날 수 있다는 것을 처음 알게 되었다.

 

import가 되지 않고 모든 파일이 다 index.html파일로 보이는 에러, 타입 에러, 배포할 때 memory limit이 뜨는 에러 등등

정말 많은 시간을 에러를 고치는 데에 더 많이 보냈다.

 

 

3. 계획과 실제 결과의 차이 :

 

drag이벤트를 사용해서 모바일 버전으로 만드는 것이었지만 생각보다 많이 까다로웠다.

 

배포하는데 directory가 이렇게 중요한지 처음 알았다. 경로만 여러번을 바꾸었다. 

index.js와 index.HTML은 같은 경로에 있는 것이 바람직하다는 것을 알고 처음과 다르게 두 파일 모두 루트파일로 경로를 재설정 했다.

 

4. 지속해야할 부분 :

 

 drag and drop API를 사용했는데 모바일 버전에서는 이것이 적용되지 않는 다는 것을 처음 알았다.

단순하게 touch이벤트로만 바꾸어서 되는 것이 아니고

<div>로 drag-item들이 구성되어야하거나 아이템들에 position:absolute가 적용되어야했다.

 

하지만 이미 display : flex로 정렬을 해두고 자식 item들이 <img>로 되어있어서 강의를 보고 배워도 현재 나의 프로젝트에는 적용하는것에 무리가 있어서 계속 시도중이다. 

 

5.개선해야할 부분 :

 

SPA에서 각 서브 파일들에 파라미터를 만드는 과정해서 정~말 헷갈렸다.

 

그 중 한 코드가

const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");

이거 였는데 정말...잘 모르겠다.. 저 부분은 다시 공부해서  반!드!시! 이해 할 수있도록 할 것이다.

 

6.포기할 것들 :

 

조급해하지말자!

중요한 것은 꺾이지 않는 마음

 

7. 배운 것들 :

 

webpack,babel이 필요한 이유. 

바벨을 사전이라 생각하자. 그리고 웹팩은 그 사전을 통해 번역을 해주는 도구로 볼 수 있다

//출처 : https://onlydev.tistory.com/111

---

브라우저의 주소창에 URL에 입력하면 일어나는 과정

1. DNS조회
2. 서버 연결
3. 연결된 서버에 요청 전송
4. 서버응답 - 페이지 렌더링
   (이 과정에서 HTML, CSS, JavaScript 등의 리소스를 로드하고,
   DOM(Document Object Model)을 생성하여 화면에 표시)
5. 페이지 로딩

---

정적파일은 보통 public파일에 넣어두는것이 리액트만이 아닌 다른 프로젝트에도 적용됨.

---

이번에 프로젝트하면서 머리 쥐어뜯는 일이 참 많았는데 그래도 재미있었다.

 

작업하면서 챗GPT도 이용했는데 이번에 느낀점은 챗GPT보다 stackflow가 훨씬 낫다는 것...

 

서브 자바스크립트 파일들에 코드를 어떻게 적용해야하는지 ;; 좀 헤맸는데

챗 GPT한테 처음 물어봤다가 정말 완벽한 옆길로 샜다.

 

Stackflow를 조금만 뒤져보니까 코드 딱 한 줄로 해결이 됐다.

내 시간..돌려주세요

 

배포할 때도 계속 해결이 안되길래 사흘을 꼬박 지지고 볶다가 netlify Support Forum에 글을 올렸는데 하루만에 바로 해결했다.

 

앞으로도 영어로 질문하는것에 겁내지 않고 활용을 잘 해야겠다!