vue 인스타그램

이제 블로그도 끝났으니 인스타 클론코딩으로 달려봅시당…그러니 새로운 프로젝트 생성 ㄱㄱ굿굿이제는 대강 vue의 문법을 아는만큼먼저 기획부터 하고 코드를 짜는 습관을 들이는게 바람직하다.전반적으로 레이아웃은 이럼사실 피그마 쓸줄 알면 혼자서 UI디자인도 해볼텐디;; 뭐

지난번 데이터를 직접 바인딩 하는게 숙제였음일단 너무 긴 데이터는 JS파일로 ㄱㄱ그리고 꼭 export default 처리해줘야함!!안그럼 오류남 ㅠ근데 우리가 생각해봐야할 것은app.vue → Container.vue → Post.vue3가지 형태로 감싸져 있어서 이

더보기 버튼 만들거임근디 이거 맹들려면 ajax라는걸 알아야함서버에서 더보기 게시물을 가져와서 그 데이터를 HTML로 보여주는 방식서버는 그냥 단순히 데이터를 요청하면 주는 거임여기서 GET 요청과 POST 요청이 따로 있는디일반적으로 get post요청을 하면 브라우

일단 tap을 만들거임 ㄱㄱapp.vue에 따라치십셔,,,이게 tap의 시작이라고라..왕!버튼0을 누르면 내용0만 나오게끔 해야함 == 동적인 UI를 생성해야한다UI의 현재 상태를 데이터로 만들기상태에 따라 HTML이 어떻게 보일지UI의 현재 상태를 데이터로 만들기일단

URL.createObjectURL()

글 발행기능 만들기 말 그대로 글 발행기능을 만들어보자 그래서 글 발행이 뭔디; 이런식으로 내가 쓴글과 다른 포스트들이 함께 보여야 한다. 우리는 컨테이너에서 게시물의 개수 즉, post를 관리하고 있다 post를 늘리려면 그냥 데이터인 게시물만 건들면 됨 app.vue에 있는 게시물 데이터를 하나 추가해주면 그게 글 발행의 끝임 그냥 기존에...

이번 시간은 필터 기능을 맹들기~ 컨테이너 컴포넌트에서 필터박스라는 컴포넌트를 작성해주자 우엥,,.,? 우리는 그런 컴포넌트가 없는디… 그럼 만들어. 넵넵,,, 이런식으로 디자인 했습니다 근데 어떤 칸만 생기고 조그매나게 밑에 이미지는 생성이 안된걸 볼 수 있다 걍 데이터 바인딩 해주면됨 컨테이너에서 props 처리 해주고 filterbox...

지금부터 해볼거는 사진 위에 필터명을 표기해보자필터명을 부모로 부터 받아와서 표기만 해주면됨원래였으면 props 사용했겠지만 완전 편한 slot을 사용해보자보다 직관적으로 데이터를 전송할 수 있다자식은 구멍뚫기컴포넌트 태그 사이에 데이터 넣기이런식으로 하면 전달이 잘됨

오늘은 필터 선택 기능을 만들거임필터 박스를 클릭 시 app.vue에 클릭한 필터명을 전달해보자즉, 상위 컴포넌트에 전달하는거다상위 컴포넌트에 전달할때는 단순히 custom event를 사용하면 되지만상위 상위에 전달할때는 아직 우리가 모름ㅋ그게 바로 mitt 입니다.

vuex는 데이터를 주고받는 라이브러리임지금 데이터를 전송할때 props, custom event,mitt 등등 …. 이렇게 귀찮게 계속 전달하고 그래야함한번씩은 괜찮은디, 하위 하위 하위 이렇게 계층적 구조로 되어있으면 매우 귀찮아 진다이럴때 vuex를 사용하면 됨그

이번 시간에는 저번에 state 데이터를 수정할때 직접적으로 접근하면 안된다고 했었다그래서 어떻게 수정하는디;;ㅇㅇ 오늘 배울거임 수정하는 방법 ㄱㄱ지난 시간에는 이런식으로 코드를 짯음온 클릭 버튼 달아서 버튼 누르면 state가 박으로 바뀌는 직접접근 방식으로 했었다

ajax 하는 곳임or 오래 걸리는 작업들도actions 하나 맹들어 주자예를 들어서 더보기 게시물을 ajax 요청을 한다고 해보자서버에서 더보기 게시물을 가져와서 more에 저장해보자일단은 app.vue에서 more 데이터를 가져와 보자우리가 배운점들로는 mutati

사이트를 앱으로 발행하려면 어떻게 해야할까?그럴때는 PWA를 사용하면댐ㅋprogressive web app)현재는 웹이긴 하지만 사실상 인스타를 클론코딩한 만큼 앱으로 안만들기 너무 아까움;;그래서 그대로 앱으로 쓸 수는 없을까…?→ PWA사이트를 그냥 그대로 설치로

프로젝트가 커지면 커질수록데이터가 100개…함수 200개…등등 여러 코드들이 찢어지고 그거 오류나서 찾는데에만 엄처안 에너지 낭비이다관련된 코드들을 찢어놓지 않고 개발하는 방법이 뭐가 있을까?그래서 지금 알려드립니다..지금까지 따로 코드를 분리했던 방법은 Options