AI Platform / Web

HTML 작성을 하고, js css를 넣어서 웹을 구성을 한다. 그리고 Reactjs 나 nextjs에서도 라이브러리를 이용해서 데이터를 넣는다. 이때 동기적으로 Javascript 파일을 가지고와서 핸들링을 많이한다. 오늘은 HTML 자체에서 js파일을 불러오는 방식에 대해 알아보도록 하자. 기초지만 쉽게 지나치는 부분이라 할 수 있다. 0. javascript 파일 불러오기 기본적으로 아래와 같이 javscript를 부르는 코드는 아무 위치에서나 사용이 가능하다. Hanpy javascript Test html 밖에서 사용해도 가능하다. javascript 파일을 불러오는 방식은 위와 같이 src를 사용해서 javascript 코드를 가져올 수 있다. 아니면 javascript 코드를 아래와 같이 직..

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는 위에서 아래로 실행되고, 왼쪽에서 오른쪽으로 실행되는 것을 확인할 수 있다. 이렇게 순서대로 실행되는 것..

타입스크립트를 사용하면 기본적으로 타입 추론과 체크를 진행한다. 하지만 부분적으로 타입 보장이 안되는 경우가 있다. 왜냐하면 느슨하게 타입을 확인하기 때문이다. 1. nodejs에서 타입 단언 시키기 assert를 활용해서 type을 단언하여 함수를 만들어 보자. assert() 함수는 런타임 시 불변 조건(invariant)를 검사하는 함수이다. const assert = require('assert') function add(x, y) { assert(typeof x === 'number') assert(typeof y === 'number') return x * y // number * number } add(1, 1) // 2 add('1', 1) // AssertionError [ERR_ASSE..

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 = ..

최근에 HTMLElement에 대해 기초단계에서 자세하게 알려주진 않는것 같다. 하지만, 공부를하면, 기초가 중요하다는 것을 알게되는 것 같다. react를 배우면 가상돔을 다루지만, ref과 같은 깊은 지식으로 들어갈 수록 기초의 부재는 빠른 성장을 막는다. 또한 typescript로 적용을 하다보면 상속 시 HTMLElement 에 관련된 이야기들이 많이 나온다. 오늘은 HTMLElement에 대해 이야기를 풀어볼까 한다. 깊게 들어가면 끝도 없다. 따라서 이 글을 통해 맛보기로 기초개념을 이해한 후에, 필요하다면 관련 내용을 조금 더 공부해 보기를 추천한다. 간단한 예를 추가하자면, 우리가 javascript에서 사용하는 appendChild는 Node가 제공하는 method이다. appendChi..

웹팩은 모듈 번들러로 프런트엔드 프레임워크에서 가장 많이 사용되고 있다. 쉽게 말해서 웹팩은 웹을 구성하고 있는 HTML, CSS, JAVASCRIPT 등을 모두 각각의 모듈로 보고 이를 조합해서 하나로 만들어주는 도구라고 생각하면 된다. 모듈 번들러라는 단어가 어려울 수 있지만, 쉽게 이야기하면 모듈 변환기라고 생각해도 좋다. 위 그림은 웹팩 공식홈페이지에 있는 그림이다. 그림을 보면, 복잡한 파일들을 간단하게 결합시켜주는 느낌이라는 것을 한눈에 파악할 수 있다. 시작에 앞서 nodejs에 관한 환경 설정은 아래의 url로 대체한다. [Web/nodejs] - nodejs 기초 총 정리 Webpack 프런트엔드에서 대표적인 모듈 번들러인 웹팩에 대해 알아보자. 웹팩은 복잡한 입력 모듈을 단순한 모듈로 ..

Single Source of Truth이란 단일 진실 공급원이라고 불리기도 하고, 신뢰 가능한 단일 소스라고 불리기도 하는 것 같다. 사실 길게 적을 필요도 없다. 간략하기 정의 하면 아래와 같다. 같은 내용을 중복해서 사용하지 말고, 하나의 내용을 참고 해서 사용한다는 말이다. Single Source of Truth를 웹개발로 풀어보면, 백엔드 같은 경우는 DB 핸들링을 하는 장소를 하나의 파일만 만들어서 사용하는 것과 같다고 할 수 있다. 프런트엔드의 경우는 상태관리를 전역으로 한군데 해서 하는 것 과 같다고 할 수 있다. 보통은 제어컴포넌트와 비제어컴포넌트를 이야기 할 때 많이 사용된다.

error - TypeError: resolver is not a function javascript로 코드를 적다보니, 위와 같은 에러(error - TypeError: resolver is not a function)가 발생했다. resolever의 의미는 사전적 의미는 변환기를 의미한다. 코드를 아무리 봐도 에러를 못찾겠다면, 아래의 정답을 보자. export를 적어주자. 함수를 적었지만, export해주지 않으면 호출 시 찾을 수 없어서 나는 에러이다.