기존 팀프로젝트를 SPA 로 구현 중 느낀 어려움 및 경험
1. 새로 고침 및 뒤로가기 404 에러 발생
오류 내용 :
URL 주소에서 "/"와 같은 메인 주소에서는 새로고침해도 정상적으로 보여졌다. 하지만, "/login"과 같은 다른 페이지에서 새로고침하면 404 오류 페이지가 뜨는 문제가 발생되었다.
오류 원인 :
SPA 같은 경우 index.html 파일 하나만 존재하는데 다른 페이지에서 index.html를 찾지 못 하기 때문에 에러가 발생하는 것이다.(connect-history-api-fallback)
오류 해결 :
express 프레임워크를 설치하여 SPA를 구현하는 방법으로 문제를 해결할 수도 있으나 바닐라 자바스크립트만으로 구현해보고 싶어 뒤로가기는 아래와 같은 코드로 문제없이 동작되었다.window.history.back();
오류 해결 실패 :
새로고침 이벤트를 감지하여 새로고침한 페이지 주소를 다시replacestate로 주소를 업데이트하는 방법을 사용하려 했지만, 인터넷 검색을 통해 얻은 코드로는 새로고침 이벤트를 막기 어려워 실패했다.
강사님이 만드신 SPA 또한 새로고침 시 404 에러가 발생되어 참고할 수 없었다. 아마 새로고침 404 페이지 오류를 해결하기 위해서는 express 설치 또는 SPA 구조를 처음부터 바꿔야 해결이 가능할 것 같다.
2. axios와 fetch
문제 :
SPA 변경 이전에 프로젝트는 HTML 파일에서 CDN 스크립트를 활용하여 설치했다. SPA로 변경 후에 로그인, 회원가입 HTML 파일이 없어서 에러가 발생되었다.
해결 :
물론 index.html 파일에 CDN 스크립트를 입력하면 되겠지만 다른 페이지에서는 axios가 아닌 fetch를 쓰기 때문에 로그인, 회원가입 페이지도 통일성을 위해 fetch로 변경했다.
3. 깃 잔디
문제 :
지난 팀프로젝트를 포크하여 개인적으로 고도화시키며 학습하고 있었다.
8월 1일부터 9월 21일까지 48개의 커밋이 이루어졌고 당연히 깃 프로필에 잔디가 심어지고 있다고 생각하고 있었는데 잔디가 심겨지지 않는 것을 늦게 확인했다. 포크한 저장소는 잔디가 심겨지지 않는다는 것을 늦게 알게 되었다.
해결 :
잔디를 심기 위해 커밋하지 않지만 몇주 동안 비어있는 잔디를 혹여 채용 관련 담당자분이 보셨을 때, 성실하지 않은 개발자로 보여질까 걱정되었다.
검색을 통해git clone --bare와git push --mirror를 사용하여 잔디를 다시 심을 수 있었다.
잔디가 심겨지는 요건 :
1. GitHub 계정과 commit 이메일 계정이 동일.
2. commit이 Fork한 repository가 아닌 나만의 repository.
4. 기존 게시물 수정 시 오류 발생.
아래 변수들로 데이터를 저장할 때 두 번째 게시물 수정에서 문제가 발생되었고 아래와 같이 글로 어느 부분이 문제 있는지 파악하여 개선하였다.
fileArr : Blob 객체형 파일 데이터 저장 arrImgName : 파일의 url명 저장
문제 :
- 첫 번째 게시물 생성 (문제 없음)
1-1. 이미지를 페이지에 업로드 할 때, fileArr 에 파일들 저장
1-2. 이미지 업로드 중에 삭제하고 다시 업로드 할 때, 해당 노드 삭제 및 fileArr 에서 제거
- 두 번째 게시물 생성 (문제 없음)
1-1. 첫번째 게시물에서 저장된 fileArr 변수를 초기화.
1-2. 이미지를 페이지에 업로드 할 때, fileArr 에 파일들 저장.
1-3. 이미지 업로드 중에 삭제하고 다시 업로드 할 때, 해당 노드 삭제 및 fileArr 에서 제거.
- 두 번째 게시물 수정(문제 발생)
1-1 fileArr에는 두번째 게시물에 대한 파일들이 저장되어 있어 문제 발생, 첫 번째 게시물에 대한 fileArr이 있어야함.
=> 해결 : 게시물 수정 페이지에서 이미 존재하는 게시물의 이미지 노드를 다시 file 형식으로 바꿔주는 함수를 실행.
=> 변환된 파일을 다시 fileArr 에 저장.
1-2 게시물 삭제 할 때, 에러 발생.
=> 해결 split과 replace를 사용하여 style.backgroundImage에 있는 url/name에서 name만 가져와 삭제 클릭한 이미지와 파일 이름을 비교하여 삭제
5. innerHTML 과 createElement 차이
프로젝트를 처음 진행할 때는 innerHTML 사용해보았고 리팩토링 할 때는 createElement를 사용해보았을 때, 아래와 같은 느낌을 받았다.
innerHTML은 해당 노드를 querySelector로 선언하고 선언된 해당 변수에 이벤트를 등록해줘야 하지만 createElement는 이미 createElement로 변수가 선언되어 있기 때문에 추가로 해줄 필요가 없다는 부분에서 번거롭지 않았다.
즉, 특정 노드를 동적으로 컨트롤해야 할 때 수월하다는 점이 createElement의 장점이라고 느꼈다. 하지만 한 페이지에 사용되는 노드를 전부 선언하고 설정하기 때문에 자바스크립트 코드 작성이 깔끔하지 못하고 조금 어지럽다는 느낌을 받았다.
페이지 내에서 특정한 부분을 동적으로 마크업 할 때 위 사진과 같이 innerHTML로 작성하면 코드를 작성하기 상당히 편하고 HTML이기 때문에 보고 이해하기 수월하다는 점이있다.
동적으로 마크업 할 때, innerHTML이 적절한지 createElement가 적절한지는 아직도 확신이 서질 않아 생각이 필요할 것 같다.
6. string을 node로 변경(home.js의 checkImg 부분)
문자열을 Node로 변환하고 싶은 곳이 있었고 검색하면서도 이게 될까? 라는 생각을 가지면서 방법을 찾았었다. 결론적으로 아래 MDN 사이트에서
createContextualFragment란 함수를 사용하여 변환할 수 있었다.
MDN createContextualFragment 출처
7. 페이지별 사이즈 변경
문제 :
NavBar에서 chat과 profile 클릭 시에 해당 페이지로 변경된다.
이때, NavBar 너비 사이즈는 변경되지 않지만 home을 클릭하게 되면 NavBar 전체 너비가 줄어들어 아이콘 위치가 살짝 이동되는 부분이 확인되었다.
해결 :
이 문제를 확인하기 위해 CSS를 찾아 보았지만 문제는 없었고 계속 확인하던 중 home 페이지에서만 많은 게시물을 보여주기 위해 스크롤이 생성되기 때문이라는 것을 확인 할 수 있었다. 페이지 우측에 스크롤이 생성되기 때문에 전체 사이즈가 스크롤 너비만큼 줄어든 것이다.
8. 배포
타입스크립트를 프로젝트를 배포해 브라우저 환경에서 구동시키는 방법은 여러가지 방법이 있다.
1. parcel 패키지 설치 후 사용.
2. TypeScript 컴파일러를 이용하여 JavaScript 파일로 변환한 후, HTML 파일에서 해당 파일을 불러와서 사용.
3. 프레임워크에 얹어서 사용.
4. babel 사용
5. webpack 사용
3번을 제외한 모든 방법을 동원해서 배포에 시도했다.
처음이라 쉽지 않았고 결국 5번 웹팩을 이용해 배포에 성공했다.
