본문 바로가기

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

전체 글

(236)
[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(); → '객체 생성자..
[JavaScript] 객체의 얕은 복사, 깊은 복사, 참조 완벽 이해하기 (쉽게쉽게 이해해보자) 얕복과 깊복... 개발 용어로 설명 해놓은 것을 보니 정말 헷갈리는 부분이었지만, 나의 방식대로 비유를 통해서 이해하니 금방 이해가 되었다! 이 게시글을 참고하면 어려웠던 복사의 개념을 이해할 수 있게 될 것이다. 우선 복사의 종류는 2가지이다. 1. 얕은 복사 2. 깊은 복사 여기서 '얕은 복사'는 또 2가지 종류로 나뉜다. (1) 참조에 의한 복사 (2) 값 복사 - 참조에 의한 복사 : 원본을 복사하지만, 원본으로 부터 완전히 독립되지 못하고 수정할 때마다 '동기화'가 진행된다. (즉, 복사한 파일을 수정하면 원본 파일까지 같이 수정된다고 이해하면 쉽다.) - 값 복사 : 원본를 복사하면, 독립된 개체가 생성이 된다. (우리가 워드 파일(A)을 만들고나서, A파일을 복사해서 복사한 파일(B)의 내용..
[JavaScript] 데이터 타입 (자료형) (숫자형, BigInt, 문자열, 불린형, null, undefined, 심볼형, 객체형) 자바스크립트에는 7가지 기본 자료형이 있다. 1. Number (숫자) 2. BigInt 3. String (문자열) 4. Boolean 5. Null 6. Undefined 7. Symbol 8. Object → 배열, 함수, 사용자 정의 클래스도 모두 포함됨 JavaScript 언어의 타입은 원시값과 객체로 나뉜다. 1~7은 기본 자료형 (원시형=Primitive Type) 8은 객체 자료형 (참조형=Reference Type) 이 둘은 무슨 기준으로 나뉠까? 기본 자료형 (원시형) - 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다. - 즉 값이 생성된 후에 그 값을 변경할 수 없다. - 예를 들어 문자열은 불변한다. 이런 일련의 타입을 "원시값"이라고 한다. - 다른 변수에 값..
[JavaScript] 전역, 지역, 객체, 변수, 상수, 속성, 매서드, 함수, 매개변수(인자), 인수 개념 정리 자바스크립트 헷갈리는 용어 정리 전역 : 코드가 사용되는 프로그램 전체 또는 파일 전체 전역은 영어로 Global, 우리가 사는 지구 전 지역 지역 : 프로그램이나 파일 안의 특정 함수, 모듈 등과 같이 특정 범위 지역은 영어로 Local, 그 범위를 특정할 수 있는 지역 객체 : 자바스크립트 프로그램에서 인식할 수 있는 모든 대상 key와 value의 집합 { } 웹브라우저, 웹문저 관련된 것 여러 정보를 가지고 있는 복합 자료형 '객체'에 대한 자세한 내용은 https://dev-ini.tistory.com/39 전역 객체 : 전 지역(코드가 사용되는 프로그램 전체 또는 파일 전체)에서 사용할 수 있는 객체 window객체로, 모든 객체가 소속된 객체, 창이나 프레임을 의미 웹브라우저에서는 windo..
[CSS] grid 정복기 목차 1. grid 2. 행과 열의 개념 3. 2행 3열을 grid로 어떻게 표현하는지 알아보기 4. 위의 코드와 같은 표현법 알아보기 (2행 3열) 5. 각 셀의 영역을 지정하는 법 6. grid를 이용해서 시안대로 배치하기 7. grid-template-areas (아주 직관적인 방법) grid grid를 알면 flex나 position보다 훨씬 쉽게 배치가 가능해진다 grid도 파고들면 복잡하긴 하지만... 복잡한 건 싫으니까 최대한 쉽게쉽게 알아보자. 행과 열의 개념 행(가로) row 행거는 가로로 걸고 → → 열(세로) column 열은 세로줄에 맞춘다 ↓ ↓ ↓ 2행 3열을 grid로 어떻게 표현하는지 알아보기 HTML 1 2 3 4 5 6 CSS .container { width: 600px..
[HTML] <input> 정복기 목차 1. 2. 의 유형들 ( text, button, checkbox, color, date, datetime-local, month, email, file, imge, number, password, radio, range, search, submit, tel, url ) 3. 의 속성들 은 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재하는데, 입력 유형과 특성의 다양한 조합 가능성으로 인해, 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다. 의 유형들 요소의 동작 방식은 type 특성에 따라 현격히 달라진다. 특성을 지정하지 않은 경우, 기본값은 text이다. 디폴트 값. 한줄의 ..
[CSS] position 정복기 목차 1. position 2. position: static 3. position: relative 4. position: absolute 5. position: fixed 6. position: sticky 7. position을 사용해서 장바구니 예제 만들기 position 문서 상에 요소를 배치하는 방법을 지정한다. 값에는 static, relative, absolute, fixed, sticky가 있다. position: static 기본값이며, 요소를 일반적인 문서 흐름에 따라 배치한다. top, right, left, bottom, z-index 속성이 아무런 영향도 주지 않는다. position: relative static이었을 때 배치되는 위치를 기준으로 상대적 위치를 지정할 수 있는 ..