web study

Redux는 자바스크립트 기반의 상태 관리 라이브러리다. 주로 React와 사용되지만 순수 자바스크립트, Angular, Vue에서도 사용 가능하다. Redux는 상태를 예측할 수 있으며, 상태의 변경이 적은 방식에 중점을 두고 있다. 이러한 특징은 단일 페이지 애플리케이션(SPAs) 또는 자바스크립트 프레임워크 및 라이브러리와 잘 맞는다. React 예제: https://fromnowwon.tistory.com/entry/react-redux Redux 설치와 코드 예제 github: https://github.com/fromnowwon/redux-vanilla-cafe-order-syatem 설치 npm install redux 코드 예제 store.js: 스토어 (주문목록 저장소) actions.j..

서버에 요청해 받은 파일로 파일 다운로드 기능을 구현해야 하는데, 회사에서 사용하고 있는 JQuery 버전이 낮아 JQuery AJAX로는 구현할 수 없었습니다. 때문에 JQuery AJAX 대신 XMLHttpRequest를 사용해 해결하였으며 이번 기회에 XMLHttpRequest에 대해 정리해보고자 합니다. XMLHttpRequest란? XMLHttpRequest는 JavaScript에서 HTTP 요청을 보내는 JavaScript 객체입니다. 이 객체를 사용하여 서버와 통신하고, 서버로부터 데이터를 받아올 수 있습니다. XMLHttpRequest를 사용하면 JavaScript를 사용하여 웹 페이지의 동적인 부분을 업데이트할 수 있습니다. 예를 들어, 사용자가 어떤 작업을 수행하면, XMLHttpReq..

단일 느낌표(!) - Logical NOT 하나의 느낌표 연산자는 논리 부정(Not) 연산자라고 한다. 오른쪽에 붙은 피연산자의 값을 역전시켜 boolean 타입으로 반환한다. 실무에서는 조건문에서 많이 사용된다. if (!Array.length) console.log("빈 배열"); if (!data) console.log("데이터 없음"); 이중 느낌표(!!) - Double NOT 이중 느낌표는 단일 느낌표와 같이 피연산자를 boolean 타입으로 값을 반환한다. 오른쪽에 붙은 피연산자가 true/false로 확실하게 정해지지 않은 경우 확실한 true/false 값을 가지도록 하는 게 목적이다. true/false 성격만 가지고 있던 값을 명확하게 true/false로 반환해 준다. (truthy..

프로그래밍 언어를 다루면서 타입 검사는 누구나 한 번씩 해보게 되는 과정이다. 아무리 간단한 애플리케이션을 개발한다고 해도 타입 검사는 할 것이다. 타입 검사의 어려움 typeof는 무적이 아니다 typeof 연산자는 문자열로 해당 타입을 출력해준다. typeof '문자열' // 'string' typeof true // 'boolean' typeof undefined // 'undefined' typeof 123 // 'number' typeof Symbol() // 'symbol' 참조값의 타입 숫자, 문자, boolean, null, undefined, bigInt, Symbol이 원시 값에 해당하며, 이 외에 모든 값은 참조값이다. 참조값은 typeof로 타입을 출력하는 데에 어려움이 있다. cl..

코딩 테스트에서 유용하게 사용되는 메서드 중 하나가 문자열 처리 메서드이다. 특히 KAKAO에서는 문자열 처리 문제를 많이 내기 때문에 정리해두는 것이 좋다. 출제된 문자열 처리 문제 [2018 KAKAO BLIND RECRUITMENT] 다트게임 [2019 카카오 개발자 겨울 인턴십] 불량 개발자 [2019 KAKAO BLIND RECRUITMENT] 매칭 점수 [2021 KAKAO BLIND RECRUITMENT] 신규 아이디 추천 목차 대소문자 변환 문자열 교체 문자열 포함 여부 문자열 위치 찾기 문자열 나누기 문자열 합치기 특정 위치의 문자열 반환 문자열 공백 제거 문자열 추출 구분 메서드 대소문자 변환 toUpperCase(), toLowerCase() 문자열 대체 replace() 문자열 포함..

배열을 수정하는 데 사용되는 메서드가 꽤 많고 헷갈린다. 각 메서드의 기능으로 구분하여 정리해보자. 목차 배열 요소 추가 배열 요소 삭제 배열 요소 추출 배열 요소 필터 문자열을 배열로 반환 구분 메서드 배열 요소 추가 push(), unshift(), splice() 배열 요소 삭제 pop(), shift(), splice() 배열 요소 추출 slice() 배열 요소 필터 filter() 문자열을 배열로 반환 split() 배열 요소 추가 push push는 배열 끝에 새로운 요소를 추가한다. 원본 배열이 수정된다. 요소가 추가된 배열의 길이가 반환된다. push(추가요소) 예제 const arr = [1, 2, 3, 4, 5]; const newArr = arr.push('a') console.log..

const는 재할당이 불가하다. 그런데 const에 담긴 객체(object, 배열...)의 경우 수정이 가능하다. 어떻게 가능한 걸까? 우선 var, let, const 차이에 대해 간략하게 알아보자. 목차 var, let, const const에 객체가 담긴 경우 var, let, const var let const 재선언 O X X 재할당 O O X 호이스팅 undefined로 초기화되어 메모리에 저장 초기화되지 않은 상태로 메모리에 저장 초기화되지 않은 상태로 메모리에 저장 유효 범위 (Scope) 함수 스코프 블록 스코프 블록 스코프 const에 객체가 담긴 경우 위 표에서도 알 수 있듯이 const는 재할당이 불가하다. 그런데 const에 담긴 객체는 수정이 가능하다. 이 경우에는 const에 ..

ES6의 Spread 연산자와 rest 파라미터에 대해 정리해보자. Spread 연산자 이터러블(iterable) 객체를 개별 요소로 분리한다. ✏️ 이터러블 객체는 반복 가능한 객체를 일컫는다. Array, String, Map, Set, DOM 구조가 있다. Object.create나 slice를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있다. console.log(...[1, 2, 3]); // 1, 2, 3 console.log(...'apple'); // a p p l e function fruits(arr) { return [...arr, 'apple'] } fruits(['grape', 'melon', 'lemon']); // ["grape", "melon", "lemon", ..

자바스크립트에서 attribue, property 둘 다 속성의 개념인데 무슨 차이가 있는지 예시와 함께 정리해보자. attributes는 HTML 마크업에 정의되어 있는 것이고, properties는 HTML DOM 트리에 있는 것이다. 즉, attribute는 default 값이 변하지 않으며 property는 변할 수 있다. input을 예시로 들어보겠다. // attribute console.log(input.getAttribute('value')) // 기본값입니다 // property console.log(input.value) // 기본값입니다 input에 "자바스크립트"라고 입력했다면, attribute는 그대로지만 property 값은 변한다. property는 DOM에 존재하며 동적이기..

IIFE (즉시 실행 함수)에 대해 정리해보자. 목차 IIFE란? IIFE 형식 IIFE 사용 이유 IIFE란? IIFE(Immediately Invoked Function Expression)는 '이피'라고 불리며, 즉시 실행 함수를 의미한다. IIFE 형식 IIFE는 (익명함수)와 (함수실행) 두 개의 괄호로 나뉜다. 이 함수는 생성된 후 즉시 실행되고 재사용되지 않기 때문에 보통 익명 함수 형태다. 기본 함수 ( function() { ... } )() 화살표 함수 ( () => { ... } )() IIFE는 함수 선언문이 아니기 때문에 변수에 저장하면, 함수가 저장되는 게 아니라 결과만 저장된다. var test = (function () { var greeting = "hi"; return g..