Jieunny의 블로그

📣 컴퓨터 구조 𝟭. 컴퓨터의 구조 ✔️ 컴퓨터는 하드웨어와 소프트웨어가 합쳐진 형태 ➰ 하드웨어 : 전자 회로 및 기계 장치로 되어있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성 ➰ 소프트웨어 : 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램 𝟮. 컴퓨터의 기본 구성 요소 1️⃣ 입력 장치 ✔️ 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 ➰ 키보드, 마우스, 스캐너, 타블렛, 조이콘 등 2️⃣ 출력 장치 ✔️ 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 ➰ 모니터 : 컴퓨터에서 나오는 글자, 그림 등의 결과를 화면에 보여주는 장치 ㄴ 실제 화면의 해상도는 모니터와 그래픽 카드에 의해 결정 ➰ 프린터 : 전자 장비에 저..

📣 코드 분할 𝟭. 코드 분할이란? ✔️ 런타임 시 여러 번들을 동적으로 만들고 불러오는 것 ➰ 당장 필요한 코드가 아니라면 따로 분리를 시키고, 나중에 필요할 때 불러와서 사용할 수 있게 한다. ➰ Webpack, Rollup과 같은 번들러가 지원하는 기능 ➰ 페이지의 로딩 속도를 개선할 수 있다. 𝟮. 번들 분할 혹은 줄이는 법 ✔️ 번들링 되는 파일에 npm을 통해 다운받는 것에는 서드파티 라이브러리가 포함되는데 이를 따로 따로 불러와서 사용할 수 있게 한다. ➰ 서드파티 라이브러리 : 개인 개발자나 프로젝트 팀, 혹은 업체등에서 개발하는 라이브러리로, 즉 제 3자 라이브러리 ㄴ 플러그인이나 라이브러리 또는 프레임워크 등이 존재하며, 이 라이브러리를 잘 사용하면 편하고 효율적인 개발을 할 수 있다...

📣 Hook 이란? 𝟭. Hook ✔️ 함수 컴포넌트에서 사용하는 메서드 ➰ 함수 컴포넌트 이전에는 클래스 컴포넌트가 있었다. 𝟮. Class Component class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.handleIncrease.bind(this); } handleIncrease = () => { this.setState({ counter: this.state.counter + 1 }) } render(){ return ( You clicked {this.state.counter} times Click me ) } } ➰ 단..

📣 Virtual DOM 𝟭. Vertual DOM의 정의 ✔️ React에 있는 가상의 DOM 객체 ➰ 실제 DOM의 사본 같은 개념으로, 리액트는 실제 DOM에 접근해서 조작하는 대신 가상의 DOM 객체에 접근해서 변화 전과 후를 비교하고 바뀐 부분만 실제 DOM에 적용한다. 𝟮. Vertual DOM이 나오게 된 배경 ✔️ DOM은 애플리케이션의 UI 상태가 변경될 때마다 해당 변경사항을 나타내기 위해 업데이트(리플로우) 되고, 이렇게 DOM을 조작하는 정도가 많아지면 성능에 영향을 미칠 수 있기 때문이다. ➰ 바뀐 부분을 하나하나 리렌더링하게 된다면 비용도 많이 들고 브라우저의 속도도 늦어지게 된다. ➰ 실제 DOM 객체와 동일한 속성을 가지고 있음에도 훨씬 가벼운 사본인 virtual DOM을 ..

📣 번들링이란? 𝟭. 번들의 정의 ✔️ 사용자에게 웹 애프리케이션을 제공하기 위한 파일 묶음 ➰ 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받는다. ➰ 이 파일을 브라우저가 실행하여 멋진 웹 애플리케이션을 사용자에게 제공하게 된다. 𝟮. 번들링의 필요성 ✔️ 아래와 같은 경우가 발생했을 경우를 대비할 필요가 있다. ➰ 두 개의 .js 파일에서 같은 변수를 사용하고 있어 변수 간 충돌이 일어났다. ➰ 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소한다. ➰ 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너무 떨어져서 코딩하기가 어렵다. 결국 그대로 공백을 되돌..

📣 CSS 애니메이션 𝟭. CSS 애니메이션 ✔️ 여러 개의 CSS 스타일을 부드럽게 전환시켜준다. ➰ @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짜여진 애니메이션을 만들 수 있다. 𝟮. @keyframes 1️⃣ CSS로 키프레임 블록 만들기 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값; } } 2️⃣ 키프레..