✍ 공부

[ 프론트엔드 개발환경 ] 웹팩

0. 태초에 혼돈이 있었다 혼돈이 아니고서는 이것을 설명할 수 없었다. 문법 수준으로 모듈이 지원되기 시작한 것은 ES2015부터인데, 이 전 상황은 혼돈 그 자체다. 모든 코드가 하나의 HTML 파일 안에서 실행되면서. 모든 함수가 전역 공간에 노출된다. 따라서 다른 파일에서 같은 이름을 쓰면 충돌이 일어난다. => 모든 파일의 모든 함수명을 다르게 작성해야 했다 1. 스코프 사용 따라서 함수 스코프를 사용하게 되었다. iife방식의 모듈을 이용해 함수 스코프를 만든다. 따라서 외부에서 접근할 수 없는 '함수 스코프'라는 공간에 함수가 격리된다. => 함수 외부에서(같은 파일에서도) 같은 이름을 사용하더라도 충돌이 일어나지 않는다. == 접근할 수 없다 이러한 방시을 이용해서 각 커뮤니티 각각의 스펙을..

Babel이란 무엇일까?

0. 바벨이란? 바벨은 입출력이 모두 자바스크립트인 컴파일러다. ( 소스 대 소스 컴파일러 ) ECMAScript2015+ 코드를 모든 모든 브라우저에서 동작하도록 호환성을 지켜준다. JSX 문법, 타입스크립트(정적 타입 언어), 코드 압축 등도 포함한다 📌 알고 넘어가기 컴파일러 한 언어로 작성된 소스 코드를 다른 언어로 변환한다 트랜스파일러 한 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것 추상화 수준을 유지한 상태로 코드를 변환한다. 트랜스파일 후에도 여전히 코드를 읽을 수 있다 1. 사용 이유 브라우저마다 사용 언어가 약간씩 달라서 코드를 이해하지 못하는 브라우저가 있을 수도 있다 컴파일러인 바벨은 ES2015+ 이상의 코드들을 모든 브라우저에 맞게 동작하게 도와준다. 따라서 크로스 브..

[ TIL ] React.memo() 적절하게 사용하기

0. 사용 이유 ✍ 리플로우와 리페인트 브라우저가 렌더링 된 후 모종의 이유로 레이아웃이 변경될 때 마다 브라우저는 렌더링 된 부분을 업데이트 하는 과정에서 전체 화면을 다시 렌더링하게 된다. 이 과정에서 '리플로우(Reflow)'와 '리페인트(Repaint)'가 발생하게 된다. 리플로우( Layout ) 렌더 트리의 노드들이 뷰포트 내에서 어떻게 위치되어야 하는지 정보를 계산하는 단계. 이 단계를 통해 디자인 속성을 픽셀 단위로 변환. 리페인트( Paint ) 렌더 트리에 만들어진 노드를 실제로 화면에 그리는 단계. 레이아웃에 영향을 주지 않는 스타일 속성의 변경은 reflow를 수행하지 않고 paint 과정만 수행한다. 따라서 가급적이면 리플로우가 발생하는 스타일 수정보다 리페인트가 발생하는 스타일만..

[ TIL ] 파이썬 전역변수와 지역변수

✍ 전역변수와 지역변수 0. 메인스크립트에 선언되면 전역변수 def DFS1(): # ✨ def 1 print(cnt) def DFS2(): # ✨ def 2 if cnt == 5: print(cnt) if __name__ == '__main__': cnt=5 # ✨ 1 DFS1() # ✨ def 1 DFS2() # ✨ def 2 print(cnt) 1 : 전역변수 이 한 줄에 담긴 의미 : cnt라는 변수가 생성되고 5라는 값이 할당됨. 변수의 생성과 값 할당까지 다 가지고 있다. 기본적으로 전역변수는 모든 함수가 접근할 수 있고 값도 변경할 수 있는 공용의 값이다. 이 전역변수가 읽힌 다음 전역변수 안에 있는 함수 DFS1()과 DFS2()를 읽어내려가게 되는데 def 1 : 함수 1. cnt라는 변..

[ TIL ] React.PureComponent란

0. 이용 목적 이용 목적을 알기 위해서는 react에 존재하는 component들에 대해서 알 필요가 있다. ✍ React.Component ES6 class를 사용하여 React 컴포넌트를 정의할 때 기초가 되는 class이다. shouldComponentUpdate를 따로 설정하지 않으면 항상 true를 반환한다. => setState 실행 시 무조건적으로 컴포넌트가 업데이트된다. ✍ React.PureComponent props와 state를 이용하여 React 컴포넌트를 정의할 때 기초가 된다. shouldComponentUpdate는 props와 state의 얕은 비교(shallow compare) 을 통해 비교한 뒤 => 변경사항이 있을 시 : true => 리렌더링 => 변경사항이 없을 시..

[ React Hook Form ] react에서 form 쉽게 이용하기 (+TypeScript)

0. 이용 목적 react에서 form을 사용해 본 사람이면 알겠지만, 더욱이 form의 개수가 한 두 개가 아닌 무더기로 있어본 경험을 해본 사람이면 알겠지만 react에서 form을 만들고 input과 button을 관리하는 데는 은근히 신경 쓸 부분이 많다. input에 작성된 값을 인식하고... 보내고... preventDefault() 까지 익숙하다면 익숙한 과정이지만 더 간결한 코드를 위해 이번 프로젝트에서 이용해 보았다. react에서 form을 작성하는게 지겹다면 꼭 한번 시도해보면 좋을 것! react 뿐만 아니라 react native에서도 사용할 수 있다 1. 설치 설치 npm install react-hook-form 혹은 yarn add react-hook-form 2. 사용 방법..

React에서 styled-component 이용하기 + typescript

사용하는 이유 styled-components는 React css 스타일링 프레임워크로, CSS in JS이다 따라서 JS에서 직접적으로 스타일에 영향을 줄 수 있다. className을 따로 지정할 필요가 없다 => 빌드 시 고유한 클래스명이 적용된다. CSS 문법을 따르기 때문에 가독성에 좋다 새로운 component를 만들고 만들어둔 component를 다른 컴포넌트에 이용할 수 있어 효율적이다. 중첩 스코프 규칙을 이용해 직관적인 코드 작성이 가능하다. 일관적인 스타일 관리가 쉽다. 반복적으로 쓰이는 요소를 정의해서 props로 가져다 쓸 수 있다. 시작하기 0. 설치 npm install --save styled-components // 기본 yarn add styled-components //..

[ CSS ]Internet Explorer, Edge, Firefox, Chrome 에서 스크롤바 없애는 법

/* 스크롤바 없애는 ie edge 코드 */ -ms-overflow-style: none; /* 스크롤바 없애는 firefox 코드 */ scrollbar-width: none; /* 스크롤바 없애는 chrome 코드 */ (스크롤바를 없애고 싶은 박스이름)::-webkit-scrollbar { display: none; } 짠~ 이게 끝입니다 브라우저마다 스크롤바 유무가 달라질 수 있으니 세 코드르 다 작성해주시는걸 추천드립니다