전체 글

만약 깃허브 팀원의 커밋을 실수로 삭제한 경우, 아래와 같은 단계를 따를 수 있다. version (1) : 커밋을 실수로 삭제한 상태에서 되돌려 팀원의 작업을 복구 1. 커밋 복구 커밋을 삭제하기 전 상태로 복구한다. 깃(Git)은 변경 이력을 유지하므로, 이전 커밋으로 되돌릴 수 있습니다. 삭제한 커밋의 해시를 확인한다. $ git reflog 2. 커밋을 되돌리기 삭제한 커밋으로 되돌립니다. 이를 위해 해당 커밋의 해시를 사용한다. $ git checkout -b recovery-branch 3. 커밋 적용 되돌린 커밋을 적용하고 변경 사항을 확인한다. & git log 4. 변경 사항 병합 복구한 변경 사항을 현재 작업 중인 브랜치로 병합한다. & git checkout your-branch & ..

Router Route / Router Route 라우트(경로)는 URL과 그 URL이 표시해야 할 컨텐츠 사이의 매핑이다. 즉, 웹 애플리케이션에서 사용자가 접근할 수 있는 개별 경로나 페이지를 지정한다. 예를 들어, /about URL에 접속하면 "About Us" 페이지를, /contact URL에 접속하면 "Contact Us" 페이지를 보여주는 것을 말한다. Router 라우터는 라우트들의 모음이며, 다양한 라우트들을 관리하고 조정하는 역할을 한다. 애플리케이션에서 발생하는 URL의 변화를 감지하고, 해당 URL에 매핑된 라우트를 찾아 그에 맞는 컨텐츠를 렌더링한다. Vue Router Vue Router | The official Router for Vue.js The official Rout..

Pinia 컴포넌트들 간의 데이터 전달은 Props / Emit을 통해 가능하다. 하지만 컴포넌트들이 많고 복잡해지면, 복잡성이 증가해 코드의 가독성 및 유지 보수가 힘들어진다. 상태관리 상태 관리(State Management)는 복잡한 웹 애플리케이션에서 데이터의 흐름과 상태를 효율적으로 관리하기 위한 개념이다. 애플리케이션의 상태는 사용자 인터페이스(UI)의 시점에서 보여지는 모든 것을 포함한 데이터의 집합이다. 상태관리를 통해 여러 컴포넌트 간에 상태를 공유하고 동기화할 수 있다. Pinia Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org vue에서 ..

[실습] 1. 다음 구조를 가진 화면을 구성해보시오 hint bootstrap의 cdn은 index.html에 추가하시오 article의 반복은 v-for를 활용하시오. App.vue MainComponent.vue Main AsideComponent.vue Aside ArticleComponent.vue Article NavBarComponent.vue NavBar style.css .box{ margin: 1rem; padding: 1rem; border: 1px solid black; } index.html 2. 1. 에서 만든 article들에게 props를 통해 데이터를 전달해보시오. ArticleComponent.vue Article {{ articleNum }} MainComponent.vu..

component 컴포넌트는 재사용 가능한 독립된 코드 조각을 말한다. Vue에서는 SFC(.vue file) 형식으로 사용하며, HTML 요소들을 캡슐화하고 재조립, 중첩하여 하나의 페이지를 구성할 수 있다. 출처 : https://vuejs.org/guide/essentials/component-basics#components-basics 기본으로 주어지는 scr/App.vue 파일을 살펴보면 script의 import HelloWorld from './components/HelloWorld.vue' template의 이 있다. 이는 src/components/HelloWorld.vue 라는 컴포넌트를 활용하여 App.vue 내부에서 중첩하여 사용한 것이다. 1. 새로운 컴포넌트를 만들어 App.vu..

[실습] 1. 다음 코드를 참고하여 색상을 입력하면 텍스트이 색상이 변하도록 구현하시오. color change! App.vue color change! 2. 다음 코드를 참고하여 버튼을 클릭하면 아래 텍스트가 안보였다가, 다시 클릭하면 보이도록(toggle) 구현하시오. toggle 보일까 안보일까?? App.vue toggle 보일까 안보일까?? 3. 다음 urls을 참고하여 name을 누르면 url로 이동할 수 있는 a태그들을 만드시오. const urls = [ { name: 'naver', url: 'https://www.naver.com/' }, { name: 'google', url: 'https://www.google.com/' }, { name: 'github', url: 'https:/..

Vue 문법 예시로 주어진 src/App.vue를 vbase-3-setup을 사용하여 빈 템플릿으로 만들어줍니다. src/App.vue 선언적 렌더링 { }을 활용해 script에서 선언한 변수를 template에서 볼 수 있다. Hello, {{ myText }} 속성 바인딩 요소의 속성 앞에 v-bind: 또는 축약하여 : 를 사용하여 속성의 값을 변수의 값으로 사용할 수 있다. Hello, {{ myText }} class의 경우 여러 값을 list를 활용하여 binding 할 수 있다. Hello, {{ myText }} 이벤트리스너 vanilla javascript에서 이벤트를 활용하기 위해서는 요소 선택 => addEventListener를 활용하여 이벤트 부착의 순서를 따랐지만, vue에서는..

Vue Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Frontend 프론트엔드(Front-end)는 웹 개발에서 사용자가 직접 상호작용하는 부분을 의미하며, 웹사이트나 앱의 사용자 인터페이스(UI)와 사용자 경험(UX)을 담당하는 부분이다. 사용자와의 상호작용에는 사용자가 보고, 클릭하고, 입력하는 등 모든 것이 포함된다. HTML, CSS, JavaScript 같은 기술을 사용하며, 최근에는 Vue.js, React, Angular와 같은 프론트엔드 프레임워크를 사용하여 구현한다. CSR CSR(Client-Side Rendering)는 사용자의 브라우저에서 전체 페이지를 동적으로 렌더링하는 방식이다. 서버에서는 초기 페이지 로딩 시 ..

Ajax Ajax(Asynchronous JavaScript and XML)는 JavaScript, XML(또는 JSON)을 활용한 비동기적 정보 교환 기법이다. Ajax를 활용하여 웹페이지 전체를 리로드 하지 않고 일부만 변경할 수 있다. 비동기 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다. 데이터를 외부에서 가져오는 경우, 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있다. 완료될 때까지 기다리는 경우 네트워크의 상황, 외부 서버의 상황 등에 따라 데이터를 가져올 수 없는 경우 사이트가 먹통이 될 수 있다. 가져오더라도 시간이 오래 걸리는 경우 가져오는 동안 페이지를 사용할 수 없게 된다. python의 경우 import requests response = r..

Dom DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍 방식으로 접근하고 조작할 수 있게 해주는 인터페이스 HTML문서의 구조를 트리 형태로 나타내며, 각 노드는 문서 내의 객체(예: 태그, 속성, 텍스트 등)를 나타낸다. 즉, HTML의 요소들을 우리가 알고있는 dictionary 형태의 dataset으로 간주하여 다룰 수 있게 하는 것이다. 출처 : https://ko.wikipedia.org/ Dom 조작 JavaScript는 DOM을 사용하여 브라우저를 조작할 수 있다. 웹페이지에 해당하는 document의 title을 JavaScript를 활용해서 변경함으로써 상단 tab의 문자를 변경할 수 있다. Document HTML 문서를 의미하며, 우리가 다룰 웹페이지이..