Frontend (35) 썸네일형 리스트형 [Vue3] Computed Property computed() : 계산된 속성을 정의하는 함수.미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다. computed를 적용하지 않을 경우- 템플릿이 복잡히지며 todos에 따라 계산을 수행하게 된다.- 이 계산을 템플릿에 여러 번 사용하는 경우에 반복이 발생한다. 남은 할 일 {{ todos.length > 0 ? "아직 남았다" : "퇴근!" }} computed 적용- 반응성 데이터를 포함하는 복잡한 로직의 경우 computed를 활용하여 미리 값을 계산 남은 할 일 {{ restOfTodos }} computed 특징- 반환되는 값은 computed ref이며 일반 re.. [Vue3] Form 입력 바인딩 (v-model) 1. v-bind와 v-on을 함께 사용- v-bind를 사용하여 input 요소의 value 속성 값을 입력 값으로 사용- v-on을 사용하여 input 이벤트가 발생할 때마다 input 요소의 value 값을 별도 반응형 변수에 저장하는 핸들러를 호출 {{ inputText1 }} 2. v-model 사용 (양방향 바인딩) {{ inputText2 }} - v-model은 단순 text input 뿐만 아니라 checkbox, radio, select 등 다양한 타입의 입력 방식과 함께 사용 가능- checkbox 활용1) 단일 체크박스와 boolean 값 활용 {{ checked }}.. [Vue3] 이벤트 핸들링 (v-on) 1. Inline Handlers- 주로 간단한 상황에 사용한다.- v-on은 생략하고 @만 쓸 수 있다. Add 1 Count: {{ count }} 2. Method Handlers- Inline handlers로는 불가능한 대부분의 상황에서 사용한다.- 기본 DOM Event 객체를 자동으로 수신한다. Hello Inline Handler에서의 메서드 호출- 메서드 이름에 직접 바인딩하는 대신 Inline Handler에서 메서드를 호출할 수도 있다.- 이렇게 하면 기본 이벤트 대신 사용자 지정 인자를 전달할 수 있다. Inline Handlers에서의 event 인자에 접근하기- Inline Handlers에서 원래.. [Vue3] 동적 데이터 바인딩 (v-bind) 1. Attribute Bindings- HTML 속성 값을 Vue의 상태 속성 값과 동기화되도록 한다.- v-bind는 생략하고 : 만 쓸 수 있다. Move to url - 대괄호로 감싸서 argument에 Javascript 표현식을 사용할 수 있다.- 대괄호 안에 작성하는 이름은 반드시 소문자로만 구성 가능하다. (브라우저가 속성 이름을 소문자로 강제 변환)- Javascript 표현식에 따라 동적으로 평가된 값이 최종 argument 값으로 사용된다. Dynamic Attr 2. Class and Style Bindings- 클래스와 스타일 모두 속성이므로 v-bind를 사용하여 문자열 값을 할당할 수.. [Vue3] 템플릿 문법 1. Text Interpolation- 이중 중괄호 구문(콧수염 구문)을 사용한다.- v-once directive를 사용하면 렌더링 이후 값이 변경되어도 처음 렌더링 할 때의 값을 유지한다. Message: {{ msg }} once : {{ msg }} msg 변경 2. Raw HTML- 콧수염 구문은 데이터를 일반 데이터로 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용해야 한다. {{ rawHtml }} 3. Attribute Bindings- 콧수염 구문은 HTML 속성 내에서 사용할 수 없다.- v-bind directive를 사용하여 데이터를 HTML 태그의 속성 값과 .. [Vue3] Vite를 이용하여 Vue 프로젝트 생성하기 1. npm을 사용하기 위해 Node.js를 설치한다.https://nodejs.org/ko/ 2. cmd창을 켜고 프로젝트를 생성할 폴더로 이동한다.3. npm create vue@latest 명령어를 입력하고 프로젝트 이름과 옵션을 선택하면 프로젝트가 생성된다. 4. 프로젝트 폴더로 이동하여 code . 명령어로 vs code를 실행한다. 다음과 같이 폴더와 파일들이 생성된 것을 확인할 수 있다. 5. vs code에서 터미널을 열고 npm install 명령어로 npm을 설치한다. node_modules 폴더와 package-lock.json 파일이 추가된다. 6. npm run dev 명령어로 실행한다. [React] 이벤트 처리(Handling Events) 1. 미리 함수를 만들어놓고 전달2. 이벤트 리스너에 직접 함수 작성 이 방법의 장점은 매개변수를 전달할 때 편하다는 것이다. [React] CSS 작성법(module css) 1. inline style CSS 파일을 따로 작성하지 않고 html 태그에 바로 작성한다. 객체(중괄호)로 작성해야 한다. 2. index.css 파일에 작성 index.css는 전체 프로젝트에 영향을 미치고 App.css는 앱 컴포넌트에 한정된 내용들이 들어가 있다. 그런데 한 가지 문제점이 있다. App.css는 앱 컴포넌트에만 적용되는 것이 아니다. App 컴포넌트에 있는 box와 Hello 컴포넌트에 있는 box 모두에 Hello.css가 적용되었다. 같은 클래스명이라서 오버레이된다. CSS 파일들이 각 컴포넌트에 종속되는 것이 아니라 head 부분에 들어가기 때문에 전 페이지에 영향을 미치게 된다. 3. CSS module 각 컴포넌트에 특화된 CSS를 작성하기 위해서 모듈을 활용할 것이다... 이전 1 2 3 4 5 다음
