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

Languages/JavaScript

 (27)
[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..
[JavaScript] Hoisting(호이스팅), 변수(var, let, const) 완벽 이해하기 목차 1. 변수의 생성과정 2. 변수의 종류 3. 변수의 특징 4. 호이스팅 (Hoisting) 5. const와 let의 차이점 6. var를 쓰면 안되는 이유 호이스팅(Hoisting)을 이해하기 위해서는 우선 변수에 대한 이해가 필요하다. 변수의 생성과정과 종류 및 특징을 알아보자! 변수의 생성과정 변수의 생성 과정은 3단계로 이뤄진다. 1. 선언 2. 초기화 3. 할당 1. 선언 let message 2. 초기화 let message // undefined 3. 할당 message = 'hello' // hello 개념이 잘 안와닿을 수도 있어서, 쉬운 이해를 위해 비유를 들어보았다. 선언 ( 박스를 사왔다 ) ➔ 초기화 ( 박스를 만든다 ) ➔ 할당 ( 박스에 물건을 담는다 ) 변수의 종류 변수..
[JavaScript] 논리 연산자 ( || (OR), && (AND) , ! (NOT) ) 자바스크립트엔 3종류의 논리 연산자가 있다. ||(OR), &&(AND), !(NOT) || (OR) 친구: "짜장면 또는 짬뽕 또는 떡볶이 중에 뭐 먹을래?" ▷ 이 중에 내가 하나라도 먹고 싶은게 있다? 긍정적 신호를 보낸다. "true!" ▷ 이 중에 하나도 먹고 싶은게 없다? 부정적 신호를 보낸다. "false!" let favoriteFood = prompt("짜장면 또는 짬뽕 또는 떡볶이 중에 뭐 먹을래?",""); if (favoriteFood == "짜장면" || favoriteFood == "짬뽕" || favoriteFood == "떡볶이" ) { alert( `${favoriteFood}이 먹고싶어!` ); }else { alert("false"); } - 인수 중 하나라도 true이..
[JavaScript] if와 '?'를 사용한 조건 처리 (if문, else절, else if, ?) 목차 1. 조건문을 만드는 법 2. if 문 3. 불린형으로의 변환 4. else 절 5. else if 로 복수 조건 처리하기 6. 조건부 연산자 '?' 7. 다중 '?' 조건문을 만드는 법 - "if문" - 조건부 연산자(물음표 연산자) "?" if 문 if문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true면 코드 블록이 실행된다. if (year == 2015) { alert ( "정답입니다!" ); alert ( "아주 똑똑하시네요!" ); } 불린형으로의 변환 if문은 괄호 안의 표현식을 평가하고, 그 결과를 불린값으로 변환시킨다. 따라서 괄호안의 표현식을 평가했을 때, true면 실행하고, false면 실행하지 않는다. if (0) { // 0은 falsy이다. 따라서 아래의 코드..
[JavaScript] 데이터 형 변환 (문자형, 숫자형, 불린형으로 변환) 목차 1. 형 변환 2. 문자형으로 변환하기 3. 숫자형으로 변환하기 4. 불린형으로 변환하기 형 변환 1. 자동으로 변환됨 - 함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. - ex) alert는 전달받은 값의 자료형과 관계없이 이를 문자열로 자동변환해서 보여준다. 2. 의도적으로 원하는 타입으로 변환함 - 함수를 호출해서 의도적으로 변화시킨다. (ex. String(), Number(), Boolean()...) 문자형으로 변환하기 - alert메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야함 - 만약, 다른 형의 값을 전달받으면 이 값은 문자형으로 자동 변환됨 - String(value) 함수를 호출해 전달 받은 값을 문자열로 ..
[JavaScript] 함수 (Function) 총정리 1탄 (함수선언문, 함수표현식, 매개변수, 인수, 기본값, 반환값, console.log와 return의 차이) 목차 1. 함수 선언문과 함수 표현식 2. 함수 이름 짓기 3. 매개변수(인자), 인수 4. 기본값 5. 반환값 6. console.log()와 return의 차이 함수를 적는 방식에는 함수 선언문과 함수 표현문 2가지가 있다. 함수 선언문 - function 키워드, 함수 이름, 괄호로 둘러싼 매개변수를 차례로 써준다. - 매개변수가 없을 수도 있고, 만약 매개변수가 여러 개 있다면 각 매개변수를 콤마로 구분해준다. - 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'을 중괄호로 감싸 붙여준다. function name(parameter1, parameter2, ... parameterN) { // 함수 본문 } function showMessage() { alert( '안녕하세요!' );..
[JavaScript] 객체 (Object) 목차 1. 객체 2. 빈 객체 만드는 법 3. 객체 표기법 4. 프로퍼티 값 얻기, 추가, 삭제하기 5. 계산된 프로퍼티 6. 'in' 연산자로 프로퍼티 존재 여부 확인하기 7. 'for....in' 반복문 8. 일반 객체의 메서드 (keys, values, entries) 객체 - 객체는 중괄호 {…}를 이용해 만들 수 있다. - 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있다. - 키엔 문자형, 값엔 모든 자료형이 허용된다. → 자료형 참고 https://dev-ini.tistory.com/36 - 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부른다. 빈 객체 만드는 법 1. let user = new Object(); → '객체 생성자..

티스토리툴바