함수 정의 | function 함수명 ( ) { }함수는 function 키워드를 사용하여 선언한다.function sayHello() { console.log("Hello, World!); }함수 호출 | 함수명( )C++과 마찬가지로 함수명( )으로 호출할 수 있다.sayHello()함수 표현식 | 변수명 = function( ) { }함수 표현식은 변수에 함수 정의를 할당하는 방식이다. 함수 표현식으로 정의된 함수는 변수를 통해 접근할 수 있다. ▷마치, 함수명이 변수명이 된 것과 같다.const sayGoodBye = function() { console.log("Goodbye, World!") } sayGoodBye() const multiply = function(a, b) { console...
Javascript
들어가면서자바스크립트 객체와 C++ 클래스의 차이점은 두 언어의 철학과 구조적 차이에서 비롯된다. 자바스크립트는 동적 언어로 객체를 자유롭게 정의하고 다룰 수 있는 기능이 풍부하며, 프로토타입 기반의 상속 방식을 사용한다. 반면, C++은 정적 타입 언어로 클래스 기반의 객체 지향 프로그래밍에 최적화되어 있다.C++ 객체와 자바스크립트 객체의 주요 차이점객체 생성과 클래스 개념의 차이C++C++에서는 클래스를 정의하고 그 클래스로부터 객체를 생성한다. 클래스는 엄격한 설계를 기반으로 메모리 구조가 고정되며, 컴파일 시 클래스에 대한 모든 정보가 명확해진다. 예를 들면, class 키워드를 사용하여 클래스의 틀을 정의하고, 이를 통해 객체를 생성해야한다. ▷C++의 객체 정의는 반드시 class 키워드를 ..
들어가면서 자바스크립트에서 함수는 다른 언어와 다르게 하나의 자료형이다. 이는 함수를 매개변수로 전달할 수 있게 된다. 이렇게 매개변수로 전달하는 함수를 콜백함수라고 한다. 콜백함수에 대해 자세히 아래에서 알아보도록 하자. 콜백함수 function callThreeTimes(parameterFunction){ for (let i = 0; i < 3; i++){ parameterFunction(i); } } function print(i){ console.log(`${i}번째 함수 호출`); } callThreeTimes(print); 다음 코드는 매개변수로 함수를 받아서 해당 함수를 3번 호출하는 함수이다. 자바스크립트에서는 함수는 자료형이므로 매개변수 인자 자리에 함수를 넣어 줄 수 있다. 따라서, p..
자바스크립트의 특성 자바스크립트는 C++, Java 등과 같은 언어와 다르게 단일 스레드로 동작하는 언어이다. 이때, 단일 스레드란 한번에 하나의 작업만 처리할 수 있는 스레드 모델을 의미한다. 즉, 하나의 명령어가 실행되면 그 명령어가 수행되기 전까지 다른 명령어를 동시에 수행할 수 없게 된다. 이러한 한계는 비동기(Asynchronous) 처리을 통해 극복할 수 있게 된다. 여기서, 비동기란 하나의 명령어가 다른 명령어와 관계없이 독립적으로 발생하는 것을 의미한다. 즉, 비동기가 예약된 명령어는 결과를 기다리는 동안 다른 비동기가 아닌 명령어가 수행될 수 있게 해준다. 이는 자바스크립트의 한계를 극복하는 점에서 많은 응용프로그램에서 비동기 처리를 자주 사용을 한다. 자바스크립트에서는 콜백 함수, 프로..
Github | https://github.com/logicallaw/nodeProject Structure HTML(main.html) | FE | view engine : nunjucks 공지사항 {% for title in titles %} {{title}} {% endfor %} CSS(style1.css) | FE .grid-container{ display: grid; grid-template-columns: 100px 100px; /*열 개수 및 크기 선언*/ grid-template-rows: 100px 100px; /*행 개수 및 크기 선언*/ } .grid-item{ color:white; background-color: #ff5252; } router.js | BE | Express...
들어가면서 1.일반적으로 하나의 태그에는 하나의 class를 가진다. 2.하지만, 하나의 태그에 여러 개의 클래스를 선언해 CSS 스타일을 독립적으로 혹은 집단적으로 적용할 수 있다. 하나의 태그에 여러 개의 class 선언하기 1.하나의 태그에 여러 개의 class 선언은 '띄어쓰기'로 구분한다. 일 월 화 수 목 금 토 1)위 예제에서 2번째줄 코드와 12번째줄 코드간 grid라는 클래스를 서로 공유하고 있고 각각 서로 다른 date-title클래스와 date-board클래스를 가지고 있다. .grid { display: grid; grid-template-columns: repeat(7,1fr); grid-gap: 5px; padding: 20px; } /* 그리드 각 블록을 div로 정의한다. *..
객체 지향 패러다임 1.'객체'란 속성과 메서드를 갖는 것을 의미한다. 이때, 속성(property)은 key-value 쌍을 의미하고 메서드는 속성 중 자료형이 함수인 경우를 말한다. 2.'객체 지향 패러다임'이란 '객체'를 우선적으로 생각해 프로그램을 만드는 방법론을 의미한다. 3.'객체 지향 프로그래밍 언어'는 '클래스'라는 문법으로 '객체'를 효율적으로 안전하게 만들어 프로그래밍을 용이하게 해준다. 4.'추상화'를 통해 필요한 객체를 선언하고 '클래스'를 통해 객체들을 관리하고 가공할 수 있게 된다. 이때, '추상화'란 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것을 의미한다. 5. C를 제외한 모든 프로래밍 언어는 '객체 지향(Object Oriented)'이라는 패러다임을 기반으로 만들..
들어가면서 1.'그리드 레이아웃(grid layout)' 2차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다. 2.이때, '2차원 방식'이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식을 말한다. 그리드는 플렉스보다 더 폭 넓게 레이아웃을 설계할 수 있다. 3.가로(row)와 세로(column)는 각각 행과 열로 표현되며 표를 만들 수 있다. HTML에서 grid-container 태그 생성하기 1.HTML에서 부모 태그가 되는 그리드 박스와 자식 태그가 되는 그리드 아이템을 생성한다. 2.각각의 그리드 아이템은 부모 태그인 그리드 박스의 CSS 속성에 영향 받는다. ... item-1 item-2 item-3 item-4 ... CSS에서 gri..
들어가면서 1.'플렉서블 박스 레이아웃(flexible box layout)'은 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성이다. 2.이때, '1차원 방식'이란 가로(row)나 세로(column) 중 한 방향으로만 레이아웃을 설계하는 방식을 말한다. 3.플렉스 박스를 사용하기 위해서는 HTML에서 태그를 생성하고 CSS에서 플렉스 박스를 선언해야만 한다. HTML에서 flex-container 태그 생성하기 1.HTML에서 부모 태그가 되는 플렉스 박스와 자식 태그가 되는 플렉스 아이템을 생성한다. 2.각각의 플렉스 아이템은 부모 태그인 플렉스 박스의 CSS 속성에 영향을 받고 동등하게 움직인다. ... item-1 item-2 item-3 item-4 ... CSS에서 f..
HTML CSS -display:inline or inline-block : 요소를 가로로 정렬한다. 만약, ul태그안 li태그에 inline or inline-block를 적용하면 세로로 정렬된 태그들이 가로로 정렬된다. 더불어, inline 속성이 적용되면 li태그에 태그 기호도 사라지게 된다. 여기서, inline 요소는 같은 줄에 포함되는 것을 의미한다. -display:none/block/inline/inline-block: none 설정시 화면에서 보이지 않음. block 설정시 블록으로 설정. inline 설정시 인라인 박스로 설정. inline-block 설정시 블록과 인라인 박스의 중간 형태로 설정. 이때, block은 기본적인 div가 갖게 되는 값으로, 설정하면 width:100%으로..
