[JS] 동기와 비동기, 둘이 싸우면 누가 이길까?

01동기란동기란 여러 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 방식을 말합니다. 쉽게 말해, 앞에 있는 작업이 끝나야만 다음 작업을 시작할 수 있는 구조입니다.예를 들어, A작업, B작업, C작업이 있다고 가정해 보겠습니다. 동기 방식에서는 다음과 같은 순서로 작업이 진행됩니다:'' A작업 시작 -> A작업 종료 -> B작업 시작 -> B작업 종료 -> C작업 시작 -> C작업 종료 ''이 작업들을 실제로 실행하고 처리하는 역할을 하는 것이 바로 쓰레드(Thread)입니다.장점코드의 가독성이 높습니다. 순서대로 실행되기 때문에 로직의 흐름을 이해하기 쉽습니다. 단점작업 중 하나라도 오래 걸리면, 전체 프로그램이 멈춘 것처럼 보일 수 있습니다. 예를 들어, A작업이 5초 걸린다면, 그..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 1. 23.
• textsms

[JS] 나를 위한 배열과 Date 메서드 컨닝페이퍼

01배열 조작 메서드1. push배열의 맨 뒤에 요소를 추가합니다.const arr = [1, 2, 3];arr.push(4);console.log(arr);// 출력결과: [1, 2, 3, 4] 2. pop배열의 마지막 요소를 제거하고 반환합니다.const arr = [1, 2, 3];const removed = arr.pop();console.log(arr);console.log(removed);// 출력결과: [1, 2]// 출력결과: 3 3. shift배열의 첫 번째 요소를 제거하고 반환합니다.shift는 원본 배열을 변경하므로, 성능이 중요한 경우 빈번히 사용하지 않는 것을 권장합니다.const arr = [1, 2, 3];const removed = arr.shift();console.log(..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 1. 22.
• textsms

Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 31.
• textsms

[JS] 정규표현식 (RegExp)

01정규표현식 (Regular expression)정규표현식이란 일정한 패턴(특정한 규칙)을 가진 문자열의 집합을 다루는 데 사용하는 형식언어(formal language)입니다. 자바스크립트 고유의 문법이 아닌 다양한 프로그래밍 언어에 지원되고 있습니다. 왜 사용하나요?텍스트 데이터를 효율적으로 사용하기 위해서는 필요한 텍스트와 불필요한 텍스트를 구분해야 합니다. 컴퓨터 입장에서는 모든 문자가 동일하기 때문에 필요/불필요를 가려낼 수 없습니다.그렇기에 사람이 자세하게 '00 형식,ㅁㅁ규칙을 가진 텍스트를 골라줘'라고 명령을 내려줘야 컴퓨터가 수행합니다. 예를 들어 한국의 주민등록번호는 '990101-1234567' 라는 고정된 규칙을 사용하고 있습니다.여기서 뒷자리 7개의 숫자 중 첫 숫자가 5~8 사..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 6. 21.
• textsms

[JS] let,const 와 var

01var의 문제점01. 변수 중복 선언 허용var x = 1;var y = 2;// 변수 x 중복선언var x = 100;var y = 1;console.log(x); // 100console.log(y); // 1-  위 코드와 같이 변수 x와 y를 중복선언이나 재할당을 해도 에러가 없이 작동을 합니다. -  마지막에 할당된 값이 최종으로 변수의 값으로 저장됩니다. 02. 함수 레벨 스코프var는 block scope가 아닌 function scope단위 변수입니다.function counter(){ var i = 10; console.log(i); // 10 for(var i = 0; i -  위 코드에서 for문 안에서 var 키워드로 선언한 변수 i는 의도하지 않았더라도 전역변수..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 22.
• textsms

[JS] Todo-List

실행결과 미리 보기목표목표1. 할 일 클릭 시, 완료체크표시하기2. 삭제 버튼 클릭 시, 해당할 일만 삭제3. todo 할일 내용 localStorage에 저장/삭제하기4. todo 할일은 객체로 저장해서 관리하기 코드리뷰01메인 화면 TO DO LIST 추가  todo main.todo-list{ width: 100%; height: 630px; padding: 15px 20px; background-color:#d1ccc0; overflow-y: scroll; display: flex; flex-direction: column; align-items: end;}/* 스크롤바 css */.todo-list::-webkit-scrollba..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 13.
• textsms

[JS] 견종 정보 페이지

실행결과 미리 보기목표목표1.  [https://dog.ceo/dog-api/documentation/] 에서 강아지 사진 API 불러오기2. 필터링 버튼 클릭 시, input에 입력한 견종으로 검색되게 하기3. Select 에서 선택한 견종으로 img 보이기4. Top 버튼 클릭 시, 상단으로 이동5. More 버튼 클릭 시, 이미지 더 불러오기6. Reset 버튼 클릭시, input 내용 / Select 선택자 / main의 모든 이미지 초기화 코드리뷰01메인 화면 견종 정보 Page 필터링 all Reset More Top 02Window loa..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 5. 3.
• textsms

[JS] Random Number Game

랜덤숫자와 User가 입력한 수를 비교1. 0에서 사용자가 지정한 숫자까지의 범위에서 랜덤 한 숫자를 찾기 (양의 정수 입력값만 게임이 진행된다.)2. 실시간으로 범위 값을 업데이트합니다. ( 기계의 랜덤한 값 / 게임 진행 count )3. User 가 모든 값을 입력해야 게임이 진행됩니다.4. User 게임의 승패 유무를 text를 표시합니다.5. 게임이 종료된 이후 입력창과 Play 버튼은 비활성화 된다.6. Reset 버튼을 누를시 새로고침으로 reset 된다. 메인화면Random Number Game Generate a number between 0 and Guess the number Play! reset 양의 정수로 입력시 게임시작const n..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2024. 4. 30.
• textsms