분류 전체보기102 [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. 아래와 같은 이미지 주소가 담긴 코드를 생성해준다 만약 크기를 조절하거나 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 다음
