오늘 푼 알고리즘 코드카타
오늘 푼 SQL 코드카타
망각 킹, 오랜만에 HTML..
팀원들과 진행중인 게임 API 서버가 어느정도 마무리 선에 들어가고 있어서 웹사이트를 하나 만들고자 했다.
처음에는 Vue.js로 진행하려 했는데, 시간도 촉박하고(수요일 마감..) 백엔드 수업에 프론트를 크게 신경 쓸 필요가 있을까 싶어 HTML 기본구조로 생성하고 API 서버에 정적파일로 올리는 방향으로 잡았다.
근데 DOM이랑 CSS가 기억이 잘 안나서 찾아보느라 좀 시간을 많이 할애했다.
구조
├─assets
├─css
└─js
└─index.html
└─login.html
└─signup.html
중간 과정
HTML,JS는 기본 틀과 어느정도 인터넷 참조하면서 만들고 CSS는 템플릿을 거의 다 가져와서 수정했다.
아직 A to Z 만들 실력도 안되고 시간적 여유도 없기 때문에... 기억 되살리기 정도로 만족하려고 한다.
이 프로젝트는 서버 프로그래머로서 가져야 할 시야 확장정도로.... ㅋㅋㅋ 😉😉
확실히 오늘 하루 작업하면서 느낀게 response를 어떻게 주면 편하고 API명세서는 어떻게 작성해서 줘야 편할지
살짝 체감됐다.
FETCH / CORS
처음 작업하다가 맞닥들인 오류가 Fetch error 였는데, Node.js API서버 내 CORS 미들웨어를 추가해주니 해결되었다.
CORS는 "같은 출처에서만 리소스를 공유할 수 있게 해줄게" 라는 규칙을 가진다.
근데? 바로 위에 "HTML 기본구조로 생성하고 API 서버에 정적파일로 올리는 방향으로 잡았다." 라고 써있지 않은가?
테스트 진행할때엔 서버가 달랐었다 🤣
그렇게 작업을 했었고, API 서버 내 정적파일로 제공하니 문제없이 잘되었다!
오늘 작업한 페이지
로그인 페이지
회원가입 페이지
선수목록 페이지
선수 상세정보 모달
상점 페이지
캐시충전 팝업
선수팩 구매 모달
내일까지 마감..
아직 만들게 많다. 선수강화, 게임 시작 등등
TIL 쓸 시간도 애매해서 코드 관련해서 작성은 못했다.
시간 여유 생길 때 난잡한 스파게티같은 코드 정리도 하고 완전체로 만들어서 리뷰해볼 예정이다.
