텍스트 보간법데이터 바인딩데이터 바인딩의 가장 기본형태는 {{ data }}를 사용하는 것이다.{{ }} 안에는 data뿐만 아니라 JavaScript 표현식도 사용 가능하다.{{ message }}와 같이 사용하면 컴포넌트 인스턴스의 message 값으로 대체된다.message 속성이 변경될 때마다 갱신된다. v-once한 번만 렌더링을 하고 데이터가 변경되어도 갱신되지 않게하기 위해 사용한다.일회성 보간을 수행한다.예시 두 데이터 바인딩의 차이예시⬇️⬇️ 실행 결과 ⬇️⬇️ v-htmlv-html 디렉티브를 이용하여 실제 HTML로 출력할 수 있다.웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS 취약점으로 이어질 수 있어서 신뢰할 수 있는 콘텐츠에서만 사용하여야 한다.예시⬇️⬇️ 실행 ..

기간2024.06.24 ~ 2024.06.28 그동안 ..그 동안 FastAPI, Vue, Machine Learning, Deep Learning 전처리 및 예측/학습/추론 등 정말 많은 것을 배웠고,학습한 것을 기반으로 팀프로젝트를 진행하였다.우선, 우리 팀의 프로젝트는 OTT와 배달을 믹스하여, 영화를 보면서 치킨과 맥주 등을 추가로 구매하면 배달(?)까지 해주는 서비스이다.물론, 배달까지 해주는건 배민과 같은 서비스를 결합하지 않는 한 말이 안되기때문에, 이런 상업적인 요소까지는 생각을 배제하고, "일단 만들어보자"가 우리팀의 취지이다. 나는 우선, 지금까지 거의 프론트쪽 작업만 맡아서 하게되었고, 아래는 내가 만든 페이지의 결과이다.페이지는 다른 유명한 OTT 플랫폼인 넷플릭스, 티빙 등의 사..

Composition API 사용을 위한 진입점 역할을 한다.라이프사이클(lifecycle)에서 컴포넌트 인스턴스가 생성되기 전에 실행된다.반응형 API를 사용하여 반응형 상태를 선언하고 setup()에서 객체를 반환하여 에 노출시킬 수 있다.setup()의 첫 번째 매개변수는 props이고, 두 번째 매개변수는 setup context 객체이다.예시⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️ setup() 안에서 반응형 상태를 선언하고 객체로 반환하게 되면 template과 컴포넌트 인스턴스에서 사용할 수 있다.이 때 setup() 안에서 반응형 상태를 선언했으면, 반드시 return을 해주어야 한다.메서드 또한 반응형 상태와 마찬가지로 사용방법이 똑같다. propssetup 함수의 첫 번째 매개변수이고, ..

Composition API는 옵션(data, methods, ...)을 선언하는 대신 가져온 함수(ref, onMounted, ...)를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트를 말한다.Composition API는 성격에 따라 반응형 API(Reactivity API), 라이프 사이클 훅(Lifecycle Hooks), 종속성 주입(Dependency Injection) API로 구분된다. 반응형 API(Reactivity API)반응하는 데이터와 관련된 API 세트이다.예를 들어 ref(), isRef(), reactive()와 같은 API를 사용하여 reactive state(반응 상태), computed state(계산된 상태), watchers(감시자)와 같은 것들을 만들 수 ..

모듈자바스크립트 코드를 재사용할 수 있도록 분리한 파일을 모듈이라고 한다. 컴포넌트UI를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 컴포넌트를 사용하는 이유컴포넌트를 사용하면 UI를 재사용할 수 있다.프론트엔드 개발을 하다보면 반복적으로 사용하는 코드들이 있는데, 이런경우 컴포넌트로 캡슐화 하여 필요한 곳에서 사용할 수 있다. 컴포넌트를 사용하여 UI를 독립적으로 나눔으로써 코드를 클린하게 할 수 있다.프론트엔드 개발을 하다보면 코드가 길어져 유지보수가 힘들 수 있는데, 이럴 때 컴포넌트로 독립적으로 분리함으로써 코드를 간결하게 하여 유지보수에 용이하다. 컴포넌트 없이 사용해보기 ⬇️⬇️⬇️ 실행 결과 ⬇️⬇️⬇️짧은 코드이지만 긴 코드라고 가정한다면 위의 코드는 가독성이 떨어지고, 반복되는..

UI 개발을 위한 JavaScript 프레임워크이다.HTML, CSS, JavaScript를 기반으로 이루어져있고,이것들을 기반으로 웹 애플리케이션을 보다 쉽고, 효율적으로 개발하는데 도움을 준다. JavaScript와 Vue의 차이선언적 렌더링(Declarative Rendering)Vue는 템플릿 구문( {{ 데이터 }} )을 활용하여 데이터를 선언적으로 출력(렌더링) 할 수 있도록 한다. 반응성(Reactivity)Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트한다. React와 Vue의 공통점/차이점공통점가상 DOM을 사용한다.반응적이고 조합 가능한 컴포넌트를 제공한다.라우팅 및 전역상태를 관리하는 라이브러리가 있다. 차이점React는 ..

기간2024.06.03 ~ 2024.06.07 한 주를 마치며어느 덧 캠프에 참여한지 5주가 지났다.이번 한 주 동안 새로 오신 강사님의 수업 방식에 완전히 적응해가고 익숙해지기까지 오랜 시간이 걸리지 않았다.내가 느낀 강사님은 애자일(Agile) 개발 프로세스를 강조하시고 중요하게 생각하시는 분이신 것 같았다.전에 다니던 회사에서도 애자일 개발 방법을 도입하였지만, 실제로 개발하면서 제대로 된 애자일 방법으로 진행되는 것 같진 않은 느낌이었다. "왜 회사에서 잘 되지 않았을까?" 라고 다시 생각해보면 개발자들 뿐만 아니라 PM, 디자이너, 기획자 등 프로젝트에 참여한 모든 인원이 애자일 방법에 대해 잘 이해하고 사용할 줄 알아야 하지 않았을까? 라는 생각이 들게 되었다.아무튼, 새로 오신 강사님은 애..

https://www.acmicpc.net/problem/10828 10828번: 스택첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.www.acmicpc.net알고리즘 분류 : 구현 자료 구조 스택 스택가장 먼저 들어간 자료는 맨 아래쪽에 쌓이고, 가장 나중에 들어간 데이터는 제일 위에 쌓이기 때문에 먼저 들어간 자료일수록 나중에 나오고, 늦게 들어간 자료일수록 먼저 나오는 데이터 구조로 이를 후입선출 구조라고 하며 영어로는 LIFO = Last In First Out라고 한다.Python에서는 리스트..