ITRecipe

안녕하세요 itrecipe 입니다!오늘은 영화 정보 페이지 이벤트창 광고 텍스트를 순환 시키는 것을 해보고자 합니다.(라이프 사이클)을 활용하여 구현 해보도록 하겠습니다.오늘도 화이팅 입니다![App.vue] {{ eventTextNum }} 전체보기

안녕하세요 itrecipe 입니다!(6)번 포스팅에 이어서 작성되고 있는 내용이며이번에는 검색창 구현을 해보도록 하겠습니다.제가 보기 편하도록 내용을 정리하다 보니 잘 따라가기 어려우신 부분들도 분명 존재 할 수 있습니다.그런 경우는 구글링 또는 ai를 활용하시거나 유튜브도 관련 강의도 있으니 한번 찾아보시고정 안되시겠다면 댓글 달아주시면 아는대로 설명해 드리도록 해보겠습니다.저도 아직 초보자라 크게 도움이 될진 모르겠지만 성장을 위해 오늘도 화이팅 하며 노력합시다![SearchBar.vue] --> --> 검색 {{ inputText }..

안녕하세요 itrecipe 입니다!(5)번 포스팅에 이어서 작성되고 있는 내용이며이번에는 class를 동적으로 다루는 방법을 학습하여 정리해 보겠습니다![EventBox.vue] 이전에는 이렇게 작성됬었음 --> v-bind문법을 사용해서 데이터 바인딩을 해줘야 한다. --> {{ text }} X

안녕하세요 itrecipe 입니다!(4)번 포스팅에 이어서 작성되고 있는 내용이며이번에는 영화 목록을 나타내는 컴포넌트를 따로 분리해보겠습니다.현재 포스팅에서 중요한 내용은 자식이 부모에게 이벤트 변경을 요청하는 내용이 중요합니다.아래 코드와 주석을 참고해주세요!오늘도 열공 합시다![MoviesList.vue] 영화정보 {{ movie.title }} 개봉 : {{ movie.year }} 장르 : {{ movie.category }} 좋아요 {{ movie.like }} ..

안녕하세요 itrecipe 입니다.저번편에 이어서 계속 되는 포스팅이며, 이번 포스팅은 기능별 UI 구조 분리, 자식 -> 부모 컴포넌트에 데이터 전달하는 방법 그리고 자식이 부모 컴포넌트에게 데이터 변경을요청하는 방법에 대해 알 수 있습니다.저는 주로 공부할때 프로젝트 소스 파일에 주석으로 상세히 달아 정리해두고 있어서직접 만들어 보면서 필요한것들 또는 생각 안나는 것들을 바로바로 제가 편하게 보려고 정리를 해두었습니다.이 점을 참고하시면 좋겠어요!오늘도 열공 합시다.[App.vue] 정적으로 값을 보낼때 쓰는 방법 --> 영화정보 정적으로 이미지를 표현할때는 이렇..

안녕하세요 itrecipe 입니다.저번 포스팅에 이어서 계속 되는 포스팅 입니다.오늘도 열공 합시다!오늘 중요한 내용은 데이터를 외부와 내부에서 어떻게 꺼내는지 분리는 어떻게 하는지 등을 참고하고 기억하면 좋을것 같습니다.그리고 모달창 상세보기를 누르면 영화 제목이 해당하는 영화에 맞게 표시 되는 기능이 추가로 구현되었습니다.전체 코드에서 어떻게 분리된 데이터를 불러오는지 내가 선택한 영화에 상세보기를 클릭하였을떄 해당하는 정보가 알맞게 어떻게 뜨는지 아랫부분에서 정확히 확인 하면 좋을것 같습니다.[App.vue] 영화정보 정적으로 이미지를 표현할때는 이렇게 사용한다. --> 동적인 값을 넣을땐 변수로 넣어야 하는데 항상 src 앞..

안녕하세요! itrecipe 입니다.이번엔 vue.js로 저번 포스팅에 이어서 이미지와 모달창을 만들어 보려고 합니다!오늘도 열공 합시다! 영화정보 정적으로 이미지를 표현할때는 이렇게 사용한다. --> 동적인 값을 넣을땐 변수로 넣어야 하는데 항상 src 앞에 콜론을 넣어줘야 한다. "v-bind:" 문법을 사용한다. --> 컨테이너로 감싸기 --> 장르 : {{ data[i].category }} 길게 써서 데이터 바인딩을 통해 표현도 가능하지만 변수명(값)을 써서 바로 뽑는게 더 편함 --> {{ mov..

안녕하세요! 오랜만에 돌아온 itrecipe 입니다.vue3를 학습하고자 (1) ~ (8) 시리즈로 간단한 영화 정보 페이지 만들기 미니 프로젝트를 해보려고 해요!주니어 개발자분들이나 취준생 분들께 많은 도움이 되었음 좋겠네요 ㅎㅎ그럼 시작합니다! 영화정보 장르 : {{ data[i].category }} 길게 써서 데이터 바인딩을 통해 표현도 가능하지만 변수명(값)을 써서 바로 뽑는게 더 편함 --> {{ movie.title }} 개봉 : {{ movie.year }} 장르 : {{ movie.category }} {{ foods[0] }} {{ foods[1] }} {8{ foods[2] }} --> v-for="(item,..

안녕하세요 itrecipe 입니다.vue를 학습하던 도중 필요한 플러그인과 npm으로 필요한 패키지들 설정을 마치고 실행을 시켜보는데아래 좌측 부분에 파일마다 에러가 뜨네요.구글링을 통해 원인을 알아보니 VSCode에서 생성한 Vue.js 프로젝트 파일 중 바벨 설정 파일이 없거나 잘못 설정된 경우에 이런 오류가 뜰 수도 있고, VSCode에서 ESLint 설정 파일을 인식하지 못해생기는 오류일 수도 있다고 합니다.해당 오류 해결 방법이 두 가지가 있다고 하는데 하나는 .eslintrc.js 파일을 생성하는 방법, settings.json파일 수정하는 방법2가지가 있다고 하네요 저는 settings.json 파일 수정하는 방법으로 해결을 했기 때문에 해당 방법을 알려드리고자 합니다.자 VSCode 촤즉..

실습환경 : VSCode(가급적 최신 버전 사용 권장), Node.JS (20.11.1.0 LTS버전 사용)npm install -g @vue/cli [EXTENSIONS]- Vue - Offcial : 이 확장은 Vue Single File Components(SFC)의 구문 강조,코드 자동 완성, 리팩토링 지원 등의 기능을 제공합니다 - Vue 3 Snippets : Vue 3에 대한 코드 자동완성 기능 제공 (기본 템플릿 코드를 짤때 유용합니다.) 프로젝트 생성 명령 : vue create [프로젝트명] ex) vue create login-project생성한 프로젝트로 이동하는 방법 : cd movie-info- cd 명령 뒤에 프로젝트명 넣어주면 바로 이동합니다.프로젝트 실행 명령 : npm r..