despiteallthat의 등록된 링크

키자드에 등록된 총 260개의 포스트를 확인하실 수 있습니다.

Tistory

[JavaScript] weakMap과 weakSet

자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지합니다. 예시: HTML 삽입 미리보기할 수 없는 소스 자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대개 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않습니다. 객체의 프로퍼티나 배열의 요소, 맵이나 셋을 구성하는 요소들이 이에 해당합니다. 만약 어떤 배열에 객체 하나를 추가한다면, 이때 배열이 메모리에 남아있는 한, 배열의 요소인 이 객체도 메모리에 남아있게 됩니다. 이 객체를 참조하는 것이 아무것도 없어도 남게 됩니다. 예시: HTML 삽입 미리보기할 수 없는 소스 맵에서 객체를 키로 사용한 경우 역시, 맵이 메모리에 있는 한 객체도 메모리에 남습니다. 즉, 가비지 컬렉터의 대상이 ..

원문보기 내부링크
Tistory

[React] React란?

오늘은 React에 대해 알아봅시다. [ 리액트 React ] 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. 리액트는 자바스크립트에 HTML을 포함하는 JSX(Javascript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔 (Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리입니다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다 보니, 싱글 페이지 애플리케이션을 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 리액트는 페이지 전환 기능을..

원문보기 내부링크
Tistory

[React] Components와 Props란?

오늘은 props에 대해 알아보겠습니다. React에서는 component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환합니다. [ 함수 컴포넌트 ( Function Component ) ] component를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다. HTML 삽입 미리보기할 수 없는 소스 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터입니다.) 객체 인자를 받은 후 react element를 반환하므로 ..

원문보기 내부링크
Tistory

이미지 로딩 지연시키기

이미지 로딩을 지연시키는 코드를 작성해 보자 이미지 로딩 중인 상태를 표시하고 싶을 때 사용 이미지 로딩 후 이미지 데이터에 액세스 하고 싶을 때 사용 웹 페이지 내 이미지 로딩을 지연시키기 위해서는 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 보관한 뒤 요소의 속성 값을 비워야 합니다.. src가 아닌 data-src를 사용하는 이유는 src 속성에 공백 값이 들어가면 네트워크 통신이 발생하기 때문입니다. 로딩하고 싶은 시점에 Map에 보관한 값을 src 속성에 넣어 작업을 처리합니다. 해당 작업을 사용하여 버튼 클릭 시 이미지를 로딩하는 샘플을 확인해 보겠습니다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미..

원문보기 내부링크
Tistory

[JavaScript] data 어트리뷰트와 dataset 프로퍼티

data 어트리뷰트와 dataset 프로퍼티에 대해 알아보자 data 어트리뷰트와 dataset 프로퍼티를 사용하면 HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. data 어트리뷰트는 data-user-id, data-role과 같이 data-접두사 다음에 임의의 이름을 붙여 사용한다. HTML 삽입 미리보기할 수 없는 소스 data 어트리뷰트의 값은 HTMLElement.dataset 프로퍼티로 취득할 수 있다. dataset 프로퍼티는 HTML 요소의 모든 data 어트리뷰트의 정보를 제공하는 DOMStringMap 객체를 반환한다. DOMStringMap 객체는 data 어트리뷰트의 data-접두사 다음에 붙인 임의의 이름을 카멜 케이스로 변환한 프로퍼..

원문보기 내부링크
Tistory

[Responsive web] max-(width/height)과 min-(width/height) 그리고 반응형 웹

max-( width / height )과 min-( width / height )의 여러 쓰임새에 대해 알아보자 [ max- width / height ] max-width와 max-height는 어떤 요소의 최대 너비와 높이값을 설정하는 속성이다. 반응형 웹 디자인에서 화면에 따라 스타일을 적용할 때 자주 사용한다. ※ max-width 속성 어떤 요소의 최대 너비를 지정하며, 요소의 너비값이 max-width 너비값보다 커지는 것을 방지한다. 즉, max-width는 width 속성값을 무효화시킨다. 예를 들어 이미지 가로 너비가 500px 일 때, max-width: 400px으로 설정하면 400px 이하로만 이미지가 보인다. ※ max-height 속성 요소의 최대 높이를 지정한다. max-he..

원문보기 내부링크
Tistory

[Node.js] Router 사용하기

Router를 사용해 보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 위의 소스 코드의 경우 간단하지만 이렇게 모든 코드를 하나의 app.js 파일에 기록하면 파일의 크기가 계속 커지게 된다. 물론 이 정도 규모의 앱에 대해서는 문제가 되지 않는다. 그러나 일반적으로는 라우팅 코드를 여러 파일로 나누는 것이 좋다. 현재 로직을 여러 파일로 내보내서 이 파일로 임포트 해보자. 내보낼 파일을 직접 만들 수도 있지만 Express.js는 라우팅을 다른 파일에 위탁하는 편리한 방법을 제공한다. routes라는 이름의 새로운 폴더를 만들어 보자 ( 다른 이름으로 만들어도 되지만 보통의 관행이라 한다, :) ) admin.js라는 파일과 shop.js라는 라우팅 파일을 생성했다. admin.js 에서는..

원문보기 내부링크
Tistory

[Node.js] 오류 페이지 추가하기

페이지 오류가 났을 때를 대비하여 오류 페이지를 추가하는 방법에 대해 알아보자 URL에 정해놓은 문자열이 아닌 무작위 문자열을 입력하면 오류가 발생한다. 일반적으로는 이런 경우 404 error 페이지가 나타나는데 express가 미들웨어를 사용해 요청을 처리하는 방법을 활용하면 해결할 수 있다. HTML 삽입 미리보기할 수 없는 소스 app.use((req, res, next) => { res.status(404).send("Page not found"); }); 다음과 같이 미들웨어 안에 res.status()를 사용하면 해결할 수 있다. status(??)처럼?? 에는 특정 오류코드가 발생했을 때 내가 처리하고 싶은 오류 코드를 넣으면 된다.

원문보기 내부링크
Tistory

[Node.js] HTML 페이지 서비스

HTML 페이지 서비스에 대해 알아보자 예를 들어 위와 같은 경로로 파일이 저장되어 있다고 가정해 보자. node.js를 이용해 HTML 페이지를 서비스하기 위해서는 어떻게 해야 할까? admin.js라는 파일에서 add-product.html을 서비스 해보자 res.sendFile을 사용하면 사용자에게 파일을 회신할 수 있다. 우선, join 메서드를 호출하기 위헤 path라는 코어 모듈을 임포트 해준다. const path = require('path'); path의 경우 Node.js가 기본적으로 제공하는 기능이므로 따로 설치할 필요는 없다. join메서드를 호출함으로서 생성한 경로로 파일을 보낼 수 있다. path.join('첫 번째 세그먼트', '두 번째 세그먼트', '세 번째 세그먼트'... ..

원문보기 내부링크
Tistory

[JavaScript] JSON.stringify / JSON.parse란?

JSON.stringify와 JSON.parse에 대해 알아보자 [ JSON.stringify ] JSON.stringify 메서드 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화해야 하는데 이를 직렬화(serializing)라 한다. HTML 삽입 미리보기할 수 없는 소스 JSON.stringify 메서드는 객체뿐만 아니라 배열도 JSON 포맷의 문자열로 변환한다. HTML 삽입 미리보기할 수 없는 소스 [ JSON.parse ] JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다. 서버로부터 클라이언트에게 전송된 JSON 데이터는 문자열이다. 이 문자열을 객체로서 사용하려면 JSON 포맷의 문자열을 객체화해야 하는데 이를 역직렬화(de..

원문보기 내부링크
Tistory

[JavaScript] XMLHttpRequest란?

XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다. Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다. [ XMLHttpRequest 객체 생성 ] XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다. XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다. // XMLHttpRequest 객체의..

원문보기 내부링크
Tistory

[JavaScript] REST API란?

REST API에 대해 알아보자 XMLHttpRequest 참고 :) https://despiteallthat.tistory.com/149 [JavaScript] XMLHttpRequest란? XMLHttpRequest에 대해 알아보자 [ XMLHttpRequest ] 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공한다. 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHt despiteallthat.tistory.com [ REST API ] REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩(Roy Fielding)..

원문보기 내부링크
Tistory

[Node.js] 외부에서 css 적용하기

외부에서 css를 적용하는, 정적으로 파일 서비스하는 방법에 대해 알아보자 내가 관리하고 있는 node.js 폴더가 이런 구성을 갖고 있다고 해보자. 일반적으로 css를 html 파일에 외부에서 연결시킬 때는 경로를 따라가서 적용시킨다. 하지만 node.js에서 이 방식을 사용하면 다음과 같이 적용이 되지 않는다. 모든 스타일링이 적용이 되지 않는데 개발자 도구에서 볼 수 있듯이 파일 시스템에 엑세스 하지 못해 main.css 파일을 찾지 못한다. 이를 구현하려면 Express.js가 제공하는 기능이 필요하다. 바로, 파일을 정적으로 서비스하는 기능이다. 정적이란 의미는 express.Router이나 다른 미들웨어 소프트에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 것을 뜻한다. 이를 위해 app..

원문보기 내부링크
Tistory

[Png] Pug에 대해 알아보자

오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. 즉 Pug는, HTML을 Pug 문법으로 작성하여 HTML로 바꿔주는 기능을 한다. [ Pug 설치 & 사용법 ] Pug는 Express의 패키지 view engine이다. $ npm..

원문보기 내부링크
Tistory

[Png] 동적 콘텐츠 출력

Pug를 이용하여 동적 콘텐츠를 출력해 보자 참고: https://despiteallthat.tistory.com/152 [Node.js] pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 / Pug ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기 despiteallthat.tistory.com shop.png HTML 삽입 미리보기할 수 없는 소스 app.js HTML 삽입 미리보기할 수 없는 소스 admin.js HTML 삽입 미리보기할 수 없는 소스 shop.js HTML 삽입 미리보기할 수 없는 소스 const products = adminData.products; res...

원문보기 내부링크
Tistory

[JavaScript] 비동기 프로그래밍

비동기 프로그래밍에 대해 알아보자 [ 동기 처리와 비동기 처리 ] 실행 콘텍스트에 따르면 함수를 호출하면 함수 코드가 평가되어 함수 실행 콘텍스트가 생성된다. 이때 생성된 함수 실행 콘텍스트는 실행 콘텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 콘텍스트는 실행 콘텍스트 스택에서 팝 되어 제거된다. 함수 호출 -> 함수 코드 평가 -> 함수 실행 콘텍스트 생성 -> 실행 콘텍스트 스택(콜 스택)에 푸시 -> 함수 코드 실행 -> 함수 코드 실행 종료 -> 함수 실행 컨텍스트를 실행 콘텍스트 스택에서 팝 되어 제거 함수가 실행되려면 "함수 코드 평가 과정"에서 생성된 함수 실행 콘텍스트가 실행 콘텍스트 스택에 푸시되어야 한다. 다시 말해, 실행 컨텍스트 스..

원문보기 내부링크
Tistory

[Png] Pug layout 만들기

Pug를 이용하여 공통된 layout을 만들어보자 shop.html HTML 삽입 미리보기할 수 없는 소스 add-product.html HTML 삽입 미리보기할 수 없는 소스 404.html HTML 삽입 미리보기할 수 없는 소스 위 3개의 html에는 공통된 부분을 main-layout.pug로 변환해 보자 HTML 삽입 미리보기할 수 없는 소스 위와 같이 공통된 부분을 하나의 파일로 저장해두면 다른 png 파일에서 이를 extends 하여 사용할 수 있다. title의 경우 #{pageTitle}과 같이 동적 렌더링을 위해 각각의 js 파일에 랜더링을 위한 pageTitle 키와 값을 설정해줘야 한다. app.js admin.js shop.js block styles 과 block content의 ..

원문보기 내부링크
Tistory

[EJS] EJS에 대해 알아보자

EJS에 대해 알아보자 [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 쓰이는 마크업 언어인 HTML은 정적인 언어이다. 정적이기 때문에 주어진 기능만 사용할 수 있으며, 직접 기능을 추가할 수 없다. ( 자바스크립트를 사용하면 가능하다.) 템플릿 엔진은 자바스크립트를 사용하여 HTML을 렌더링 할 수 있게 해 준다. 따라서 기존 HTML과 문법이 다른 부분이 있고, 자바스크립트 문법이 들어가기도 한다. ( 놀랍다. ) 템플릿 엔진에는 대표적으로 퍼그 (Pug), EJS, Handlebars 등이 있다. https://despiteallthat.tistory.com/152 [Png] Pug에 대해 알아보자 오늘은 pug에 대해 알아보자 :) [ 템플릿 엔진 ] 웹 페이지 구성 시 가장 기본적으로 ..

원문보기 내부링크
Tistory

[JavaScript] Web Animation API란?

Web Animation API에 대해 알아보자 HTML 삽입 미리보기할 수 없는 소스 [ Web Animation API ] Web Animation API는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. DOM 요소의 애니메이션과 같은 웹 페이지 표시에 대한 동기화 및 타이밍을 변경하는 것이 가능하다. 또한 타이밍 모델과 애니메이션 모델 두 가지 모델을 결합하여 수행할 수 있다. 또한, CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 하지만 Web Animation API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체를, 두 번째 인수는 애니메이션 속성을 포함하..

원문보기 내부링크
Tistory

배경색 무작위 조작하기

배경색을 랜덤으로 조작할 수 있는 버튼을 만들어 보자 조건 1. 버튼을 누르면 배경색을 두 가지 색이 섞인 색으로 변경시켜 준다. 2. linear-gradient로 지정되는 색깔 두 개는 같을 수 없다. 3. 만약 같은 색깔 두 개가 선정될 경우 두 번째 색상을 임의로 바꿔준다. 소스 코드 HTML 삽입 미리보기할 수 없는 소스 Script HTML 삽입 미리보기할 수 없는 소스 button을 클릭했을 때 변경할 수 있는 color를 배열로 담아놓고 랜덤함수를 통해 random1과 random2에 무작위로 0부터 5까지의 수를 초기화시킨다. 그리고 random1과 random가 같은 숫자일 경우를 검사하기 위해 checkNum 함수를 사용한다. 만약 checkNum 함수에서 확인결과 같을 경우 chan..

원문보기 내부링크
Tistory

[Node.js] writeFile vs writeFileSync

fs.writeFile과 fs.writeFileSync에 대해 알아보자 https://despiteallthat.tistory.com/131 [Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Ty despiteallthat.tistory.com // 요청 본문 분석 // http 모듈 사용 const http = require('http'); // require 파일을..

원문보기 내부링크
Tistory

[JavaScript] 변수명 앞에 붙는 달러($)의 의미 (jQuery X)

jQuery가 아닌데 변수명 앞에 $를 붙이는 경우를 알아보자 예전부터 jQuery를 쓰지 않는데 $를 붙이는 경우가 있어서 궁금했었다. 그래서 이번 기회에 그 이유를 알아보고자 한다. 보통 구글에 검색하다 보면 변수명 앞에 $가 붙는다는 것은, jQuery에서 쓰는 변수명을 의미한다는 글이 많았다. $는 jQuery에서 매우 일반적인 사용으로 변수에 저장된 jQuery 객체를 다른 변수와 구별하는 것이다. 윗 말이 제일 많았다. 혹은, jQuery가 아닐 때에도 jQuery를 사용해서 받은 것을 변수에 넣었다는 것을 표시하기 위해서?라는 말이 있었다. (jQuery를 사용하지는 않는데, jQuery를 사용해서 받은 것??? (의문) 무슨 말인지 이해가 잘 안 되고, jQuery라는 단어를 써야만 대답할..

원문보기 내부링크
Tistory

숫자 뽑기 게임

숫자 뽑기 게임을 만들어보자 ※ 조건 1. 0부터 내가 선택한 숫자 범위 내에서 비교할 숫자를 입력해야 한다. 2. 비교할 숫자가 내가 선택한 숫자보다 클 수 없다. 3. 비교할 숫자는 0이거나, 음수일 수 없다. 4. 0부터 내가 선택한 숫자 범위 내에서 "Play!" 버튼을 누를 때마다 랜덤으로 숫자를 생성하여 비교할 숫자와 크기를 비교한다. 5, 비교 결과를 알려준다. HTML HTML 삽입 미리보기할 수 없는 소스 JavaScript HTML 삽입 미리보기할 수 없는 소스 결과 HTML 삽입 미리보기할 수 없는 소스

원문보기 내부링크
Tistory

[JavaScript] 요소 다루기 / 요소 추가하기 / 요소 삭제하기

요소를 다루는 법에 대해 알아보자 [ 부모 / 자식 / 전 / 후 요소 읽어오기 ] ※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 속성 의미 타입 부모노드.children 자식 노드 요소군(HTMLCollection) 부모노드.firstElementChild 첫 번째 자식 노드 요소(Element) 부모노드.lastElementChild 마지막 자식 노드 요소(Element) 노드.nextElementSibling 다음 노드 요소(Element) 노드.previousElementSibling 이전 노드 요소(Element) 자식노드.parentNode 부모 노드 노드(Node) 소스 코드 HTML 삽입 미리보기할 수 없는 소스 [ 부모 요소에 자식 요소 추가하기 ] ※ 동적 표시 요소를 추가하고..

원문보기 내부링크
Tistory

[Node.js] 모듈 시스템 사용

모듈 시스템을 사용하는 법에 대해 알아보자 기존 소스 코드 HTML 삽입 미리보기할 수 없는 소스 저번에 작성한 코드를 보면 하나의 파일만 해도 많은 코드가 존재한다. 보통 이렇게 여러 파일을 작업하게 되는데 url 확인 등의 작업을 하는 라우팅 로직을 포함한 새 파일을 나누어 코드를 분산시킬 수 있다. [ routes.js ] routes.js라는 파일을 만들어 uf문과 기본 응답 코드를 분리해서 넣어주자 HTML 삽입 미리보기할 수 없는 소스 const fs = require('fs');을 먼저 추가해주고 기존 소스파일에서는 지워준다. 기존 소스파일과 routes.js를 연결하기 위해 requestHandler 함수를 생성해 req와 res를 인수로 갖게 만들어주고 아래에 있는 기존 소스파일의 htt..

원문보기 내부링크
Tistory

[Node.js] npm script

npm script에 대해 알아보자 [ npm script ] NPM은 노드 패키지 매니저를 뜻하며 node.js 내부에 함께 설치되어 있다. NPM을 이용하여 노드 코어 (나의 패키지)에 포함되지 않은 패키지 즉 노드 코어 모듈의 일부가 아닌 패키지를 설치할 수 있다. npn init을 터미널에 입력하고 설치하면 되며 나오는 질문들에 답변을 하면 기본 값이 설정된다. 설정된 기본 값은 package.json에서 확인할 수 있으며 여기서 편집도 가능하다. 기본적으로 JavaScript 객체와 매우 유사해 보이는 특수한 종류의 데이터 형식인 JSON 형식을 사용하며, 이를 기반으로 한다. 위의 사진을 보면 scripts 구획이 있는데 여기에 다른 스크립트들을 추가할 수 있다. 현재는 "start" : "n..

원문보기 내부링크
Tistory

[Node.js] Nodemon 설치하기

Nodemon을 설치해 보자 [ Nodemon ] Nodemon이란 Node 서버를 이용하면서 코드를 변경하게 될 경우, 변경한 코드를 웹 상에서 확인하려면 서버를 내렸다가 다시 올려야 변화된 것을 확인할 수 있는데, Nodemon은 서버를 내리고 올리지 않아도 소스를 변경할 때 즉시 감지하여 자동으로 서버를 재시작해주는 도구이다. 즉, Nodemon은 자동 재시작 메커니즘을 위해 사용하는 도구이다. 자세한 사항은 아래의 링크에서 확인할 수 있다. https://www.npmjs.com/package/nodemon nodemon Simple monitor script for use during development of a Node.js app.. Latest version: 2.0.20, last pu..

원문보기 내부링크
Tistory

[Node.js] Express란?

Express란 무엇인가? [ Express ] Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이다. Node.js는 표준 웹서버 프레임워크로 불려질 만큼 많은 곳에서 사용하고 있다. Node.js와 Express는 무슨 관계일까? Node.js는 Chrome의 V8엔진을 이용하여 JavaScript로 브라우저가 아니라 서버를 구축하고, 서버에서 JavaScript가 작동되도록 해주는 런타임 환경(플랫폼)이다. Express는 이런 Node.js의 원칙과 방법을 이용하여 웹 애플리케이션을 만들기 위한 프레임 워크이다. 간단하게 말하자면, Express란 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래..

원문보기 내부링크
Tistory

[Node.js] 미들웨어란?

미들웨어 (middleware)에 대해 알아보자 [ 미들웨어 (middleware) ] 미들웨어는 req(요청) 객체, res(응답) 객체, 그리고 애플리케이션 요청-응답 사이클 도중 그다음의 미들웨어 함수에 대한 액세스 권한을 next 인자로 갖는 함수를 말한다. 또한 next 호출을 통해 다음에 있는 미들웨어를 실행하도록 결정할 수도 있다. 즉 미들웨어란 클라이언트에게 요청이 오고, 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리하는, 거쳐가는 함수라고 할 수 있다. 다음 미들웨어 함수에 대한 엑세스는 next 함수를 이용해서 다음 미들웨어로 현재 요청을 넘길 수 있다. next라는 말에서 알 수 있듯이 next를 통해 미들웨어는 순차적으로 처리된다. (따라서 작성 순서가 매우 중요..

원문보기 내부링크
Tistory

[Node.js] 애플리케이션 레벨 미들웨어

[ 애플리케이션 레벨 미들웨어 ] app.use() 및 app.METHOD() 함수(*method: get, post 등등)를 이용해 app 오브젝트의 인스턴스에 바인드 시킨다. 미들웨어를 어플리케이션 영역에서 지정한 path대로 처리 가능하게 하도록 한다. HTML 삽입 미리보기할 수 없는 소스 첫 번째 미들웨어에서 'In the middleware!'를 출력하고 next()를 통해 다음 미들웨어로 넘어간다. 두 번째 미들웨어에서 'In another middleware!'를 출력하고 h1 태그와 그 안에 Hello from Express!를 출력한다. 서버를 생성하기 위해 기존에는 아래와 같이 작성하였다. const http = require('http'); const server = http.cre..

원문보기 내부링크
Tistory

[CSS] 텍스트 세로로 표시하기

텍스트를 세로로 표시하는 법을 알아보자 // 세로로 왼쪽 -> 오른쪽 writing-mode: vertical-lr; // 세로로 오른쪽 -> 왼쪽 writing-mode: vertical-rl; // 영어는 추가로 작성 text-orientation: upright; writing-mode 속성을 이용해서 세로로 텍스트를 표시해 줄 수 있다. 한글을 타이핑할 때는 세로로 보이지만, 영어로 타이핑될 때는 기존 속성으로는 90 º 돌아간 모습으로 표시된다. 이를 해결하는 방법으로는 text-orientation 속성을 이용하면 된다.

원문보기 내부링크
Tistory

[Responsive web] 미디어쿼리란?

미디어쿼리에 대해 알아보자 [ 미디어쿼리 ] 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and (조건문) {실행문} @media : 미디어 쿼리가 시작됨을 표시한다. only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능) all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능) all : 모든 미디어 유형해서 사용할 CSS를 정의 print : 인쇄 장치에서 사용할 CSS를 정의 screen : 컴퓨터 스크린에서 사용할 CSS를 정의 aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의 tv : TV에서 사용할 CSS를 정의 handheld : 손에 들고 다니는 장치를 사용할 CSS를 ..

원문보기 내부링크
Tistory

[Responsive web] 반응형 페이지 layout 만들기 Ver_1

layout 만들기 Ver_1 시맨틱 태그 참고 : https://despiteallthat.tistory.com/57 [HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag) 오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 [ 시멘틱 웹 ] 시멘틱 웹이란? 시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 despiteallthat.tistory.com ※ 화면너비 1200px 초과 #wrap의 영역의 width 1200px ※ 화면 너비 0 ~ 1200px @media (max-width:1200px){ #wrap { width: 98%; } } #wrap 영역의 width 전체..

원문보기 내부링크
Tistory

[Responsive web] 반응형 페이지 layout 만들기 Ver_2

layout 만들기 Ver_2 ※ 화면 너비 1220px 초과 width 100%, 전체 영역 차지 ※ 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px){ aside { width: 40%; } section { width: 60%;} article { width: 100%; height: 300px; float: none; clear: both;} } aside 영역이 전체 너비의 40%, section 영역이 전체 너비의 60%를 차지하며, article은 아래로 내려간다. ※ 화면 너비 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 788px){ aside { width: 100%; } s..

원문보기 내부링크
Tistory

[Responsive web] 반응형 페이지 layout 만들기 Ver_3

layout 만들기 Ver_3 ※ 화면너비 1260px 초과 ※ 화면너비 1260px 이하 /* 화면 너비 0 ~ 1240px */ @media (max-width: 1260px){ #wrap{ width: 100%;} section:nth-of-type(1) { height: 300px;} section:nth-of-type(2) { height: 300px;} section:nth-of-type(3) { width: 100%; height: 300px;} article { width: 100%; height: 300px;} } 첫 번째 section과 두 번째 section의 높이를 300px로 수정 => aside의 높이가 600px이기 때문에 기존에 section의 높이가 200px 일 때는 se..

원문보기 내부링크
Tistory

[JavaScript] 심벌이란?

심벌에 대해 알아보자 [ 심벌 (Symbol) ] 심벌은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않은 유일무이한 값이기 때문에 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 다른 값과 중복되지 않는 유일무이한 값 변경 불가능한 원시 타입의 값 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해서 사용 [ 심벌 값 생성 ] 심벌 값은 Symbol 함수를 호출하여 생성한다. 이때 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않은 유일무이한 값이다. // Symbol 함수를 호출하여 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); con..

원문보기 내부링크
Tistory

[JavaScript] for of 문과 for in 문

여려가지 for문에 대해 알아보자 [ for .. of 문 ] for...of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for...of 문의 문법은 다음과 같다. for (변수선언문 of 이터러블) { ... } for...of 문은 for...in 문의 형식과 매우 유사하다. for (변수선언문 in 객체) { ... } 하지만 두가지 for문에는 차이가 있다. for...in 문의 경우 객체 혹은 유사 배열 객체라면 사용할 수 있다. 유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for문과 for...in 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형..

원문보기 내부링크
Tistory

[Responsive web] cloneCoding Elarm Artists

Elarm Artists 사이트를 따라 해보자 https://elamartists.ac.nz/? year_select=2022&themes_select=all&practice_areas_select=all Elam Artists — The University of Auckland elamartists.ac.nz 따라 할 Elarm Artists main page 완성본 HTML 더보기 Year: 2022 2021 2020 2019 Programme: ALL BFA BFA(Hons) PGDipFA Themes: All Abstraction Affect Agency Practice: All Artist's Book Ceramics Comics Students Susu Ali senescall Alyssa K..

원문보기 내부링크
Tistory

[Responsive web] 반응형 페이지 layout 만들기 Ver_4

layout 만들기 Ver_4 width 1220px 초과 width 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%;} section > div { width: 23%;} section > div:nth-child(5n) { display: none;} } section 안에 div 5번째와 10번째를 display: none;으로 만들어 한 줄에 4개씩 표시 width 768px 이하 /* 화면 너비 0 ~ 768px */ @media (max-width: 768px) { #wrap { width: 100%;} section > div { width: 31.333333%;} section > div:nt..

원문보기 내부링크
Tistory

[Responsive web] 반응형 페이지 layout 만들기 Ver_5

layout 만들기 Ver_5 소스코드 더보기 화면 너비 1220px 초과 section { clear: both; width: 100%; height: 200px; background-color: #bebee8; display: flex; justify-content: space-around; align-items: center; } section>div { width: 15%; margin: 5%; height: 80%; background-color: #9090ed; border-radius: 20px; } 화면 너비 1220px 이하 /* 화면 너비 0 ~ 1200px */ @media (max-width: 1220px) { #wrap { width: 100%; } .bottom-article {..

원문보기 내부링크
Tistory

[JavaScript] 스프레드 문법

스프레드 문법에 대해 알아보자 [ 스프레드 문법 ] ES6에서 도입된 스프레드 문법(spread syntax)... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 (전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션 (NodeList, HTMLCollection), arguments와 같이 for... of 문으로 순회할 수 있는 이 트러블에 한정된다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e ..

원문보기 내부링크
Tistory

[Javascript] 디스트럭처링 할당

디스트럭처링 할당에 대해 알아보자 [ 디스트럭처링 할당 ] 디스트럭처링 할당(destructuring assignment (구조 분해 할당))은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이는 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. [ 배열 디스트럭처링 할당 ] 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다. const arr = [1, 2, 3]; const [ one, two, three ] = arr; c..

원문보기 내부링크
Tistory

[Javascript] Set이란?

Set에 대해 알아보자 [ Set ] Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X [ Set 객체의 생성 ] Set 객체는 Set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set, 객체에 요소로 저장되지 않는다. const set1 = new ..

원문보기 내부링크
Tistory

[Node.js] Node.js란?

Node.js란 무엇인가? Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 간단하게 말하면, Node.js의 사용 목적은 사용자에게 데이터를 회신하는 코드를 서버에 작성해서 클라이언트가 사용하게 하는 것을 말한다. ※ Node.js의 역할 Node.js로 서버 사이드 코드를 작성하고 서버에서 실행하게 한다. 브라우저를 사용하..

원문보기 내부링크
Tistory

[Node.js] 코드 실행방법

Node.js에서 코드를 실행하는 방법에는 크게 2가지가 있다. [ REPL ] Read : Read User Input Eval : Evaluate User Input Print: Print Output (Result) Loop: Wait for new Input 터미널에 node를 입력 시 REPL에 진입할 수 있다. 이는 파일 시스템 패키지에서 한 줄씩 임포트가 가능하지만, 저장은 불가능하다. 즉, 일부 기능을 실행할 때 간단하게 사용할 수 있다. 터미널에 node라고 입력하고 내가 확인하고 싶은 간단한 내용을 타이핑하면 된다. ( Node.js 가 깔려있어야 함 ) [ 파일 실행 ( Execute Files) ] js 파일을 만들어서 그 안에 소스 코드를 입력하고 터미널에서 실행시키는 방법이다. ..

원문보기 내부링크
Tistory

[Javascript] Map이란?

Map에 대해 알아보자 [ Map ] Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size [ Map 객체의 생성 ] Map 객체는 Map 생성자 함수로 생성한다. Map 생성자 함수에 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요..

원문보기 내부링크
Tistory

[Javascript] event.preventDefault() 와 event.stopPropagation()

event.preventDefault()와 event.stopPropagation()에 대해 알아보자 [ event.preventDefault() ] event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정한다. 주로 사용되는 경우를 나열하자면, 1. 페이지를 이동시키는 a 태그를 눌렀을 때 이동을 막음 2. form 태그 안에 submit 역할을 하는 버튼을 눌러도, submit은 작동하되 새로 실행되지는 않게 함 2번의 경우 내가 행한 event에 대해 (여기서는 submit) preventDEfault를 해주지 않았기 때문에 submit 됨과 동시에 창이 다시 실행되서 초기..

원문보기 내부링크
Tistory

Drag & Drop 이용하여 이미지 올리기

Drag & Drop 이용하여 이미지를 올려보자 HTML 이미지를 올려주세요 업로드한 이미지 CSS 더보기 body { display: block; overflow: scroll; width: 100%; height: 100vh; } .file-zone { background-color: rgba(0, 0, 0, 0.1); box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 100%; height: calc(100% - 400px); transition: 0.1s all ease-out; } .file-zone.on { background-color: rgba(97, 131, 209, 0.9)..

원문보기 내부링크
Tistory

[Node.js] 서버생성

Node.js로 서버 생성을 해보자 const http = require('http'); const server = http.createServer((req,res) => { console.log(req); }); server.listen(3000); Node.js에 탑재된 http 모듈의 기능을 전역에서 사용하기 위해 const로 변수를 생성해 준다. (var과 let으로도 생성이 가능하지만, 절대 변경하지 않을 값을 사용할 것이므로 const를 사용해서 다시 변경하지 못하게 할 것이다.) const http = require('http'); http라는 이름으로 변수를 선언하면, http 뒤에 =를 붙인 다음 값을 지정해야 한다. 이때, 특별한 키워드 및 기능을 사용할 수 있는데, Node.js는 전..

원문보기 내부링크
Tistory

[Node.js] Node Life Cycle & Event Loop

Node Life Cycle & Event Loop에 대해 알아보자 ※ node app.js 실행 node app.js를 파일을 실행하면 스크립트가 시작되어 Node.js가 파일 전체를 살펴보고 코드를 분석한 후 변수와 함수를 등록한다. => 전체 코드를 읽고 실행 ※ 계속 작동하는 이벤트 리스너 전체 코드를 읽고 실행하는데 목적을 달성해도 프로그램을 끄지 않는다. 이는 Node.js에서 중요한 개념인 이벤트 루프 때문이다. Node.js가 관리하는 이벤트 루프는 작업이 남아 있는 한 계속해서 작동하는 루프 프로세스로, 이벤트 리스너가 있는 한 계속 작동한다. 등록 후 제거하지 않았던 이벤트 리스너로 createServer가 만든 요청 리스너가 있다. createServer에 계속되는 이벤트 리스너라는 ..

원문보기 내부링크
Tistory

Http 301 / 302 Redirect의 차이

Http 301과 302 Redirect의 차이를 알아보자. HTTP Response Status Code는 요청에 대한 웹서버의 응답을 나타내는 코드를 말한다. 이 코드를 바탕으로 웹브라우저나 검색엔진 크롤러는 요청을 어떻게 처리해야 할지 판단한다. 이중 301과 302 코드는 사용자를 새로운 URL로 이동시키는 코드이다. [ 3XX Redirection ] HTTP 상태 코드는 보통 5개의 클래스로 구분된다. 우리가 많이 보는 404나 500 코드의 경우도 다 구분이 되어 있다!! HTTP 상태코드의 첫번째 자리 숫자는 이 코드가 어떤 클래스에 속하는지 나타내는다 301과 302는 "3XX Redirection" 클래스에 속하게 된다. Redirection 클래스에 속하는 상태코드들은 클라이언트를 지..

원문보기 내부링크
Tistory

[Node.js] 응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석

응답 헤더 / 라우터 요청 / 요청 리디렉션 / 요청 분석에 대해 알아보자 [ 응답 헤더 ] const http = require('http'); // require 파일을 불러오는 방법 const server = http.createServer((req,res) => { res.setHeader('Content-Type', 'text/html'); }); // 서버를 생성할 때 꼭 필요한 메서드 res.setHeader란 뭘까? setHeader의 경우 새로운 헤더를 설정하는 것을 말한다. 예를 들면 Content-Type은 브라우저가 알고 이해하며 받아들이는 디폴트(default) 헤더이며, 인수로 setHeader 안에 이 헤더 키에 대응하는 값을 설정하고 text/html에 전송하거나 설정할 수 ..

원문보기 내부링크
Tistory

[Visual Studio Code] input type="file"

input type="file"에 대해 알아보자 code 이미지 미리보기 1. type을 file로 할 경우 파일을 선택할 수 있는 버튼이 생기고 원하는 파일을 넣을 수 있다. ( 단, 다중 선택 불가 ) 파일을 선택해서 넣으면 파일 이름을 보여준다. 2. type을 file로 하고 mutiple 속성을 지정하면 한 번에 여러 파일을 선택해서 넣을 수 있다. 3. accept 속성을 지정하면 내가 지정한 파일 형식만 올릴 수 있다. 위와 같이 "image/*"라고 지정하면 이미지 파일만 업로드 가능하고, 파일 형식은 상관없다는 뜻이다. 이렇게 파일 형식이 자동으로 지정되어 있다. 하지만 모든 파일로 바꾸면 accept 속성을 지정해도 올라간다는 단점이 있다. 4. accept 속성은 image뿐만 아니라..

원문보기 내부링크
Tistory

[JavaScript] FileReader 객체에 대해 알아보자

FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사용되며, File 또는 Blob 객체를 읽어서 result 속성에 저장한다. 개발자는 result 속성을 통해 데이터에 접근할 수 있다. [ 비동기 동작 ] JavaScript에서 setTimeout() 함수, AJAX 요청(API 요청)처럼 잠재적으로 시간이 소모되는 작업은 HTML 페이지 렌더링에 영향을 줄 수 있으므로 동기가 아닌 비동기로 동작한다. 비동기로 동작하면 H..

원문보기 내부링크
Tistory

FileReader 객체 사용하여 image 올리기

FileReader 객체 사용하여 image 올려보자 ref: [JavaScript] FileReader 객체에 대해 알아보자 FileReader란 무엇인가? [ FileReader란? ] FileReader란 type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체이다. abort, load, e despiteallthat.tistory.com 조건 1. 파일을 올릴 수 있는 버튼을 누르면 파일을 올린다. 2. 올릴 파일은 image로 제한한다. 3. 파일은 한 개만 올릴 수도 있고 다수도 가능하다. (여기서는 4개) 4. 각 파일마다 파일명, 사이즈, 파일타입을 알려준다. CSS 더보기 * { marg..

원문보기 내부링크
Tistory

mousemove 이벤트로 색 변환하기

mousemove 이벤트로 색 변환을 해보자 조건 1. 마우스를 움직일 때마다 화면의 색이 바뀜 2. 왼쪽, 오른쪽 여부 상관없이 바뀜 3. 화면의 색은 Math.random() 메서드 사용 box01 box02 box03 box04 box05 box06 box07 box08 box09 box10 box11 box12 box13 box14 box15 box16 box17 box18 box19 box20 HTML 삽입 미리보기할 수 없는 소스 ※ 화면 크기 및 확대, 축소 비율에 따라 event.pageX의 범위가 다르기 때문에 const num =parseInt(event.pageX / ? ); ? 는 개별 지정 필요

원문보기 내부링크
Tistory

아날로그 시계 만들기

아날로그 시계를 만들어보자 조건: 1. Date 함수를 이용한다. 2. Date 함수를 통해 각도를 구해서 사용한다. HTML 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: rgba(15, 14, 14, 0.889); } .container { width: 600px; height: 500px; background-color: rgba(28, 27, 27, 0.829); border-radius: 60px; margin: 25vh auto; } .clock { width: 400px; height: 400px; border-radius: 50%; background-color: rgba(37, 36..

원문보기 내부링크
Tistory

[Responsive web] flexbox와 main axis, class axis에 대해 알아보자

flexbox flexbox에서 제일 중요한 것은 flex-direction이다. flex-direction이란 flex 속성을 부여했을 때 기준점을 잡는 것을 말한다. 기본값은 row로 되어있다. 여기서 중요한 점은 flex-direction이 row일때 main-axis이 가로 축이며, cross-axis는 세로 축이라는 것이다. flex-direction이 column이면 main-axis는 세로축이며, cross-axis는 가로축이다. ※ flex-direction : row (기본값) main-axis : 가로 cross-axis : 세로 ※ flex-direction : column main-axis : 세로 cross-axis : 가로 이 부분을 확실하게 알고나니 내가 자주하던 실수가 왜 일..

원문보기 내부링크
Tistory

딥링킹(Deep linking)이란?

딥링킹에 대해 알아보자 [ 딥링킹 (Deep linking) ] 딥링킹이란 URL 링크의 일종으로 사용자를 웹사이트나 스토어가 아닌 앱으로 직접 안내하는 것을 말한다. 딥링크는 사용자가 특정 페이지로 이동하는 시간과 노력을 줄여주어 사용자 경험을 크게 향상해 준다. 딥링크는 커스텀 URL 스킴(iOS Universal Link)이나 Intent URL(Android 기기)을 사용하여 설치된 앱을 시작한다. 또한 딥링크를 통해 특정 이벤트나 페이지로 사용자를 보내어 캠페인 효과를 높일 수 있다. [ 딥링크가 중요한 이유 ] 딥링크를 통해 원활한 사용자 여정을 구축하여 이탈율을 낮추고 앱의 설치를 증가시킬 수 있다. 또한, 고도화된 캠페인을 진행하면서 뛰어난 사용자 경험을 제공하고 한 번의 클릭으로 앱으로 ..

원문보기 내부링크
Tistory

[Sass] Sass란?

Sass에 대해 알아보자 [ Sass ] Sass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만, 프로젝트 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin Extend/Inheritance CSS와 비교하여 Sass는 아래와 ..

원문보기 내부링크
Tistory

[Sass] 기본 작성법 익히기

Sass의 기본 문법을 익혀보자 [ 중첩 ] 우리가 사용하는 CSS는 ( Cascading Style Sheet )로 가장 큰 특징은 "Cascading" 위에서 아래로 흐르는 특징을 갖고 있다. 그래서 CSS는 .grand-parent > .parent > .child와 같이 부모에서 자식 순서로 작성한다. 아래의 예시를 보자 .container-grand-parent { color: red; } .container-grand-parent .container-parent { color : orange; } .container-grand-parent .container-parent .container-child { color : yellow; } 부모에서 자식으로 내려가면서 CSS를 적용하고 있지만, 길..

원문보기 내부링크
Tistory

[Sass] mixin, extend, 모듈화(import/use)

mixin, extend, 모듈화(import/use)에 대해 알아보자 [ @ 문법 ] Sass는 작업을 편하게 해 줄 @으로 시작하는 At-Rules라는 문법이 있다. 기본 CSS에서도 @으로 시작하는 문법들이 몇 개 있다. (@font-face 또는 @counter-style, @media 등) Sass에서는 여기에 더해 추가적인 기능들을 제공하는 at-rules 들이 추가된다. 예를 들면 @mixin / @include : 스타일 청크(묶음)를 쉽게 재사용할 수 있다. @extend : 여러 선택자가 스타일을 상속받도록 할 수 있다. @import / @use : 다른 스타일시트에 있는 변수, 함수, 믹스인 등을 불러와 결합해서 쓸 수 있다. @function : SassScript에서 사용할 수 ..

원문보기 내부링크
Tistory

[JavaScript] 이벤트 리스너 1회 실행 / 삭제

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자 [ 이벤트 리스너 1회 실행하기 ] addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 세 번째 인수로 지정할 수 있는 옵션은 다음과 같다. 옵션 의미 타입 capture 이벤트 캡쳐 여부 진릿값 once 리스너 1회 실행 여부 진릿값 passive 패시브 이벤트 여부 진릿값 다음 예제를 보자 버튼 버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다. [ 이벤트 리스너 삭제하기 ] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. 버튼 페이지가 실행되고 3초까..

원문보기 내부링크
Tistory

[JavaScript] 마우스 이벤트란?

마우스 이벤트에 대해 알아보자 [ mousedown ] 마우스 버튼을 누르는 시점에 발생하는 이벤트 [ mouseup ] 마우스 버튼을 떼는 시점에서 발생하는 이벤트 [ mousemove ] 마우스를 움직이는 시점에서 발생하는 이벤트 [ mouseenter ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 [ mouseleave ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 ※ 포인팅 디바이스 마우스, 터치 패드 등을 가리킴 [ mouseover ] 포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) [ mouseout ] 포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링) ※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스..

원문보기 내부링크
Tistory

"selectstart" 글자 돋보기 만들기

글자를 drag 하면 확대된 말풍선을 보여주는 코드를 만들어보자 조건 : 1. 내가 드래그한 단어 및 문단은 형광펜으로 처리한다. 2. 드래그한 단어를 확대해서 말풍선으로 드래그 영역 끝부분에 보여준다. 3. 말풍선을 누르면 말풍선이 꺼진다. HTML 더보기 가슴속에 그리고 피어나듯이 이름자를 있습니다. 우는 쉬이 추억과 노새, 어머님, 하나에 새워 청춘이 있습니다. 멀리 슬퍼하는 덮어 토끼, 하나에 아침이 위에 버리었습니다. 계집애들의 헤일 지나고 했던 내 노루, 위에 같이 흙으로 거외다. 이름과, 하나의 우는 벌써 책상을 봅니다. 내린 않은 하나에 별 내 잠, 보고, 봅니다. 하나에 별 토끼, 슬퍼하는 쉬이 까닭입니다. 없이 어머님, 위에도 까닭입니다. 자랑처럼 하나에 가을 무덤 나의 까닭이요, 없이..

원문보기 내부링크
Tistory

[Responsive web] Flexbox Froggy

flex layout 연습을 할 수 있는 Flexbox Froggy라는 사이트를 소개해보고자 한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이 사이트에는 flex layout에 대한 각종 연습을 할 수 있다! justify-content, align-items, align-self, align-content, flex-direcion, order 등을 이용하여 단계별로 개구리를 배치하면 된다. 한국어로 번역해서도 볼 수 있으니 flex layout을 연습할 때 참고하길 바란다. :) 개인적인 리뷰로는 24단계까지 있는데 24단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

원문보기 내부링크
Tistory

[Responsive web] Grid Garden

grid layout 연습을 할 수 있는 Grid Garden라는 사이트를 소개해보고자 한다. https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS grid 속성을 이용하여 28문제를 풀어나가면 된다. 특별하게 어려운 건 없었지만 template를 row나 column으로 나눌 때 auto의 의미를 잘 파악해야 할 것 같다!

원문보기 내부링크
Tistory

[Sass] 조건문 이용하여 반응형 웹 만들기

조건문을 이용하여 반응형 웹을 만들어보자 [ _responsive.scss ] @mixin responsive($device){ @if $device == "maxDesktop" { @media screen and (min-width: 1024px){ @content; } } @else if $device == "minDesktop" { @media screen and (min-width: 768px) and (max-width: 1023px){ @content; } } @else if $device == "tablet" { @media screen and (min-width: 480px) and (max-width: 767px){ @content; } } @else if $device == "phone..

원문보기 내부링크
Tistory

[Figma] 디자인하기 전 알아야 하는 UI 기술 지식

디자인하기 전 알아야 하는 UI 기술 지식에 대해 알아보자 용어 설명 스크린 사이즈 (screen size) 화면의 대각선 길이, 단위는 인치 해상도 (resolution) 화면의 총 픽셀 수 ppi (pixels per inch) 화소 밀도, 디스플레이에서 인치당 픽셀 수 dpi (dots per inch) 픽셀 밀도, 화면의 실제 영역 내에 있는 픽셀 수 dp (density-independent pixels) 안드로이드 사이즈 단위. 화면 크기와 해상도가 달라도 레이아웃을 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위 sp (scale-independent pixels) 안드로이드 텍스트에서만 사용하는 단위. dp와 동일한 비율 pt (point) iOS 사이즈 단위. dp와 같은 역할 해..

원문보기 내부링크
Tistory

[JavaScript] 정규표현식이란?

정규표현식에 대해 알아보자 [ 정규 표현식 ] 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규표현식은 자바스크립트의 고유 문법이 아니며, 대부분의 프로그래밍 언어와 코드 에디터에 내장되어 있다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능을 말한다. 예시 const cellphone = '010-1234-1224'; console.log( /^\d{3}-\d{3,4}-\d{4}$/.test(cellphone)); // true 위와 같이 핸드폰 번호를 입력받아 번호 양식에 맞는지에 대한 여부를 확인할 수 있다. 정규표현식을 사용하면 반복문과 조건문 없이 ..

원문보기 내부링크
Tistory

[Bootstrap] 부트스트랩이란?

오늘은 부트스트랩에 대해 알아보자 Bootstrap은 빠르고 간편한 반응형 웹 디자인(responsive web design)을 위한 open-source front-end framework이다. HTML, CSS JavaScript로 만들어진 typography, 입력양식(forms), 버튼, 테이블, 탭, 네이베이션, 이미지 캐러셀 등을 제공하며 추가적으로 JavaScript plugin들을 제공한다. https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components..

원문보기 내부링크
Tistory

[JavaScript] 자바스크립트 내장 객체

오늘은 자바스크립트 내장 객체에 대해 알아보자 [ Array 객체 ] Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열을 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다. [ Array 객체의 메서드 ] Array 개체에는 여러 가지 메서드가 있다. 종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다. every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다. filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다. forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다. in..

원문보기 내부링크
Tistory

정규 표현식으로 특정 문자 검색하기

오늘은 정규 표현식으로 특정 문자를 검색해 보자 [ 정규 표현 패턴의 표기 ] 문자열의 패턴은 내용의 앞뒤에 /를 삽입한다. /패턴/ 대표적인 패턴 패턴 의미 x 문자 x xyz 문자열 xyz [xyz] x, y, z 중 하나의 문자 [a-z] a ~ z 중 하나의 문자. [a-f]. [A-Za-z] 방식도 가능 [^xyz] x, y, z 외 하나의 문자 [^a-z] a ~ z 외 하나의 문자 abc|xyz 문자열 abc 혹은 xyz {숫자} 반복 횟수 ^x 시작 문자 x x$ 종료 문자 x . 하나의 문자(줄바꿈 코드 제외) x* 0개 이상 계속되는 x* \ 다음에 오는 문자를 이스케이프(escape) 처리 \d 숫자 [0-9] \D 숫자가 아닌 문자 [^0~9] \w 영문, 숫자, 언더바 [A-Za-..

원문보기 내부링크
Tistory

[JavaScript] Symbol.Toprimitive란?

오늘은 Symbol.Toprimitive에 대해 알아보자 [ 객체를 원시형으로 변환하기 ] obj1 + obj2처럼 객체끼리 더하는 연산을 하거나, obj1-obj2처럼 객체끼리 빼는 연산을 하면 어떤 일이 발생할까? 그리고 alert(obj)로 객체를 출력할 때는 무슨 일이 발생할까? 위의 두 가지 경우 모두 자동 형 변환이 발생한다. 즉, 객체는 원시값으로 변환되고, 그 후에 의도한 연산이 수행된다. 1. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다고 생각하면 된다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 발생한다. 예를 들어 객체 Date 끼리 차감하면 (date1-date2) 두 날짜의 시간 차..

원문보기 내부링크
Tistory

숫자 반환하기

숫자를 반환하는 함수를 만들어보자 조건 1. 입력 값이 ''이거나 prompt에서 취소를 누르면 null 값 표시 2. 입력 값이 숫자가 아니면 다시 prompt 호출 후기 처음에는 do while을 사용할 생각을 못했다. 그래서 문자를 입력받으면 다시 호출해야 하는데 여기서 return readNumber();를 사용했다. 하지만, 함수 본인이 자신을 계속 호출하는 방법을 사용하고 싶지 않아서 고민하다 do while을 사용하니 해결이 됐다.

원문보기 내부링크
Tistory

[JavaScript] 문서 객체 모델 (DOM)

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..

원문보기 내부링크
Tistory

[JavaScript] this에 대해 알아보자

오늘은 this에 대해 기록해보고자 한다. 이론적인 부분에서 공부할 때 너무 어려운 부분이 많았다. 그래서 이해가 안되는 부분이 많았는데 부족할 수 있지만 이번 계기로 확실히 정리해 보자 결론부터 말하자면 1. this는 함수가 호출될 때 결정이 된다. 2. 화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다. 실습으로 내가 이해한 대로 적어봐야겠다. ver_1 car라는 객체는 name 값으로 "KIA"를 가지고 있다. 여기서 car.getName(); 으로 car라는 객체의 getName() 메서드를 호출했다. this는 함수가 호출될 때 결정이 된다. 즉, car.getName();는 car가 getName()을 호출한 것이다. 이때 getName() 안에 있는 this는 ..

원문보기 내부링크
Tistory

이미지 갤러리 (라이트 박스) 만들기

이미지 갤러리를 만들어보자 조건 1. 사진 6개를 보여준다. 2. 각각의 사진을 클릭하면 화면 전환이 되고 내가 누른 사진의 크기를 조절하여 보여준다. 3. 크기가 조절된 사진을 누르면 다시 사진 6개를 보여주게 만든다. 방법 1 방법 2 방법 3 CSS .row { width: 420px; margin: 30px auto; } ul { list-style: none; margin: 0; padding: 0; } ul li { display: inline-block; } #lightbox { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.694); top: 0%; left: 0%; position: fixed; display: none; } ..

원문보기 내부링크
Tistory

[Git, GitHub] Git 설치, 업로드, 업데이트하는 법

Git 설치, 업로드, 업데이트에 대해 알아보자 우선 Git을 사용하려면 Git을 설치해야 한다. Git git-scm.com Downloads를 누르고 실행 환경에 맞게 다운로드하면 된다. git bash를 열면 처음에 간단한 환경설정을 해야 한다. 1. 사용자 이름 설정 git config --global user.name "your_name" 2. 사용자 이메일 설정 git config --global user.email "your_email" 3. 정보 확인하기 git config --list 내가 입력한 email과 name을 확인할 수 있다! Github에 처음 코드 업로드하기 1. 초기화 git init 2. 추가할 파일 더하기 git add . .(점) 은 모든 파일이라는 뜻이다. 선택적으..

원문보기 내부링크
Tistory

[Git, GitHub] ! [rejected] master -> master (non-fast-forward) 해결 방법

! [rejected] master -> master (non-fast-forward) 해결 방법에 대해 알아보자 작업한 것을 push 하는 과정에서 이런 에러가 발생했다. 상황 github에서 저장소를 생성 후 최초 commit에 성공했고 파일 수정 후 다시 commit를 하려다 발생 git add . => git commit -m "second commit" => git push origin master 입력 시 오류 발생 git remote -v로 연결 경로를 확인해보면 내가 설정한 경로로 연결이 되어있음 hint로 나온 문구를 해석해 보면, GitHub에 생성된 원격 저장소와 로컬에 생성된 저장소 간 공통분모가 없는 상태에서 병합하려는 시도로 인해 발생. 기본적으로 관련 없는 두 저장소를 병합하는..

원문보기 내부링크
Tistory

시계 만들기

시간, 분, 초를 나타낼 수 있는 시계를 만들어보자 조건: 1. 현재 시간에 맞는 시간을 출력한다. 2. 시간, 분, 초를 두 자리로 출력하되 10이 넘지 않는 (1~9)의 경우 앞에 0을 붙여서 출력한다. clock.html : : clocl.css *{ margin: 0; padding: 0; box-sizing: border-box; } .container { width: 400px; height: 200px; margin: 300px auto; background-color: skyblue; border-radius: 70px; border: 5px solid antiquewhite; } .current-time { font-size: 60px; font-weight: bold; color: wh..

원문보기 내부링크
Tistory

[JavaScript] encodeURI / decodeURI란?

encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유일한 주소를 말한다. URI의 하위 개념으로 URL, URN이 있다. URI / URL / URN 이란 무엇인가 오늘은 URI / URL / URN의 차이를 알아보자 대부분의 사람들은 URI와 URL을 혼용해서 사용하고 있다. 하지만, 이는 엄밀히 말하면 다르다. 위의 사진에서 볼 수 있듯이, URI는 URL과 URN을 포함하고 있다. despiteallthat.tistory.com /** * 완전한 URI를 문자열로 전달받아 이스케이프 ..

원문보기 내부링크
Tistory

encodeURIComponent로 네이버 검색하기

간단하게 encodeURIComponent로 네이버 검색을 해보자 조건 1. input text에 검색할 내용을 입력하고 버튼을 누르면 네이버 검색창에 자동 검색이 된다. + 추가기능 input text에 검색할 내용을 입력했을 때 기본적으로 합성되는 문자열을 만들어보자 ex) "포카"를 검색하면 자동으로 "칩"이 붙어 "포카칩" 검색 참고 [JavaScript] encodeURI / decodeURI란? encodeURI / decodeURI에 대해 알아보자 [ encodeURI ] encodeURI 함수는 완전한 URI (Uniform Resource Identifier)를 문자열로 전달받아 이스케이프 처리를 위해 인코딩한다. URI는 인터넷에 있는 자원을 나타내는 유 despiteallthat.ti..

원문보기 내부링크
Tistory

Turbo Console Log 사용방법

Turbo Console Log 사용법에 대해 알아보자 [ Turbo Console Log ] 이 확장은 의미 있는 로그 메시지 작성 작업을 자동화하여 디버깅을 훨씬 쉽게 만든다. console.log로 디버깅 작업을 할 때 매번 작성해야 하는 귀찮음이 있다. (다행이게도?) Turbo Console Log를 사용하면 수월하게 작성할 수 있다. :) [ 설치방법 ] 1. vscode extension에 Turbo Console Log 검색 2. 설치 [ 주요 기능 ] 1. 원하는 변수를 선택 후 ctrl+alt+L 누르기 2. 다중커서 지원 property TurboConsoleLog.wrapLogMessage(boolean): 로그 메시지를 래핑할지 여부. TurboConsoleLog.logMessag..

원문보기 내부링크
Tistory

array.sort() 오름차순, 내림차순 정렬하기

배열 오름차순, 내림차순 정렬을 해보자 조건 1. 오름차순, 내림차순 버튼이 있고 버튼을 누르면 userDataList 배열에 있는 객체 값을 보여준다. 2. 오름차순 버튼을 누르면 id가 오름차순 된 순서대로 보여준다. 3. 내림차순 버튼을 누르면 id가 내림차순 된 순서대로 보여준다. 4. 최초에는 id가 오름차순 된 순서대로 보여준다. 오름차순 내림차순 div 태그 안에 오름차순 버튼과 내림차순 버튼을 만들고, 버튼을 누르면 ul태그 안에 li 태그로 객체 값을 출력한다. 결과 HTML 삽입 미리보기할 수 없는 소스 리뷰 특별하게 어려운 건 없었는데 sortByAscending과 sortByDescending에서 return 값을 설정하는데 시간이 좀 걸린 것 같다. sort() 메서드에서 sort..

원문보기 내부링크
Tistory

배열 무작위 섞기 (셔플)

배열을 섞을 수 있는 메서드를 만들어보자. 1. 기존 배열 값은 바꾸지 않는다. (복사해서 사용) 2. 메서드를 실행할 때마다 무작위로 섞인다. [ array [ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 피셔 예이츠(Fisher Yates) 알고리즘을 사용하며, 재사용할 수 있도록 처리 작업을 함수로 만든다. ※ 피셔 예이츠 알고리즘 [ array[ i ], array [randomArray]] = [array [randomArray], array [ i ] ] 예를 들어, 5개의 요소 [0, 1, 2, 3, 4]를 가지는 배열을 생각해보자. for문 i에 4, 3, 2, 1, 0 을 대입했을 때 Math*random()은 0 이상..

원문보기 내부링크
Tistory

[JavaScript] Pass by Reference / Pass by Value 란?

오늘은 Pass by Reference와 Pass by Value에 대해 알아보자 [ Pass by Reference ] object type을 객체 타입 또는 참조 타입이라고 한다. 참조 타입이란 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미한다. 원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable), 객체는 프로퍼티를 변경, 추가, 삭제가 가능하므로 변경 가능(mutable)한 값이라 할 수 있다. 따라서 객체 타입은 동적으로 변화할 수 있으므로 어느 정도 메모리 공간을 확보해야 하는지 예측할 수 없기 때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역(Heap Segment)에 저장된다. 이에 반해 원시 타입은 값(value)으로 전달된다. 즉, 복사되어 전달되..

원문보기 내부링크
Tistory

[JavaScript] Immutability와 mutable

오늘은 Immutability와 mutable에 대해 알아보자 [ Immutability(변경 불가성)] Immutability(변경 불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 객체는 참조(reference) 형태로 전달하고 전달받는다. 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이는 객체의 참조를 가지고 있는 어떤 장소에서 객체를 변경하면 참조를 공유하는 모든 장소에서 그 영향을 받기 때문인데 이것이 의도한 동작이 아니라면 참조를 가지고 있는 다른 장소에 변경 사실을 통지하고 대처하는 추가 대응이 필요하다. 의도하지 않은 객체의 변경이..

원문보기 내부링크
Tistory

제곱 함수 구하기

제곱 함수를 구하는 코드를 짜 보자 조건 1. prompt로 입력받는 두 개의 값 중 하나라도 1보다 작은 값을 받을 경우 다시 받는다. 2. 두 개의 값을 받을 때 함수를 사용한다. 3. 1 이상의 자연수를 받았다면 최종적으로 구하는 제곱 함수를 alert로 띄워준다. code 결과: HTML 삽입 미리보기할 수 없는 소스 개선점 1 checkNum() 함수는 오로지 파라미터 값이 1 이상인 자연수를 판단하는 기능을 하는 것만이 아닌, 새롭게 값을 받고 있다. ( 함수는 하나의 기능만 수행하게 바꾸기 위해 새로운 함수를 사용한다. ) code 결과 HTML 삽입 미리보기할 수 없는 소스 개선점 2 위의 코드는 함수 선언문으로 함수를 정의했다. 함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가..

원문보기 내부링크
Tistory

[CSS] Viewport 단위 (vh,vw,vmin,vmax)

오늘은 Viewport 단위에 대해 알아보자 [ Viewport ] 반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다. Viewport 단위는 상대적인 단위로 Viewport를 기준으로 한 상대적 사이즈를 의미한다. 단위 Description vw viewport 너비의 1/100 vh viewport 높이의 1/100 vmin viewport 너비 또는 높이 중 작은 쪽의 1/100 vmax viewport 너비 또는 높이 중 큰 쪽의 1/100 예를 들어 viewport 너비가 1000px, 높이가 600px인 경우, 1vw : viewport 너비 1000px의 1%인 10px 1vh : v..

원문보기 내부링크
Tistory

[CSS] 프로퍼티 값의 단위

오늘은 CSS의 프로퍼티 값의 단위에 대해 알아보자 [ CSS 프로퍼티 ] CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. [ 키워드 ] 각 프로퍼티에 따라 사용할 수 있는 키워드가 존재한다. 예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다. 자세한 내용은 각각의 프로퍼티를 참조하기 바란다. [ 크기 단위 ] cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, % 이다. px은 절댓값이고 em, % 는 상대 값이다. 대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 ..

원문보기 내부링크
Tistory

[HTML] display 프로퍼티 / block / inline / inline - block 레벨 요소

오늘은 display 프로퍼티 / block / inline / inline - block 레벨 요소를 배워보자 [ display 프로퍼티 ] display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다. 프로퍼티값 키워드 설명 block block 특성을 가지는 요소(block 레벨 요소)로 지정 inline inline 특성을 가지는 요소(inline 레벨 요소)로 지정 inline-block inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 none 해당 요소를 화면에 표시하지 않는다. (공간조차 사라진다) 모든 HTML 요소는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 디폴트 표시값을 가진다. HTML 요소는 block 또는..

원문보기 내부링크
Tistory

[JavaScript] 스코프(scope)란?

오늘은 스코프(scope)에 대해 알아보자 [ 스코프(scope) ] 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 하지만, 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있으므로 주의가 필요하다. 그리고 var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 아래의 예시를 보자. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.l..

원문보기 내부링크
Tistory

[HTML] noopener noreferrer란?

오늘은 noopener / noreferrer에 대해 알아보자 우선 noopenner와 noreferrer에 대해 살펴보기 전에 a 태그의 target 속성을 살펴봐야 한다. [ target ] a 태그의 속성 중에는 target이라는 속성이 있다. Value Description target = "_self " 연결할 페이지의 URL 클릭 시 현재의 탭에서 연결 target = "_blank " 연결할 페이지의 URL 클릭 시 새 탭에서 연결 즉, target은 "href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?"를 지정하기 위한 속성이다. target = "_self " _self의 경우 연결한 웹 페이지를 현재의 탭에서 연다. _self는 기본 설정이므로 target 속성을 생략하..

원문보기 내부링크
Tistory

[Responsive web] 반응형 웹 알아보기

오늘은 반응형 웹에 대해 알아보자 [ 반응형 웹 디자인이란? ] 요즘은 PC나 노트북보다 더 작은 스마트폰에서 웹 사이트에 접속하는 경우가 많다. 그런데 PC와 스마트폰의 화면 크기는 다르므로 PC용으로 만든 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시된다. 데스크톱에서 보여주던 내용을 스마트폰의 작은 화면 안에서 보여줘야 하기 때문이다. 그래서 포털 사이트나 쇼핑몰 사이트의 경우 모바일 기기의 특성을 충분히 활용할 수 있도록 모바일 사이트를 별도로 제작한다. 하지만 스마트폰이나 태블릿, 스마트 TV 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹사이트를 각각 제작하는 것은 쉬운 일이 아니다. 그래서 반응형 웹 디자인 (Responsive web design)이 필요하다. 반응형 웹 디자인..

원문보기 내부링크
Tistory

[Responsive web] 그리드 레이아웃이란?

오늘은 그리드 레이아웃에 대해 알아보자 [ 그리드 레이아웃 ] 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 한다. 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃(grid layout)을 사용한다. 그리드레이아웃이란 웹 사이트를 여러 개의 칼럼(column)으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말한다. 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있다. 그리드 레이웃의 특징을 알아보자 시각적으로 안정된 디자인을 만들 수 있다. 그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 준다. 이미 책이나 신문 등 여러 시각매체에서는 대부분 그리드 레이아웃을 사..

원문보기 내부링크
Tistory

[Responsive web] 플렉시블 박스 레이아웃이란?

오늘은 플렉시블 박스 레이아웃에 대해 알아보자 [ 플렉시블 박스 레이아웃 ] 플렉시블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고, 각 박스가 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 플렉시블 박스 레이아웃은 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 아래의 그림처럼 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다. ( 플렉시블 박스 레이아웃을 플렉스(flex) 박스 레이아웃이라고도 한다. 아래부터는 플렉스 박스 레이아웃으로 지칭하겠다.) 플렉스 박스 레이아웃에 ..

원문보기 내부링크
Tistory

[Responsive web] CSS 그리드 레이아웃이란?

오늘은 CSS 그리드 레이아웃에 대해 알아보자 [ CSS 그리드 레이아웃 ] 그리드 레이아웃을 많이 사용하면서 플렉스 박스에 이어 CSS 그리드 레이아웃(CSS grid layout)이라는 새로운 CSS 표준이 만들어졌다. 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어 수평이나 수직 중 하나를 기준으로 해서 요소를 배치한다. 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있다. CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용한다. 그래서 플렉스 항목은 1차원이고 CSS 그리드 레이아웃은 2차원이라 말한다. CSS 그리드 레이아웃은 가로 방향을 가리키는 줄(row)과 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성한다. 그리고 칼럼과..

원문보기 내부링크
Tistory

[JavaScript] 전역 변수의 문제점

오늘은 전역 변수의 문제점에 대해 알아보자 전역 변수에는 여러 가지 문제점이 있다. 우선 지역 변수는 (함수 내부에 선언되었다고 가정) 함수가 호출되면 생성되고 함수가 종료하면 소멸된다. 하지만 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 즉, 지역 변수에 비해 생명 주기가 길다. [ 전역 변수의 문제점 ] 1. 암묵적 결합 전역 변수를 선언한 의도는 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 뜻이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합(implicit coupling)을 허용한다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다. 2. 긴 생명 주기 전역 변수는 생명 주기가 길다..

원문보기 내부링크
Tistory

[JavaScript] 변수 호이스팅

지난번에 다뤄본 변수 호이스팅을 변수별로 알아보자 [ 변수 선언의 실행 시점과 변수 호이스팅 ] console.log(score); // undefined var score; // 변수 선언문 위의 예제에서는 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score);가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다. 따라서 console.log(score);가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 참조 에러(ReferenceError)가 발생할 것처럼 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄..

원문보기 내부링크
1 2 3