프론트엔드/기타 (10) 썸네일형 리스트형 리액트와 뷰 리액트와 뷰 비교 참고 https://kr.vuejs.org/v2/guide/comparison.html 다른 프레임워크와의 비교 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org [공통점] 1. Virtual DOM 사용 2. 반응형 컴포넌트를 조합하여 프로젝트 구축 3. 코어 UI 라이브러리에 집중함. 라우터 및 스토어 등의 기능은 별개의 라이브러리를 추가로 사용해야 함 [차이점] 1. 재렌더링 Vue는 재렌더링시 컴포넌트간의 종속성을 추적해 재렌더링이 필요한 컴포넌트에 한해서만 렌더링을 수행함 React는 부모 컴포넌트에 종속된 하위 컴포넌트들이 모두 재렌더링 됨. 상태 변화와 무관한 컴포넌트도! Vue는 이러한 측면에서 vue의 렌더링이 react보다 효율.. [ESLint&airbnb] 기억해 둘 스타일 가드 [리액트 사용시] 1. Prevent missing React when using JSX 'React' must be in scope when using JSX. JSX 표현식을 사용하는 모든 파일 최상단에 import React from 'react'; 를 써주자 React 를 글로벌 변수에 등록해 사용한다면 무시해도 됨. 하지만 그렇지 않을때는 파일 내에서 직접적으로 React 객체를 사용하지 않는다 해도 명시해줘야 함. 자세한 내용은 문서 참고 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md yannickcr/eslint-plugin-react React specific linting rules.. [프론트엔드 기술의 변천사] 보호되어 있는 글입니다. 암호화 로직 처리 프론트단 필수 모듈 - crypto.js [암호화 방식 개요] 서버 쪽에서 양방향 암호화를 위한 퍼블릭 키, 프라이빗 키 생성 프론트 쪽에서 AES 키 생성 후 자체적으로 pw 1차 암호화 프론트 쪽에서 생성한 AES키를 서버쪽에서 전달받은 퍼블릭 키로 암호화 서버쪽에 암호화된 AES키와 pw 전달 서버쪽은 전달받은 AES키를 먼저 복호화 하고 최종적으로 복호화된 AES키를 가지고 pw를 복호화 [세부 내용 - 프론트 동작] 1. 프론트단 AES 키 생성 - crypto 모듈 사용. 16바이트 base64 - 로컬 스토리지에 생성한 키 저장 2. 사용자 pw 암호화 - 16바이트 난수 iv 생성 - 로컬 스토리지에서 AES 키 져옴 - 난수 iv와 AES키로 crypto 모듈을 사용해 암호화 로직 생성 .. [git] 브랜치 네이밍, 웹호스팅 1. 브랜치를 이쁘게 관리하자 브랜치 명명 규칙 developer.gaeasoft.co.kr/development-guide/workflow/gitlab-style-guide/ GitLab & Git 스타일 가이드 (GitLab Style Guide) - 지어소프트 개발 가이드 GitLab & Git 스타일 가이드 (GitLab Style Guide) GitLab과 Git 사용 시에 네이밍과 문장 스타일에 대한 가이드 문서이다. 1. Group name 1.1. 규칙 단어(알파벳 소문자)와 구분자(-) 간략하게 구성 {발주기관에 대 developer.gaeasoft.co.kr 브랜치 전략 www.inbogi.com/bok/2020/04/1/ [GIT] GIT branch strategy 명명규칙 및 전략.. vscode에 git 연동해 사용하기 보호되어 있는 글입니다. 프론트엔드 개발환경의 이해 (중) - 바벨, 린트 참고 강좌 - [김정환] 프론트엔드 개발환경 이해 www.youtube.com/playlist?list=PL9mhQYIlKEhcQStzo0dQiBThjwU8TroCt 토크ON 68차. 프론트엔드 개발환경 이해 | T아카데미 T아카데미 온라인 강의- [토크ON세미나] 프론트엔드 개발환경 이해 (총8강) ▶ https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 [과정 소개] 이번 강의에서는 NPM 프로젝트와 모듈 시스템 www.youtube.com 1. 바벨 Babel - 크로스 브라우징 - ES6, 타입스크립트, JSX 등이 브라우저에 상관없이 동작하도록 변환해(트랜스파일) 호환성을 맞춰줌 - 파싱(Parsing), 변환(.. 프론트엔드 개발환경의 이해 (상) - npm, 웹팩 참고 강좌 - [김정환] 프론트엔드 개발환경 이해 www.youtube.com/playlist?list=PL9mhQYIlKEhcQStzo0dQiBThjwU8TroCt 토크ON 68차. 프론트엔드 개발환경 이해 | T아카데미 T아카데미 온라인 강의- [토크ON세미나] 프론트엔드 개발환경 이해 (총8강) ▶ https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 [과정 소개] 이번 강의에서는 NPM 프로젝트와 모듈 시스템 www.youtube.com 1. 프론트엔드에서 node.js의 필요성 1) 최신 스펙으로 개발 - 바벨, 웹팩, npm과 같은 노드 기반 개발환경은 typescript, SASS/SCSS 등의 고수준 프로그.. 이전 1 2 다음
