효키위키

프론트엔드 개발을 시작하면 가장 먼저 듣게 되는 라이브러리가 Vue와 React다.둘 다 웹 화면을 만들기 위한 도구지만, 내부 철학부터 코드 스타일, 생태계까지 완전히 다르다.그래서 프로젝트에 어떤 걸 선택하느냐에 따라 개발 구조도 달라지고, 팀의 흐름도 달라진다.이번 글에서는 Vue와 React의 핵심 차이를 한 번에 이해할 수 있도록효키위키 스타일로 자연스럽고 정확하게 정리해본다.✔ Vue vs React 한눈에 비교구분 Vue.js React개발 방식HTML 기반 템플릿(SFC)JSX(JavaScript 중심)데이터 흐름양방향(v-model)단방향(useState)학습 난이도쉬움상대적으로 높음생태계Nuxt 중심, 일관적Next.js 중심, 선택 폭 넓음상태관리Pinia / VuexRedux / Z..

안녕하세요, 효키위키입니다!자바스크립트로 데이터를 다루다 보면 "05", "10", "0.75"처럼 문자열 형태의 숫자를 자주 만나게 됩니다.이런 값을 그대로 더하거나 평균을 내려고 하면 "5" + "10" = "510"처럼 문자열이 합쳐지거나,차트 라이브러리에서 데이터 오류가 발생할 수 있죠.특히 parseInt()를 사용할 때 두 번째 인자인 10을 생략하면,브라우저나 환경에 따라 숫자가 잘못 해석되어 값이 달라지는 문제가 생기기도 합니다.오늘은 이러한 문제를 방지하고, 정수와 소수를 모두 올바르게 변환하는 방법을 정리해보겠습니다.1. parseInt()와 기수 10, 왜 꼭 필요할까?parseInt("문자열", 기수) 함수는 문자열을 **정수(Integer)**로 변환합니다.이때 두 번째 인자인 기..

회사 웹페이지를 운영하다 보면,검색창 입력할 때마다 API 요청이 너무 많이 날아간다거나,스크롤 할 때마다 무거운 연산이 반복돼서 화면이 버벅거리는 문제를 겪을 때가 있습니다.저도 처음엔 단순히 “함수 호출 줄이면 되지 않나?” 생각했는데,막상 실무 코드에선 사용자 경험(UX)을 해치지 않으면서도 부하를 줄이는 방식이 필요하더라고요.그때 배운 게 바로 **Debounce(디바운스)**와 **Throttle(스로틀)**입니다.1. 두 개념 한 줄 요약Debounce: 연속된 이벤트 중 마지막 호출만 실행 (입력창, 버튼 클릭 방지에 많이 씀)Throttle: 연속된 이벤트를 주기적으로 제한 실행 (스크롤, 리사이즈 이벤트에 많이 씀)2. Debounce 실무 예제 – 검색창 자동완성사용자가 입력할 때마다 ..

const price = product.price ?? 0; 처음엔 "?? 이거 뭐야? 물음표 두 개?!?!??" 싶었는데,알고 보니 이게 Nullish 병합 연산자라는 JS 최신 문법이더라고요.**옵셔널 체이닝(?.)**처럼 생소했지만,알고 나니 API 응답이나 설정값 처리할 때 매우 유용한 기능이었습니다.오늘은 이 ??가 뭔지, ||와 뭐가 다른지, 실무에서 어떻게 쓰는지 정리해볼게요.1. Nullish 병합 연산자(??)란???는 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 반환합니다.const value = null ?? '기본값';console.log(value); // '기본값'const value2 = 0 ?? 100;console.log(value2); // 0 (0은 n..

죽지않고 다시 돌아오는 JS 공부시간입니다. const newUser = { ...user, role: 'admin' }; 이번에는 스프레드 연산자(Spread Operator)라는 문법입니다.처음엔 단순히 배열 합치기용으로만 알았는데,React 상태 관리나 API 응답 가공 같은 실무 코드에선 불변성 유지 때문에 필수로 쓰이는 기능이었습니다.오늘은 이 ... 문법이 뭔지, 얕은 복사/깊은 복사 차이, 그리고 실무에서 주의할 점까지 정리해볼게요.1. 스프레드 연산자(Spread)란?스프레드 연산자는 배열이나 객체를 펼쳐서 복사하거나 합칠 때 사용합니다.const arr = [1, 2, 3];const newArr = [...arr, 4, 5];console.log(newArr); // [1, 2, 3..

아무도 알려주지 않은 for문 맨날 알려준 학교와 학원들....reduce 공부 시작합니다........... const total = items.reduce((sum, item) => sum + item.price, 0);저는 이걸 처음 보고 "이게 뭐지? 그냥 for문으로 합치면 되는 거 아닌가?" 싶었습니다.하지만 쓰다 보니, reduce 하나만 제대로 알아도 데이터 합계, 요약, 변환까지 전부 깔끔하게 처리할 수 있다는 걸 알게 됐어요.오늘은 reduce 기본 원리부터 실무에서 많이 쓰는 예제, 흔히 하는 실수와 팁까지 한 번에 정리해볼게요.1. reduce() 기본 원리reduce()는 배열을 순회하면서 **값을 누적(accumulate)**해 나가는 메서드입니다.콜백 함수의 매개변수는 총 네 ..

봐도봐도 새로운 JS공부..오늘은 flatMap() 공부해보겠습니다.... const categories = [ { name: '전자제품', products: [ { name: '노트북', price: 1500000 }, { name: '모니터', price: 300000 } ] }, { name: '생활용품', products: [ { name: '청소기', price: 200000 }, { name: '가습기', price: 120000 } ] }];각 카테고리마다 products 배열이 따로 있는데,이걸 전부 하나로 합치고, 30만 원 이상인 제품만 걸러내고 싶다면 어떻게 할까요?1. 예전 방식 (for문 + concat)예..

나만 또 몰랐지 5탄..? 4탄맵맵맵 다음에 또 시작된 중첩코드 친구들 입니다. ㅎ fetchData() .then(res => process(res)) .catch(err => console.error(err)); 데이터만 불러오는 줄 알았는데, .then() 체인 뒤에 또 .then()이 이어지고,에러 핸들링까지 중첩되면서 코드가 또 꼬리꼬리 코드로.... "요즘은 async/await로 훨씬 깔끔하게 쓴다." 그렇다네요.그래서 오늘은 비동기 코드, 그리고 async/await가 왜 필요한지실무 예제를 중심으로 정리해볼게요.1. 왜 비동기 처리(Async)가 필요한가?웹에서 서버 API를 호출하거나 파일을 읽는 일은 시간이 걸리는 작업이에요.만약 동기적으로 처리하면 이렇게 됩니다:const dat..

중첩 객체 공부하다가 갑자기 ?. 이런 걸 봤습니다."이거 걍 물음표 아니야?" 할 뻔했는데,이게 자바스크립트 공식 문법이라는 걸 알고 멘탈이 흔들렸습니다…"역시 애들이 말하던 개발은 평생 공부라는 게 이런 거구나…"저는 아직 멀었구나 싶더라고요. ㅠㅠ 흑흑그래도 이제라도 하나씩 배우면 되니까,오늘은 ?. 옵셔널 체이닝 문법을 정리해볼게요! 회사 코드나 외주 코드 보다가 이런 에러 본 적 있나요?Cannot read properties of undefined (reading 'name')객체 안에 또 객체가 중첩되어 있는데, 중간에 undefined가 껴 있으면이런 에러가 자주 터집니다.예전에는 이런 식으로 코드를 썼죠:if (user && user.profile && user.profile.name) ..

지난 글에서 some() 함수와 중첩된 map + some 구조를 다뤘었죠?이번엔 **그 반대 개념인 every()**를 같이 살펴봅시다.1. every()는 뭐가 다른가?some() : 하나라도 조건을 만족하면 trueevery() : 모두 조건을 만족해야 true예를 들어:const nums = [1, 2, 3];console.log(nums.some(n => n > 2)); // true (3이 있으니까)console.log(nums.every(n => n > 2)); // false (1,2는 안 크니까)2. 실무 예제 주문 데이터에서 전부 '배송완료' 상태인지 확인const orders = [ { id: 1, status: 'delivered' }, { id: 2, status: 'del..