4전 4전

자바스크립트에서 좀 어렵다고 생각하는 개념 중 클로저라는 것에 대해 알아보려 합니다. 그나마 쉽게 말하면 코드에서 함수가 선언될 때 그 유효범위(렉시컬 범위)를 기억하고 있다가, 함수가 외부에서 호출될 때 그 유효범위의 특정한 변수를 참조할 수 있는 개념이라고 합니다. | 예시 function count() { let a = 0; return function () { return a+= 1; } } const count1 = count(); console.log(count1()); // 1 console.log(count1()); // 2 console.log(count1()); // 3 이처럼 함수가 외부에서 호출되면 그 변수를 참조하여 값을 증가시킵니다. 또한 다른 변수로 또 호출하면 변수에 있는 값..

인터럽트 종류 외부 인터럽트 전원 이상: 정전, 파워 이상 기계 착오: CPU의 기능적인 오류 외부: 자원 할당 시간 종료, 키보드로 강제 (control + Alt + Delete), 외부 장치로부터 인터럽트 요청 입출력 인터럽트: 입출력 장치의 데이터 전송 요구 or 전송 끝난 후 다음 동작 수행야 될 때, 입출력 데이터에 이상이 있는 경우 내부 인터럽트 잘못된 명령, 잘못된 데이터 사용 프로그램 검사: Division by zero, Overflow/Underflow 인터럽트 동작 순서 인터럽트 요청 → 프로그램 실행 중단 → 현재 상태 보존(PCB, PC) → 인터럽트 처리 루틴 실행 → 인터럽트 서비스 루틴 실행 → 상태복구(PC) → 중단된 프로그램 실행 재개(PCB) PCB(Process c..

이번 패스트캠퍼스X야놀자 부트캠프 프론트엔드 과정의 HTML/CSS 과제에 대해 이야기해보려 합니다. 과제 주제 : 자신이 원하는 사이트 레이아웃 클론 1. 클론 한 사이트 클론 한 사이트 https://www.pinkfong.com/ko/index.html Pinkfong Official Website www.pinkfong.com 클론 할 사이트로는 핑크퐁 공식 사이트를 골랐는데 이유는 먼저 레이아웃이 크게 복잡하지 않고, 깔끔한 스크롤 애니메이션이 적절하게 있어서 골랐습니다. 2. 구현한 내용 레이아웃 구성 레이아웃 구성으로는 크게 header, main, footer로 나눠서 작업을 하였습니다. - header 먼저 헤더는 logo, navigation, sotial의 3가지 부분을 dispaly..

자바스크립트에 화살표 함수와 일반 함수에 몇 가지 차이가 있다고 하는데 한번 알아보겠습니다. 1. this | 일반함수 함수를 호출할 때 this 결정 일반적으로 함수를 실행하면 전역 객체인 window를 가리킴 객체의 메서드로 함수를 실행하면 해당 메서드를 소유한 객체를 가리킴 생성자로 실행하면 생성자로 만들어진 객체를 가리킴 function func() { console.log(this); } const object = { name: "Yi", func1: func, }; func(); // 전역객체 window object.func1(); // 해당 object객체 const nFunc = new func(); // 생성된 객체인 nFunc | 화살표 함수 함수를 선언할 때 this 결정 화살표 함..

리액트로 프로젝트를 할 때 create-react-app으로 시작하면 npx create-react-app ./ 아래처럼 여러 가지 파일과 폴더가 생깁니다. 당장에 프로젝트할 때 필요 없는 파일들이 있을 수 있으니까 각 파일들이 어떤 건지 알아보고 정리해 보려 합니다. | public 폴더 1. index.html 정리 먼저 아래처럼 주황색박스로 표시해 놓은 곳을 정리를 합니다. 그럼 이런 식으로 정리가 됩니다. 2. logo192.png, logo512.png, favicon.ico, manifest.json 제거 logo192.png, logo512.png - 리액트 기본 로고 이미지 이므로 제거 favicon.ico - 리액트 기본 아이콘 브라우저 위에 표시됨 본인 프로젝트 아이콘으로 대체 mani..

리액트에서 홈페이지에 코드를 작성할 수 있는 코드 에디터를 생성하고 싶을 때 react-ace 패키지를 사용하면 편하게 생성할 수 있습니다. | 설치 먼저 이런 식으로 react-ace 패키지를 설치해 줍니다. npm install react-ace ace-builds | 사용 import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-python"; // 언어를 바꾸려면 python 부분 바꾸면 됨 import "ace-builds/src-noconflict/theme-twilight"; // 태마를 바꾸려면 twilight 부분 바꾸면 됨 이런 식으로 사용하려 하는 언어와 태마 그리고 에디터를 임포트 해 온다음 function ..

useCallback()은 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 해 함수형 컴포넌트에서 반복되는 함수를 메모이제이션하여 재사용하도록 해줘 | useCallback() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 함수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 함수도 초기화되는 거라고 할 수 있습니다. function App() { // 렌더링 될때마다 초기화 const 오래걸리는함수 = (num) => { return num + 10; }; return 값: {오래걸리는함수(5)}; } useCallback()을 사용하면 메모이제이션한 함수를 제사용 하기 때문에 함수가 초기화되는 것을 막을 수 있습니..

useMemo()는 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 합니다. 메모이제이션을 하는데 이는 함수형 컴포넌트에서 반복되는 계산 값을 캐싱하여 재사용하도록 해줍니다. | useMemo() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 변수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 값도 초기화되는 거라고 할 수 있습니다. function App() { // 대충 오래걸리는 함수 const 오래걸리는함수 = () => { console.log('렌더링 됨'); return 10; }; const value = 오래걸리는함수(); // 렌더링 될때마다 초기화 return 값: {value}; } useMem..