TypeScript
[TS] 타입스크립트로 웹앱 구동하는 법
먼저 폴더를 하나 생성해줍니다. 다음은 필요한 서버인 express와 타입스크립트, 타입스크립트 파일을 js로 컴파일 해주는 ts-node를 다운받습니다. tsc --init 명령어로 초기화 시켜주면 tsconfig.json파일이 생기고,해당 설정을 위와 같이 변경합니다. 다음은 index.ts파일을 하나 만들어서import express from "express";const app = express();const PORT = 3000;app.get("/", (_req:any, res:any) => { res.send("Hello from Express + TypeScript!");});app.listen(PORT, () => { console.log(`✅ 서버가 http://localhost:..
더보기
New Post
[TS] 타입스크립트로 웹앱 구동하는 법
먼저 폴더를 하나 생성해줍니다. 다음은 필요한 서버인 express와 타입스크립트, 타입스크립트 파일을 js로 컴파일 해주는 ts-node를 다운받습니다. tsc --init 명령어로 초기화 시켜주면 tsconfig.json파일이 생기고,해당 설정을 위와 같이 변경합니다. 다음은 index.ts파일을 하나 만들어서import express from "express";const app = express();const PORT = 3000;app.get("/", (_req:any, res:any) => { res.send("Hello from Express + TypeScript!");});app.listen(PORT, () => { console.log(`✅ 서버가 http://localhost:..
View
[CSS] 자식 요소의 위치 변경
부모 요소가 자식요소를 감싸고 있을 때,부모 요소에 position : relative 속성을 부여하고,자식 요소에 position : absolute 속성을 부여하면 top, left, right, bottom 등을 사용해 절대 위치를 부여할 수 있다. 나 같은 경우에는 오른쪽에 노란색으로된 링크를 누르면등록 버튼이 생기는데 등록버튼이 링크 바로 밑에 붙어서 생기는 문제가 있었다. 하단에 고정된 모습이다. .whole-sale-page { background-color: white; padding: 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: col..
View
[React] Jotai
🔷 Jotai란?Jotai는 React 상태 관리를 위한 라이브러리입니다. 🔹 핵심 특징작고 가볍다→ Redux보다 훨씬 간단하고, 코드도 짧게 쓸 수 있습니다.Provider 불필요→ 대부분의 경우 별도의 Context Provider 없이 바로 사용할 수 있습니다.Recoil과 비슷하지만 더 단순→ Recoil처럼 atom 개념이 있지만, 내부 구현은 더 간단합니다.직접적인 접근→ 상태를 useAtom으로 직접 읽고 쓸 수 있어서 코드가 명확합니다. 🔹 사용 예시 1.먼저 useState와 같은 State의 역할을 하는Atom을 자료형과 함께 초기화합니다. export const addCategoryModalVisibleAtom = atom(false); 2. Atom을 생성할 변수, Atom을..
View
깃허브 협업하는 방법
1. git 초기 설정git 다운 후 실행https://git-scm.com/downloads32-bit Git for Windows Setup 클릭 설치 옵션Git Bash Here 옵션 체크Git GUI Here 옵션 체크 (선택)Add to PATH 옵션 체크Git LFS 옵션 체크(선택)Associate .git* ~~ 옵션 체크(선택)Windows 탐색기에서 우클릭하여 Git Bash를 사용할 수 있게 합니다.GUI 환경도 같이 설치합니다.명령어로 Git을 사용하기 위해 반드시 필요합니다.대용량 파일 지원기본 텍스트 에디터에 git 구성(.git 확장자) 연결bash에서 사용자 이름, 이메일주소 설정git config --global user.name "사용자이름"git config --glob..
View
TypeScript
[TS] 타입스크립트로 웹앱 구동하는 법
먼저 폴더를 하나 생성해줍니다. 다음은 필요한 서버인 express와 타입스크립트, 타입스크립트 파일을 js로 컴파일 해주는 ts-node를 다운받습니다. tsc --init 명령어로 초기화 시켜주면 tsconfig.json파일이 생기고,해당 설정을 위와 같이 변경합니다. 다음은 index.ts파일을 하나 만들어서import express from "express";const app = express();const PORT = 3000;app.get("/", (_req:any, res:any) => { res.send("Hello from Express + TypeScript!");});app.listen(PORT, () => { console.log(`✅ 서버가 http://localhost:..
더보기
[TS] 타입스크립트로 웹앱 구동하는 법
먼저 폴더를 하나 생성해줍니다. 다음은 필요한 서버인 express와 타입스크립트, 타입스크립트 파일을 js로 컴파일 해주는 ts-node를 다운받습니다. tsc --init 명령어로 초기화 시켜주면 tsconfig.json파일이 생기고,해당 설정을 위와 같이 변경합니다. 다음은 index.ts파일을 하나 만들어서import express from "express";const app = express();const PORT = 3000;app.get("/", (_req:any, res:any) => { res.send("Hello from Express + TypeScript!");});app.listen(PORT, () => { console.log(`✅ 서버가 http://localhost:..
View
[CSS] 자식 요소의 위치 변경
부모 요소가 자식요소를 감싸고 있을 때,부모 요소에 position : relative 속성을 부여하고,자식 요소에 position : absolute 속성을 부여하면 top, left, right, bottom 등을 사용해 절대 위치를 부여할 수 있다. 나 같은 경우에는 오른쪽에 노란색으로된 링크를 누르면등록 버튼이 생기는데 등록버튼이 링크 바로 밑에 붙어서 생기는 문제가 있었다. 하단에 고정된 모습이다. .whole-sale-page { background-color: white; padding: 2rem; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: col..
View
[React] Jotai
🔷 Jotai란?Jotai는 React 상태 관리를 위한 라이브러리입니다. 🔹 핵심 특징작고 가볍다→ Redux보다 훨씬 간단하고, 코드도 짧게 쓸 수 있습니다.Provider 불필요→ 대부분의 경우 별도의 Context Provider 없이 바로 사용할 수 있습니다.Recoil과 비슷하지만 더 단순→ Recoil처럼 atom 개념이 있지만, 내부 구현은 더 간단합니다.직접적인 접근→ 상태를 useAtom으로 직접 읽고 쓸 수 있어서 코드가 명확합니다. 🔹 사용 예시 1.먼저 useState와 같은 State의 역할을 하는Atom을 자료형과 함께 초기화합니다. export const addCategoryModalVisibleAtom = atom(false); 2. Atom을 생성할 변수, Atom을..
View
깃허브 협업하는 방법
1. git 초기 설정git 다운 후 실행https://git-scm.com/downloads32-bit Git for Windows Setup 클릭 설치 옵션Git Bash Here 옵션 체크Git GUI Here 옵션 체크 (선택)Add to PATH 옵션 체크Git LFS 옵션 체크(선택)Associate .git* ~~ 옵션 체크(선택)Windows 탐색기에서 우클릭하여 Git Bash를 사용할 수 있게 합니다.GUI 환경도 같이 설치합니다.명령어로 Git을 사용하기 위해 반드시 필요합니다.대용량 파일 지원기본 텍스트 에디터에 git 구성(.git 확장자) 연결bash에서 사용자 이름, 이메일주소 설정git config --global user.name "사용자이름"git config --glob..
View
