[그림으로이해하는] 동기(sync) 비동기(async)의 개념에 대한 가장 직관적인 이해

1. 쓰레드(Thread)란?쓰레드 = 일을 하는 일꾼CPU 코어 안에 여러 개의 쓰레드가 있다.쓰레드 하나가 직원 한 명이라고 보면 된다.예시:4코어 8쓰레드 → 동시에 8명이 일한다.아이폰 11 프로 → 6코어 12쓰레드 → 12명이 동시에 일하는 셈즉, 프로그램이 쓰레드 위에서 작업을 처리한다는 뜻이다.2. 동기 vs 비동기📖 복사집 예시두꺼운 책을 여러권 복사한다고 할 때, 복사기가 여러 대 있다고 가정하면한 대에서만 작업을 해서 한 권이 끝나면 기다렸다가 두번째 책을 복사하는 식으로 일 하면 → 동기여러 대에 나눠서 맡기고 나는 다른 일 하면 → 비동기🔹 동기(Synchronous)일을 다른 쓰레드에 맡겨도 끝날 때까지 기다린다.다 끝나야 다음 일 시작 가능하다.👉 순서가 중요할 때 적합?..

[AG-Grid] onCellClicked vs onRowClicked 비교

한줄 요약onCellClicked: “셀” 단위 클릭 이벤트. 어떤 컬럼/값을 눌렀는지까지 세밀하게 처리할 때.onRowClicked: “행” 단위 클릭 이벤트. 리스트 상세 페이지 이동, 행 선택 등 행 전체 액션에 적합.공통점둘 다 그리드 본문 클릭에서 발생 (헤더 클릭은 아님).이벤트 객체에 data, node, event(MouseEvent) 등을 제공.편집 중이면 api.stopEditing()으로 먼저 커밋 가능.차이점 핵심항목 onCellClicked onRowClicked트리거특정 셀 클릭그 행의 아무 셀 클릭컬럼 정보column, colDef, value 제공❌ (컬럼 단위 정보 없음)활용도버튼/링크 컬럼, 특정 컬럼만 조건 처리행 단위 이동/선택/컨텍스트 열기단일 클릭 편집특정 컬럼만 ..

[AG-Grid] singleClickEdit 원클릭 편집 속성

1. singleClickEdit 속성을 AgGridReact 전체에 적용AgGridReact에 singleClickEdit={true} 를 설정하면 모든 컬럼이 클릭 한 번으로 편집 모드에 들어갑니다.👉 이 경우는 "모든 셀을 한 번 클릭으로 편집"해야 하는 단순한 상황에서 유용합니다.하지만 특정 컬럼에서만 원할 때는 불필요하게 전부 열려버려서 비효율적일 수 있습니다.2. 특정 컬럼에만 적용 (colDef 단위 설정)특정 컬럼에서만 클릭 한 번으로 편집을 하고 싶다면, colDef 안에 editable: true, singleClickEdit: true 를 같이 넣어주면 됩니다.const columnDefs = [ { field: "name", editable: true, ..

2025 ADSP 1회차 합격후기(독학/벼락치기)

ADSP 1트 합격후기!우선 인증부터 사실 이번 시험 3과목이 진짜.. 지옥의 3과목이라 바로 떨어질 줄 알았는데 기적처럼.. 살아남았다.후기글을 쓰는게 부끄러울 수준의 점수지만 합격은 합격이니까 내 나름대로의 회고록처럼 써보려고 한다. 진짜 겨우 턱걸이..! 그래도 1,2과목 잘 봤으니까~ㅎㅎ[ADSP 자격시험정보]ADSP(Advanced Data Analytics Semi-Professional)란 데이터분석 준전문가로 데이터 이해에 대한 기본지식을 바탕으로 데이터분석 기획 및 데이터분석 등의 직무를 수행하는 실무자를 말한다.50문제 모두 객관식으로 되어있는 필기시험! 실기도 따로 없고 바짝 공부하면 취득 가능하다.나는 1,2과목 강의는 1주일 전에 듣고 놀다가 3과목 공부를 4일 전부터 시작했다...

[React] async와 await를 사용한 CRUD

1. Create (C) - 비동기적으로 데이터 생성 POST // 예시: Axios를 사용한 POST 요청 const createData = async (data) => { try { const response = await axios.post('/api/data', data); console.log(response.data); // 생성된 데이터 확인 } catch (error) { console.error('Error creating data:', error); } }; 2. Read (R) - 비동기적으로 데이터 조회 GET // 초기 데이터 로딩 const fetchInitialData = async () => { try { const response = await axios.get('/api/..

[Git] 스테이징 / 브랜치 / 원격 저장소

1. 스테이징(Staging) 개념: 스테이징은 변경된 파일을 Git이 추적하고 있는 작업 디렉토리에서 선택적으로 포함시키는 단계입니다. 활용: 변경된 파일 중 일부만을 골라서 스테이징하고 싶을 때 사용합니다. git add 명령어를 통해 파일을 스테이징 영역으로 올립니다. 예시: # 파일을 스테이징 git add 파일명 # 모든 변경된 파일을 스테이징 git add . 2. 브랜치(Branch) 개념: 브랜치는 코드를 분리하여 독립적으로 개발할 수 있게 해주는 개념입니다. 활용: 새로운 기능을 개발하거나 버그를 수정할 때 브랜치를 생성하여 작업합니다. git branch 명령어로 브랜치를 생성하고 git checkout 또는 git switch 명령어로 브랜치 간 이동이 가능합니다. 예시: # 새로운 ..

[한입 크기로 잘라 먹는 리액트] simpleDiary 코드

App.js import { useState, useRef, useEffect } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // https://jsonplaceholder.typicode.com/comments function App() { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then(..

[한입 크기로 잘라 먹는 리액트] React에서 API 호출하기

https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com https://jsonplaceholder.typicode.com/comments App.js - API 호출 코드 getData작성 - mount될 때 나와야 하는 데이터 > useEffect 사용(빈배열) - 초기 데이터 initData 설정 import..

[한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect

출처 https://inf.run/N9fZn 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요. www.inflearn.com

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기

1. onDelete > onRemove로 변수명 변경 2. DiaryItem.js에 수정하기 버튼 추가 DiaryItem.js - 수정하기 버튼 추가 - 삭제하기 버튼 onClick 함수를 handleRemove로 빼서 정리 - state 생성 - 토글함수 생성 : isEdit이 true면 수정중이라고 간주 > content부분에 수정폼 띄우기 - 토글 상태(T/F)에 따른 버튼 기능 수정 - 수정 취소 후 다시 수정클릭 시 내용 원본 복구 - 수정완료 후 기능 추가 import { useRef, useState } from "react"; const DiaryItem = ({ author, content, emotion, created_date, id, onRemove, onEdit, }) => { ..