기존 프로젝트 업그레이드 시키기

📌기존 프로젝트 문제점 찾기 

HTML, CSS , Javascript를 통해 제작한 웹, 아모레퍼시픽 미술관에 있는 전시를 토대로 만들었다. 클론 코딩은 아니어도 처음 프론트엔드 과정을 배우고 만든 프로젝트였기에 창의성보다는 학습성에 초점을 두어 기존 웹을 참고하며 만들었다. 

https://spectacular-shortbread-0fa617.netlify.app/exhibtion.html

EXHIBTION

 

 

시간이 흐르고 다시 봤을 때는 처음 만든 거 너무너무 티를 내는 웹이여서 부끄러워졌다. 말도 안돼는 form디자인 , main페이지는 page not found, 사용자를 전혀 고려하지 않은 브라우저까지 총제적 난국이라 수정하기로 결심...💫

 

 

일단 각 페이지를 별로 레이아웃의 문제점을 파악하고 개선 방향들을 정리하였다. 

https://statuesque-pincushion-161.notion.site/2021-08-APMA-a25416082ebb49f9a5e026f93c449f59?pvs=4

2021.08 APMA 개선 사항 | Built with Notion

 

레이아웃 수정을 마친 후 팀 프로젝트로 디벨롭 하고 싶어서 캠퍼스픽 앱을 통해 백엔드 개발자 2분과 협업을 시작했다. 

 

📌(로그인 + 회원가입)팀 프로젝트로 디벨롭 시키기 

기존 프로젝트에 로그인과 회원가입 기능을 추가하기로 상의하였다. 

요구사항 명세서 

 

요구사항 명세서를 작성해서 원하는 기능의 세부사항들을 전달해드렸다. 회의는 디스코드를 통해 진행되었고 이미 프론트쪽에서는 디자인이 완성된 상태라 AJAX를 이용해서 REST API를 만들어놓고 백엔드 개발자 분들을 기다리고 있었다.

 

   $.ajax({
      "url":"https://apma.o-r.kr/APMA/join/member",
      "type":"POST",
      "Content-Type":"application/json",
      data: JSON.stringify(menber_info), 
      dataType:"json",
   }).done(function (resp) {
         // 결과가 정상이면 done 실행
         alert("회원가입이 완료되었습니다.");
         console.log(resp);
         location.href = "./login.html";
      }).fail(function (error) {
         // 실패하면 fail 실행
         alert("회원가입이 실패하였습니다.");
         alert(JSON.stringify(error));
      });

 

 

왜 Ajax를 사용하였는가?!

✔️비동기 통신 (Asynchronous Communication): jQuery Ajax를 사용하면 웹 페이지가 새로 고쳐지지 않고도 서버와 데이터를 주고받을 수 있다. 이는 사용자 경험을 향상시키며 빠른 응답을 가능하게 한다. 비동기 통신을 통해 페이지가 새로 고쳐지지 않으므로 사용자는 페이지 이동 없이도 로그인 및 회원가입과 같은 작업을 수행할 수 있다.

 

✔️데이터 유효성 검사 및 처리: Ajax를 사용하면 클라이언트 측에서 입력 데이터를 검증하고 서버로 전송하기 전에 오류를 처리할 수 있다. 이로써 불필요한 서버 요청을 최소화하고 더 나은 사용자 경험을 제공할 수 있다. 

 

✔️간단한 구현: jQuery는 간편한 문법과 사용법을 제공하므로, 간단한 Ajax 요청을 수행하기에 적합하다. 이는 개발자가 빠르게 구현하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다. 

 

✔️크로스 브라우징 지원: jQuery는 다양한 브라우저에서 일관된 방식으로 동작하도록 설계되어 있다. 이는 크로스 브라우징 이슈를 해결하는 데 도움이 된다. 

 

📌CORS 에러 이슈로 일주일 넘게 상의하기 

드디어 백엔드에서도 코드가 완성되고 회원가입 버튼을 눌러보니,,, 

 

 

CORS 에러?? CORS에러가 도대체 뭐야!

 

CORS(Cross-Origin Resource Sharing)는 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 직역하면, 교차되는 출처 자원들의 공유입니다. 다른 출처에 있는 자원을 요청한다고 하면, 이를 교차 출처 요청이라고 부릅니다.

 

서버쪽에서 Postman을 이용해 테스트를 해봤을 때는 문제가 없고 CORS 세팅도 완료했는데도 계속 에러가 떠서 점점 머리가 아파왔다. 여기저기서 물어봐도 CORS는 백엔드에서 해결하는게 맞다고 하셨다. 그럼에도 불구하고 내가 뭔가 설정을 잘못한게 없는지!! 프론트엔서도 CORS를 해결할 방법이 없는지 계속 살펴봤다. 

 

1. jquery 플러그인을 이용해 ajax-cross-origin 라이브러리를 다운받기 

https://www.ajax-cross-origin.com/

Home - CrossOr in Ajax

위에 사이트에서 ajax-cross-origin 라이브러리를 다운받고  html head 안에 넣어준 후 

  <script  type="text/javascript" src="../js/jquery.ajax-cross-origin.min.js"></script>

 

ajax 코드에  crossOrigin : true,추가하기 

 

...실패!

 

2. Chrome 확장 프로그램 이용하기

Chrome에서는 CORS 문제를 해결하기 위한 확장 프로그램을 제공해준다. Chrome의 웹스토어 에서 cors를 검색해주면 된다.

 

 

 

 

브라우저 오른쪽 상단에서 확장 프로그램을 활성화 시킬 수 있다. 해당 프로그램을 활성화 시키게 되면, 로컬 환경에서 API를 사용 시, CORS 문제를 해결할 수 있다고 한다. 

 

실패!! 

3. 현업 개발자한테 물어보기 , 커뮤니트 사이트에 물어보기, 계속 상의하기

테스트 중에 뜬 사진을 아는 현업 개발자 분에게 보내서 여쭤봤다. 

405에러?? -> 보내는 것은 post 요청인데 get으로 받는 부분만 존재할 때 발생한다. 

주소는 있는데 방식(post, get)이 다른 것 , 만약 주소가 없다면 405에러가 아닌 404에러가 발생한다.

 

그렇다면 백엔드 개발자한테 서버에서 requestmethod를 post, get 둘 다 허용으로 하신거 맞냐고 여쭤봤다. 그렇다고 한다. 

 

 

사이트에 내 코드를 올려 여쭤봤다. 

https://okky.kr/questions/1465493

OKKY - 서버 프론트(ajax사용) 연결 오류

 

 

url!! 맞다. 사실 url이 맞으면 에러메시지라도 가는 것이 정상이다. 

https://apma.o-r.kr/APMA/join/member  -> https://apma2023.net/APMA/join/member  수정했다. 

 

에러가 메세지가 간다. 드디어 에러메시지가 갔다.

 

  Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'GET' is not supported]

 

왜 GET요청이 갔을 까? 난 분명 POST로 보냈는데!! 

 

 

4.  Ajax코드 최종 수정 

에러메세지를 확인한 후에는 ajax코드를 잘못 설정했을 가능성이 커서 이것저것 다시 수정해봤다. 

 

crossOrigin : true => crossDomain: true 으로 수정

 

crossOrigin : true : cross-Origin 요청은 보안 정책상 동일 출처 정책(Same-Origin Policy)에 의해 제한되는데, 이 정책을 우회하고 다른 도메인에서 리소스를 요청할 때 사용된다. 

crossDomain: true : 이 옵션은 XMLHttpRequest 객체의 표준 속성이며, jQuery Ajax에서 명시적으로 설정할 필요가 없다. 

 

사실상 영향을 거의 미치지 않았을 것 같다. 

 

"Content-Type":"application/json", => contentType: 'application/json; charset=utf-8', 으로 수정

 

"Content-Type":"application/json 은 일반적으로 서버 측에서 HTTP 헤더로 사용되는 형태

 contentType: 'application/json;  jQuery Ajax 요청과 같이 JavaScript 라이브러리를 사용할 때 많이 사용되는 형태

charset=utf-8  -> 데이터의 전송 형식을 나타내는데, 여기서는 JSON 데이터를 UTF-8 인코딩으로 전송한다는 것을 나타낸다. 

 

withCredentials:true 을 추가

 

XMLHttpRequest에 대한 옵션으로, 인증 쿠키와 같은 인증 정보를 요청에 포함하도록 허용한다. 이 설정을 추가하면 서버 간의 인증이 필요한 경우 인증된 요청을 보낼 수 있다. 

 

최종 회원가입 ajax 코드 

  

function submit_menber_info(){

	$.ajax({
		"url":"https://apma2023.net/login",
		"type":"POST",
		contentType: 'application/json; charset=utf-8',
		data: JSON.stringify(menber_info), 
		dataType:"json",
		crossDomain : true,
		withCredentials:true,
	}).done(function (resp) {
			// 결과가 정상이면 done 실행
			alert("회원가입이 완료되었습니다.");
			console.log(resp);
			location.href = "./login.html";
		}).fail(function (error) {
			// 실패하면 fail 실행
			alert("회원가입이 실패하였습니다.");
			alert(JSON.stringify(error));
		
		});

}

 

최종 로그인 ajax 코드 

function login() {

	var login_info = {
		username :$("#userId").val(),
		password :$("#userPw").val(),
    }
     console.log(login_info);

	$.ajax({
		"url": "https://apma2023.net/APMA/join/member",
		"type": "POST",
		data: JSON.stringify(login_info), 
        contentType: 'application/json; charset=utf-8',
		dataType:"json",
		crossDomain : true,
		withCredentials:true
	}).done(function (response,status,xhr) {
        alert('로그인 완료') 
        window.location.href = '../index.html'
        $('#side_menu>li:nth-child(1)').remove();
        $('#side_menu').prepend("<li><input type='submit'>LOGOUT</input></li>");
        console.log(response);    //로그인 성공하면 
        console.log(xhr.getREsponseHeader('Authorization'))// 헤더에 있는 토큰을 받아와서
        localStorage.setItem('accessToken', xhr.getREsponseHeader('Authorization')) // 로컬스토리지 = 디비 , 에다가 셋 에 응답 받은 토큰을 그대로 넣는다
        //로그인 성공시 새로고침 
    
      }).fail(function(response){
          console.log(response.responseJSON);
          if(response.responseJSON.statusCode === 404){
              alert('아이디와 비밀번호를 확인하여 주세요');
          } else{
              alert('서버에 문제가 발생하였습니다.');
          }
        });

}

 

 

드디어 성공했다. 회원가입 성공 알림을 드디어 볼 수 있었다. 아무래도 url문제 + ajax 설정 오류로 cors에러가 났고 다행히 해결했다. 시간이 흐를수록 이 에러를 과연 잡을 수 있을까라는 의구심이 들었는데 다행이다. 이번 기회에 cors에 대해서 자세히 알게돼서 좋은 기회가 된 것 같다.

 

📌Html에서 Script의 위치가 미치는 영향 

프로젝트를 완료한 후 Netlify를 이용해 배포를 하고나서 봤더니 main page의 slide가 작동하지 않았다. 한참 이유를 찾다가 script의 위치를 바꿔주니 다시 동작했다.

alert("hi")를 넣어 테스트를 해봤을 때는 출력이 돼서 제대로 연결이 된 줄 알았는데 아니였다. 도대체 왜 이런 일이 발생할까?

 

브라우저 동작 방식

우선 script태그의 위치에 대해서 설명하기 전에 브라우저의 동작 방식에 대해서 알아봐야한다. 

1. HTML 파일 읽기
2. HTML문서를 한 줄 한 줄 순차적으로 파싱
3. DOM 트리 만들기
4. CSSOM 트리와 DOM 트리를 결합하여 렌더 트리 구축 (Attachment)
5. 화면에 표시하기

이렇게 위의 순서대로 브라우저가 동작하게 되는데, HTML 문서를 한 줄씩 파싱하면서 DOM 생성 중 CSS를 로드하는 <link> 태그 또는 <style> 태그를 만나면 DOM 생성을 잠시 중지한 후 CSS파싱의 결과물인 CSSOM을 생성하는 과정을 진행한다. 
마찬가지로 자바스크립트 코드를 로드하는 <script> 태그를 만나면 DOM 생성을 중지한 후 자바스크립트 엔진에 제어권을 넘겨서 작업을 실시한 후 자바스크립트 파싱이 끝나면 다시 DOM 생성을 시작하게 된다.
그렇기 때문에 <script>태그의 위치의 따라서 차이가 생기게 되는 것이다. 

 

1. <head> 태그 사이에 위치 (옵션 없음)

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="./main.js"></script>
</head>
<body>
  <h1>head 태그 안으로 넣기</h1>
</body>
</html>

HTML 파싱 ▶️ HTML 파싱 정지 ▶️ JavaScript 파일 다운로드 후 실행 ▶️ HTML 이어서 파싱

자바스크립트의 파일의 크기가 가볍다면 미비한 영향을 미치겠지만 크기가 무겁고, 인터엣의 속도가 느리다면 웹사이트를 보는 데까지 많은 시간이 소요된다는 단점이 있다. 그리고 또한 DOM을 제어하고 조작하는 자바스크립트 코드가 있다면 오류가 발생할 수 있고 나와 같은 경우에서 발생한 오류라고 할 수 있다. 

 

2. <body> 끝, 즉 </body> 태그 앞에 위치

두 번째 방법은 <body> 끝, 즉 </body> 태그 앞에 위치하는 방법이다. 

<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
  <h1>body 태그 끝에 넣기</h1>
  <script src="./main.js"></script>
</body>
</html>

HTML 파싱 ▶️ JavaScript 파일 다운로드 후 실행

내가 해결한 방법이다. 자바스크립트 파일을 다운로드하기 전 HTML 코드를 모두 파싱 하기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다는 장점이 있다.
하지만 HTML 코드가 자바스크립트 의존적인 웹사이트라면 사용자가 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다는 단점이 있다.

 

3. <head> 태그 사이에 위치 + async 속성

세 번째 방법으로는 첫 번째 방식과는 동일하지만 async 속성을 추가하는 방법이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <script async src="./main.js"></script>
</head>
<body>
  <h1>async 속성을 추가해 head 태그 안으로 넣기</h1>
</body>
</html>

HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱

 

async 속성을 추가하는 경우에는 자바스크립트 파일을 만나면 병렬 다운로드 되기 때문에 다운로드 시간을 절약해서 속도가 빨라질 수 있지만,
자바스크립트 파일이 실행이 될 때 잠시 HTML 파싱이 멈추기 때문에 첫 번째 방법에서의 문제점이 그대로 나타날 수 있다.

 

4. <head> 태그 사이에 위치 + defer 속성

마지막으로 defer 속성을 추가하여 <head> 태그 사이에 위치하는 방법입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <script defer src="./main.js"></script>
</head>
<body>
  <h1>defer 속성을 추가해 head 태그 안으로 넣기</h1>
</body>
</html>

HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ HTML 전체 파싱 후 JavaScript 파일 실행

defer 속성을 추가하면 위의 설명한 async의 방식과 같이 HTML 파싱하는 동안 자바스크립트 코드를 다운로드를 완료하고 파싱이 완료 되면 파일이 실행된다. 따라서 속도적인면에서는 가장 우세하다고 볼 수 있습니다.

 

async, defer 다수의 자바스크립트 로드

async, defer 두가지 속성의 경우에 HTML을 파싱하는 동안 자바스크립트 코드를 다운로드 한다는 공통점이 있지만 다수의 자바스크립트를 로드하는 경우 차이점이 더욱 크게 느껴진다. 

 

📌defer사용 후 slide 속도 문제점 

속도적인 면에서 가장 우세하다고 생각했던 script의 defer속성을 추가하는 방법을 사용했더니 setInterval( , 5000)에서 설정했던 카운터가 제대로 동작하지 않았다.

만약 HTML이 완전히 로드되고 파싱되기 전에 스크립트가 slidefun(counter)를 실행하면, 설정한 클래스를 가진 요소를 찾을 때 이들 요소가 아직 로드되지 않았거나 예상보다 더 적게 로드되었을 수 있다.

그래서 JavaScript 코드를 DOMContentLoaded 이벤트 리스너로 감싸  HTML 문서의 완전한 로드 후에 실행되도록 하였다.그러나 사실 이와같이 하면 아까 2번 방법과 다를께 없지만 그래도 속도면에서 조금 우세하긴하다. 

 

그러나22 DOMContentLoaded 를 사용했을 시 함수가 선언은 되었지만 사용이 안된다는 에러가 뜬다. 그래서 slide의 방향키를 click해도 동작이 되지 않는다. 이게 도대체 왜그런걸까 왜그런거예요?? 그래서 최종으로는 2번 방법을 사용했다.!!

 

📌최종 APMA 프로젝트 

메인 디자인도 위에 링크에 있던대로 안하고 다시 전면적으로 수정했다. 사용자들이 미술관 웹사이트에 들어왔을 때 어떤 정보들이 필요할까를 고민하다 보니깐 미술관과 전시작품에 대한 대략적인 설명을 넣어야겠다고 결심했다. 

 

https://apma-project.vercel.app/index.html

APMA

 

 

📌느낀 점  

다시 보완을 했음에도 여전히 아쉬운 부분들이 있었고 시간만 있으면 더 추가하고 싶은 기능도 많았다. 미술관을 주제로 잡은 만큼 그에 알맞는 기능들이 더 필요했던 것 같다. 

 

💡이벤트 및 전시 정보 업데이트: 미술관의 최신 이벤트, 전시 및 활동 정보를 업데이트하는 기능 

💡 온라인 티켓 예매 및 멤버십 기능: 방문자들에게 편리한 온라인 티켓 예매 기능을 제공하는 기능

♾️ 비교적 무거운 사진들이 들어가니깐 로딩시간이 오래 걸림

❌ 서버를 켜두지 않으면 로그인과 회원가입 기능이 동작하지 않음 

❌ DOMContentLoaded 를 사용했을 시 사용되지 않는 함수 발생 이유 정확히 알기