프로그래밍/etc
[WEB] 성능 측정 키 메트릭
[WEB] 성능 측정 키 메트릭
2022.01.19🎯 성능 측정 키 메트릭 📝 웹 퍼포먼스 웹 페이지가 로드되고 유저와 상호작용하는 모든 것들을 측정하는 성능 측정 방법 성능을 측정하여 웹앱의 사용성을 개선할 수 있다. 열악한 네트워크 환경에서도 사용 가능한 앱을 만드는 등 좋은 유저 경험으로 유저의 만족을 얻을 수 있다. 📝 Time To First Byte 페이지 요청 후, 처음 데이터가 도착하기까지 걸리는 시간 요청을 받았을 때, 서버에서 처리하는 시간이 오래 걸리거나, 네트워크가 딜레이 되는 등의 상황 발생 시 지표가 악화된다. 📝 First Contentful Paint 페이지에 진입하고부터, 브라우저가 어떤 DOM Content를 만들 때까지 걸리는 시간 페이지 진입 후 FCP까지 평균 3초 이상 걸리면 성능 개선이 필요 📝 Time to I..
[WEB] SSR과 CSR 차이점
[WEB] SSR과 CSR 차이점
2022.01.19🎯 SSR과 CSR 차이점 Server Side Rendering, Client Side Rendering에 대해 알아보자! 📝 Server Side Rendering 📕 Server Rendering React, Vue, Angular 등 자바스크립트 프레임워크가 나오기 이전 초기 웹 환경에서는 모든 페이지를 서버에서 빌드했다. 클라이언트는 별도의 처리 없이 웹페이지 노출 이를 Server Rendering이라고 한다. 즉, 서버에서 페이지를 렌더링 해준다. 📕 Server Side Rendering Server Rendering을 MPA(Multi Page application)라고 부른다. 서버에서 자바스크립트를 이용해 페이지를 미리 빌드한다. 컴포넌트 생성에 필요한 API 요청, routing, ..
[Sass] Sass 맛보기
[Sass] Sass 맛보기
2022.01.11🎯 Sass 맛보기 Syntactically Awesome Style Sheets. CSS Preprocessor. SCSS, Sass 문법을 지원한다. 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장. styled-components는 Sass를 기본적으로 지원한다. 📝 & .reset-button { &.active {} &.disabled {} &:hover {} &:not(:first-of-type) {} & + & {} & ~ & {} & > button {} } &는 자기 자신을 나타내는 placeholder다. &.active {}는 컴파일하면 reset-button.active{}로 치환된다. 기존 CSS의 sel..
[Prettier] Delete `␍`eslintprettier/prettier 오류 해결 방법
[Prettier] Delete `␍`eslintprettier/prettier 오류 해결 방법
2021.12.01🎯 Delete `␍`eslintprettier/prettier 오류 해결 방법 🛠 .eslintrc.js 'prettier/prettier': [ 'error', { 'endOfLine': 'auto', } ] .eslintrc.js에서 위 코드를 추가해주면 된다. 🛠 .eslintrc.js 정리 module.exports = { env: { browser: true, commonjs: true, es2021: true, node: true, }, plugins: ["prettier"], extends: ["eslint:recommended", "plugin:prettier/recommended"], parserOptions: { ecmaVersion: 13, }, rules: { semi: ["err..
[Prettier] Prettier 설치하기, 설정 방법
[Prettier] Prettier 설치하기, 설정 방법
2021.12.01🎯 Prettier 설치하기, 설정 방법 개발자가 작성한 코드를 정해진 코딩 컨벤션을 따르도록 변환해주는 도구 ESLint랑 함께 많이 쓰인다. [ESLint] ESLint 설치하기, 설정 방법 🎯 ESLint 설치 및 사용법 📝 설치 및 설정 # install ESLint npm install eslint --save-dev # set up a configuration file npx eslint --init 질문 해석 나의 답변 How would you like to use ESLint? ESLint.. lakelouise.tistory.com 📝 설치 및 설정 npm install --save-dev --save-exact prettier --save-exact는 버전이 달라지면서 생기는 스타일의 ..
[ESLint] ESLint 설치하기, 설정 방법
[ESLint] ESLint 설치하기, 설정 방법
2021.12.01🎯 ESLint 설치 및 사용법 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다. 📝 설치 및 설정 # install ESLint npm install eslint --save-dev # set up a configuration file npx eslint --init 질문 해석 나의 답변 How would you like to use ESLint? ESLint를 어디에 사용할거니? To check syntax and find problems What type of modules does your project use? 플젝에서 어떤 타입의 모듈을 사용할거야? CommonJS (require/exports) Which fr..
[Axios] Axios 사용법
[Axios] Axios 사용법
2021.11.22🎯 Axios 사용법 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리이다. 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사용되는 것 비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 한다. React에서 OpenAPI를 이용한 통신을 할 때 Axios를 주로 사용 📝 Fetch vs Axios Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리이다. Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않다. Axios의 경우 설치 과정이 필요하다. Fetch는 일부 예전의 인터넷 ..