Tiny Bunny

본문 바로가기

전체 글103

[React] React Hook과 Custom Hook 목차1. React Hook2. custom Hook 1. React Hook💡Hook이란? Hook은 React의 함수 컴포넌트에서 상태관리와 생명주기 기능을 사용할 수 있도록 해주는 함수.기존에는 클래스형 컴포넌트에서만 가능했던 기능들을 함수형에서도 사용할 수 있도록 만들어준 리액트의 핵심 기능이다. Hook은 React 16.8에 새로 추가된 기능이며,Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다고 한다. ⚙️ 대표적인 Hook 종류useState: 컴포넌트의 상태값(state)을 저장하고 변경useEffect: 컴포넌트의 생명주기 관리 (마운트, 업데이트, 언마운트 등) useRef, useContext, useReducer, us.. 2025. 5. 14.

[React] useState와 useRef 목차1. useState와 set함수2. 간단한 회원가입 폼으로 흐름 살펴보기3. useRef React를 처음 배우면서 가장 먼저 접하는 Hook이 바로 useState이다. useState는 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해주는 핵심적인 기능이다. 이번 글에서는 간단한 회원가입 폼 예제를 통해 useState와 함께 사용하는 set 함수가 어떻게 작동하는지를 자세히 설명해보고자 한다. 1. useState와 set함수 ✏️useState- 컴포넌트에 state 변수를 추가할 수 있는 React Hook.- 상태값을 만들고, 이를 제어할 수 있는 함수를 함께 제공한다. 💡사용법: 컴포넌트에 state 추가하기 컴포넌트의 최상위 레벨에서 useState를 호.. 2025. 5. 10.

[React] JSX 란? (특징, CSS적용, className) 목차1. JSX 란?2. JSX 특징 및 주의사항3. JSX의 CSS 적용4. JSX 속성 사용방식 1. JSX 란? JSX는 JavaScript에 XML/HTML 형태의 마크업을 작성할 수 있게 해주는 JavaScript 확장 문법 Javascript에 XML 형식의 문법을 결합한 형태React에서는 렌더링 로직과 UI 로직이 연결되어 있다고 보기 때문에, 둘을 함께 구성하는 컴포넌트 단위로 관심사를 분리함. 2. JSX 특징 및 주의사항 💡 JSX의 특징 JS 표현식 포함 가능중괄호 {} 안에 JavaScript 표현식 사용 가능예: Hello, {name}JSX도 표현식이다!JSX는 JavaScript 코드처럼 변수에 할당하거나, 인자로 전달하거나, 함수에서 반환 가능속성 정의문.. 2025. 5. 8.

[Node.js] Node.js 모듈시스템 / Common JS(CJS) & ES Module(ESM) 목차1. Node.js와 npm2. Common JS (CJS) 와 ES module (ESM) 1. Node.js 와 npm 💡 Node.js 란? : 자바스크립트의 런타임 환경브라우저의 밖(서버, 로컬 컴퓨터 등)에서도 자바스크립트를 실행할 수 있게 해주는 플랫폼이다. ex) app.js라는 파일을 node app.js로 실행하면 Node.js가 그 JS파일을 실행해준다. 💡Node.js를 웹개발에서 쓰는 이유 🔹 백엔드 개발Express.js 같은 프레임워크를 통해 REST API 서버를 빠르게 구축할 수 있다.비동기 처리에 강해, 많은 요청을 효율적으로 처리한다.실시간 기능 (ex. 채팅, 알림) 구현에 최적!🔹 프론트엔드 개발 환경 구축npm (Node Package M.. 2025. 4. 30.

[JS] 자바스크립트 async 와 await (ft. 비동기처리) 자바스크립트 async와 await ; 비동기 처리를 더 쉽게 ! 비동기 작업을 다루기 위해 자바스크립트는 다양한 방법을 제공한다. promise 개념과 더불어 async와 await 키워드를 사용하면 비동기 코드를 깔끔하고 읽기 쉽게 만들 수 있다. 1. async 키워드란?async는 함수를 비동기 함수로 만들어주는 키워드이다.async를 함수 앞에 붙이면, 해당 함수는 항상 Promise를 반환한다.반환값이 Promise가 아니더라도 자동으로 Promise로 감싸서 반환된다.async function getData() { return { name: "David", id: "d0228", };}console.log(getData()); 위 코드의getDa.. 2025. 4. 29.

[JS] 자바스크립트 비동기와 Promise 자바스크립트 비동기와 Promise 자바스크립트 비동기 처리와 Promise에 대해 쉽게 정리해보자!1. 자바스크립트 비동기 처리 ; 콜백 함수(Callback)자바스크립트는 기본적으로 싱글 스레드로 작동한다.그래서 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 그냥 실행하면 프로그램이 멈춰버릴 수 있다.이를 해결하기 위해 비동기 처리가 등장했다. 대표적인 비동기 처리 방법 중 하나가 바로 콜백 함수// 콜백함수를 사용해서, 비동기함수 안에서 콜백을 호출function add(a, b, callback) { setTimeout(() => { const sum = a + b; callback(sum); }, 3000);}add(1, 2, (value) .. 2025. 4. 26.

[Git] VS Code 에서 git에 반영하기 (GUI 방식/ 터미널 방식) VS Code에서 수정을 다하고 git에 반영하고싶다.GUI를 이용하는 방법과 터미널을 사용하는 방법이 있다.☺️ 💡터미널을 사용하는방법1. 터미널을 열어준다. 2. git add .뒤에 . 은 변경사항이 있는 파일 전부를 대상으로 하겠다는 뜻이다. 특정파일만 하고 싶다면 특정파일이름을 쓰면된다.git add .3. git commit -m "커밋 메시지"git commit -m "markdown" 4. git push git push 원격저장소명 브랜치명만약 git clone을 통해 저장소를 복제했다면 일반적으로 원격저장소명은 origin이며 git remote명령어를 통해 정확한 저장소명을 알아낼 수 있다.git remote브랜치를 따로 안만든상태라면 그냥 git remote origin만 하면된다.. 2025. 4. 22.

[React] 리액트와 가상돔(virtualDOM) / 터미널 초기 설정 목차1. 리액트(React)2. 리액트 사용이유와 VitrualDOM(가상돔)3. terminal에서 초기 설정하기 1. 리액트(React) 💡자바스크립트 라이브러리리액트란 자바스트립트 UI 라이브러리이다. 💡 SPA(Single Page Application) SPA는 수많은 웹 페이지를 로딩할 때 최신 업데이트를 신속하게 반영하며, 페이지 로딩 속도를 향상시키고 트래픽을 줄인다.따라서 페이지가 부드럽게 전환되도록 하고, 업데이트가 될 때까지 기다리는 시간을 단축시킨다. ft. MetaMeta가 만든 오픈 소스 기반 라이브러리.든든한 지원군인 Meta덕에 웹 개발 시장에서 쉽게 무너질(?) 일은 없다는 것,! https://github.com/facebook/react GitHub -.. 2025. 3. 23.

[Github] 깃허브 Readme에 이미지 넣기/ 크기 조절 하기 목차1. Readme에 넣을 이미지 주소 생성하기2. 크기 조절 방법 깃허브 Readme에 이미지 넣는 방법을 정리해보자 ☺️ 1. Readme의 레포지토리에서 이슈 생성창 열기 2. 삽입하고자 하는 이미지를 끌어 넣어준다 3. 'Uploading.....' 이라는 문구가 뜨고 기다리면 된다 4. 아래와 같은 이미지 주소가 담긴 코드를 생성해준다![Image](https://github.com/user-attachments/assets/99fb28dc-19d1-4ff1-adbc-f4725aa647a1) 만약 크기를 조절하거나 align등의 속성을 주고 싶다면, 태그의 src 부분에 위의 이미지 주소 부분을 삽입하여 사용하면 된다. ☺️ 2025. 3. 17.

[JS] 로컬스토리지(LocalStorage) / JSON - Object 타입 변환 목차1. localStorage2. localStorage와 JSON 1. 로컬스토리지 개념 localStorage란 크롬과 같은 웹 브라우저에 데이터를 저장할 수 있는 기능이다.즉 웹 상에 우리의 데이터들을 저장하는 것이다. 💡 로컬스토리지를 사용하면 브라우저를 닫아도 저장되었던 데이터를 계속해서 유지할 수 있다. 보통은 사용자의 로그인정보나 설정 등을 저장하기 위해 사용하는데,Key- Value 값의 형태로 데이터를 저장한다.localStorage.setItem("키", "값"); 키에는 내가 저장하고 싶은 DB 덤탱이에 이름을 정해주는 것이고, 각 값은 각각의 데이터 값을 의미한다. 크롬 브라우저에서 local Storage 값 확인하기크롬 브라우저에서 localStorage를 확인하.. 2025. 3. 7.

[DB] 로킹(Locking) 단위 , 로킹과 병행성, DB 로킹 기법 로킹 단위란?로킹(locking) 단위란 데이터베이스에서 말그대로 ‘잠그는 단위’를 나타낸다. 로킹 기법이란 하나의 트랜잭션이 데이터를 엑세스하는 동안, 다른 트랜잭션이 해당 데이터 항목을 엑세스 할 수 없도록 하는 병행 제어 기법이다. ‘동시성 제어 기법’ 이라고도 한다.여기에서 록(lock)은 데이터를 사용하는 단위라고 볼 수 있다.마치 운영체제의 스레드 스케줄링처럼, 한 번에 하나만 사용하도록 하는 단위를 ‘로킹 단위’라고 한다.실질적인 예시를 들어보자면,프로젝트를 진행할 때 팀원과 DB를 관리해야하는 일은 빈번하다. 만약 내가 데이터를 추가하거나 수정하는 동안 다른 팀원도 동시에 같은 데이터를 건들게 될 경우, 오류가 발생하거나 올바르게 데이터를 처리하는 데에 문제가 발생한다. ❗️이 경우, 로킹.. 2025. 2. 26.

[GUTS world tour] 24.09.20 올리비아 로드리고 내한 ..🫧🧚‍♀️ 사진으로 대체하는 후기.. (*˘︶˘*).｡.:*♡ 24.09.30 하늘에 구멍이 뚫린듯 쏟아지는 비를 뚫고 잠실 도착 ! 💨# 제일 떨리는 시간ㅠ 공연 시작 전생각보다 중앙에 가까워서 좋았다오빠랑 너무 신나 부러 . . ♥ # 요정 등장이요 🫧 🫶🏻 누군가 또 갈 거냐 묻는다면당장 yes. vampire enough for you 듣고 싶었던 플리 다 불러줬다 히히콘서트에서 꽂힌 노래도 몇 곡 얻어 집으로🪽• get him back !• all-american bitch• enough for you• bad idea right?• teenage dream♥ 2025. 2. 20.

이전 1 2 3 4 ··· 9 다음

티스토리툴바