It's going to be one day 🍀

안녕하세요! 매일 매일 공부하려고 노력하는 백엔드 개발자 지망생의 공부 흔적입니다.

전체 글 150

[JS] This

[공부 내용 정리] this는 객체를 가리키는 참조 변수임. this는 호출되는 위치에 따라 다른 값을 출력함! 어떤 객체의 메소드가 아닌 단독 호출되는 함수의 this는 전역공간을 참조함. window 객체 : 브라우저 환경의 전역공간. Node.js 환경에서의 전역공간은 global이라는 이름을 가짐. ex) 아래 예제에서 this는 위의 경우에는 window, 아래의 경우에는 myObjd function a(){ console.log(this) } a(); // 함수가 전역공간. 즉 윈도우 공간에 있기 때문에 window라고 출력 let myObj = { val1: 100, func1: function () { console.log(this); } } myObj.func1(); // 함수가 myOb..

Front-End/JS 2024.01.12

[JS] Type(배열, 객체)

* 프로퍼티란? : 키-값 쌍 * method란? : 객체의 프로퍼티에 함수가 할당될 때 그 함수를 method라고 함. [공부 내용 정리] Type JS의 타입은 한국말로 자료형으로 해석되기도 함. 변수의 타입은 다양한 데이터를 용도에 맞게 쓰기 위해서 사용함. 원시타입 : 단순한 데이터를 저장. 참조타입 : 객체로서 저장. 원시타입(Primitive Types) 값이 변경 불가능하며 값을 변수에 저장하거나 전달할 때 값에 의한 전달을 함. → 이런 원시타입 값을 변수에 저장할 때는 값이 복사되어 저장된다. → 원본 데이터를 넣는게 아니고 복제품을 집어넣는 것임. let str1 = 'hello'; let str2 = str1; console.log(str2); // 'hello' str1 = 'wor..

Front-End/JS 2024.01.12

[JS] for문/while문

❗기억할 내용❗ JavaScript에선 (Python에서의 f문자열을) ‘${i}’ 이렇게 사용함! 기억해두기 JavaScript에선 ==(동등 연산자. 자료형이 다를 경우 자동으로 형 변환 후 비교) ===(일치 연산자 또는 엄격한 동등 연산자. 값과 자료형이 모두 동일한지 비교) [공부 내용 정리] 반복문 text = text + cars[0]; // 아래는 축약식! 잘 알아두기 test += cars[0]; 반복문을 사용하면 단순한 작업을 여러번 반복해야 할때 사용함. for(초기화식; 조건식; 증감식) { 실행문; } 초기화식 : 변수를 선언함. 조건식 : 결과(true or false)에 따라 실행문의 실행 여부를 판단함. 증감식 : 실행문 이후 변수의 증감을 나타냄. const cars2 = ..

Front-End/JS 2024.01.11

[JS] 변수/함수/조건문

[공부 내용 정리] JavaScript란? 동적인 웹을 만들기 위한 언어 HTML, CSS를 프로그래밍적으로 제어할 수 있음. 웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍 언어. (였지만 몇 년 전 웹어셈블리가 새롭게 등장) 요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행 할 수 있게 되면서 게임프로그래밍, 서버프로그래밍 등 다양한 분야에서 쓰여지고 있음. 동적인 웹을 위해 자바스크립트가 하는 것 데이터를 저장하다 저장 공간 : var , let , const 저장할 값의 형태 : 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체 코드의 뭉치 : 함수 값을 계산하다 사칙연산 논리연산 조건문 반복문 자료형의 내장함수 결과를 반영하다 ..

Front-End/JS 2024.01.10

[CSS] position/flex

[공부 내용 정리] form 관련 가상 클래스 선택자 :enabeld, :disabled 활성화 /비활성화 상태일때 : read-only, :read-write 사용자가 편집할수 없는/있는 상태일 때 : checked input checkbox radio 유형일때 선택된 상태 : requited 필수입력값일 경우 : : placeholder 입력에 대한 추가 정보가 있을 경우 position position이란? 이름에서처럼, position이란 HTML 태그의 위치를 지정해주는 속성. . position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있음. position의 종류 1) static : 기본적으로 따로 position 속성값을 주지 않았다면 static 값을 가짐. 즉 html에 쓴..

[CSS] 선택자/스타일/상속/boxmodel

[공부 내용 정리] CSS란? CSS는 Cascading Style Sheets의 약자. Cascading (to fall quickly and in large amounts ⇒ 낙하) CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됨. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었음. 우리가 작성한 HTML의 스타일, 레이아웃 등을 꾸미는 역할. CSS를 한번 작성해 여러 HTML에 재사용할 수 있음. 작성방법 선택자(Selector) - 이 요소에 { - 스타일 적용을 시작할게요 속성(Property) - 이 속성에 : - 대응 값은 속성값(Property Value) - 이 값으로 지정해주세요 세미콜론(;) - 해당 속성 ..