티스토리챌린지

최근에 포트폴리오를 작성하면서 shadcn-ui를 처음 접해보게 됐는데 사용하기 무척 쉽고 좋았었다.shadcn/uishadcn/ui는 Vercel의 shadcn이 만든 UI 도구로, Radix UI(Primitives)와 Tailwind CSS라는 상당히 최신 기술을 기반으로 하는 Component Collection이다.전통적인 컴포넌트 라이브러리들을 번들된 소스 코드를 패키지 매니저를 통해 프로젝트 의존성(dependencies)에 추가해서 사용한다.shadcn/ui는 번들되지 않는 컴포넌트 소스 코드를 프로젝트 의존성에 추가하지 않고, 복사해서 붙여넣은 컴포넌트 코드를 사용할 수 있다. 설치 방식npx shadcn-ui@latest init- Would you like to use TypeScri..

function add (num1, num2) { console.log(num1 + num2);}add(); // NaNadd(1); // NaNadd(1,2); // 3add(3,4,5); // 7add('hello','world'); // 'helloworld'function showItems(arr) { arr.forEach((item) => { console.log(item); });}showItems([arr]);showItems(1,2,3); // TypeError: arr.forEach is not a function위와 같이 자바스크립트는 우리가 원하는 결과가 아님에도 어떠한 경고도 주지 않았고 실수가 분명한 코드임에도 에러를 일으키지 않는다.💡 자바스크립트는 동적언어이다.→..

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패키지, 프로젝트..