목록프로젝트 (20)
짱이 될거야
현재 진행하고 있는 프로젝트에서 프론트는 Vuex를, 백엔드는 JPA를 사용하고 있다. 프론트에서 백으로 API 요청을 보내면 몇 백개의 데이터를 정제해서 돌려주는 경우가 있는데, 이때 요청 후 결과를 받기까지 약 0.5초 가량이 걸린다. 이것 때문에 페이지 렌더링에서 문제가 발생하는데, 자주 언급했던 것처럼 결과가 오기 전에 페이지가 렌더링 되어버리기 때문에 화면에 제대로 된 데이터를 보여주지 못한다. updated 시점에서 axios 요청을 한 번 더 한다 하더라도 이미 결과 데이터가 오기 전에 존재하던 데이터를 화면에 띄워버렸기 때문에 화면 데이터는 실시간으로 바뀌지 않는다. 결과적으로 해결할 수 있는 방법은 딱 하나이다. 바로, 결과 데이터가 오고 나서 데이터를 띄우는 것이고 vuex에서는 보통 ..
애플 공식 사이트, 토스 사이트처럼 스크롤을 내리면 다양한 애니메이션이 나오면서 구성요소가 튀어나오게 하고 싶었다. 스크롤을 내리면서 opacity를 설정해도 되는데, 좀 더 쉬운 방법이 없을까 찾아보다가 AOS 라이브러리를 찾았다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io npm install aos --save 일단 npm install 하고, AOS를 쓰고 싶은 컴포넌트에서 아래와 같이 임포트 시킨다. import AOS from 'aos'; import "aos/dist/aos.css"; 그리고 script에서..
프론트 업무를 수행하며 axios 요청을 보냈는데, 계속해서 400 에러가 떴다. GET 요청을 보내면 match / mismatch message를 주는 방식인데, 이때 토큰과 데이터 하나를 보내야 했다. 형식을 맞췄는데 에러가 뜨는 게 이상해서 swagger에서 해봤고, TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. 위와 같은 에러가 뜨는 것을 확인할 수 있었다. 검색해보니까 GET 또는 HEAD 요청을 보낼 때는 토큰이 아닌 다른 데이터를 같이 못 보내기 때문이라고 했다. axios 요청을 보낼 때 POST로 바꿔봤는데, 그러면 백에서는 GET을 받고자 하고 나는 POST를..
Vue.js를 활용한 프론트 작업 중, 회원정보 수정 기능을 구현했다. 회원가입을 할 때와 거의 동일한 form이기 때문에 router-view 단에서 회원가입, 회원정보 수정View.vue를 만들고, compontents 단에서 회원가입 form을 만들고 재사용하는 방식을 썼다. 문제는, 회원정보 수정 시에는 기존 가입 시에 작성했던 정보를 가져와서 미리 input 혹은 select 등등에 띄워둬야 하는 것이었다. 먼저 store에서(vuex 활용) currentUser(회원정보)라는 state를 만들고, fetchCurrentUser라는 getters에서 api를 통해 정보를 가져오고 저장해둔다. 회원가입 시에는 임의의 회원 data(currentUser)를 만들었는데, 회원정보 수정 시에는 stor..
6월부터 스터디원과 함께 React 토이 프로젝트를 만들었다. 7, 8월 동안 SSAFY 프로젝트로 바빠서 진행하지 못했고, 이제부터는 각자 원하는 방향대로 기능 또는 디자인을 추가하기로 했다. 프로젝트명 Hi, My Calendar 기능 설명 Todo 할 일 생성 할 일 조회 할 일 완료처리 할 일 삭제 Emotional Calendar (예정) 감정 입력 수정 삭제 WebView 연동 현재 프로젝트는 서버가 없고, localStorage에 데이터를 저장하는 방식으로 구현되어 있다. 반응형으로 만들었기 때문에 웹뷰를 이용해 모바일에서도 활용하도록 하고 싶은데, 그러기 위해서는 배포를 할 필요가 있다. 본격적인 배포 방법은 배우는 데 시간이 많이 걸릴 것 같아, github에서 제공하는 배포 기능을 활용..
React 프로젝트에서 채팅방을 구현했다. 1. dummy data const [test, setTest] = useState([ {type: 0, content: "1", day: getDate(new Date()), time: getTime(new Date())}, {type:1, content: "2", day: getDate(new Date()), time: getTime(new Date())}, {type: 0, content: "3", day: getDate(new Date()), time: getTime(new Date())}, {type: 1, content: "안녕하세요", day: getDate(new Date()), time: getTime(new Date())} ]); 위와 같이 변..