전체 글

async/await

[Javascript/자바스크립트] async await async/await 문법은 ES8에 해당하는 문법으로, Promise 를 더욱 쉽게 사용할 수 있게 해준다. 사용법 async/await 문법을 사용할 때에는 함수를 선언할 때 함수의 앞 부분에 async 키워드를 붙여준다. 그리고 Promsie 앞 부분에 await 을 넣어주면 해당 프로미스가 끝날 때 까지 기다렸다가 다음 작업을 수행할 수 있다. function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log(..

Promise

[자바스크립트/Javascript] Promise Promise 프로미스는 비동기 작업을 조금 더 편하게 처리할 수 있도록 ES6에 도입된 기능이다. 이전에는 비동기 작업을 처리 할 때에는 콜백함수로 처리 했어야 했는데, 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었다. 예시) 숫자 n을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현해보자. function increaseAndPrint(n, callback) { setTimeout(() => { const increased = n + 1; console.log(increased); if (callback) { callback(increased); } }, 1000); } increaseAn..

[Pycharm] 특정 파일이 다른 확장자로 인식되는 경우

[파이참/Pycharm] 특정 파일이 다른 확장자로 인식되는 경우 처음 파일을 생성할 때 특정 파일 타입을 지정해서 생성하는 것이 아닌 File로 생성할 때 확장자를 빼먹고 파일이름만 작성할 경우 기본적으로 text 확장자로 파일이 생성되게 된다. 예를 들어 파일을 생성할 때 파일 이름을 'index' 이라고 작성했다고 해보자. (기존의 index.html 파일은 무시) 확장자를 작성하지 않았을 때는 기본적으로 text 파일로 생성되기 때문에 'index' 이라는 이름을 가진 파일의 타입을 text 로 자동으로 지정할 것인지 물어본다. 여기서 그냥 창이 떠서 OK 누르는 경우가 많은데 나중에 index.html 같이 'index' 이라는 이름으로 특정 확장자를 가진 파일을 생성하려고 하면 아무리 생성해도..

비동기처리의 이해

[자바스크립트/Javascript] 비동기처리의 이해 동기적 처리와 비동기처리 만약 작업을 동기적으로 처리한다면 작업이 끝날때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있다. 하지만 이를 비동기적으로 처리한다면 흐름이 멈추지 않기 때문에 동시에 여러가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있다. 예를 들어 연산량이 많은 작업을 처리하는 함수를 만들어보자. function work() { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start..

Hoisting 이해하기

[자바스크립트/JavaScript] Hoisting 의 이해 Hoisting이란, 자바스크립트에서 아직 선언되지 않은 함수/변수를 '끌어 올려서' 사용할 수 있는 자바스크립트의 작동 방식을 의미한다. myFunction(); function myFunction() { console.log('hello world!'); } 위 코드에서 myFunction 함수를 선언하기 전에, myFunction( ) 를 호출해주었다. 함수가 아직 선언되지 않았음에도 불구하고 코드는 정상적으로 작동하게 된다. 이게 잘 작동하는 이유는, 자바스크립트 엔진이 위 코드를 해석하는 과정에서 다음과 같이 받아들이게 되기 때문이다. function myFunction() { console.log('hello world!'); } m..

[MongoDB] MongoDB application is only supported on Windows 10/Windows 2016 or later 해결 방법

[MongoDB] MongoDB application is only supported on Windows 10/Windows 2016 or later 해결 방법 윈도우10 버전 이전의 윈도우를 사용하는 경우 MongoDB 4.2 버전을 설치해서 사용하면 된다. (다운로드) 아래 링크에서 보면 지원하는 버전을 확인할 수 있다! https://www.mongodb.com/docs/manual/administration/production-notes/#prod-notes-supported-platforms

Error: [Errno 48] Address already in use 오류 해결 방법

Error: [Errno 48] Address already in use 오류 해결 방법 원인 해당 포트 번호를 다른 프로세스가 이미 사용중일 때 발생하는 오류이다. 해결 내가 실행하려는 5000포트를 실행시키려고 할 때를 예시를 들면, 기존에 5000 포트를 사용하고 있는 프로세스를 종료시키고 내 서비스를 5000포트에 띄워준다. 1. 파이참과 같은 에디터에서 run 했던 서버가 돌아가고 있지는 않은지 확인한다. 2. 기존에 사용되고 있던 프로세스 종료시키기 terminal을 열고 아래 명령어를 입력한다. netstat -aon | find "5000" 그러면 아래 형태로 보이게 된다. TCP xxx.xx.xx.xx:5000 xx.xx.xx.xxx:443 ESTABLISHED 3333 맨 마지막에 있는..

UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc0 in position 0: invalid start byte 오류 해결 방법

UnicodeDecodeError: 'utf-8' codec can't decode byte 0xc0 in position 0: invalid start byte 오류 해결 방법 원인 1. Pandas에서 인코딩 하는 방식에 있어서 한글이 포함된 csv, txt, excel 등의 파일을 읽어 들일 때 발생하게 된다. 2. 윈도우즈 경로상에 한글이 포함되어 있을 떄 Flask 실행 시 가끔 오류가 발생한다. 해결 1. 인코딩 인자에 한글 전용 인코딩 방식인 'cp949' 또는 'euc-kr' 을 파라미터로 추가함으로써 해결할 수 있다. import pandas as pd df = pd.read_csv('파일이름.csv', encoding='cp949') import pandas as pd df = pd.r..

[spread] n개의 숫자들이 파라미터로 주어졌을 때 최대값 구하기

함수 max에 n개의 숫자들이 파라미터로 주어졌을 때, 그 중 가장 큰 값을 알아내세요. function max() { return 0; } const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result); 정답 function max(...numbers) { return numbers.reduce( // acc 이 current 보다 크면 결과값을 current 로 하고 // 그렇지 않으면 acc 가 결과값 (acc, current) => (current > acc ? current : acc), numbers[0] ); } const result = max(1, 2, 3, 4, 10, 5, 6, 7); console.log(result); // 테스..

spread 와 rest

ES6부터 도입된 spread와 rest 문법에 대해서 알아보자. 서로 완전히 다른 문법이지만 비슷한 부분이 있다. spread *spread: 펼치다, 퍼뜨리다 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: 'cute' }; const purpleCuteSlime = { name: '슬라임', attribute: 'cute', color: 'purple' }; console.log(slime); console.log(cuteSlime); console.log(purpleCuteSlime); slime - 객체 선언 cuteSlime - 기존에 선언한 slime을 ..

IndentationError: expected an indented block 오류 해결 방법

IndentationError: expected an indented block 오류 해결 방법 원인 IndentationError 는 코드에서 들여쓰기 할 때 탭과 스페이스를 섞어서 사용하게 되면 발생하게 된다. 해결 오류가 발생한 줄의 코드의 들여쓰기 부분을 지웠다가 다시 작성해주면 된다. 오류가 발생한 줄은 빨간색으로 된 오류출력 코드의 끝에 File "~~~", line 13 ^ 으로 된 곳을 보면 된다. 위의 예시에서는 코드의 13번째 줄에서 오류가 난 것을 확인할 수 있다.

useCallback 으로 함수 재사용하기

확장프로그램 React devtools 설치 개발자 도구를 통해 React 라는 탭을 통해서 현재 리액트 컴포넌트의 구성을 확인할 수 있다. 설정(톱니바퀴) - Highlight Updates 를 체크하면 렌더링이 발생하는 곳을 확인 할 수 있다. useCallback useCallback 은 useMemo 를 기반으로 만들어졌다. useMemo 는 특정 결과값을 재사용할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. 사용법 useCallback 사용법도 동일하게 첫번째 파라미터로 넘어온 함수를, 두번째 파라미터로 넘어온 배열 내의 값이 변경될 때 까지 저장해놓고 재사용할 수 있게 해준다. const memoizedCallback = useCal..