이번 프로젝트에 타입스크립트에 이어서 야심차게 테일윈드도 도입해보려고 합니다!조금 더 쉽고 빠르게 디자인 하기 위해 테일윈드를 선택했는데 간단히 테일윈드가 뭔지 알아보고 설치 해보겠습니다. 🍊 테일윈드란?테일윈드는 클래스 기반의 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.기존 CSS 프레임워크(Bootstrap, Material UI)처럼 미리 만들어진 컴포넌트가 아니라 스타일링을 위한 유틸리티 클래스들만 제공하는 방식으로 동작한다.🍊 테일윈드의 특징컴포넌트가 아닌 유틸리티 클래스 제공→ class="p-4 bg-blue-500 text-white" 같은 방식으로 사용한다.CSS 파일을 직접 작성하지 않아도 됨→ .css 파일에서 스타일을 정의할 필요 없이, HTML이나 JSX..

오늘은 자바스크립트를 타입스크립트로 전환해보겠습니다!기존에 만들어뒀던 투두리스트, 감정일기장을 순서대로 전환해볼 예정입니다.참고로 저는 vite를 사용해서 리액트로 만들어뒀던 프로젝트입니다. 1. 타입스크립트 패키지 설치기존의 자바스크립트 프로젝트에서 타입스크립트를 사용하기 위해 타입스크립트 패키지를 설치해준다.npm install --save-dev typescript 2. ESLint + TypeScript 플러그인 설치타입스크립트 코드를 Lint(코드 스타일 체크)하기위한 ESLint와 관련 플러그인을 설치한다.npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin 3. tsconfig.json ..

지금까지 백엔드만 공부했더니 남는건 백엔드 프로젝트 뿐,,개발자로서 프론트의 기본적인 작동과정과 백엔드와의 연동하는 법도 알아둬야 할 것 같아 요즘은 리액트를 조금 공부중이다.그래서 오늘은 리액트로 만들 todoList 프로젝트와 백엔드를 연동시켜 볼 것이다. 미리 프론트와 백엔드 코드는 모두 작성했다고 생각하고 그 이후부터 다룬다. 1. React에서 API 호출 코드 추가 - api/todoApi.js 파일 생성src폴더 아래에 api를 모아두는 폴더를 생성한뒤 todoApi.js 파일을 생성해두었다.백엔드와의 통신 로직을 정리한 유틸리티 파일을 만들어서 API 호출 코드를 관리할 것이다. import axios from 'axios';const API_BASE_URL = 'http://localho..

1. 자바 컴파일 순서 자바 코드는 다음 과정을 거쳐 실행됩니다.1. 개발자는 자바 소스 코드(.java)를 작성한 후, 이를 자바 컴파일러에 전달합니다.2. 컴파일러는 소스 코드를 읽고 바이트코드(.class)로 변환합니다. 이 바이트코드는 컴퓨터가 직접 이해할 수 있는 기계어는 아니며, JVM(자바 가상 머신)에서 실행되기 위해 만들어진 코드입니다.3. 컴파일된 바이트코드(.class)는 JVM 내의 클래스 로더로 전달됩니다.4.클래스 로더는 동적 로딩을 통해 실행 중에 필요한 클래스들을 찾아서 로드하고, 링크 과정을 거쳐 JVM 메모리의 런타임 데이터 영역(Method Area)에 저장합니다.5. 이후 실행 엔진(Execution Engine)이 메모리에 올라온 바이트코드를 명령어 단위로 가져와 해..