분류 전체보기

Github Pages를 사용해 포트폴리오 작업한 것을 배포하는 과정에서 에러가 발생했다.발생 원인🔥🔥 확장자 🔥🔥확장자(.js, .jsx, .ts, .tsx 등)을 작성하지 않아서 발생했다.(import할 때 확인이 꼭.. 꼭.. 꼭.. 필요하다..)확장자 없이 작성해도 로컬에서 실행할 때는 아무 이상이 없었다. 이유는 아래와 같다.1. 로컬 개발 환경(Vite Dev Server)- Vite의 개발 서버는 자동으로 파일 확장자를 해석- import 시 확장자를 생략해도 .js, .jsx, .ts, .tsx 등을 순차적으로 찾아서 처리- 개발 환경에서는 Vite가 모듈 번들링을 실시간으로 처리2. 프로덕션 환경(GitHub Pages)- 정적 호스팅 환경에서는 파일 확장자를 명시적으로 지정해야 ..

값(value)💡 값은 식(표현식)이 평가되어 생성된 결과를 말한다.*평가(evaluate) : 식을 해석해서 값을 생성하거나 참조하는 것// '10 + 20;'이라는 표현식은 평가되어 30이라는 숫자 값을 생성10 + 20; // 30모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장된다.메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.예를 들어, 0100 0001은 숫자로 해석하면 65이지만, 문자로 해석하면 'A'이다.// 변수에는 10 + 20;의 표현식이 아닌 평가된 값 30이 할당된다.var sum = 10 + 20;변수에 할당되기 이전에 표현식은 평가되어 값을 생성해야 한다. 리터럴(literal)💡 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기..

MySQL💡 MySQL은 오픈 소스의 관계형 데이터베이스 관리 시스템(RDBMS)이다. 1. MySQL 설치npm install mysql// index.jsconsole.log("Hello world");npm start콘솔에 "Hello world"가 출력되는 것을 확인할 수 있다. 2. 테이블 생성 및 테스트용 데이터 삽입MySQL에 접속해 테이블을 생성하고 테스트용 데이터를 삽입한다.터미널을 이용해 해당 위치 /usr/local/mysql/bin에서 진행했다.// mysql 실행./mysql -u root -pCREATE DATABASE IF NOT EXISTS my_db;USE my_db;CREATE TABLE IF NOT EXISTS Users ( id VARCHAR(45) NOT NULL..

Express로 웹 서버 만들기💡 Express.js란?Node.js에서 웹 애플리케이션 또는 API 서버를 구축하는데 가장 많이 사용되는 대표적인 프레임워크이다.공식문서Express.js를 사용하기 위해서는 Node.js가 먼저 설치되어 있어야 한다.npm init// y는 "yes"를 의미함npm init -y각 항목에 맞게 내용을 작성하면 package.json 파일이 생성된다.package.json은 npm(node package manager)를 통해 추가되는 패키지들의 버전과 의존성 정보를 관리하는 파일이다.항목내용package name패키지 이름으로 프로젝트 혹은 현재 애플리케이션 이름을 말한다.version패키지, 프로젝트, 애플리케이션 버전을 말한다.description패키지, 프로젝트..

스플리팅 등장 배경리액트 애플리케이션의 경우 빌드를 통해서 배포를 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 좋다.왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험(UX)에까지 영향을 미치기 때문이다.또한, 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링하는 작업도 필요하다.일반적으로 이러한 작업은 빌드 도구인 Webpack, Parcel, Vite 등이 담당한다.Webpack, Parcel과 같은 경우에는 모든 자바스크립트 파일을 하나의 파일로 합치고, CSS 역시 하나의 파일로 합친다.하나의 파일로 모든 자바스크립트의 파일로 묶어서 빌드하면 파일의 크기가 매우 크고, 일부만 수정해도 다시 모든 자바스크립트 코드들을 새로 빌드해야 ..

▶ES Module이란?ES Module은 ES6부터 도입된 모듈 시스템export 및 import문을 사용해 분리되어 있는 자바스크립트 파일 간의 접근을 가능하게 만들어줌▶ ES Module 등장배경1. 기존의 웹은 자바스크립트 비중이 크지 않았기 때문에 큰 스크립트가 필요하지 않았다.2. 웹의 발전에 따라 점점 자바스크립트의 중요도가 커지고, 여러 개의 스크립트 파일을 쓰면서 상호작용을 해야 했다.3. 이를 처리하기 위해 jQuery등으로 해결(각각의 script 파일을 전역 스코프처럼 사용)했지만 여러 문제점이 발생했다.script 파일들을 올바른 순서대로 정렬해야 하기 때문에 순서가 뒤틀리면 에러를 발생시킴하위에 있는 script가 상위 script의 상태를 쉽게 변경시키는 '전역 오염'이 발생하..

변수랑 무엇인가? 왜 필요한가?변수(Variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름var result = 10 + 20;10 + 20이라는 연산을 할 때 컴퓨터는 10과 20을 각각 메모리 임의의 위치에 저장하고, 연산된 결과인 30을 임의의 위치에 저장한다.연산된 결과인 30이 저장된 메모리에 직접 접근해서 사용할 수 없기 때문에, 변수인 'result'를 통해 메모리 주소값을 참조해 값을 읽어들여 사용할 수 있다.변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름변수값 : 변수에 저장된 값할당(대입, 저장) : 변수에 값을 저장하는것참조 : 변수에 저장된 값을 읽어 들이는 것자바스크립트 엔진은 변수 이름과 매핑된 ..