오늘의 개발
[JavaScript] 자바스크립트의 객체(Object)
객체란? 객체(Object)란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. const 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ... }; 객체의 특징 객체의 지속성 확보를 위해 const 상수로 선언한다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메서드(method)라고 한다. 프로퍼티 이름은 같은 객체 내에서 중복으로 사용할 수 없다. 프로퍼티 값의 데이터 타입은 제한이 없다. 객체의 프로퍼티, 메서드 참조 객체이름.프로퍼티이름 또는 객체이름["프로퍼티이름"] 객체이름.메소드이름() 메소드를 참조할 때 메서드 이름 뒤에 괄호(())를 붙이지 않으면, 메서드가 아닌 프로퍼티 그 자체를 참..
[JavaScript] 함수 선언문 vs 함수 표현식
자바스크립트의 함수 정의 자바스크립트의 함수를 정의하는 방식은 크게 3가지가 있다. 함수 선언문 함수 표현식 화살표 함수(arrow function) 이 중 함수 선언문과 함수 표현식에 대해 알아보자. 함수 선언문 일반적으로 function 키워드, 함수 이름, 괄호로 둘러싼 매개변수, 중괄호로 둘러싼 실행문을 통해 선언하는 함수를 의미한다. function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 위와 같은 방식으로 아래의 함수를 만들 수 있다. function sayHi() { alert( "Hello" ); } 함수 표현식 함수 선언문으로 정의했던 sayHi() 함수를 함수 표현식으로 생성해보자. const sayHi = function() { ..
[Bootstrap] navbar(내비게이션바) 오른쪽 정렬, 양쪽 정렬
부트스트랩은 사용법이 간단해서 참 좋은데 가끔 의도한 대로 움직이지 않는 경우가 있다. navbar(내비게이션바) 작업을 하면서 이런저런 시도 끝에 알게 된 다양한 정렬에 대해 공유해본다. 1. navbar 왼쪽 정렬(기본) LOGO Home About Resiter Login 부트스트랩에서 제공하는 기본적인 왼쪽 정렬 navbar이다. (반응형 toggle 포함) 2. navbar 오른쪽 정렬 LOGO Home About Resiter Login 태그를 감싸고 있는 태그에 justify-content-end 라는 class를 추가한다. 3. navbar 양쪽 정렬 LOGO Home About Resiter Login 왼쪽에 두고 싶은 메뉴와 오른쪽에 두고 싶은 메뉴를 각각 태그로 감싼다. 2개의 태그를..
[CSS] 중앙 정렬의 3가지 방법(position, flex, table)
수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 중앙 정렬에 대해 알아보자! 화면 정중앙에 요소를 정렬하는 방법은 크게 3가지가 있다. position 속성과 transform 속성 사용 flex 속성 사용 table 속성 사용 1. position 속성과 transform 속성 사용 [HTML] [CSS] .position-center { width: 400px; height: 300px; background-color: green; position: relative; } .position-center > div { width: 100px; height: 100px; background-color: lightgreen; position: absolute; top: 50%; left: 50%; transfo..
[TIL] JS 함수, 객체, 이벤트
✍ Today I Learned 항상 능동적으로 공부할 것! 함수를 사용하면 효율성이 올라간다. arrow function을 이용하면 함수 코드의 양을 줄이면서 변수화 할 수 있다. 그러나 return이 없는 함수라면 굳이 쓰는 의미가 없다. 객체란? 개념적으로 인지 가능해야 함 고유적인 이름으로 구분해야 함 시작과 끝이 반드시 존재해야 함 값이 바뀌어도 객체 자체의 주소값은 바뀌지 않기 때문에 객체는 const로 선언한다. 객체 안에 arrow function을 사용할 수도 있지만 정보가 많아 가독성이 중요하기 때문에 잘 사용하지 않는다. this 키워드는 내가 소속된 객체를 가리킨다. JSON (JavaScript Object Notation)은 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기..
[JavaScript] 자바스크립트의 함수(Function)
함수란? 함수(Function)란 특정 작업을 수행하도록 설계된 독립적인 코드 블록을 의미한다. 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. (호출이 되어야만 작동한다.) 함수의 정의 일반적으로 function 키워드 사용 기능적 의미를 담은 함수의 이름 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) (없어도 가능하다.) 중괄호({})로 둘러싸인 자바스크립트 실행문 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } // addNum라는 이름의 함수를 선엄함. (함수 선언문) function addNum(x, y) { // x, y는 이 함수의 매개변수임. document.write(x + y); } add..
[TIL] JS 연산자, 함수
✍ Today I Learned 논리 연산자의 우선순위에 따라 코드의 효율성이 달라진다. (우선순위 :! > && > ||) 삼항 연산자는 유일하게 피연산자를 3개나 가지는 조건 연산자이다. 짧은 if/else문 대신 사용할 수 있지만, 가독성이 떨어진다는 단점이 있다. // 표현식 ? 반환값1 : 반환값2 let x = 3, y = 5; let result = (x > y) ? x : y // x가 더 크면 x를, 그렇지 않으면 y를 반환함. console.log("둘 중에 더 큰 수는 " + result + "입니다."); 함수는 대부분 개발자가 직접 만들어낸 일반적 기능을 하는 것을 의미하고 메서드는 객체에 소속되어 있는 함수를 의미한다. 파라미터의 데이터 타입은 자유도가 높다. 자바스크립트는 스크..
[JavaScript] 자바스크립트의 연산자(Operator)
연산자란? 연산자(Operators)란 데이터를 원하는 형태로 변경 및 판단하기 위한 코드를 의미한다. 산술 연산자 : 사칙연산, 나머지 연산, 제곱, 루트 등 대입 연산자 : 변수에 값을 대입할 때 사용하는 이항 연산자(재귀적 연산) 증감 연산자 : 미리 정해진 일정 크기를 증가 혹은 감소시키는 연산자 비교 연산자 : 이상, 이하, 미만, 초과, 같음, 다름을 판단하여 참(true)과 거짓(false)을 반환 논리 연산자 : and, or, not and, not or, not 연산자로 판단하여 참(true)과 거짓(false)을 반환 비트 연산자 : 비트 단위로 논리 연산 수행(웹 분야에서는 활용도가 낮음) 그 외 연산자 : 특정 목적이나 형태를 갖는 연산자 산술 연산자 사칙연산을 다루는 가장 기본적..