넘블 챌린지 - 신년메시지 주고받는 사이트 새해를 맞이하여 더 많은 프로젝트를 구현해보고 싶었는데, 넘블에서 바닐라 자바스크립트를 이용하여 SPA를 구현하여 배포하는 챌린지가 있다는 것을 알았다. 바닐라 자바스크립트만을 이용하여 배포까지 해본 경험이 없었기 때문에 도전해보고자 챌린지를 신청하게 되었다. 1. 챌린지 주제 SPA로 동작하는 신년 메시지를 주고 받는 서비스를 개발하는 것이 주제였다. 바닐라 자바스크립트를 사용하여 개발해야 했는데, 리액트로만 SPA를 구성해보고, 바닐라로는 해본 경험이 없었기 때문에 어떻게 구성해야할지 고민했다. 1-1. 진행 방법 & 요구사항 ES6 문법 사용 상태관리 라이브러리 사용 불가 사용 가능한 라이브러리 정적 파일 제공을 위한 express 사용 가능 axios 및 http 관련 라이브러리 사용 가능 css 전처리기 자율적 사용 가능하며, 이에 따른 필요 라이브러리 사용 가능 이미지 업로드 구현을 위한 aws-sdk 사용 가능 디자인 모바일…

졸업가능? 프로젝트 회고록 캡스톤 디자인 프로젝트로 학우들이 기존 수기로 체크하던 졸업사정 셀프 테스트를 자동화시키는 프로젝트를 진행했다. 프로젝트 구성 총 4명(프론트2, 백2)으로 팀을 구성했으며, 나는 프론트 개발에서 화면UI 구성, 백엔드와 API 연결 등을 맡았다. 프로젝트 중 발생한 이슈 처음으로 배포까지 진행했던 프로젝트였기 때문에, 개발 중 많은 이슈들이 발생했다. 1. CORS 에러 화면을 구성한 뒤, 백엔드에서 데이터를 받아오기 위해 연결을 했는데 받아와지지 않는 에러가 발생했었다. 프론트/백 코드에서는 문제가 없었는데 이런 에러가 발생한 것이 처음에는 잘 이해가 되지 않았다. 에러를 확인해보니 CORS에러가 발생했다고 하여 이 문제가 무엇인지 찾아보았다. CORS(Cross-Origin Resource Sharing) : 교차 출처 리소스 공유 http 헤더를 사용하여 서로 다른 출처에서 리소스를 공유하는 방식을 말한다. 다른 Origin으로 요청을 보내기 …