공부 정리 공부 정리

전체 글

• React - JSX와 Babel

  React/React 맛보기 2022. 1. 4. 23:24

  JSX const element = Hello, world!; - 문자도 HTML도 아닌 JavaScript의 확장 문법 - React.createElement 표현식 - JSX는 React 엘리먼트를 생성하면서 자바스크립트의 모든 기능을 쓸 수 있도록 도와준다 Babel - JavaScript Compiler - 컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램 - JSX 표현을 JavaScript가 이해할 수 있는 표현으로 바꿔준다 https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 왼쪽 - JSX 코..

  Read More
• React - Dom 다루기

  React/React 맛보기 2022. 1. 3. 18:56

  Dom 먼저 Dom(Document Object Model)에 대해서 알아보자 문서 객체 모델(Dom)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다. Dom은 문서를 논리 트리로 표현한다. 연습 환경 (CodeSandBox) React 등 다양한 환경에 대한 기본 설정이 되어있음 https://codesandbox.io/ CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io 바닐라J..

  Read More
• React 란

  React/React 맛보기 2022. 1. 3. 18:09

  라이브러리 vs 프레임워크 리액트에 대해서 알아보기 전에 라이브러리와 프레임워크의 차이점을 알아보자 라이브러리 - 개발 편의를 위한 도구의 모음 (공구) 프레임워크 - 기반 구조까지 잡혀있음 (공장) React 란 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React 생태계 - 구글링이 용이하다 - 관련 라이브러리(도구)가 많고, 문제를 해결할 방법을 찾기가 쉽다 - 나와 같은 고민을 하는 / 했던 사람이 많다 - 실무에서 사용할 확률이 높다 React 맛보기는 간단한 예제를 통해서 직접 따라해보며 학습을 진행하면서 React에 대해서 알아가는 시간을 가질 예정이다 참고하면 좋은 자료 1. 리액트 공식 문서 https://ko.reactjs.org/ React – 사용자 인터페이스를 ..

  Read More
• 영화 검색 이관

  프로젝트/영화 검색 (Vue) 2021. 9. 17. 16:44

  영화 검색 이관 - 기존 영화 검색 프로젝트는 SPA 로 제작되었기 때문에 SEO(검색 엔진 최적화) 문제가 발생 - 해당 프로젝트를 SSR(Server Side Rendering) 방식으로 이관(옮길) 예정 - Nuxt.js 라이브러리와 Heroku 서비스를 사용할 예정 Nuxt 프로젝트 생성 1. 프로젝트 생성 // npx create-nuxt-app 프로젝트명 npx create-nuxt-app nuxt-movie-app 2. 기존 프로젝트(Vue2) 가져오기 - 기존 프로젝트는 Vue3 로 제작되었기 때문에 Nuxt.js 에서 지원하지 않음 - 예제 Vue2 버전 코드로 진행 Heroku Node.js 등 여러 언어를 지원하는 클라우드 PaaS(Platform as a Service) 서비스 Pa..

  Read More
• Nuxt

  Vue/Nuxt 2021. 9. 17. 16:33

  Nuxt.js - Vue.js 프레임워크를 기반으로 SSR(Server Side Rendering) 웹 페이지를 만들 수 있도록 해주는 라이브러리 - SEO 등의 문제 해결 Nuxt.js 특징 - Vue 파일 쓰기 - 코드 분할 자동화 - 서버 사이드 렌더링 - 비동기 데이터 기반의 강력한 라우팅 시스템 - 정작 파일 전송 - ES6/ES7 지원 - JS & CSS 코드 번들링 및 압축 - 요소 관리 - 개발 중 Hot module 대체 - 전 처리기 지원: SASS, LESS, Stylus 등 - HTTP/2 푸시 헤더 준비 - 모듈식 아키텍처 확장 참고 https://nuxtjs.org/ The Intuitive Vue Framework Build your next Vue.js application ..

  Read More
• Open Graph

  기본 지식 2021. 9. 17. 14:31

  Open Graph The Open Graph protocol - 웹 페이지의 메타 데이터를 사용해 페이지 콘텐츠 표시를 표준화하기 위한 페이스북에서 만든 인터넷 프로토콜 - 웹페이지 타입 - 웹사이트 이름 - 콘텐츠 제목 - 웹페이지 설명 - 표시되는 이미지 - 웹페이지 URL 예시 결과 참고 https://ogp.me/ Open Graph protocol The Open Graph protocol enables any web page to become a rich object in a social graph. ogp.me

  Read More
• CSR (Client Side Rendering) 과 SSR (Server Side Rendering)

  기본 지식 2021. 9. 15. 22:53

  CSR (Client Side Rendering) SPA(Single Page Application)는 CSR 방식으로 렌더링 장점 - 초기에 HTML, CSS, JS 등 정적 파일들은 받으면, 이후에는 동적으로 빠르게 렌더링을 하기에 사용자 친화적 - 서버에 요청하는 횟수가 적어서 서버 부담이 덜하다 단점 - 초기에 정적 파일을 받을 때까지 시간이 소요된다 - SEO(검색엔진 최적화) 문제 SSR (Server Side Rendering) 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 렌더링 장점 - 초기 로딩 속도가 빠르다 (서버에서 이미 렌더링) - 모든 검색엔진에 대한 SEO 가능 단점 - 사용자 UX가 떨어진다 - 서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다 - 불..

  Read More
• E2E 테스트 - Headless 테스트 및 테스트 동영상 생성

  테스트/E2E 테스트 (Vue) 2021. 9. 15. 10:36

  E2E 테스트 - Headless 테스트 및 테스트 동영상 생성 - Headless Browser(헤드리스 브라우저)는 GUI 없는 웹 브라우저 - CLI를 통해 실행 1. /package.json 수정 ... "scripts": { ... "test:e2e": "cypress open", "test:e2e:headless": "cypress run" ... 2. npm run test:e2e:headless 실행 - /cypress/videos 폴더가 생성 - 해당 폴더 내에 테스트 동영상이 생성됨

  Read More