후니후니

백엔드 프론트엔드의 기본 설정 등 완료하고, 서버에서 프론트엔드 기술들의 이미지와 이름을 API 응답으로 받아서 화면에 뿌려주는 작업을 진행했다. 어떤 식의 포트폴리오를 만들어볼까 고민하다가, 포트폴리오를 하나의 홈페이지처럼 만들어보기로 했다. 뭔가 포트폴리오가 아닌 정말 내가 운영하고 서비스하는 페이지의 느낌? 을 생각했다. 인터렉티브하게 만들기 위해서 랜딩페이지를 먼저 구현 작업을 시작했고, 처음에는 전체에 프론트엔드 기술들의 아이콘이 둥둥 떠다니고 마우스 위치에 따라서 조금씩 이동하거나 360도 회전하는 등의 효과를 생각했는데, 막상 테스트해보니 이쁜 것 같지도 않고 사방 팔방 정신이 없어보여서 갈아엎었다. 기술들의 아이콘이 모여 동그라미를 그리고, 일정한 속도로 회전하도록 구현했다. CSS로도 가..

저번에는 프록시 설정까지 진행했다. 이번에는 화면에 보여줄 문구와, 이미지를 프론트에서 올리는 게 아닌 s3서버 url로 뿌려주기 위해 Json 파일을 백엔드 프로젝트에서 생성했고, 프론트에서 API 호출을 했을 때 데이터를 가져와 Vuex 스토어에 값을 저장하도록 했다. import skils from 'skils.json' router.get('/', (req, res, next) => { res.send(skils); }); // Node.js 일부 코드 지정한 주소에 get을 호출하면 json 파일을 내려주도록 코드를 작성했고, 프론트에서는 Axios를 통해 API를 호출 할 수 있도록 설정해줬다. 그 전에 미리 스토어도 사용할 수 있도록 Vuex 설치와 셋팅은 모두 해둔 상태다. 언제나 처음 셋..

공부할 때 인강을 듣거나 주로 책을 보면서 토이 프로젝트를 했었다. 결국 누군가의 코드를 쓰는 것이다 보니, 나만의 프로젝트를 오랜만에 다시 시작해볼까 한다. 지금까지 포트폴리오를 2개 만들었는데, 첫 번째는 학원을 다니며 만든 퍼블리싱 포트폴리오고, 두 번째는 자바스크립트 프레임워크 (Vue.js)를 이용하여 만든 프론트엔드 포트폴리오였다. 퍼블리싱 포트폴리오는 다양한 애니메이션을 많이 추가하여 인터렉티브하게 제작했고, 프론트엔드 포트폴리오는 정적이고, Vue에서 지원하는 기능들을 많이 사용하여 제작했다. 세 번째 포트폴리오는 Vue.js와 Express를 이용하고, 동적 효과등을 이용하여 포트폴리오 최종본을 만들어볼까 한다. (지금까지 만든 포트폴리오는 사실 100% 만족하여 만들지 못 했기에...)..