본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Category

 (224)
[JavaScript] map, reduce 배열 메서드 목차 1. map 메서드 - 개요 - 문법 - 자세한 설명 - 예제 2. reduce 메서드 - 개요 - 문법 - 예제 3. map을 reduce로 바꿔보기 React를 배울 때 많이 쓰일 메서드인 map, reduce 메서드를 알아보자! Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. - 배열 각각의 element들을 다 바꾸고 새로운 array를 가지고 싶을때 - map은 매개변수 안에 함수를 넣을 수 있도록 해줌 - 이 함수는 배열의 모든 item에 대해 실행됨 - 이 함수에서 무엇을 return하든간에 그 return한 값이 새로운 array에 들어가 있게 됨 - 즉, map은 하나의 배열에 ..
[JavaScript] hasOwnProperty를 쓰는 이유 hasOwnProperty를 써야하는 이유에 대해서 알아보자! hasOwnProperty() 메서드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값(true/false)을 반환한다. 즉, 객체가 특정 프로퍼티를 가지고 있는지에 대한 소유 여부를 반환한다. const obj = { a: 1 }; obj.hasOwnProperty("a"); // true obj.hasOwnProperty("b"); // false 해당 객체에 특정 프로퍼티가 존재하면 true, 그렇지 않으면 false 를 반환한다. 단, 프로토타입 체인은 확인하지 않고, 해당 객체가 스스로 정의한 프로퍼티만을 판단한다. obj.b = 2; // 해당 객체가 스스로 정의한 프로퍼티 Object.prototype.c = 3; //..
[JavaScript] 반복문 빠져나오기, 다음 반복으로 넘어가기, 중첩 반복문 한번에 빠져나오기 (break, continue, label) 목차 1. 반복문 빠져나오기 (break) 2. 다음 반복으로 넘어가기 (continue) 3. 중첩 반복문 한번에 빠져나오기 (label) 반복문을 컨트롤 하는 방법에 대해서 알아보자! 반복문 빠져나오기 (break) 원래는 반복문의 조건이 false가 될 때 반복문이 종료되어야한다. 그런데 특별한 지시자인 break를 사용하면 중간에도 언제든 원하는 때에 반복문을 빠져나올 수 있다. let sum = 0; while (true) { let value = +prompt("숫자를 입력하세요.", ''); if (!value) break; // (*) sum += value; } alert( '합계: ' + sum ); - 변수 sum은 값이 0이다. - while 반복문에서 조건을 (조건식 대신) tru..
[JavaScript] 반복문 while, for, for in, for of , for each 총정리, 비교, 차이점 완전정복 목차 1. while (문법, 예시) 2. do...while (문법, 예시) 3. for (문법, 예시) 4. for...in (문법, 특징, 용도, 배열x) 5. fot...of (문법, 특징, 예시, for...in과 차이점) 6. forEach (문법, 특징, 예시, for을 forEach로) 7. 모든 반복문 종류 차이점 알아보기 8. 결론 자바스크립트에서는 반복문이 정말 많이 쓰이기 때문에 모르면 안되는 개념이다. 그런데 비슷하게 생긴(for, while 등 단어가 들어간) 반복문 종류가 많아서 정말 혼란 그 자체였다. 그래서 이 모든걸 다 총망라해서 종류와 차이점까지 전부 정리를 해야겠다고 결심했다. MDN, 모던JS인포, 구글링 등등 정말 많은 자료를 보면서 총정리를 해보았다. 무려 이틀 ..
[JavaScript] 배열(Array), 배열의 메서드 총정리 목차 1. 배열 선언 2. 인덱스 3. 배열 요소의 자료형 4. length 5. 배열의 메서드 - pop, push, shift, unshift - splice, slice - concat - indexOf, lastIndexOf, includes - find, findIndex - filter - map - sort - reverse - split, join 배열은 순서가 있는 컬렉션을 저장할 때 쓰이는 자료 구조이다. 배열 선언 빈 배열을 만드는 방법에는 2가지가 있다. let arr = new Array(); 위 방법은 여러 실수를 유발할 수 있는 단점이 있기 때문에 잘 사용이 안된다. let arr = []; 대부분 이 방법으로 배열을 선언한다. 인덱스 - 배열의 순서를 나타낸다. - 0부터 시..
[JavaScript] 콜백 함수 (callback function) 다음은 MDN에서 설명하는 콜백함수의 정의이다. A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. (콜백 함수는 다른 함수에 인수로 전달된 다음 외부 함수 내에서 호출되어 일종의 루틴이나 작업을 완료하는 함수이다.) 콜백 함수 - "인자로 들어가는 함수"가 콜백함수 - 나중에 실행되는 함수 - 함수는 값이기 때문에, 어디든 할당 될수 잇고 어디든 내보내질 수 있다. - 따라서 인자(매개변수)안에도 할당될수 있다. function sum (a){ a=fu..
[JavaScript] 함수 (Function) 총정리 2탄 (함수 호출, 함수 복사 및 할당, 내부변수, 외부변수, 화살표함수) 1탄 못보신 분들은 보고 오세요~! https://dev-ini.tistory.com/40 목차 1. 함수 호출하기 2. 함수 복사해서 다른 변수에 할당하기 3. 내부변수, 외부변수 4. 화살표 함수 (함수 표현식) 함수 호출(실행)하기 새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있다. 함수 이름인 sayHi 옆에 괄호( )를 붙여 호출 →호출하면 함수 본문 alert(" Hello "); 가 실행됨 function sayHi() { alert( "Hello" ); } alert( sayHi() ); //함수의 값, 즉 ("Hello")알림창이 뜸 비교) 괄호 없이 함수 이름만 언급하기 자바스크립트는 괄호가 있어야만 함수가 호출된다. 따라서 괄호 없이 함수 이름만 언급하면, 함수가 실행..
[JavaScript] nullish 병합 연산자 '??' ?? 분명 연산자가 맞는데, 이상하게 이 두개의 물음표만 보면 머릿속에 해석이 안되고 물음표가 생긴다. nullish 병합 연산자를 잘 해석할 수 있도록 해보자. nullish 병합 연산자의 용도 ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있다. 즉, null도 아니고 undefined도 아닌 값을 찾는 데 쓰인다. x = a ?? b x = (a !== null && a !== undefined) ? a : b; ||, &&, ! 를 모른다면 "논리연산자 (ll, &&, !)" 게시글 참고 https://dev-ini.tistory.com/43 ?를 모른다면 "if와 ?를 사용한 조건 처리" 게시글 참고 https://dev-ini.tistory.com/4..

티스토리툴바