AI Platform / Web

javascript에서 파일 타입을 확인/제한하는 방법, React에서 파일 타입을 확인/제한하는 방법, Nextjs에서 파일 타입을 확인/제한하는 방법에 대해 모두 알아보자. 기본적으로 파일을 업로드하는 로직이 있어야 한다. JavaScript 파일 업로드 type 제한 우선은 HTML/JavaScript 로직으로 우선 확인을 해보자. 상태창 input element를 통해 파일을 추가할 수 있도록 만든다. 그리고 자바스크립트 로직을 아래와 같이 작성해 준다. // Our application only allows GIF, PNG, and JPEG images const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; const input =..

로그인 화면을 들어가 보면 마우스를 클릭할 필요 없이, 바로 input 창에 커서가 올라가 있는 것을 확인 할 수 있다. 이러한 방법을 autofocus라고 한다. 관련 내용을 보면서 구현까지 해보도록 하자. autofocus 페이지 로드 시 별도의 클릭없이 지정한 input창에서 바로 작성을 가능하게 할 수 있도록 하는 기능을 만들어 보자. 이러한 기능을 autofocus라고 한다. 기본적으로 vanilla javascript로 작성을 해보자. 당연히 react에서도 focus를 사용할 수 있다. 아래의 예시를 처음부터 자세히 본다면, 앞으로 autofocus를 마스터 했다고 할 수 있다. react/nextjs에서 autofocus를 사용하는 방식은 약간 다르다. 관련 내용은 아래의 링크를 참고하자...

javascript의 변수를 다른 값으로 복사를 하려고 한다. 이때 우리의 생각처럼 복사가 이루어지지 않는다. 왜냐하면 자바스크립트의 복사 방법은 깊은 복사와 얕은 복사로 나누어 지기 때문이다. 보통은 아래와 같이 변수를 만들어서 복사를 한다. let a = '10'; b = a; 매우 간단한 예이다. 우리는 b에 10이 담겨 있음을 직관적으로 이해할 수 있다. 여기서 변수란, 값을 저장하기 위한 메모리 공간을 식별하기위해 붙인 이름이다. 즉, 변수 사용 시 자바스크립트 엔진은 변수에 메모리 주소를 기억하게 하여, 변수 사용 시 저장된 메모리 주소로 가서 저장된 값을 가져온다. 이러한 방식은 아래의 타입에 따라 약간씩 다르다. 1. Primitive Type (원시 타입) 원시 타입에는 number, s..

javascript의 작동 방식에 대해 알아보자. 동기적 방식과 비동기적 방식에 대한 근본적인 원리에 대해 심층적으로 알아보자. 1. Javascript의 동기적 작동방식 우선 코드를 보자. function one() { two() console.log('one') } function two() { console.log('two') } one() 위의 코드는 어떻게 작동할까? 결과는 아래와 같다. two one one 함수를 실행한다. one 내부의 two 함수가 실행된다. console.log('two') 가 실행된다. console.log('one')이 실행된다. 위의 예시로 Javascript는 위에서 아래로 실행되고, 왼쪽에서 오른쪽으로 실행되는 것을 확인할 수 있다. 이렇게 순서대로 실행되는 것..

nodejs를 통해 백엔드를 만들거나 react로 프런트를 만들 때, null 이나 undefined를 피하기 위한 분기를 조금더 똑똑하게 해보자. 1. Nullish coalescing operator (??) 우선은 병합 연산자에 대해 알아보자. 병합 연산자는 왼쪽 피연산자기 null이거나 undefined의 경우는, 오른쪽 피연산자를 반환하고, 그렇지 않은 경우는 왼쪽을 반환한다. 아래의 예를 보자. const foo = null ?? 'default string'; console.log(foo); // "default string" const aoo = undefined ?? 'default string'; console.log(aoo); // "default string" const boo = ..

디바운싱(debouncing)은 연속으로 호출되는 함수들 중에 마지막 함수만 호출되도록 하는 것이다. 웹 이벤트를 제어하는 방법 중 하나로 쓰로틀링(throttling)과 많이 나오는 개념 중 하나이다. 디바운싱의 예로 가장 많이 나오는 것은 웹 페이지의 스크롤이라고 할 수 있다. 웹 페이지 스크롤을 하면 연속적인 동작이다. 이러한 연속적인 동작에서 마지막에 호출되는 함수만 사용할 수 있도록 만드는 것이 디바운싱이라고 할 수 있다. input과 관련된 디바운싱 예시, 스크롤과 관련된 디바운싱 예시, react에서 hook으로 사용되는 디바운싱 예시도 담았다. 아래의 내용을 통해 디바운싱에 대한 이해도를 높여보자. 디바운싱 디바운싱은 따로 함수가 존재해서 코드 하나로 사용할 수 있는것은 아니다. 즉, 프로..

개발 언어를 공부하다 보면, 람다 함수를 만나게 된다. 자바스크립트에서의 람다는 무엇인지 알아보자. 그리고 일반 함수와 익명 함수의 차이를 이해하고 익명 함수를 포함하는 람다 함수를 비교해 보자. 람다 함수 람다 함수(=람다 식)은 프로그래밍 언어에서 사용되는 개념이다. 프로그래밍 언어학 적으로 공부를 하면, 한 달 내내 공부해도 습득하기 어렵다. 여기서는 Javascript에서의 람다 함수에 대해 핵심만 파악해 보도록 하자. 자바스크립트에서 람다 함수를 알기위해서는 우선 일반 함수와 익명함수를 알아야 한다. 일반 함수 기본형 아래의 코드를 보면 함수명이 포함되어 있는 것을 알 수 있다. function 함수명(){ 함수 로직 } 익명 함수 기본형 function() { 함수로직 } 위의 일반함수와 익명..

Promise에 대한 기초에 대해 정리해 보려고 한다. 우선은 아래의 코드를 보자. 이해가 되는가? 이해가 되지 않는다면, 이곳에서 알아가 보자. const Loading = async () => { await new Promise((resolve) => setTimeout(resolve, 1000)) }; 1. promise promise는 시간이 걸리는 비동기 작업에 대해, 성공/실패를 나타내는 객체이다. 그리고 함수에 콜백을 전달하는것이 아닌 콜백을 첨부하는 객체라고도 할 수 있다. 이말을 조금 더 쉽게 적어보면, 성공/실패를 나타내는 함수를 호출할 수 있게 담아서 전달해 주는 것이라고 할 수 있다. 아래의 예시를 보자. function successCallback(result) { console...