본문 바로가기

programming study

 (889)
Vue.js - 뷰 필터 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 뷰 필터 애플리케이션의 데이터 형식을 일관성있게 적용할 때 유용 데이터 포매팅은 한 컴포넌트보다 여러 컴포넌트에서 사용하기 때문에, 필터를 전역으로 등록 filters에 등록하여 사용 가능 컴포넌트 필터 // 컴포넌트 ... {{ postItem.createdAt | formatDate }} ... ​ ... 전역 필터 src/utils/filters.js 전역에서 필터를 사용하기 위해 별도의 파일로 모듈화 export function formatDate(value) { return new Date(value); } src/main.js 아래와 같이 Vue 인스턴스 생성 시에 필터를 가져..
Vue.js - API 모듈화, 동적 라우팅 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. API 모듈화 프로젝트의 규모가 커질 수록 하나의 index.js에 API를 정의하는 것은 유지 보수 측면에서 좋지 않음 기능 별로 모듈화를 하여 API를 정리하기 index.js 엑시오스 초기화 관련 함수들을 모으기 기능별로 분류된 각 모듈에서 엑시오스 인스턴스를 import하여 사용 ex) 회원가입 및 로그인 관련 모듈인 auth.js에서 엑시오스 인스턴스인 instance를 import하여 관련 함수들을 정의 import axios from 'axios'; import { setInterceptors } from './common/interceptors'; ​ // 엑시오스 인..
React로 사고하기 React의 관점에서 앱을 설계하는 방식을 알아보기 1. UI를 컴포넌트 계층 구조로 나누기 디자이너와 함께 일한다면, Phtoshop 레이어 이름이 React 컴포넌트의 이름이 될 수 있음 단일 책임 원칙 하나의 컴포넌트는 한 가지 일을 하는 것이 이상적 하나의 컴포넌트가 커지게 된다면, 이보다 작은 하위 컴포넌트로 분리되어야 함 데이터 모델이 적절하게 만들어졌다면, UI가 잘 연결됨 UI와 데이터 모델이 같은 인포메이션 아키텍처를 가지는 경향이 있기 때문 각 컴포넌트가 데이터 모델의 한조각을 나타내도록 분리 2. React로 정적인 버전 만들기 컴포넌트 계층구조를 만든 이후, 앱을 실제로 구현 데이터 모델을 가지고 UI 렌더링을 하기 아무 동작도 없는 버전 다른 컴포넌트를 재사용하는 컴포넌트를 만들기..
합성 vs 상속 합성을 사용하여 컴포넌트간의 코드를 재사용하는 것이 좋음 컴포넌트에서 다른 컴포넌트를 담기 어떤 자식 엘리먼트가 들어올 지 미리 알 수 없는 경우 children prop을 사용하여 자식 엘리먼트를 그대로 전달 children 대신 다른 프로퍼티로 JSX를 전달할 수 있음 React 엘리먼트는 객체이므로 prop으로 전달 가능 function Header(props) { return ( {props.children} ); } ​ ------------------------------------------------------------------------- ​ function mainPage(props) { return ( 헤더입니다. ) } 특수화 정의한 컴포넌트를 토대로 특수한 경우에 사용할 컴포넌..
폼 HTML폼 엘리먼트는 React의 다른 DOM 엘리먼트와 다르게 동작 input, textarea, select와 같은 폼 엘리먼트는 사용자의 입력을 기반으로 자신의 state를 관리 및 업데이트 React에서는 제어 컴포넌트를 사용하여 JavaScript 함수로 사용자가 입력한 데이터에 접근하는 방법이 편리 제어 컴포넌트(Cotrolled Component) React에 의해 값이 제어되는 입력 폼 엘리먼트 React state를 신뢰 가능한 단일 출처로 만들어 폼 엘리먼트와 결합 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어 input class signupForm extends React.component { costructor(props) { super(props); this.state..
리스트와 Key 여러개의 컴포넌트 렌더링 하기 자바스크립트 배열의 프로토타입 메서드 중 하나인 map과 JSX를 활용하여 여러개의 컴포넌트 렌더링 가능 key: 엘리먼트 리스트를 만들 떄 포함해야 하는 특수한 문자열 어트리뷰트 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도움 엘리먼트에 안정적인 고유성 부여 배열의 인덱스보다는 식별할 수 있는 문자열을 사용하기 map 내부의 엘리먼트에서 key를 넣어줄 것 형제 사이에서 고유하면 됨 연속된 li 엘리먼트 렌더링하기 ... // 각 요소별로 고양이에 대한 정보 객체를 가지는 배열 const cats = [ {name: 'siru', age: 7}, {name: 'nunu', age: 6}, {name: 'mango', age: 7}, {name: 'meonji', ..
조건부 렌더링 JavaScript에서의 조건 처리와 같이 동작 if나 삼항 연산자를 활용하여 상태에 맞는 엘리먼트를 조건부 렌더링 조건이 복잡하다면, 컴포넌트를 분리할 때 상황에 따라, 가독성이 좋은 방법을 사용하기 특정 상황에서 컴포넌트 렌더링을 막으려면, 조건부로 null을 return하면 됨 예시(if) 로그인 상태에 따라 Header 컴포넌트의 문구를 다르게 출력 function Header(props) { // 부모로부터 유저가 로그인하였는지에 대한 값을 받음(boolean) const {isLoggedIn} = props; // 로그인을 한 상태면, 인사를 if (isLoggedIn) { return 안녕하세요! 환영합니다.; } else { // 로그아웃을 한 상태면, 로그인을 할 것을 보여줌 return..
이벤트 처리하기 React 엘리먼트에서의 이벤트 처리는 DOM 엘리먼트에서의 이벤트 처리와 상이함 이벤트는 소문자대신 카멜 케이스를 사용 JSX를 사용하여, 함수로 이벤트 핸들러를 전달 HTML vs. React HTML Submit React Submit 기본 동작 방지하기 기본 동작을 방지하기 위해서 리액트에서는 preventDefault를 명시적으로 호출 HTML Submit React 이벤트핸들러가 받는 event 객체는 합성 이벤트 W3C 명세에 따라 정의 됨 ... function submintInfos(e) { e.preventDefault(); console.log('clicked!'); }; ​ ... return ( Submit ); ... 클래스형 컴포넌트에서의 이벤트 핸들러 클래스형 컴포넌트에서의 ..

티스토리툴바