전체 글

React에서의 side effect와 effect hook

인자나 외부의 변수를 변경하지 않는 함수를 pure function이라고 한다. 이 pure function, 순수 함수는 만약 같은 인자를 전달 받는다면, 항상 똑같은 결과 값을 return한다. 따라서 pure function은 예측 가능한 함수이다. 하지만, 어떤 함수는 실행시 함수 외부의 환경에 영향을 줄 수 있다. // 예시 // let counter = 0; function count(){ counter += Math.floor(Math.random() * 100); } count(); console.log(counter); 위와 같은 함수는 외부의 counter 함수를 변경하며, 그 값을 예측 불가능하게 한다. 위와 같이 함수가 외부에 영향을 미치면 이를 side effect 라고 한다. 보..

Queue in Javascript

큐는 FIFO(First In First Out)의 특징을 가지는 자료구조이다. 자바스크립트에서 큐를 만든다면, 가장 쉬운 방법은 다음과 같이 .shift()를 사용하는 방법이다. const queue = []; // 큐에 삽입 queue.push(2); queue.push(3); queue.push(4); console.log(queue); // [ 2, 3, 4 ] // 큐에서 하나씩 꺼내기 const one = queue.shift(); const two = queue.shift(); const three = queue.shift(); console.log(one, two, three); // 2, 3, 4 하지만, 자바스크립트를 사용할 수 있는 많은 코딩테스트에서 shift()를 사용하면, 효율적..

프로그래머스 코딩테스트 연습 - 명예의 전당 (1) JavaScript

function solution(k, score) { const answer = []; let legend = []; for(let i of score) { if(legend.length a - b); if(legend[0] < i) { legend[0] = i; } } answer.push(Math.min(...legend)); } return answer; } 가장 낮은 숫자의 점수를 매번 새로운 점수와 비교하여 가장 높은 최상위 점수 k를 유지하는 것이 중요했던 문제였다. 힙정렬을 통해서 값이 매번 들어올 때 정렬해주는 알고리즘을 구현했으면 더 좋았겠지만, 간단하게 구현하였다.

간단 SCSS 사용법

SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다. Sass 버전 3에 추가된 것이 Scss이다. 변수 사용 $color: red; $default-margin: 15px; $colors: red, blue, green, black, white; $map: ( morning: white, night: black ); p { color: $color; } @import를 통해서 scss파일을 불러와 그 파일의 변수를 사용할 수 있다. 함수 사용하기 @function box-calculator($row: 4, $pixel: 512) { @return $pixel / $row; } .flex-box { flex: box-calculator(4, 1024); } 반복문 // for ol ..

자바스크립트(javascript) 비동기, 동기 - Promise, Callback, async, await

자바스크립트는 비동기로 작동한다. 하지만 웹 페이지의 로딩을 기다리거나, 입력을 기다리거나, 다운로드가 완료된 후에 실행되야 하는 코드가 있을 수 있다. 따라서 이때는 동기적으로 작동이 될 수 있도록 한다. // 비동기 const printHi = () => { setTimeout(() => { console.log("안녕!") }, Math.random() * 100); } const printWhat = () =>{ setTimeout(() => { console.log("우리 뭐할까?"); }, Math.random() * 100); } const printBye = () => { setTimeout(() => { console.log("잘가!") }, Math.random() * 100); } p..

운영체제에서의 동기화

프로세스는 여러개가 동시에 실행될 수 있고, I/O 요청시 CPU는 idle하지 않고 다른 프로세스의 일을 처리한다. 동기화를 통해서 여러개의 프로세스가 CPU를 공유하면서 데이터를 수정한다. 이때 수행중인 퀀텀(quantum)이 끝나면, 수정 도중에 나가야 한다. 이후 다른 프로세스가 공유 데이터에 접근하여 데이터를 사용하면, 수정중이었던 불안정한 데이터를 사용하게 되고 그 결과 예상치 못한 데이터가 산출된다. 🧨 따라서 프로세스의 최종 결과가 잘못된다. 🧨 데이터의 비일관성을 해소하기 위해서, 순차적으로 수행하는 매커니즘이 필요하다. Race Condition 공유 영역(critical-section)에서 프로세스들의 사이에 제어가 없어 예측하지 못한 값이 발생하는 상태 Critical Serctio..

React의 StrictMode란?

React.StrictMode는 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다. 와 마찬가지로, 는 추가적으로 DOM을 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화한다. StrictMode는 자손 컴포넌트의 부가적인 검사와 경고를 할 뿐이다. // index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( // React.StrictMode는 하위..

간단하게 Jest, React Testing Library 사용하기

🍅 Jest 설정하기 Create React App을 사용한다면, Jest는 이미 설정되었을 것이다. React에서 jest를 사용하기 위해서 다음과 같이 라이브러리를 설치해준다. npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react 설치한 뒤, jest 명령어를 사용하여 테스트를 할 수 있다. // package.json 수정 { ..., "scripts": { ..., "jest": "jest", }, } 테스트는 모든 .test.js 파일이 실행되며, 성공과 실패 결과가 나타난다. Support for the experimental syntax 'jsx' isn't currently enabled 에러가 발생하면, ..