본문 바로가기

전체 글189

[router] 페이지 링크 이전게시글에서 vue와 spring boot를 연동해보았고, 해당 부분까지 작업이 완료 된 상태에서 화면 전환을 자유로이 하기 위해 routing작업을 진행해보았다. 01. Router란?02. 설치방법 01) CDN 02) NPM03. 적용방법 01) router객체 생성 02) router 적용 03) router-view 04) router-link 01. Router란?routing은 네트워크에서 경로를 선택하는 프로세스라고 정의하고, router는 네트워크간에 데이터 패킷을 전송하는 장치라고 정의한다. 우리가 궁금한 Vue에서의 router는 페이지 이동을 위한 라이브러리이며,페이지 이동을 위한 url 변경 시에는 미리 읽어들여놓았던 화면문서를 요청에.. 2023. 3. 22.

[구축] vue & spring boot 연동 vue 프로젝트를 서버 프로젝트와 연동하기 위한 작업 내용을 정리해보았다.window OS, intelliJ IDE로 작업되었다. 연동이라는 단어로 표현했다싶이 vue와 spring, 각각의 프로젝트를 연결하는 작업에 대한 게시물이다.01. 개요02. 작업 01) spring boot 프로젝트 생성 02) vue 프로젝트 설정 03) 실행03. 기타 01. 개요front를 오직 html과 jsp로만 진행하다가, vue나 flutter같은 framework를 활용하여 작업을 하다보니 당연히 한 프로젝트 내에서 front와 back의 작업이 일어나는 것이라는 전제가 아주 단단히 잘못된 생각이었다는 것을 깨닫게 되었다. 이래서 기본 부족한 비전공자란,,, Vue 프로.. 2023. 3. 21.

[$emit] 모달 컴포넌트(팝업) https://webruden.tistory.com/925#google_vignette Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)이번 포스팅에서 Vue.js 자식 컴포넌트에서 이벤트를 내보내는 방법을 다뤄보도록 하겠습니다. emit이란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다.webruden.tistory.com 위 참조된 링크의 게시물에서 설명한 $emit 개념을 활용하여 모달 컴포넌트를 생성해보았다.openPop이라는 변수를 활용하여 true면 모달을 표출, false라면 모달을 닫는 구조이다. 부모컴포넌트에서 openPop와 그에 대한 기능들(닫기, 열기)을 정의하고,자식 컴포넌트에.. 2023. 3. 13.

[clone] Facebook Clone Coding : Front만 vue를 직접 사용해보며 이해하기 위해 Facebook을 clone coding하였다. 이에 대한 작업은 UI에 관한 것 뿐이며, 특별한 설명 없이 github 주소를 통해 코드를 공유한다. https://github.com/Hamjeonghui/vue.git GitHub - Hamjeonghui/vue: Vue 프레임워크를 활용하여, Face Book의 구조를 벤치마킹하여 구현해냄Vue 프레임워크를 활용하여, Face Book의 구조를 벤치마킹하여 구현해냄. Contribute to Hamjeonghui/vue development by creating an account on GitHub.github.com IDE는 intelliJ를 사용하였다. 2023. 3. 13.

[CSS] 애니메이션 주기, cubic-bezier 자연스러운 애니메이션을 주기 위해 방법을 모색하던 중 cubic-bezier이라는 개념을 발견하게 되었다. 그에 대한 내용을 담은 많은 포스팅 가운데에 본인 기준으로 하여 가장 이해가 쉬웠던 게시글을 아래 참조하였다. https://kutar37.tistory.com/entry/CSS-cubic-bezier%EB%9E%80 CSS : cubic-bezier란? cubic-bezier란?cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다. #target{transition: all 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);}Colo ku.. 2023. 3. 13.

[CSS] padding 사용 시, 부모 벗어나는 문제 padding을 사용하게 되면 간혹 해당 스타일을 부여한 요소가 부모요소를 벗어나는 상황이 발생하곤 한다. 타 블로그에서 원인에 대해 설명하는 바로는 다음과 같다.자식 요소에 위치값이나 크기(%)를 주면,부모를 벗어나는 경우가 있다. - 부모 요소에 있는 padding 때문에부모를 벗어날 수 있다.이 부분을 해결하기 위해, padding을 부여한 자식 요소에 box-sizing: border-box; 속성을 추가로 부여한다면 간단히 문제를 해결할 수 있다. 이 게시글은 아래의 블로그 포스팅을 참고하여 작성되었다.https://dewworld27.tistory.com/entry/padding-%EB%B6%80%EB%AA%A8-%EB%B2%97%EC%96%B4%EB%82%A8-%EC%82%AC%EC%9D%.. 2023. 3. 13.

이전 1 ··· 4 5 6 7 8 9 10 ··· 32 다음

티스토리툴바