CRA로 프로젝트를 만들면 .svg 파일을 마치 리액트 컴포넌트처럼 import 하여 사용할 수 있다. import {ReactComponent as MySvg } from "../assets/mysvg.svg; const MyComponent = () => { return } 하지만, Vite로 리액트 프로젝트를 구성하고 있다면 추가 세팅이 필요하다. 세팅 방법은 간단한데, svg관련 라이브러리를 추가로 설치해준다. 1. vite-plugin-svgr yarn add vite-plugin-svgr #npm 대신 yarn을 애용하고 있다. 2. vite.config.ts 에 플러그인을 추가해주기 vite.config.ts import { defineConfig } from 'vite'; import re..
리액트에서 컴포넌트는 JSX를 리턴하는 함수이다. function Component(props) { // jsx를 계산하는 과정 return JSX; } render 란 간단히 말해서 `브라우저에 UI를 페인트하는 것`이다. Q. 그렇다면 리액트에서 render는 무엇일까? 컴포넌트를 호출하는 것 JSX를 리턴하는 것 JSX를 브라우저에 페인트하는 것이다. Q. 리액트에서 re-render는 무엇일까? 컴포넌트 렌더링처럼 컴포넌트를 호출(call)하는 것 => 다시 함수 호출 JSX를 리턴하는 것 이전 JSX와 현재 JSX를 비교해서 다른 점(difference)을 페인트하는 것 Q. re-render 발생 시점 state가 변했을 때 => state가 setState()로 값이 변경되면 이후에 컴포넌트..
[ 클로저란(Closure)? ] 클로저는 JS라는 언어에 제약된 개념이 아니라 `함수를 일급객체로 사용하는 모든 언어`에서 사용하는 특성이다. 클로저는 언어 자체만 보면 "폐쇄"의 의미를 가지고 있으며 접근할 수 있는 변수의 범위와 대상을 제한하는 느낌에서 closure이라고 하는 것이 아닌가 싶다. A closure is the combination of a function and environment within which that function was declared. -MDN 클로저- 쉽게 표현하자면, 클로저는 `자신이 생성될 때의 환경(lexical environment)을 기억하고, 그를 사용하는 함수` 이다. // 클로저 예시 function makeAddNumFunc(num) { con..
[ Class 사용 시, extends를 남발하지 말자 ] 상속(extends 키워드)를 사용하면 코드의 중복을 줄일 수 있다는 장점이 있다. 하지만 장점만 존재하는 것이 아니다. 상속을 사용하면 코드가 "강 결합" 형태가 된다. 이렇게 되면 부모 클래스가 변경됐을 때, 다른 코드들에 모든 영향이 가게 된다. => 유지보수가 힘들어진다! 그렇기 때문에 코드의 결합은 신중하고 최대한 느슨하게 하는 것이 좋다. (꼭 상속을 한다면 1단계, 2단계 정도만) 그렇다면 대안은? 상속 대신, 의존성을 주입해주는 형태로 쓰면 된다. => 인자로 받는다는 소리 [ Class 내부에서만 사용하는 상수는 Class 안으로 넣어주기 ] 좋은 코드의 큰 기준점 2가지: 결합도와 응집도 (낮은 결합도와 높은 응집도) 함수(fu..
1. set ( functions Setter, 설정자 ) set 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩한다. const language = { set current(name) { this.log.push(name); }, log: [] }; language.current = 'EN'; language.current = 'FA'; console.log(language.log); // Expected output: Array ["EN", "FA"] 1-1. 문법 (syntax) {set prop(val) { . . . }} {set [expression](val) { . . . }} `props` : 주어진 함수를 바인딩할 속성 이름 `val` : props에 할당을 시도한 값 `ex..
Class란? class는 객체를 생성하기 위한 템플릿 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른문법과 의미를 가진다. 1. Class 정의 Class는 "특별한 함수"이다. 함수를 표현식과 선언문으로 정의할 수 있듯 클래스 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다. 클래스는 재정의될 수 없다. 재정의를 시도하면 SyntaxError가 발생한다. 1-1. Class 선언 Class 를 정의하는 한 가지 방법은 class 선언을 이용하는 것 class를 선언하기 위해서는 클리스의 이름과 함께 class 키워드를 사용한다. class Rectangle { constructor(..
로컬 캐싱이란? 로컬 캐싱이란 자주 사용되는 데이터를 컴퓨터의 메모리에 저장하는 것을 말한다. 이렇게 하면 데이터에 엑세스하는 시간이 단축되고 성능이 향상된다. 로컬 캐싱은 웹 브라우저, 운영 체제, 어플리케이션 등에서 사용된다. 로컬 캐싱의 장점 데이터 엑세스 시간 단축 시스템의 부하 감소 성능 향상 로컬 캐싱의 단점 캐시가 손상되거나 손실될 수 있다. 캐스의 크기가 커지면 메모리 사용량이 증가할 수 있다. 캐시를 적용하기에 적합한 데이터 반복적이고 동일한 결과가 나오는 기능의 반환값 업데이트가 자주 발생하지 않는 데이터 자주 조회되는 데이터 입력값과 출력값이 일정한 데이터 [적합하지 않은 데이터] 캐싱된 데이터는 데이터 갱신으로 인해 DB와 불일치가 발생할 수 있다. 그렇기 때문에 데이터 Update..
[진행 기간]: 23.07.03(월) ~ 07(금) [교육 내용] 자소서를 작성하는 방법에 대해서 알려주는 세션(개발자로서의 장점) 과제 피드백을 통한 개선 방향 제시(클린코드,비동기 코드 에러 핸들링, 함수 단일 책임 원칙, 좋은 주석, 불필요한 state 제거) React 렌더링 최적화 & 메모이제이션을 해야하는 상황 [느낀 점] 관심사 분리? 제어의 역전? 잘 와닿지 않는 개념을 쉽게 풀어 설명해준다. 물론 코드에 알려준 개념들을 자연스럽게 녹여서 적용하기는 아직은 어렵지만 생각하지 못한 방법에 대해서 알게되어 좋은 경험이라고 생각한다. 함수형 컴포넌트 위주로 작성하다보니 획일적인 방법만을 사용하려는 경향이 생겼었는데 ES6 class 문법을 통해서(물론 bind()를 써줘야 하지만) 횡단 관심사를..
- Total
- Today
- Yesterday
- ~ ^
- 프리렌더링확인법
- 항해99프론트
- grid flex
- 항해99프론트후기
- text input pattern
- D 플래그
- 부트캠프항해
- 원티드 프리온보딩 FE 챌린지
- && 셸 명령어
- 형제 요소 선택자
- getServerSideProps
- nvm 설치순서
- 원티드 3월 프론트엔드 챌린지
- Prittier
- 틸드와 캐럿
- nvm경로 오류
- fs모듈 넥스트
- is()
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 항해99추천비추천
- 타입스크립트 장점
- 프리온보딩 프론트엔드 챌린지 3월
- float 레이아웃
- 원티드 FE 프리온보딩 챌린지
- getStaticPaths
- aspect-ratio
- reactAPI
- tilde caret
- 타입스크립트 DT
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |