mjae404.github.io/content.json at master · mjae404/mjae404.github.io · GitHub

1
{"meta":{"title":"404 Not Found","subtitle":"FRONT-END DEVELOP LOG","description":"MINJEE KIM'S FRONT-END DEVELOP LOG","author":"Minjee Kim","url":"http://mjae404.github.io","root":"/"},"posts":[{"title":"브라우저는 어떻게 동작하는가","slug":"web-guide-how-to-work","date":"2025-03-25T12:38:23.000Z","updated":"2025-03-26T02:44:31.204Z","comments":true,"path":"2025/03/25/web-guide-how-to-work/","excerpt":"실제 성능 및 체감되는 성능을 향상시키는 방법을 이해하기 위해서 브라우저가 어떻게 동작하는지 이해해야 한다.","categories":[{"name":"web","slug":"web","permalink":"http://mjae404.github.io/categories/web/"},{"name":"performance","slug":"web/performance","permalink":"http://mjae404.github.io/categories/web/performance/"}],"tags":[{"name":"web","slug":"web","permalink":"http://mjae404.github.io/tags/web/"},{"name":"performance","slug":"performance","permalink":"http://mjae404.github.io/tags/performance/"}]},{"title":"UI 개발 기본 지식","slug":"html-basic","date":"2024-05-11T11:33:00.000Z","updated":"2024-05-12T06:28:29.620Z","comments":true,"path":"2024/05/11/html-basic/","excerpt":"UI / Front-end develop info.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"장고 앱(App) 구조","slug":"django-app-structure","date":"2023-08-19T09:17:06.000Z","updated":"2023-08-19T09:39:00.163Z","comments":true,"path":"2023/08/19/django-app-structure/","excerpt":"Project와 App의 차이Django에서 웹 서비스 각각의 기능은 앱 단위로 구현한다. 실제로 하나의 프로젝트는 여러 개의 앱과 약간의 설정 파일들로 구성되어 있고 하나의 앱은 여러 개의 프로젝트에서 사용할 수 있다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"},{"name":"django","slug":"Python/django","permalink":"http://mjae404.github.io/categories/Python/django/"}],"tags":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"},{"name":"django","slug":"django","permalink":"http://mjae404.github.io/tags/django/"}]},{"title":"장고 개요","slug":"django-overview","date":"2023-08-03T12:33:53.000Z","updated":"2023-08-19T09:15:31.956Z","comments":true,"path":"2023/08/03/django-overview/","excerpt":"diango 개발환경 구성하기 Homebrew를 설치후 버전을 확인한다. 1&#x2F;bin&#x2F;bash -c &quot;$(curl -fsSL https:&#x2F;&#x2F;raw.githubusercontent.com&#x2F;Homebrew&#x2F;install&#x2F;HEAD&#x2F;install.sh)&quot; 1brew --version","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"},{"name":"django","slug":"Python/django","permalink":"http://mjae404.github.io/categories/Python/django/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"},{"name":"django","slug":"django","permalink":"http://mjae404.github.io/tags/django/"}]},{"title":"뷰 개요","slug":"vue-overview-1","date":"2022-10-10T07:13:38.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/10/10/vue-overview-1/","excerpt":"vue create &lt;프로젝트명&gt;으로 세팅 가능하다. sudo npm install -g @vue/cli 설치 필요 vue webpack-simple &lt;프로젝트명&gt;으로 세팅 가능하다. sudo npm install -g @vue/cli-init 설치 필요 npm run dev로 로컬 서버 확인 가능.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"}]},{"title":"웹게임으로 배우는 vue 2","slug":"vue-webgame-2","date":"2022-09-17T07:50:45.000Z","updated":"2025-12-22T13:28:45.557Z","comments":true,"path":"2022/09/17/vue-webgame-2/","excerpt":"웹게임으로 배우는 vue 숫자야구","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"webgame","slug":"webgame","permalink":"http://mjae404.github.io/tags/webgame/"},{"name":"number baseball","slug":"number-baseball","permalink":"http://mjae404.github.io/tags/number-baseball/"}]},{"title":"웹게임으로 배우는 vue 1","slug":"vue-webgame-1","date":"2022-09-17T06:19:45.000Z","updated":"2025-12-22T13:28:45.557Z","comments":true,"path":"2022/09/17/vue-webgame-1/","excerpt":"웹게임으로 배우는 vue 구구단","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"webgame","slug":"webgame","permalink":"http://mjae404.github.io/tags/webgame/"},{"name":"multiplication table","slug":"multiplication-table","permalink":"http://mjae404.github.io/tags/multiplication-table/"}]},{"title":"리액트 next.js 세팅","slug":"react-nextjs","date":"2022-08-21T07:26:19.000Z","updated":"2024-01-26T08:23:35.031Z","comments":true,"path":"2022/08/21/react-nextjs/","excerpt":"Next.js를 사용하는 이유 프리 렌더링 Vercel로 서버 호스팅 파일 시스템 기반 서버 호스팅 npx create next app .으로 설치한다. node.js를 설치한다. npm i next 명령어를 진행한다. npm i react react-dom 을 설치한다. https://thebook.io/ 에서 참고할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"React","slug":"JavaScript/React","permalink":"http://mjae404.github.io/categories/JavaScript/React/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"react","slug":"react","permalink":"http://mjae404.github.io/tags/react/"},{"name":"nextjs","slug":"nextjs","permalink":"http://mjae404.github.io/tags/nextjs/"}]},{"title":"리액트 개요","slug":"react-overview","date":"2022-05-24T02:14:12.000Z","updated":"2022-08-21T07:24:53.226Z","comments":true,"path":"2022/05/24/react-overview/","excerpt":"create-react-app으로 리액트 프로젝트 생성.npm init react-app &lt;폴더 이름&gt; 혹은 해당 폴더 안에 들어간 후 터미널에서 npm init react-app . 개발모드 실행: npm run start 개발모드 종료: Ctrl + C 리액트 개발자 도구: React Developer Tools (크롬 확장 프로그램)","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"React","slug":"JavaScript/React","permalink":"http://mjae404.github.io/categories/JavaScript/React/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"react","slug":"react","permalink":"http://mjae404.github.io/tags/react/"}]},{"title":"JAVA 객체 지향 프로그래밍","slug":"java-oop","date":"2022-03-17T05:42:54.000Z","updated":"2022-03-18T12:32:12.788Z","comments":true,"path":"2022/03/17/java-oop/","excerpt":"객체 지향 프로그래밍 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 “객체”들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있다. 1 ‘객체’는 ‘속성’들과 ‘동작’들의 묶음이라고 할 수 있는데 속성은 ‘변수’로 나타내고, 동작은 ‘메소드(함수)’로 나타낸다. [ 1 ] : 위키백과","categories":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"}],"tags":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"},{"name":"object-oriented programming","slug":"object-oriented-programming","permalink":"http://mjae404.github.io/tags/object-oriented-programming/"}]},{"title":"JAVA 배열","slug":"java-array","date":"2022-03-15T03:13:13.000Z","updated":"2022-03-15T04:33:28.206Z","comments":true,"path":"2022/03/15/java-array/","excerpt":"배열을 사용하면 변수 하나에 값을 여러개 담을 수 있다.","categories":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"}],"tags":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"},{"name":"array","slug":"array","permalink":"http://mjae404.github.io/tags/array/"}]},{"title":"JAVA 조건문과 반복문","slug":"java-control-flow-statement","date":"2022-03-14T06:10:25.000Z","updated":"2022-03-14T08:45:10.853Z","comments":true,"path":"2022/03/14/java-control-flow-statement/","excerpt":"if123456789if (조건부분 1) &#123; // 수행 부분 1&#125; else if (조건 부분 2) &#123; // 수행 부분 2&#125; else if (조건 부분 3) &#123; // 수행 부분 3&#125; else &#123; // 수행 부분 4&#125;","categories":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"}],"tags":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"}]},{"title":"JAVA 변수와 연산","slug":"java-variables-and-operation","date":"2022-03-13T05:56:48.000Z","updated":"2022-03-13T10:14:36.203Z","comments":true,"path":"2022/03/13/java-variables-and-operation/","excerpt":"변수 변수의 이름과 변수의 자료형을 선언해주어야 한다. [ 자료형(data type) ] [ 변수의 이름 ] int: x가 어떤 자료형을 저장할지12int a; // 정수형 변수String s; // 문자열 변수","categories":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"}],"tags":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"},{"name":"variable","slug":"variable","permalink":"http://mjae404.github.io/tags/variable/"},{"name":"operation","slug":"operation","permalink":"http://mjae404.github.io/tags/operation/"}]},{"title":"JAVA 개요","slug":"java-overview","date":"2022-03-13T05:05:05.000Z","updated":"2022-03-13T06:18:31.704Z","comments":true,"path":"2022/03/13/java-overview/","excerpt":"자바는 전세계적으로 많이 쓰이고 가장 인기있는 언어이다. 뿐만 아니라 오랜 인기 덕에 잘 되어 있는 커뮤니티와 정보도 활발하다. 개발자 수요가 제일 많은 언어이기도 하다. 자바는 객체지향언어이며, 객체지향언어는 코드의 구조가 명확하여 코드를 이해하기 쉽고 관리와 유지보수가 효율적이다. 자바 가상머신(Java Virtual Machine, JVM)을 설치하면 운영체제/디바이스 상관없이 동일하게 작동한다. JRE(Java Runtime Environment): JVM을 사용하여 개발할 수 있는 환경 JDK(Java Development Kit): 내 컴퓨터에 JRE 환경을 만들기 위해 설치하는 것 자바는 오라클 소유이기 때문에 오라클 사이트에서 JDK 설치가 필요하다.","categories":[{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"}]},{"title":"CSS 애니메이션 06","slug":"css-exercise006","date":"2022-03-04T05:25:34.000Z","updated":"2025-09-04T01:31:09.273Z","comments":true,"path":"2022/03/04/css-exercise006/","excerpt":"좌우로 벌어지는 CSS 애니메이션.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"CSS 애니메이션 05","slug":"css-exercise005","date":"2022-03-04T02:55:54.000Z","updated":"2025-09-04T01:31:12.348Z","comments":true,"path":"2022/03/04/css-exercise005/","excerpt":"거울 반사 효과.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"mySQL 서브쿼리","slug":"sql-sub-query","date":"2022-02-18T12:32:59.000Z","updated":"2022-03-12T12:47:43.507Z","comments":true,"path":"2022/02/18/sql-sub-query/","excerpt":"서브쿼리 SQL문 안에 ‘부품’처럼 들어가는 SELECT문. 전체 SQL문에서 일부를 이루는 또다른 SQL문. 괄호로 서브쿼리를 감싸주어야 한다. 전체 SQL문을 outer query(외부쿼리), 서브쿼리를 inner query(내부쿼리)라고도 함. HAVING절, SELECT절, WHERE절, FROM절 등에서도 사용 가능하다.","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"Primary Key","slug":"Primary-Key","permalink":"http://mjae404.github.io/tags/Primary-Key/"}]},{"title":"SQL 데이터 분석","slug":"sql-exercise004","date":"2022-02-17T13:02:37.000Z","updated":"2022-02-17T13:05:43.866Z","comments":true,"path":"2022/02/17/sql-exercise004/","excerpt":"(1) pizza_price_cost 테이블의 name, price, price/cost(원가 기준 가격의 비율) 컬럼을 조회하세요.(2) 대신 마지막 price/cost 컬럼을 사용해서 그 값이1 =&lt; 값 &lt; 1.5 인 경우, ‘C. 저효율 메뉴’1.5 &lt;= 값 &lt; 1.7 인 경우, ‘B. 중효율 메뉴’1.7 &lt;= 값 인 경우, ‘A. 고효율 메뉴’라고 그 값을 변환해서 표시하는 추가적인 컬럼도 함께 조회하고 대신 이 컬럼에는 efficiency라는 alias를 붙여주세요.(3) 그리고 전체 row를 efficiency 컬럼을 기준으로 내림차순, 그 다음 기준으로 price 컬럼을 기준으로 오름차순 정렬하세요.(4) 이 중에서 가장 첫 번째 row 부터 6개만 추리세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SQL","slug":"exercise/SQL","permalink":"http://mjae404.github.io/categories/exercise/SQL/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"}]},{"title":"SQL 데이터 분석","slug":"sql-exercise003","date":"2022-02-16T12:40:35.000Z","updated":"2023-08-13T02:00:35.881Z","comments":true,"path":"2022/02/16/sql-exercise003/","excerpt":"(1) 고객들이 남긴 리뷰 수와, (2) 별점 평균값을 구하려고 합니다.(3) 댓글이 존재하는(comment 컬럼이 NULL이 아닌) 리뷰들의 개수와 그 별점들의 평균만 구하려고 하는데요.(4) 그리고 별점의 평균값은 반올림을 해주려고 합니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SQL","slug":"exercise/SQL","permalink":"http://mjae404.github.io/categories/exercise/SQL/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"}]},{"title":"SQL 데이터 조회","slug":"sql-exercise002","date":"2022-02-15T08:32:42.000Z","updated":"2022-02-15T08:36:19.682Z","comments":true,"path":"2022/02/15/sql-exercise002/","excerpt":"(1) star(별점) 컬럼을 기준으로 일단 오름차순 정렬하고,(2) 같은 별점인 경우에는 registration_date(등록일자) 컬럼을 기준으로 내림차순 정렬하려고 합니다.(3) 5번째 row까지만 일단 추려서 보고 싶습니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SQL","slug":"exercise/SQL","permalink":"http://mjae404.github.io/categories/exercise/SQL/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"}]},{"title":"SQL 데이터 조회","slug":"sql-exercise001","date":"2022-02-14T12:03:15.000Z","updated":"2022-02-14T12:09:38.709Z","comments":true,"path":"2022/02/14/sql-exercise001/","excerpt":"(1) 나이가 20대이고, (2) 코드잇 피자 가게 사이트에 가입한 달이 7월인 회원들만 추려서 그 회원들에게 이메일로 할인 쿠폰을 발송하려고 합니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SQL","slug":"exercise/SQL","permalink":"http://mjae404.github.io/categories/exercise/SQL/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"}]},{"title":"mySQL 테이블 조인","slug":"sql-table-join","date":"2022-02-13T09:19:47.000Z","updated":"2022-02-18T12:12:46.240Z","comments":true,"path":"2022/02/13/sql-table-join/","excerpt":"조인(join): 여러 테이블을 합쳐서 하나의 테이블인 것처럼 보는 행위","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"table join","slug":"table-join","permalink":"http://mjae404.github.io/tags/table-join/"}]},{"title":"mySQL 데이터 분석","slug":"sql-data-analysis","date":"2022-02-07T12:59:07.000Z","updated":"2022-02-10T17:07:26.487Z","comments":true,"path":"2022/02/07/sql-data-analysis/","excerpt":"집계함수 (Aggregate Function) 어떤 컬럼의 값들을 대상으로 원하는 특징값을 구해주는 함수. 특정 컬럼의 여러 row의 값들을 동시에 고려해서 실행되는 함수. 그루핑을 통해 생성된 각 그룹의 수치적인 특성을 구하는 함수.","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"data analysis","slug":"data-analysis","permalink":"http://mjae404.github.io/tags/data-analysis/"}]},{"title":"mySQL 데이터 조회","slug":"sql-data-query","date":"2022-02-06T06:23:39.000Z","updated":"2022-02-06T11:20:37.581Z","comments":true,"path":"2022/02/06/sql-data-query/","excerpt":"SELECT : 테이블데이터 를 조회 할 때 사용하는 구문.* : asterisk. 각 row의 모든 컬럼들을 보여달라는 의미. 1SELECT * FROM main.member;","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"data query","slug":"data-query","permalink":"http://mjae404.github.io/tags/data-query/"}]},{"title":"mySQL Primary Key (기본키)","slug":"sql-primary-key","date":"2022-02-04T12:47:40.000Z","updated":"2022-02-05T09:49:07.148Z","comments":true,"path":"2022/02/04/sql-primary-key/","excerpt":"Primary Key: 테이블에서 특정 row 하나를 식별하는 역할.","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"Primary Key","slug":"Primary-Key","permalink":"http://mjae404.github.io/tags/Primary-Key/"}]},{"title":"mySQL 개요","slug":"sql-overview","date":"2022-02-03T05:36:17.000Z","updated":"2022-02-18T13:13:05.759Z","comments":true,"path":"2022/02/03/sql-overview/","excerpt":"데이터베이스: 일정한 체계 속에 저장된 데이터의 집합 데이터베이스를 다루기 위해서는 DBMS(Database Management System)라는 프로그램을 사용해야하고, DBMS는 결국 SQL이라고 하는 언어로 조작해야 한다. 테이블에서 하나의 개체를 나타내는 것은 row, 개체의 각 속성을 나타내는 것은 column이다. 서버 - 클라이언트 구조로 동작한다.","categories":[{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"}]},{"title":"VUE methods","slug":"vue-methods","date":"2022-01-28T09:47:15.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/28/vue-methods/","excerpt":"이벤트 핸들러(v-on) 로직(논리값)과 methods의 속성메서드는 뷰 인스턴스에 포함하여 사용하는 함수를 의미.특히, 뷰에서 methods 속성은 이벤트 핸들러를 사용하여 (클릭) 이벤트가 발생했을 때 실행되는 로직에 되는 로직에 사용.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"methods","slug":"methods","permalink":"http://mjae404.github.io/tags/methods/"}]},{"title":"VUE router","slug":"vue-router","date":"2022-01-26T11:21:06.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/26/vue-router/","excerpt":"라우터란 페이지까지 이동할 수 있는 기능을 의미.라우터를 사용하면 경로와 컴퓨넌트를 등록하면 싱글 페이지 어플리케이션(SPA : Single Page Application)사용자가 클릭한 화면이 쉽게 이동하도록 도와주는 역할을 담당.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"router","slug":"router","permalink":"http://mjae404.github.io/tags/router/"}]},{"title":"VUE vuex","slug":"vue-vuex","date":"2022-01-26T10:37:37.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/26/vue-vuex/","excerpt":"하나의 뷰 또는 복수의 화면 사이에서 여러개의 컴포넌트를 사용하면 각 컴포넌트 간에 값을 전달하거나 공유하는 것이 쉽지 않음.이런 문제를 해결하기 위해서는 vuex라는 상태값 전문 라이브러리를 활용할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"vuex","slug":"vuex","permalink":"http://mjae404.github.io/tags/vuex/"}]},{"title":"VUE computed","slug":"vue-computed","date":"2022-01-26T10:04:07.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/26/vue-computed/","excerpt":"VUE computed","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"}]},{"title":"VUE async","slug":"vue-async","date":"2022-01-24T12:19:38.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/24/vue-async/","excerpt":"비동기 식(함수) - asynchhrone : 함수 호출에 의해서 후속 실행문을 가져와서 사용한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"async","slug":"async","permalink":"http://mjae404.github.io/tags/async/"}]},{"title":"VUE on","slug":"vue-on","date":"2022-01-22T08:06:03.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/22/vue-on/","excerpt":"v-on: 이벤트명: “함수 호출문” ===선택자.이벤트명 = 함수 호출문() (X)선택자.이벤트명 = 함수 호출문 (O) 1&lt;button onclick=&quot;함수 호출문();&quot;&gt;&lt;/button&gt;","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"on","slug":"on","permalink":"http://mjae404.github.io/tags/on/"}]},{"title":"VUE for","slug":"vue-for","date":"2022-01-21T11:48:41.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/21/vue-for/","excerpt":"v-for 디렉티브는 반복문으로 데이터를 하나씩 차례대로 꺼내어 사용할 때 유용하다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"for","slug":"for","permalink":"http://mjae404.github.io/tags/for/"}]},{"title":"VUE if","slug":"vue-if","date":"2022-01-20T11:21:22.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/20/vue-if/","excerpt":"vue-if.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"if","slug":"if","permalink":"http://mjae404.github.io/tags/if/"}]},{"title":"VUE model","slug":"vue-model","date":"2022-01-19T10:54:33.000Z","updated":"2025-12-22T13:33:50.309Z","comments":true,"path":"2022/01/19/vue-model/","excerpt":"v-model 디렉티브를 사용하면 어떤 입력값에 대한 내용을 실시간으로 표시하는 양방향 데이터를 구현할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"model","slug":"model","permalink":"http://mjae404.github.io/tags/model/"}]},{"title":"VUE bind","slug":"vue-bind","date":"2022-01-18T10:25:25.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/18/vue-bind/","excerpt":"v-bind의 역할 : vue 인스턴스 내부에서 선언된 data의 속성값(들)을 변수처럼 이용하여 HTML 문서 상의 문자열로 구성된 변수 자리에 그 값을 넣어준다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"bind","slug":"bind","permalink":"http://mjae404.github.io/tags/bind/"}]},{"title":"VUE 개요","slug":"vue-overview","date":"2022-01-13T14:57:14.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/13/vue-overview/","excerpt":"Vue 개요.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"}]},{"title":"JS 배열 함수","slug":"vue-array-function","date":"2022-01-10T11:58:45.000Z","updated":"2022-09-06T13:51:08.914Z","comments":true,"path":"2022/01/10/vue-array-function/","excerpt":"1. 배열의 내장 함수 활용 map() 함수 메서드: 배열을 대상으로 반복문 (속도 빠름) filter() 함수 메서드: 배열을 대상으로 조건문","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"array function","slug":"array-function","permalink":"http://mjae404.github.io/tags/array-function/"}]},{"title":"JS 연습문제","slug":"js-exercise019","date":"2022-01-09T07:38:05.000Z","updated":"2022-01-11T10:56:15.794Z","comments":true,"path":"2022/01/09/js-exercise019/","excerpt":"연습문제.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"PYTHON 약수 찾기","slug":"python-exercise008","date":"2022-01-08T10:19:44.000Z","updated":"2022-02-12T14:11:32.006Z","comments":true,"path":"2022/01/08/python-exercise008/","excerpt":"자연수 중 120의 약수를 모두 출력하고, 총 몇개의 약수가 있는지 출력하는 프로그램을 써보세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"PYTHON 구구단","slug":"python-exercise007","date":"2022-01-07T10:13:23.000Z","updated":"2022-02-12T14:11:28.072Z","comments":true,"path":"2022/01/07/python-exercise007/","excerpt":"while문을 사용하여 콘솔에 아래 문장들이 출력되게 구구단 프로그램을 작성하세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"PYTHON 택이의 우승상금","slug":"python-exercise006","date":"2022-01-05T04:53:31.000Z","updated":"2022-01-05T04:56:13.780Z","comments":true,"path":"2022/01/05/python-exercise006/","excerpt":"1988년 쌍문동에 사는 택이는 바둑대회 우승 상금으로 5000만원을 받았습니다. 하지만 바둑 외에는 아는게 없으니, 이웃 어른들에게 이 돈으로 무엇을 해야할지 물어보기로 하였습니다. 동일 아저씨나 미란 아주머니 중 누구의 말을 듣는 것이 좋을지 판단해보세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"JS Class","slug":"vue-class","date":"2022-01-03T12:35:23.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/03/vue-class/","excerpt":"html 문서에서 속성으로 존재하는 클래스명: 공통 클래스명 부여가 가능(for CSS style) 실생활에서 학교 : 클래스 단위로 수업을 받거나 움직임 (과목 또는 소풍) 객체 영역 : 속성(key: value(특정 데이터))과 기능(key:value(function)) =&gt; Class라는 존재는 어떠한 그룹을 가리킴","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"class","slug":"class","permalink":"http://mjae404.github.io/tags/class/"}]},{"title":"JS 심볼","slug":"vue-symbol","date":"2022-01-03T12:13:13.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/03/vue-symbol/","excerpt":"Symbol은 숫자형 데이터(number), 문자형 데이터(string), 논리형데이터(boolean)처럼 원시형 데이터 중 하나.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"symbol","slug":"symbol","permalink":"http://mjae404.github.io/tags/symbol/"}]},{"title":"JS 함수","slug":"vue-function","date":"2022-01-03T10:27:14.000Z","updated":"2025-12-22T13:28:45.555Z","comments":true,"path":"2022/01/03/vue-function/","excerpt":"ES6에서 화살표 함수(Arrow Function) 도입 : =&gt; 비교 연산자 : &lt;=, &gt;=","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"}]},{"title":"PYTHON 이상한 수학 문제 II","slug":"python-exercise005","date":"2022-01-03T02:14:28.000Z","updated":"2022-02-12T14:11:40.281Z","comments":true,"path":"2022/01/03/python-exercise005/","excerpt":"10보다 작은 2 또는 3의 배수는 2, 3, 4, 6, 8, 9이며, 이들의 합은 32입니다. while문과 if문을 활용하여, 1000보다 작은 자연수 중 2 또는 3의 배수의 합을 출력하는 프로그램을 써보세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"PYTHON 이상한 수학 문제 I","slug":"python-exercise004","date":"2022-01-03T01:14:28.000Z","updated":"2022-02-12T14:21:39.480Z","comments":true,"path":"2022/01/03/python-exercise004/","excerpt":"while문과 if문을 활용하여 100이하의 자연수 중 8의 배수이지만, 12의 배수는 아닌 것을 모두 출력하세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"JS 전개 연산자","slug":"vue-spread-operator","date":"2022-01-02T13:22:34.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/02/vue-spread-operator/","excerpt":"전개 연산자 (spreadOperator) : 나열형 자료(배열(Array)과 객체(Object))를 추출(왼)하거나 연결(오른)시 사용 사용방법 : 변수명 앞에 마침표 세개를 연속적으로 작성한다. (…변수명) 구분자에 대한 제한 : 배열 = [] / 객체 - {} / 함수 - ()","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"spread opeartor","slug":"spread-opeartor","permalink":"http://mjae404.github.io/tags/spread-opeartor/"}]},{"title":"JS 변수","slug":"vue-various","date":"2022-01-01T05:10:52.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/01/vue-various/","excerpt":"() : 소괄호 - 연산에서 우선순위, 함수에서 인자값을 담는 곳, if, for, …, 명령 (메서드) {} : 중괄호 - 함수의 실행문을 담는 영역(블록 스코프), if, for, …, 객체 선언 [] : 대괄호 - 배열 &lt;&gt; : 각괄호","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"various","slug":"various","permalink":"http://mjae404.github.io/tags/various/"}]},{"title":"JS 템플릿 리터럴","slug":"vue-templete-literal","date":"2022-01-01T04:40:17.000Z","updated":"2025-12-22T13:28:45.556Z","comments":true,"path":"2022/01/01/vue-templete-literal/","excerpt":"ES6 = ECMA Script 6 = 2015년 6월 기준으로 새로이 자바스크립트가 업데이트된 버전 (var =&gt; let, const 변수명(상수 + 배열 또는 객체의 추가 및 삭제) / ES7에서 class + 생성자라는 인자값을 도입) 객체라는 개념이 넓어짐과 동시에 명확해짐 콜백지옥을 막기 위해서 promise() 함수 ~ then","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"templete literal","slug":"templete-literal","permalink":"http://mjae404.github.io/tags/templete-literal/"}]},{"title":"PYTHON 학점 계산기","slug":"python-exercise003","date":"2021-12-31T00:33:01.000Z","updated":"2021-12-31T14:27:35.076Z","comments":true,"path":"2021/12/31/python-exercise003/","excerpt":"성적표를 기다리는 학생들을 위해서 학점 계산기를 만들어보세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"PYTHON 홀수짝수","slug":"python-exercise002","date":"2021-12-29T16:05:52.000Z","updated":"2021-12-31T14:27:39.734Z","comments":true,"path":"2021/12/30/python-exercise002/","excerpt":"짝수인지 홀수인지 판단해주는 is_evenly_divisible 함수를 쓰세요.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"PYTHON 거스름돈 계산기","slug":"python-exercise001","date":"2021-12-29T04:28:56.000Z","updated":"2021-12-29T04:29:32.450Z","comments":true,"path":"2021/12/29/python-exercise001/","excerpt":"현명하게 거스름돈을 계산해주는 프로그램을 만드려고 합니다. 예를 들어 33,000원짜리 물건을 사기 위해 100,000원을 냈다면, 50,000원 1장, 10,000원 1장, 5,000원 1장, 1,000원 2장과 같이 ‘가장 적은 수’의 지폐를 거슬러 주는 방식입니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"}]},{"title":"SVG SMIL 애니메이션 alternate 구현","slug":"svg-exercise004","date":"2021-12-28T06:18:16.000Z","updated":"2021-12-28T06:19:51.337Z","comments":true,"path":"2021/12/28/svg-exercise004/","excerpt":"SMIL 애니메이션 alternate 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SVG","slug":"exercise/SVG","permalink":"http://mjae404.github.io/categories/exercise/SVG/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"SVG SMIL 애니메이션 Morphing 효과","slug":"svg-exercise003","date":"2021-12-26T15:13:59.000Z","updated":"2021-12-26T15:15:12.586Z","comments":true,"path":"2021/12/27/svg-exercise003/","excerpt":"SMIL 애니메이션 Morphing 효과 만들기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SVG","slug":"exercise/SVG","permalink":"http://mjae404.github.io/categories/exercise/SVG/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"SVG 그래픽 로고가 그려지는 애니메이션","slug":"svg-exercise002","date":"2021-12-26T04:31:24.000Z","updated":"2021-12-26T04:32:04.529Z","comments":true,"path":"2021/12/26/svg-exercise002/","excerpt":"그래픽 로고가 그려지는 애니메이션 만들기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SVG","slug":"exercise/SVG","permalink":"http://mjae404.github.io/categories/exercise/SVG/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"SVG 돋보기","slug":"svg-exercise001","date":"2021-12-25T10:27:54.000Z","updated":"2021-12-25T10:28:55.675Z","comments":true,"path":"2021/12/25/svg-exercise001/","excerpt":"SVG의 마스크 효과와 자바스크립트를 이용하여 돋보기 효과 만들기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"SVG","slug":"exercise/SVG","permalink":"http://mjae404.github.io/categories/exercise/SVG/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"PYTHON 객체","slug":"python-object","date":"2021-12-23T15:44:56.000Z","updated":"2021-12-23T15:46:05.948Z","comments":true,"path":"2021/12/24/python-object/","excerpt":"속성과 행동을 떠올릴 수 있다면 모두 객체이다. 객체는 속성과 행동으로 이루어져 있다. 속성은 변수로 나타내며, 행동은 함수(메소드)로 나타낸다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"PYTHON 데이터 분석","slug":"python-data-analysis","date":"2021-12-23T01:17:55.000Z","updated":"2021-12-23T01:18:32.190Z","comments":true,"path":"2021/12/23/python-data-analysis/","excerpt":"파이썬으로는 데이터 분석을 할 수 있다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"PYTHON 제어문","slug":"python-control-flow-statement","date":"2021-12-21T15:56:01.000Z","updated":"2022-03-13T12:50:24.412Z","comments":true,"path":"2021/12/22/python-control-flow-statement/","excerpt":"제어문을 활용하면 조건에 따라 동작을 나눌 수 있다. 그리고 반복문을 활용하면 우리가 하나하나 힘겹게 하던 일들을 컴퓨터에게 자동으로 반복시킬 수 있다. 반복문은 원하는 명령들을 한번만 기재하고 반복적으로 실행 가능한 문이다. PYTHON에는 while 반복문과 for 반복문이 있다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"}]},{"title":"PYTHON 리스트","slug":"python-list","date":"2021-12-21T08:50:23.000Z","updated":"2021-12-21T08:51:01.928Z","comments":true,"path":"2021/12/21/python-list/","excerpt":"변수에 여러가지 값을 저장하고 싶다면 리스트(list)라는 자료형을 사용하면 된다. 리스트 안에는 또 다른 리스트가 있을 수 있으며, nested list 라고 부른다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"PYTHON 모듈","slug":"python-module","date":"2021-12-20T04:36:48.000Z","updated":"2021-12-21T08:51:12.167Z","comments":true,"path":"2021/12/20/python-module/","excerpt":"모듈 은 바로 실행하는 용도가 아니라, 나중에 사용할 함수나 클래스 등을 미리 정의해둔 파일이다. 정보를 한번만 정의해두고 import하면 여러 프로그램에서 손쉽게 사용할 수 있다.","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"PYTHON 추상화","slug":"python-abstraction","date":"2021-12-19T08:51:58.000Z","updated":"2021-12-21T08:51:06.631Z","comments":true,"path":"2021/12/19/python-abstraction/","excerpt":"추상화 (Abstraction)복잡한 세부 사항은 숨기면서 주요한 기능에만 집중할 수 있게 해주는 개념이다. 변수 (Variable): 값을 저장 함수 (Function): 명령을 저장 객체 (Class)","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"PYTHON 데이터 타입","slug":"python-datatype","date":"2021-12-19T07:35:45.000Z","updated":"2021-12-21T08:51:09.565Z","comments":true,"path":"2021/12/19/python-datatype/","excerpt":"자료형에는 숫자(Number), 문자(String), 불린(Boolean)이 있다. 숫자: 정수(Integer), 소수(Floating Point) 문자: “Hello” + “World” → “HelloWorld” 불린: True, False","categories":[{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"}],"tags":[{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"}]},{"title":"CSS 덜컥덜컥 누적 배치 변경 문제","slug":"css-cumulative-layout-shift","date":"2021-12-18T08:06:28.000Z","updated":"2021-12-18T08:06:28.000Z","comments":true,"path":"2021/12/18/css-cumulative-layout-shift/","excerpt":"CLS는 구글 핵심 성능 지표에 포함되는 항목 lighthouse: 크롬에 내장되어 있음 0.1 이내에 로드하는 것이 목표 돔이 뒤늦게 추가, 웹폰트가 뒤늦게 로딩되는 등의 이유로 레이아웃 배치가 변경됨. FOIT: font of invisible text / 보이지 않다가 나타나는 현상 FOUT: font of unstyled text / 시스템 폰트에서 웹폰트로 변경되는 현상","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"HTML 덩어리 콘텐츠 빨리 그리기","slug":"html-largest-contentful-paint","date":"2021-12-17T05:12:07.000Z","updated":"2021-12-17T05:12:46.000Z","comments":true,"path":"2021/12/17/html-largest-contentful-paint/","excerpt":"LCP는 구글 핵심 성능 지표에 포함되는 항목 lighthouse: 크롬에 내장되어 있음 2.5초 이내에 로드하는 것이 목표","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"CSS 최적화","slug":"css-optimization","date":"2021-12-16T02:12:40.000Z","updated":"2021-12-16T02:13:16.000Z","comments":true,"path":"2021/12/16/css-optimization/","excerpt":"사용하지 않는 CSS 제거 렌더 차단 리소스 제거","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS로 그리기","slug":"css-drawing","date":"2021-12-15T03:15:10.000Z","updated":"2021-12-15T03:16:10.000Z","comments":true,"path":"2021/12/15/css-drawing/","excerpt":"삼각형으로 그리기12345678div::before &#123; content: &#x27;&#x27;; float: left; vertical-align: middle; margin-right: 8px; border: 40px solid transparent; border-left-color: red;&#125;","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS grid","slug":"css-grid-1","date":"2021-12-14T10:26:05.000Z","updated":"2021-12-15T03:16:00.000Z","comments":true,"path":"2021/12/14/css-grid-1/","excerpt":"격자를 이용하여 내용의 크기와 위치를 제어하는 방법. 두개의 축을 이용. 셀병합 기능 제공 짧은 코드로 자유도 높은 배치 구현","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS flex","slug":"css-flex-1","date":"2021-12-12T15:20:57.000Z","updated":"2021-12-12T15:21:52.000Z","comments":true,"path":"2021/12/13/css-flex-1/","excerpt":"flex item12345678.flex-item &#123; flex: 0 1 auto; &#x2F;* 팽창지수 + 수축지수 + 기준크기 *&#x2F; flex-grow: 0; &#x2F;* 팽창지수 *&#x2F; flex-shrink: 1; &#x2F;* 수축지수 *&#x2F; flex-basis: auto; &#x2F;* 기준 크기 *&#x2F; align-self: auto; &#x2F;* 독립적 교차축 정렬*&#x2F; order: 0; &#x2F;* 배치 정렬 *&#x2F;&#125;","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS 레이아웃 플로팅","slug":"css-layout-floating","date":"2021-12-11T17:00:56.000Z","updated":"2025-03-25T12:46:57.995Z","comments":true,"path":"2021/12/12/css-layout-floating/","excerpt":"플로팅 속성 플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다. 인접 후행 블록 요소는 플로팅 요소와 겹치고 인라인 요소(+텍스트 요소)는 플로팅 요소 주변으로 흐른다. clear, flow-root 속성으로 해제할 수 있다. 컬럼을 배치하는 속성이 아니다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS 레이아웃 여백","slug":"css-layout-space","date":"2021-12-11T02:38:46.000Z","updated":"2021-12-11T02:41:00.000Z","comments":true,"path":"2021/12/11/css-layout-space/","excerpt":"vmin, vmax: viewfort-min, viewfort-max padding의 %값: 컨테이너 블럭의 너비값을 참조한다. (padding-top이든, padding-left이든 너비를 참조함) margin의 %값: 컨테이너 블럭의 너비값을 참조한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS 레이아웃 배치","slug":"css-layout-arrange","date":"2021-12-10T06:34:43.000Z","updated":"2021-12-11T02:39:26.000Z","comments":true,"path":"2021/12/10/css-layout-arrange/","excerpt":"display inline, block, list-item, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, tabel-caption, none, inherit","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS 네이밍","slug":"css-naming","date":"2021-12-08T16:57:54.000Z","updated":"2021-12-08T16:59:06.000Z","comments":true,"path":"2021/12/09/css-naming/","excerpt":"BEM Block: 재사용 가능한 독립적인 블록. Element: 블록을 구성하는 종속적인 하위 요소. Modifier: 블록 또는 요소의 변형(모양, 상태, 동작) → 확장할 때 이용","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS의 절대 권력, 초기화","slug":"css-reset","date":"2021-12-08T01:43:12.000Z","updated":"2021-12-08T01:44:38.000Z","comments":true,"path":"2021/12/08/css-reset/","excerpt":"대부분의 초기화 스타일은 쓸모 없거나 덮어쓴다. 개발자 도구에서 coverage를 검색해 사용되지 않는 CSS를 확인할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"CSS가 어려운 이유","slug":"html-why-css-is-difficult","date":"2021-12-07T01:27:53.000Z","updated":"2021-12-07T01:32:10.000Z","comments":true,"path":"2021/12/07/html-why-css-is-difficult/","excerpt":"값 정의 구문: css 속성의 유효한 값과 순서| : 파이프라인, only. 양쪽에서 하나만 사용할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"}]},{"title":"HTML 이미지 마크업 최적화","slug":"html-img-markup","date":"2021-12-07T01:22:07.000Z","updated":"2021-12-07T01:24:50.000Z","comments":true,"path":"2021/12/07/html-img-markup/","excerpt":"이미지 포맷 .jpg/.png 모든 브라우저에서 지원하는 폴백 이미지 .webp (알파 채널, ie 미지원) jpg/png 대비 30-70% 수준의 용량 .avif (알파채널, 크롬/삼성인터넷 지원) 저용량+고품질","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"HTML 인터렉티브 콘텐츠","slug":"html-interative-contents","date":"2021-12-06T02:49:45.000Z","updated":"2021-12-06T02:50:50.000Z","comments":true,"path":"2021/12/06/html-interative-contents/","excerpt":"a, button a 실행 결과를 가리킬 수 있는 url이 있을 때 현재페이지 특정 섹션 스크롤 이동 대화 상자를 참조하는 경우. a 요소의 href 값은 dialog 요소의 id(해시 url)을 참조 링크 열기 가능. (button보다 더 많은 기능을 제공) button 참조할 url이 없을 때 pointer: 링크를 의미하기 때문에 button일 때는 pointer 하지 않는 것이 좋음.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"HTML 의미론","slug":"html-semantics","date":"2021-12-06T02:46:08.000Z","updated":"2021-12-06T02:48:12.000Z","comments":true,"path":"2021/12/06/html-semantics/","excerpt":"div, span은 아무 의미가 없다. sectioning hx, hgroup, header, footer → 섹셔닝은 아니지만 함께 쓰는 요소 article, aside, nav, section → 섹셔닝 요소","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"HTML 개요 알고리즘 이해","slug":"html-outline-heading","date":"2021-12-04T16:09:48.000Z","updated":"2021-12-04T16:12:34.000Z","comments":true,"path":"2021/12/05/html-outline-heading/","excerpt":"headingmap 헤딩 섹셔닝 명시적/암시적 섹션 어색한 섹션","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"HTML 검색엔진","slug":"html-seo","date":"2021-12-04T13:13:44.000Z","updated":"2021-12-04T16:12:24.000Z","comments":true,"path":"2021/12/04/html-seo/","excerpt":"SEO에 영향을 주는 요인들 검색 결과 페이지(SERP) 노출 대비 클릭률 백링크(BACKLINK): 다른 웹페이지로부터 인용(링크)되는 횟수 도메인 권력(Domain authority): 검색결과 페이지 순위 예측 점수 페이지 타이틀 메타 디스크립션 로딩속도 SSL(https) 사용 여부 콘텐츠의 양, 질, 개연성 사용자 경험: LCP(최대 콘텐츠 블럭 그리기), CLS(누적 배치 변경) - 페이지가 덜컥덜컥 열리면 안됨","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"HTML을 어떻게 공부해야 하는가","slug":"html-how-to-learn","date":"2021-12-04T13:10:44.000Z","updated":"2021-12-04T13:25:26.000Z","comments":true,"path":"2021/12/04/html-how-to-learn/","excerpt":"Flow content (플로우 콘텐츠) body에 포함할 수 있는 요소. base, style, title 요소를 제외한 나머지 모든 요소.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"SVG 애니메이션","slug":"svg-animation","date":"2021-12-03T12:04:23.000Z","updated":"2021-12-06T02:48:46.000Z","comments":true,"path":"2021/12/03/svg-animation/","excerpt":"SVG는 CSS와 SMIL로 애니메이션을 구현할 수 있다.","categories":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/categories/SVG/"}],"tags":[{"name":"animation","slug":"animation","permalink":"http://mjae404.github.io/tags/animation/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"SVG 효과","slug":"svg-effect","date":"2021-12-03T12:03:28.000Z","updated":"2021-12-03T12:06:28.000Z","comments":true,"path":"2021/12/03/svg-effect/","excerpt":"svg에 그라디언트, 패턴, 마스크 효과를 줄 수 있다.","categories":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/categories/SVG/"}],"tags":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"},{"name":"effect","slug":"effect","permalink":"http://mjae404.github.io/tags/effect/"}]},{"title":"SVG 기본","slug":"svg-basic","date":"2021-12-03T12:02:24.000Z","updated":"2024-11-21T08:02:54.774Z","comments":true,"path":"2021/12/03/svg-basic/","excerpt":"svg의 기본 구성 태그는 아래와 같으며 xmlns는 생략 가능하다. svg 안에 style을 인라인으로 넣어둘 수도 있다. 기본 CSS와 같이 클래스를 사용하여 작업하는 것이 바람직하다. 12&lt;svg xmlns=&quot;http:/www.w3.org/2000/svg&quot;&gt;&lt;/svg&gt;","categories":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/categories/SVG/"}],"tags":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"SVG 개요","slug":"svg-overview","date":"2021-12-03T12:01:19.000Z","updated":"2021-12-03T12:06:40.000Z","comments":true,"path":"2021/12/03/svg-overview/","excerpt":"SVG란 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이자 XML 기반의 2차원 그래픽이다. DOM의 일부로서 각 객체별로 HTML 엘리먼트가 추가된다. 모양이 복잡하지 않을 경우 파일 사이즈도 작다. 포인트가 많으면 많을 수록 계산해서 그려지기 때문에 성능이 떨어진다. CSS와 자바스크립트를 사용해서 조작이 가능하다.","categories":[{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/categories/SVG/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"}]},{"title":"JS 가위바위보","slug":"js-exercise018","date":"2021-09-19T01:44:00.000Z","updated":"2021-10-01T07:47:22.000Z","comments":true,"path":"2021/09/19/js-exercise018/","excerpt":"가위바위보 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 로또추첨기","slug":"js-exercise017","date":"2021-09-17T06:57:34.000Z","updated":"2021-09-18T00:37:56.000Z","comments":true,"path":"2021/09/17/js-exercise017/","excerpt":"로또 추첨기 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 틱택토 게임","slug":"js-exercise016","date":"2021-09-13T09:58:22.000Z","updated":"2021-09-17T06:42:46.000Z","comments":true,"path":"2021/09/13/js-exercise016/","excerpt":"틱택토 게임 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 숫자야구 구현","slug":"js-exercise015","date":"2021-09-10T10:31:44.000Z","updated":"2021-09-12T10:29:34.000Z","comments":true,"path":"2021/09/10/js-exercise015/","excerpt":"숫자야구 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 구구단 구현","slug":"js-exercise014","date":"2021-09-09T07:04:27.000Z","updated":"2021-09-10T06:46:06.000Z","comments":true,"path":"2021/09/09/js-exercise014/","excerpt":"구구단 구현하기.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 별찍기","slug":"js-exercise013","date":"2021-09-08T05:02:48.000Z","updated":"2021-09-08T05:31:08.000Z","comments":true,"path":"2021/09/08/js-exercise013/","excerpt":"별찍기 연습.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"npm gulp","slug":"npm-gulp","date":"2021-08-12T13:23:31.000Z","updated":"2021-08-12T13:31:44.000Z","comments":true,"path":"2021/08/12/npm-gulp/","excerpt":"gulp는 개발 워크플로우에서 번거롭거나 시간이 많이 걸리는 작업을 자동화하는 데 도움이 되는 툴킷이다. npm 모듈을 사용하여 원하는 작업을 수행할 수 있으며 배우기 쉽고 사용하기 쉽다.","categories":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/categories/npm/"}],"tags":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/tags/npm/"},{"name":"gulp","slug":"gulp","permalink":"http://mjae404.github.io/tags/gulp/"}]},{"title":"git ignore","slug":"git-ignore","date":"2021-08-10T09:13:36.000Z","updated":"2021-08-10T09:18:36.000Z","comments":true,"path":"2021/08/10/git-ignore/","excerpt":"올리지 않아도 되는 확장자나 폴더를 제외하는 git 명령어.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"ignore","slug":"ignore","permalink":"http://mjae404.github.io/tags/ignore/"}]},{"title":"npm dart sass","slug":"npm-dart-sass","date":"2021-08-08T03:34:50.000Z","updated":"2021-08-08T03:40:20.000Z","comments":true,"path":"2021/08/08/npm-dart-sass/","excerpt":"SASS 컴파일러 설치해본다.","categories":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/categories/npm/"}],"tags":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/tags/npm/"},{"name":"dart sass","slug":"dart-sass","permalink":"http://mjae404.github.io/tags/dart-sass/"}]},{"title":"PHP 쿠키와 세션의 기본 사용법","slug":"php-cookie-session","date":"2021-08-02T13:39:51.000Z","updated":"2021-08-03T08:32:22.000Z","comments":true,"path":"2021/08/02/php-cookie-session/","excerpt":"PHP 기본 문법에서 쿠키와 세션을 확인해본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"cookie","slug":"cookie","permalink":"http://mjae404.github.io/tags/cookie/"},{"name":"session","slug":"session","permalink":"http://mjae404.github.io/tags/session/"}]},{"title":"PHP 사용자 입력 데이터 전송방식 get, 유효성 검사하기, FILTER INPUT","slug":"php-get-validity-check-filter-input","date":"2021-08-02T11:52:29.000Z","updated":"2021-08-02T13:39:12.000Z","comments":true,"path":"2021/08/02/php-get-validity-check-filter-input/","excerpt":"PHP 기본 문법에서 사용자 입력 데이터 전송방식, 유효성 검사하기, FILTER-INPUT에 대해 알아본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"get","slug":"get","permalink":"http://mjae404.github.io/tags/get/"},{"name":"form","slug":"form","permalink":"http://mjae404.github.io/tags/form/"},{"name":"validity check","slug":"validity-check","permalink":"http://mjae404.github.io/tags/validity-check/"},{"name":"filter input","slug":"filter-input","permalink":"http://mjae404.github.io/tags/filter-input/"}]},{"title":"PHP 사용자 입력 데이터 전송방식 get, post","slug":"php-get-post","date":"2021-08-02T11:11:13.000Z","updated":"2021-08-02T12:03:42.000Z","comments":true,"path":"2021/08/02/php-get-post/","excerpt":"PHP 기본 문법에서 사용자 입력 데이터 전송방식에 대해 알아본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"get","slug":"get","permalink":"http://mjae404.github.io/tags/get/"},{"name":"post","slug":"post","permalink":"http://mjae404.github.io/tags/post/"},{"name":"form","slug":"form","permalink":"http://mjae404.github.io/tags/form/"}]},{"title":"PHP loop로 반복작업 처리하기","slug":"php-loop","date":"2021-08-02T10:44:47.000Z","updated":"2021-08-02T11:09:54.000Z","comments":true,"path":"2021/08/02/php-loop/","excerpt":"php로 반복작업을 처리해본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"loop","slug":"loop","permalink":"http://mjae404.github.io/tags/loop/"}]},{"title":"PHP 문서에서 다른 문서 불러오기","slug":"php-include-require","date":"2021-08-01T09:32:42.000Z","updated":"2021-08-01T10:13:04.000Z","comments":true,"path":"2021/08/01/php-include-require/","excerpt":"php 문서에서 다른 문서(ex. 공통문서)를 불러와본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"include","slug":"include","permalink":"http://mjae404.github.io/tags/include/"},{"name":"require","slug":"require","permalink":"http://mjae404.github.io/tags/require/"}]},{"title":"npm gulp-file-include","slug":"npm-gulp-file-include","date":"2021-07-31T14:09:22.000Z","updated":"2021-08-11T13:01:30.000Z","comments":true,"path":"2021/07/31/npm-gulp-file-include/","excerpt":"파일을 인클루드하기 위한 gulp 플러그인.","categories":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/categories/npm/"}],"tags":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/tags/npm/"},{"name":"gulp file include","slug":"gulp-file-include","permalink":"http://mjae404.github.io/tags/gulp-file-include/"}]},{"title":"PHP 함수, 지역변수, 정적변수, 전역변수","slug":"php-function-variable","date":"2021-07-30T07:40:40.000Z","updated":"2021-07-30T08:09:54.000Z","comments":true,"path":"2021/07/30/php-function-variable/","excerpt":"PHP 기본 문법에서 함수, 지역변수, 정적변수, 전역변수를 확인해본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"variable","slug":"variable","permalink":"http://mjae404.github.io/tags/variable/"},{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"}]},{"title":"PHP 조건문, 배열, 반복문","slug":"php-conditions-array-loop","date":"2021-07-29T12:13:53.000Z","updated":"2021-07-29T12:51:38.000Z","comments":true,"path":"2021/07/29/php-conditions-array-loop/","excerpt":"PHP 기본 문법에서 조건문, 배열, 반복문을 확인해본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"array","slug":"array","permalink":"http://mjae404.github.io/tags/array/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"conditions","slug":"conditions","permalink":"http://mjae404.github.io/tags/conditions/"},{"name":"loop","slug":"loop","permalink":"http://mjae404.github.io/tags/loop/"}]},{"title":"PHP 변수 및 에러 확인","slug":"php-variable-and-error","date":"2021-07-28T11:52:55.000Z","updated":"2021-07-28T12:16:52.000Z","comments":true,"path":"2021/07/28/php-variable-and-error/","excerpt":"PHP 기본 문법에서 변수 및 에러를 확인해본다.","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"variable","slug":"variable","permalink":"http://mjae404.github.io/tags/variable/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"error","slug":"error","permalink":"http://mjae404.github.io/tags/error/"}]},{"title":"PHP 개요","slug":"php-overview","date":"2021-07-28T11:36:29.000Z","updated":"2021-08-02T13:35:58.000Z","comments":true,"path":"2021/07/28/php-overview/","excerpt":"서버 사이드 언어 언어 운영체제 웹서버 제조사 PHP 리눅스, 윈도우 Apache 등 오픈소스 JSP 리눅스, 윈도우 Tomcat, Jeus 등 Oracle ASP.NET 윈도우 IIS Microsoft","categories":[{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"}]},{"title":"git add / commit / push 취소하기","slug":"git-cancel-add-commit-push","date":"2021-07-15T09:38:53.000Z","updated":"2021-07-28T11:38:02.000Z","comments":true,"path":"2021/07/15/git-cancel-add-commit-push/","excerpt":"git add /commit / push 취소를 진행할 수 있다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"}]},{"title":"부트스트랩 개요","slug":"bootstrap-overview","date":"2021-03-31T15:30:36.000Z","updated":"2021-08-04T10:03:58.000Z","comments":true,"path":"2021/04/01/bootstrap-overview/","excerpt":"Bootstrap Bootstrap.css를 불러오고 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용 클래스로 간단하게 가져와 사용 가능 트위터에서 개발","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"bootstrap","slug":"HTML-CSS/bootstrap","permalink":"http://mjae404.github.io/categories/HTML-CSS/bootstrap/"}],"tags":[{"name":"bootstrap","slug":"bootstrap","permalink":"http://mjae404.github.io/tags/bootstrap/"},{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"}]},{"title":"JS 끝말잇기","slug":"js-exercise012","date":"2021-02-22T08:26:49.000Z","updated":"2021-09-10T06:02:42.000Z","comments":true,"path":"2021/02/22/js-exercise012/","excerpt":"끝말잇기 구현.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"Hexo","slug":"hexoblog","date":"2021-02-07T13:58:45.000Z","updated":"2021-02-07T14:39:58.000Z","comments":true,"path":"2021/02/07/hexoblog/","excerpt":"Hexo는 마크다운 또는 다른 언어를 사용하여 포스트를 작성할 수 있는 블로그 프레임워크이다.","categories":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/categories/blog/"}],"tags":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/tags/blog/"},{"name":"hexo","slug":"hexo","permalink":"http://mjae404.github.io/tags/hexo/"}]},{"title":"JS 배열 요소의 합계","slug":"js-exercise011","date":"2021-02-05T14:41:05.000Z","updated":"2021-02-05T14:41:38.000Z","comments":true,"path":"2021/02/05/js-exercise011/","excerpt":"배열 요소의 합계를 구하라.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 피보나치 수열","slug":"js-exercise010","date":"2021-02-04T12:05:59.000Z","updated":"2021-02-04T12:06:14.000Z","comments":true,"path":"2021/02/04/js-exercise010/","excerpt":"피보나치 수열을 구하는 함수.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"npm 개요","slug":"npm-overview","date":"2021-01-03T05:49:41.000Z","updated":"2021-01-03T06:12:16.000Z","comments":true,"path":"2021/01/03/npm-overview/","excerpt":"npm은 세계에서 가장 큰 소프트웨어 레지스트리이다. Node Package Manager의 약자이며 node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포한다. 다른 사람들이 만들어둔 모듈들을 설치하여 사용할 수 있으며, 다른 모듈의 의존성도 자동으로 해결해주고 있다.","categories":[{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/categories/npm/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/tags/npm/"}]},{"title":"git 커밋 되돌리기 (reset / revert)","slug":"git-reset","date":"2021-01-02T13:31:16.000Z","updated":"2021-01-02T13:45:20.000Z","comments":true,"path":"2021/01/02/git-reset/","excerpt":"commit 혹은 push했던 내용이 잘못되었을 때 이전으로 되돌려야하는 경우 종종 있다. 로컬에 commit만 할 경우 reset, push까지 된 경우 revert를 사용한다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"reset","slug":"reset","permalink":"http://mjae404.github.io/tags/reset/"},{"name":"revert","slug":"revert","permalink":"http://mjae404.github.io/tags/revert/"}]},{"title":"WAI-ARIA 사용법 및 주의점","slug":"wai-aria-how-to-use","date":"2020-12-27T13:29:56.000Z","updated":"2021-08-04T10:02:20.000Z","comments":true,"path":"2020/12/27/wai-aria-how-to-use/","excerpt":"WAI-ARIA를 사용하는 방법 및 주의사항은 아래와 같다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"WAI-ARIA","slug":"HTML-CSS/WAI-ARIA","permalink":"http://mjae404.github.io/categories/HTML-CSS/WAI-ARIA/"}],"tags":[{"name":"WAI-ARIA","slug":"WAI-ARIA","permalink":"http://mjae404.github.io/tags/WAI-ARIA/"}]},{"title":"WAI-ARIA 기본 개념","slug":"wai-aria-overview","date":"2020-12-27T11:49:30.000Z","updated":"2021-08-04T10:02:20.000Z","comments":true,"path":"2020/12/27/wai-aria-overview/","excerpt":"ARIA는 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 스크린 리더기 및 보조 기기 등에서 접근성 및 상호 운용성을 향상 시키고 보다 나은 사용자 경험(User Experience)를 제공하기 위함이라는 목적을 가진다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"WAI-ARIA","slug":"HTML-CSS/WAI-ARIA","permalink":"http://mjae404.github.io/categories/HTML-CSS/WAI-ARIA/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"WAI-ARIA","slug":"WAI-ARIA","permalink":"http://mjae404.github.io/tags/WAI-ARIA/"}]},{"title":"HTML 웹접근성","slug":"html-web-accessibility","date":"2020-12-27T09:58:30.000Z","updated":"2021-08-04T10:01:46.000Z","comments":true,"path":"2020/12/27/html-web-accessibility/","excerpt":"차별 및 제한 없이 동등하게The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. (웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다.)─ Tim Berners-Lee","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"},{"name":"web accessibility","slug":"web-accessibility","permalink":"http://mjae404.github.io/tags/web-accessibility/"}]},{"title":"CSS 벤더 프리픽스","slug":"css-vendor-prefix","date":"2020-12-27T09:00:16.000Z","updated":"2021-08-04T10:01:12.000Z","comments":true,"path":"2020/12/27/css-vendor-prefix/","excerpt":"CSS3 표준으로 확정이 되기 이전 혹은 브라우저 개발사가 실험적으로 제공하는 기능을 사용할 경우 벤더 프리픽스를 이용하여야 한다. 브라우저의 버전이 올라감에 따라 벤더 프리픽스를 사용하지 않아도 될 수 있지만 구형 브라우저 지원을 위해 사용할 필요가 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"vendor prefix","slug":"vendor-prefix","permalink":"http://mjae404.github.io/tags/vendor-prefix/"}]},{"title":"CSS 애니메이션 04","slug":"css-exercise004","date":"2020-12-13T05:44:36.000Z","updated":"2025-09-04T00:44:37.980Z","comments":true,"path":"2020/12/13/css-exercise004/","excerpt":"CSS3(keyframes, transform, translate, animation)을 이용한 tail Animation Effect.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"CSS 애니메이션 03","slug":"css-exercise003","date":"2020-12-12T14:06:48.000Z","updated":"2025-09-04T00:44:10.331Z","comments":true,"path":"2020/12/12/css-exercise003/","excerpt":"CSS3(keyframes, transform, translate, animation)을 이용한 wave Animation Effect.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"CSS 트랜지션","slug":"css-transition","date":"2020-12-11T13:43:18.000Z","updated":"2021-08-04T10:01:08.000Z","comments":true,"path":"2020/12/11/css-transition/","excerpt":"CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 일어나는 것이 아니라 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 명시적으로 리스트를 작성해서 어떤 속성을 움직이게 할지, 딜레이를 설정해서 언제 애니메이션이 시작할지, 지속 시간을 설정해서 트랜지션을 얼마나 지속할지, 타이밍 함수를 사용해서 어떻게 트랜지션을 실행하는지 결정하게 한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"transition","slug":"transition","permalink":"http://mjae404.github.io/tags/transition/"}]},{"title":"CSS box shadow","slug":"css-box-shadow","date":"2020-12-09T16:58:05.000Z","updated":"2021-08-04T10:00:44.000Z","comments":true,"path":"2020/12/10/css-box-shadow/","excerpt":"box-shadow css 속성은 요소의 프레임 주위에 그림자 효과를 추가한다. 여러개의 효과를 쉼표로 추가하여 설정할 수 있다. X값, Y값, 블러, 번지는 정도, 색상 을 기재한다. 거의 모든 요소의 프레임에서 사용할 수 있으며, border-radius를 지정할 수 있다. 여러 개를 지정할 수 있고, 첫번째로 지정한 그림자가 제일 위에 있다. 1box-shadow: 3px 3px red, -1em 0 .4em teal;","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"box shadow","slug":"box-shadow","permalink":"http://mjae404.github.io/tags/box-shadow/"}]},{"title":"CSS 이벤트 제어 속성","slug":"css-pointer-events","date":"2020-12-09T14:32:37.000Z","updated":"2021-08-04T10:01:00.000Z","comments":true,"path":"2020/12/09/css-pointer-events/","excerpt":"요소에 부여된 이벤트를 제거하거나 활성화시켜야 하는 경우가 있는데 이럴 때 pointer-events 속성을 사용한다. 요소들의 마우스/터치 이벤트들의 응답을 조절할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"overflow","slug":"overflow","permalink":"http://mjae404.github.io/tags/overflow/"}]},{"title":"제이쿼리 선택자","slug":"jquery-selector","date":"2020-12-06T16:25:00.000Z","updated":"2021-08-04T10:04:58.000Z","comments":true,"path":"2020/12/07/jquery-selector/","excerpt":"jQuery는 CSS 스타일의 선택자를 이용하여 요소를 선택할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"jQuery","slug":"JavaScript/jQuery","permalink":"http://mjae404.github.io/categories/JavaScript/jQuery/"}],"tags":[{"name":"jQuery","slug":"jQuery","permalink":"http://mjae404.github.io/tags/jQuery/"},{"name":"selecotr","slug":"selecotr","permalink":"http://mjae404.github.io/tags/selecotr/"}]},{"title":"CSS 애니메이션 02","slug":"css-exercise002","date":"2020-12-05T17:00:23.000Z","updated":"2025-09-04T00:43:52.663Z","comments":true,"path":"2020/12/06/css-exercise002/","excerpt":"CSS3(keyframes, transform, translate, animation)을 이용한 Dot Animation Effect.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"CSS 애니메이션 01","slug":"css-exercise001","date":"2020-12-05T11:10:17.000Z","updated":"2025-09-04T00:43:24.769Z","comments":true,"path":"2020/12/05/css-exercise001/","excerpt":"CSS3(keyframes, transform, translate, animation)을 이용한 Bar Animation Effect.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"}]},{"title":"CSS 웹폰트","slug":"css-webfont","date":"2020-11-29T15:24:20.000Z","updated":"2021-08-04T10:01:14.000Z","comments":true,"path":"2020/11/30/css-webfont/","excerpt":"웹브라우저는 로컬 소프트웨어이므로 로컬 환경의 리소스만 사용 가능하다. 로컬 환경에 존재하는 폰트는 사용할 수 없다. 사용자가 어떤 디바이스, 어떤 OS를 사용하여 웹페이지에 접근하는지 알 수 없다. 웹페이지와 같이 폰트도 서버에서 클라이언트로 다운로드되어 실행될 수 있다면 문제는 해결 가능하다. 이러한 문제를 해결할 수 있는 방법이 웹폰트이다. (클라이언트에 해당 폰트가 존재하지 않을 경우 전송되는 방식)","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"font","slug":"font","permalink":"http://mjae404.github.io/tags/font/"},{"name":"web font","slug":"web-font","permalink":"http://mjae404.github.io/tags/web-font/"},{"name":"typography","slug":"typography","permalink":"http://mjae404.github.io/tags/typography/"}]},{"title":"CSS 애니메이션","slug":"css-animation","date":"2020-11-27T16:11:55.000Z","updated":"2024-05-10T16:54:42.799Z","comments":true,"path":"2020/11/28/css-animation/","excerpt":"애니메이션 속성은 콘텐츠를 움직이게 할 수 있으며, 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. 움직이는 시간, 움직이는 방향, 움직이는 상태 등 여러가지 속성을 설정할 수 있다. 12animation: name | duration | timing-function | delay |iteration-count | direction | fill-mode | play-state","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"animation","slug":"animation","permalink":"http://mjae404.github.io/tags/animation/"}]},{"title":"제이쿼리 메소드","slug":"jquery-method","date":"2020-11-27T16:01:44.000Z","updated":"2021-08-04T10:04:52.000Z","comments":true,"path":"2020/11/28/jquery-method/","excerpt":"jQuery를 사용하기 위해서는 jQuery 객체를 생성하여야 하며, jQuery 객체는 다양한 메소드를 가진다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"jQuery","slug":"JavaScript/jQuery","permalink":"http://mjae404.github.io/categories/JavaScript/jQuery/"}],"tags":[{"name":"jQuery","slug":"jQuery","permalink":"http://mjae404.github.io/tags/jQuery/"},{"name":"method","slug":"method","permalink":"http://mjae404.github.io/tags/method/"}]},{"title":"제이쿼리 개요","slug":"jquery-overview","date":"2020-11-25T17:58:56.000Z","updated":"2021-08-04T10:04:56.000Z","comments":true,"path":"2020/11/26/jquery-overview/","excerpt":"라이브러리(library)자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드 jQuery란엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"jQuery","slug":"JavaScript/jQuery","permalink":"http://mjae404.github.io/categories/JavaScript/jQuery/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"jQuery","slug":"jQuery","permalink":"http://mjae404.github.io/tags/jQuery/"}]},{"title":"SCSS 내장 함수","slug":"scss-built-in-function","date":"2020-11-19T16:01:06.000Z","updated":"2021-08-04T10:03:00.000Z","comments":true,"path":"2020/11/20/scss-built-in-function/","excerpt":"Sass에서 기본적으로 제공하는 내장함수는 종류가 많다. 필요할 수 있는 함수만 정리.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"},{"name":"Sass","slug":"Sass","permalink":"http://mjae404.github.io/tags/Sass/"},{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"built-in Function","slug":"built-in-Function","permalink":"http://mjae404.github.io/tags/built-in-Function/"}]},{"title":"JS html 생성","slug":"js-exercise009","date":"2020-11-18T15:46:53.000Z","updated":"2020-11-18T15:47:16.000Z","comments":true,"path":"2020/11/19/js-exercise009/","excerpt":"아래 배열을 사용하여 html을 생성하는 함수를 작성하라.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"arry","slug":"arry","permalink":"http://mjae404.github.io/tags/arry/"},{"name":"array HOF","slug":"array-HOF","permalink":"http://mjae404.github.io/tags/array-HOF/"}]},{"title":"JS 윤년인지 확인하는 함수","slug":"js-exercise008","date":"2020-11-18T13:34:26.000Z","updated":"2020-11-18T13:34:36.000Z","comments":true,"path":"2020/11/18/js-exercise008/","excerpt":"특정 연도가 윤년인지 확인하는 함수. 윤년은 4로 나누어 떨어지고 100으로는 나누어 떨어지지는 않지만 400으로는 나누어 떨어지는 해이다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 2 또는 3의 배수가 아닌 수의 총합","slug":"js-exercise007","date":"2020-11-16T16:16:04.000Z","updated":"2020-11-16T16:16:14.000Z","comments":true,"path":"2020/11/17/js-exercise007/","excerpt":"1부터 20 미만의 정수 중에서 2 또는 3의 배수가 아닌 수의 총합을 구하시오.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 2 또는 3의 배수인 수의 총합","slug":"js-exercise006","date":"2020-11-16T13:29:41.000Z","updated":"2020-11-16T13:29:52.000Z","comments":true,"path":"2020/11/16/js-exercise006/","excerpt":"1부터 20 미만의 정수 중에서 2 또는 3의 배수인 수의 총합을 구하시오.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"CSS overflow","slug":"css-overflow","date":"2020-11-14T13:13:14.000Z","updated":"2021-08-04T10:00:58.000Z","comments":true,"path":"2020/11/14/css-overflow/","excerpt":"text-overflow CSS 속성은 숨겨진 오버플로우 콘텐츠가 사용자에게 어떻게 보여지는지 설정한다. 잘라내거나, 줄임표(‘…’)로 표시하거나, 맞춤 문자열을 표시할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"overflow","slug":"overflow","permalink":"http://mjae404.github.io/tags/overflow/"}]},{"title":"HTML5 섹션 요소","slug":"html-sections-and-outlines","date":"2020-11-13T14:24:38.000Z","updated":"2021-08-04T10:01:30.000Z","comments":true,"path":"2020/11/13/html-sections-and-outlines/","excerpt":"HTML5 규격에는 문서를 구성하는 데 도움이 되는 몇 가지 의미 요소가 포함되어 있다. 의미 요소는 특히 브라우저, 개발자, 판독기 및 문서를 해석하는 다른 기술(예: 음성 보조자)에 의미를 전달하도록 설계된다. 예를 들어 &lt;div&gt;는 그 내용에 대한 어떤 의미도 담고 있지 않지만 &lt;figcaption&gt;은 그 내용을 명확하게 기술하고 있다. HTML5에 새로운 의미 요소를 추가하여 웹 사이트의 구획을 개선하였다. 개발자는 이러한 의미적 요소를 명시적 목적 이외의 목적으로 사용하지 않는 것이 중요하다. 많은 접근성 도구는 의미론적 HTML5 요소에 의존한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"},{"name":"sections","slug":"sections","permalink":"http://mjae404.github.io/tags/sections/"}]},{"title":"CSS SMACSS 방법론","slug":"css-smacss-methodology","date":"2020-11-10T15:57:48.000Z","updated":"2021-08-04T10:01:06.000Z","comments":true,"path":"2020/11/11/css-smacss-methodology/","excerpt":"SMACSS(스메스)는 대규모 프로젝트를 위한 스타일링 지침이다. 스타일을 다섯가지로 분류하고 각 유형에 맞는 선택자(selector)와 작명법(naming convention), 코딩 기법을 제시한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"methodology","slug":"methodology","permalink":"http://mjae404.github.io/tags/methodology/"},{"name":"SMACSS","slug":"SMACSS","permalink":"http://mjae404.github.io/tags/SMACSS/"}]},{"title":"CSS OOCSS 방법론","slug":"css-oocss-methodology","date":"2020-11-09T16:01:35.000Z","updated":"2021-08-04T10:00:56.000Z","comments":true,"path":"2020/11/10/css-oocss-methodology/","excerpt":"Object Oriented CSS의 약자이며 Nicole Sullivan에 의해 개발된 프레임워크이다. CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법이다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"methodology","slug":"methodology","permalink":"http://mjae404.github.io/tags/methodology/"},{"name":"OOCSS","slug":"OOCSS","permalink":"http://mjae404.github.io/tags/OOCSS/"}]},{"title":"CSS BEM 방법론","slug":"css-ben-methodology","date":"2020-11-08T17:21:00.000Z","updated":"2021-08-04T10:00:42.000Z","comments":true,"path":"2020/11/09/css-ben-methodology/","excerpt":"CSS 구조를 개선시키기 위한 CSS 개발 방법론은 여러가지가 있다. OOCSS, SMACSS, BEM 등이 있으며 BEM은 Block Element Modifier의 약자이다. BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있다. 필요하다면 클래스명은 BEM 방식의 이름을 여러번 반복하여 재사용할 수 있도록 한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"BEM","slug":"BEM","permalink":"http://mjae404.github.io/tags/BEM/"},{"name":"methodology","slug":"methodology","permalink":"http://mjae404.github.io/tags/methodology/"}]},{"title":"CSS 미디어쿼리","slug":"css-mediaquery","date":"2020-11-08T06:23:57.000Z","updated":"2021-08-04T10:00:54.000Z","comments":true,"path":"2020/11/08/css-mediaquery/","excerpt":"다양한 미디어 유형이나 장치에 따라 서로 다른 스타일 규칙을 적용할 수 있다. 123media 미디어타입 and (미디어특성) &#123; CSS 코드&#125;","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"media query","slug":"media-query","permalink":"http://mjae404.github.io/tags/media-query/"},{"name":"responsive","slug":"responsive","permalink":"http://mjae404.github.io/tags/responsive/"}]},{"title":"Git cherry-pick","slug":"git-cherry-pick","date":"2020-11-07T03:44:59.000Z","updated":"2020-11-07T03:45:10.000Z","comments":true,"path":"2020/11/07/git-cherry-pick/","excerpt":"코드 관리를 하다 보면 커밋을 다른 브랜치에 잘못 하거나 코드 의존성 때문에 다른 사람의 커밋중 일부를 가져와야 하는 경우가 생긴다. git rebase나 git cherry-pick을 사용한다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"cherry-pick","slug":"cherry-pick","permalink":"http://mjae404.github.io/tags/cherry-pick/"}]},{"title":"CSS flex","slug":"css-flex","date":"2020-11-05T15:06:01.000Z","updated":"2021-08-04T10:00:50.000Z","comments":true,"path":"2020/11/06/css-flex/","excerpt":"대부분의 사이트는 수직적으로 레이아웃이 구성되어 있으며 위아래로 스크롤하여 사용하게 된다. 수평 구조의 경우 table, float, inline-block을 주로 사용하고 있으나 주로 차선책일 뿐이며 flex로 레이아웃을 쉽게 구성할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"flex","slug":"flex","permalink":"http://mjae404.github.io/tags/flex/"}]},{"title":"CSS 필터","slug":"css-filter","date":"2020-11-05T14:54:02.000Z","updated":"2021-08-04T10:00:48.000Z","comments":true,"path":"2020/11/05/css-filter/","excerpt":"filter 속성은 흐림 효과, 색상 변형 등 이미지 비주얼 효과를 정의한다. CSS 표준은 미리 정의된 효과를 내는 몇가지 함수를 포함하고 있으며, SVG 필터 요소에 대한 URL 참조를 사용하여 SVG 필터를 적용할 수도 있다. hue-rotate()는 0deg-360deg까지 표현한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"filter","slug":"filter","permalink":"http://mjae404.github.io/tags/filter/"}]},{"title":"JS 이벤트","slug":"js-event","date":"2020-11-01T03:27:19.000Z","updated":"2020-11-01T03:28:06.000Z","comments":true,"path":"2020/11/01/js-event/","excerpt":"브라우저에서 이벤트란 사용자가 버튼을 클릭했을 때나 웹페이지가 로드되었을 때 등을 의미한다. DOM 요소와 관련이 있다. 이벤트 발생 시점이나 순서를 미리 알 수 없으므로 이벤트가 발생했을 때를 감지하고 그에 대응하는 처리를 호출할 수 있어야 한다. 브라우저가 이벤트를 감지하고 통지해주는 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능해진다. 이벤트가 발생하면 그에 맞는 반응을 해주어야 하기 때문에 이벤트는 일반 함수에 연결된다. 이 함수는 이벤트가 발생되면 실행된다. 이런 함수를 이벤트 핸들러 라고 한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"event","slug":"event","permalink":"http://mjae404.github.io/tags/event/"}]},{"title":"CSS 박스모델","slug":"css-boxmodel","date":"2020-10-31T12:35:45.000Z","updated":"2021-08-04T10:00:46.000Z","comments":true,"path":"2020/10/31/css-boxmodel/","excerpt":"모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Content, Padding, Border, Margin으로 구성되어 있으며 브라우저는 박스 모델 크기(dimension)와 프로퍼티(색, 배경, 모양 등) 위치를 근거로 렌더링한다. 모든 박스모델 관련 프로퍼티는 상속되지 않는다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"box model","slug":"box-model","permalink":"http://mjae404.github.io/tags/box-model/"}]},{"title":"CSS 셀렉터","slug":"css-selecter","date":"2020-10-29T14:36:51.000Z","updated":"2021-08-04T10:01:04.000Z","comments":true,"path":"2020/10/29/css-selecter/","excerpt":"style을 적용하고자 하는 HTML 요소를 선택할 때 셀렉터를 사용하며 선택한 요소에 스타일을 정의한다. 여러개의 셀렉터를 함께 사용할 수 있고 쉼표(,)로 구분한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"selector","slug":"selector","permalink":"http://mjae404.github.io/tags/selector/"}]},{"title":"JS 짝수와 홀수","slug":"js-exercise005-odd-even","date":"2020-10-27T13:39:35.000Z","updated":"2020-10-27T13:39:50.000Z","comments":true,"path":"2020/10/27/js-exercise005-odd-even/","excerpt":"정수 num이 짝수일 경우 Even을 반환하고 홀수인 경우 Odd를 반환하는 함수, solution을 완성해주세요. 제한 조건num은 int 범위의 정수입니다.0은 짝수입니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"algorism","slug":"algorism","permalink":"http://mjae404.github.io/tags/algorism/"},{"name":"programmers","slug":"programmers","permalink":"http://mjae404.github.io/tags/programmers/"}]},{"title":"JS 수박수박수박수박수박수?","slug":"js-exercise004-watermelon","date":"2020-10-26T14:57:12.000Z","updated":"2020-10-26T14:57:26.000Z","comments":true,"path":"2020/10/26/js-exercise004-watermelon/","excerpt":"길이가 n이고, 수박수박수박수….와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 수박수박을 리턴하고 3이라면 수박수를 리턴하면 됩니다. 제한 조건n은 길이 10,000이하인 자연수입니다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"algorism","slug":"algorism","permalink":"http://mjae404.github.io/tags/algorism/"},{"name":"programmers","slug":"programmers","permalink":"http://mjae404.github.io/tags/programmers/"}]},{"title":"HTML 콘텐츠 모델","slug":"html-content-model","date":"2020-10-24T05:40:10.000Z","updated":"2021-08-04T10:01:26.000Z","comments":true,"path":"2020/10/24/html-content-model/","excerpt":"HTML5의 요소는 0개 이상의 카테고리에 속하며, 각 카테고리는 특성이 비슷한 요소끼리 묶어둔 분류이다. 특정 요소는 폼 관련 요소로 따로 분류하여 다양한 폼 관리 처리 모델에서 세부적으로 분류된다. 어떤 요소들은 특정 요소만의 요구사항을 가지고 있고, 아무 카테고리에도 해당되지 않는 경우가 있다. 기본 규칙은 Base HTML Element에 나온 규칙을 따른다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"}],"tags":[{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"},{"name":"HTML5","slug":"HTML5","permalink":"http://mjae404.github.io/tags/HTML5/"},{"name":"Content Model","slug":"Content-Model","permalink":"http://mjae404.github.io/tags/Content-Model/"}]},{"title":"CSS Grid","slug":"css-grid","date":"2020-10-22T15:17:20.000Z","updated":"2022-08-09T12:46:08.716Z","comments":true,"path":"2020/10/23/css-grid/","excerpt":"CSS 그리드는 더 복잡한 레이아웃을 위해 2치원 레이아웃 시스템을 제공한다. 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 CSS 모듈이다. 효율적으로 학습하기 위해서는 파이어폭스 브라우저를 사용하는 것이 좋다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"}],"tags":[{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"grid","slug":"grid","permalink":"http://mjae404.github.io/tags/grid/"}]},{"title":"JS 팩토리얼","slug":"js-exercise003-factorial","date":"2020-10-22T15:14:42.000Z","updated":"2020-10-22T15:15:26.000Z","comments":true,"path":"2020/10/23/js-exercise003-factorial/","excerpt":"자바스크립트로 팩토리얼을 구현하라.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"recursive function","slug":"recursive-function","permalink":"http://mjae404.github.io/tags/recursive-function/"}]},{"title":"JS 두 날짜의 차이","slug":"js-exercise002","date":"2020-10-21T15:02:49.000Z","updated":"2020-10-22T15:24:58.000Z","comments":true,"path":"2020/10/22/js-exercise002/","excerpt":"두 날짜 간의 차이를 구해라.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"date object","slug":"date-object","permalink":"http://mjae404.github.io/tags/date-object/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"}]},{"title":"JS 삼각형 출력하기","slug":"js-exercise001","date":"2020-10-21T11:31:48.000Z","updated":"2020-10-21T11:35:48.000Z","comments":true,"path":"2020/10/21/js-exercise001/","excerpt":"다음을 참고하여 *(별)로 삼각형을 문자열로 완성하라. 개행문자(‘\\n’)를 사용하여 개행한다. 완성된 문자열의 마지막은 개행문자(‘\\n’)로 끝나도 관계없다.","categories":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"}],"tags":[{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"HTML & CSS 개요","slug":"html-css-overview","date":"2020-10-19T16:44:52.000Z","updated":"2021-08-04T10:01:40.000Z","comments":true,"path":"2020/10/20/html-css-overview/","excerpt":"HTML(Hyper Text Markup Language)는 페이지에 제목, 문단, 표 등을 정의하고 의미를 부여하는 정적 언어이다. CSS(Cascading Style Sheets)는 콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적 표현을 담당한다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"}]},{"title":"JS 클로저","slug":"js-closure","date":"2020-10-17T17:02:07.000Z","updated":"2020-10-17T17:05:00.000Z","comments":true,"path":"2020/10/18/js-closure/","excerpt":"“A closure is the combination of a function and the lexical environment within which that function was declared.”클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical environment) 과의 조합이다.─ MDN → “그 함수가 선언된 렉시컬 환경(Lexical environment)”란 함수가 정의된 위치의 스코프, 즉 상위 스코프를 의미하는 실행 컨텍스트의 렉시컬 환경을 말한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"closure","slug":"closure","permalink":"http://mjae404.github.io/tags/closure/"}]},{"title":"JS 7번째 데이터 타입 symbol","slug":"js-symbol","date":"2020-10-13T15:30:57.000Z","updated":"2020-10-13T15:31:22.000Z","comments":true,"path":"2020/10/14/js-symbol/","excerpt":"심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다. 심볼은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성을 보장하기 위해 도입되었다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://mjae404.github.io/tags/es6/"},{"name":"symbol","slug":"symbol","permalink":"http://mjae404.github.io/tags/symbol/"}]},{"title":"JS 클래스","slug":"js-class","date":"2020-10-13T12:45:08.000Z","updated":"2020-10-13T12:47:58.000Z","comments":true,"path":"2020/10/13/js-class/","excerpt":"클래스는 생성자 함수와 매우 유사하게 동작하지만 아래와 같이 몇가지 차이가 있다. 클래스는 new 연산자를 사용하지 않고 호출하면 에러가 발행한다. 하지만 생성자 함수는 new 연산자를 사용하지 않고 호출하면 일반 함수로서 호출된다. 클래스는 상속을 지원하는 extentds와 super 키워드를 제공한다. 하지만 생성자 함수는 extentds와 super 키워드를 지원하지 않는다. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이 발생한다. 클래스의 모든 코드는 암묵적으로 strict 모드가 지정되어 실행되며 strict 모드를 해지할 수 없다. 하지만 생성자 함수는 암묵적으로 strict 모드가 지정되지 않는다. 클래스의 constructor, 프로토타입 메소드, 정적 메소드는 모두 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false이다. 다시 말해, 열거되지 않는다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"class","slug":"class","permalink":"http://mjae404.github.io/tags/class/"},{"name":"es6","slug":"es6","permalink":"http://mjae404.github.io/tags/es6/"}]},{"title":"JS 정규표현식","slug":"js-regexp","date":"2020-10-11T15:02:16.000Z","updated":"2021-02-07T14:10:00.000Z","comments":true,"path":"2020/10/12/js-regexp/","excerpt":"정규 표현식은 문자열에서 특정 내용을 찾거나 대체, 발췌하기 위해서 사용한다. (ex. 입력받는 전화번호 유효 체크) 반복문이나 조건문을 사용한 복잡한 코드도 정규표현식을 이용하면 간단하게 표현할 수 있지만 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"regexp","slug":"regexp","permalink":"http://mjae404.github.io/tags/regexp/"}]},{"title":"JS 문서 객체 모델","slug":"js-dom","date":"2020-10-11T09:23:54.000Z","updated":"2020-10-11T09:30:56.000Z","comments":true,"path":"2020/10/11/js-dom/","excerpt":"텍스트 파일로 만들어져 있는 웹문서는 브라우저가 이해할 수 있는 구조이어야 한다. 브라우저의 렌더링 엔진은 문서를 로드하고 파싱하여 웹문서를 브라우저가 이해할 수 있는 구조로 구성한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"Document Object Model","slug":"Document-Object-Model","permalink":"http://mjae404.github.io/tags/Document-Object-Model/"},{"name":"DOM","slug":"DOM","permalink":"http://mjae404.github.io/tags/DOM/"},{"name":"DOM tree","slug":"DOM-tree","permalink":"http://mjae404.github.io/tags/DOM-tree/"}]},{"title":"JS 모듈","slug":"js-module","date":"2020-10-10T13:13:28.000Z","updated":"2020-10-10T13:13:54.000Z","comments":true,"path":"2020/10/10/js-module/","excerpt":"모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"es6","slug":"es6","permalink":"http://mjae404.github.io/tags/es6/"},{"name":"module","slug":"module","permalink":"http://mjae404.github.io/tags/module/"}]},{"title":"JS 날짜와 시간을 위한 Date 객체","slug":"js-date-object","date":"2020-10-09T12:33:28.000Z","updated":"2020-10-21T14:43:20.000Z","comments":true,"path":"2020/10/09/js-date-object/","excerpt":"Date 객체는 날짜와 시간(년, 월, 시, 분, 초, 밀리초)을 위한 메소드를 제공하는 빌트인 객체이면서 생성자 함수 이다. 내부적으로 숫자값을 가지며, 1970년 1월 1일 00:00(UTC)를 기점으로 현재 시간까지의 밀리초를 나타낸다. 현재 날짜와 시간은 자바스크립트 코드가 동작한 시스템의 시계에 의해 결정 된다. 시스템 시계의 설정에 따라 서로 다른 값을 가질 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"date object","slug":"date-object","permalink":"http://mjae404.github.io/tags/date-object/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"}]},{"title":"JS String 래퍼 객체","slug":"js-string-wrapper-object","date":"2020-10-07T12:13:53.000Z","updated":"2020-10-07T12:14:46.000Z","comments":true,"path":"2020/10/07/js-string-wrapper-object/","excerpt":"String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 래퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"},{"name":"string wrapper object","slug":"string-wrapper-object","permalink":"http://mjae404.github.io/tags/string-wrapper-object/"}]},{"title":"JS number 래퍼 객체","slug":"js-number-wrapper-object","date":"2020-10-05T22:13:59.000Z","updated":"2020-10-05T22:15:46.000Z","comments":true,"path":"2020/10/06/js-number-wrapper-object/","excerpt":"Number 객체는 원시 타입 number를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체의 프로퍼티가 숫자를 값으로 가지고 있다면 Number 객체의 별도 생성없이 Number 객체의 프로퍼티와 메소드를 사용할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"},{"name":"number wrapper object","slug":"number-wrapper-object","permalink":"http://mjae404.github.io/tags/number-wrapper-object/"}]},{"title":"JS 수학 상수와 함수를 위한 Math 객체","slug":"js-math-object","date":"2020-10-04T15:51:17.000Z","updated":"2020-10-04T15:51:34.000Z","comments":true,"path":"2020/10/05/js-math-object/","excerpt":"Math 객체는 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"},{"name":"math object","slug":"math-object","permalink":"http://mjae404.github.io/tags/math-object/"}]},{"title":"JS 스프레드 문법","slug":"js-spread-syntax","date":"2020-10-03T15:04:37.000Z","updated":"2020-10-03T15:11:44.000Z","comments":true,"path":"2020/10/04/js-spread-syntax/","excerpt":"ES6에서 새롭게 도입된 스프레드 문법(Spread syntax, 전개 문법) … 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), Arguments와 같이 for…of 문으로 순회할 수 있는 이터러블에 한정 된다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"spread syntax","slug":"spread-syntax","permalink":"http://mjae404.github.io/tags/spread-syntax/"}]},{"title":"JS 표준 빌트인 객체와 래퍼 객체","slug":"js-standard-built-in-object","date":"2020-10-03T14:11:27.000Z","updated":"2020-10-03T14:11:56.000Z","comments":true,"path":"2020/10/03/js-standard-built-in-object/","excerpt":"자바스크립트는 크게 3가지 객체로 분류할 수 있다. 표준 빌트인 객체 호스트 객체 사용자 정의 객체","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"standard built-in object","slug":"standard-built-in-object","permalink":"http://mjae404.github.io/tags/standard-built-in-object/"}]},{"title":"JS 디스트럭처링 할당","slug":"js-destructuring","date":"2020-10-02T07:49:16.000Z","updated":"2020-10-02T07:49:56.000Z","comments":true,"path":"2020/10/02/js-destructuring/","excerpt":"디스트럭처링 할당(구조 분해 할당, Destructuring assignment) 은 구조화된 배열 또는 객체를 Destructuring(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당할 때 주로 사용한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"destructuring","slug":"destructuring","permalink":"http://mjae404.github.io/tags/destructuring/"}]},{"title":"JS this","slug":"js-this","date":"2020-09-21T14:19:18.000Z","updated":"2020-09-21T14:19:36.000Z","comments":true,"path":"2020/09/21/js-this/","excerpt":"this는 객체 자신의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수(Self-referencing variable)이다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 바인딩(Binding)식별자와 값을 연결하는 과정. (ex. 변수는 할당에 의해 값에 바인딩)","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"this","slug":"this","permalink":"http://mjae404.github.io/tags/this/"}]},{"title":"JS 프로토타입","slug":"js-prototype","date":"2020-09-20T13:28:03.000Z","updated":"2020-09-20T13:32:46.000Z","comments":true,"path":"2020/09/20/js-prototype/","excerpt":"자바스크립트 는 명령형(Imperative), 함수형(Functional), 프로토타입 기반(Prototype-based) 객체지향 프로그래밍(OOP, Object Oriented Programming)을 지원하는 프로그래밍 언어다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"prototype","slug":"prototype","permalink":"http://mjae404.github.io/tags/prototype/"}]},{"title":"JS 생성자 함수에 의한 객체 생성","slug":"js-constructor","date":"2020-09-19T10:33:09.000Z","updated":"2020-10-02T07:53:02.000Z","comments":true,"path":"2020/09/19/js-constructor/","excerpt":"생성자(constructor) 함수 란 new 연산자와 함께 호출하여 인스턴스 객체를 생성하는 함수 를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"constructor","slug":"constructor","permalink":"http://mjae404.github.io/tags/constructor/"}]},{"title":"JS 엄격모드","slug":"js-strict-mode","date":"2020-09-18T13:59:38.000Z","updated":"2020-09-18T14:00:42.000Z","comments":true,"path":"2020/09/18/js-strict-mode/","excerpt":"strict mode 는 자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. ESLint와 같은 린트 도구를 사용하여도 strict mode와 유사한 효과를 얻을 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"strict mode","slug":"strict-mode","permalink":"http://mjae404.github.io/tags/strict-mode/"}]},{"title":"JS 실행 컨텍스트","slug":"js-execution-context","date":"2020-09-16T15:45:10.000Z","updated":"2025-03-22T05:27:43.352Z","comments":true,"path":"2020/09/17/js-execution-context/","excerpt":"실행 컨텍스트는 식별자, 스코프, 호이스팅, 클로저 등의 동작 원리를 담고 있는 자바스크립트의 핵심 개념이다. 동적 언어로서의 자바스크림트 성격을 잘 파악할 수 있다. 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"execution context","slug":"execution-context","permalink":"http://mjae404.github.io/tags/execution-context/"}]},{"title":"JS 타입변환과 단축평가","slug":"js-type-casting","date":"2020-09-16T14:33:59.000Z","updated":"2020-09-16T14:34:36.000Z","comments":true,"path":"2020/09/16/js-type-casting/","excerpt":"명시적 타입 변환 / 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환 / 타입 강제 변환: 개발자의 의도와는 관계 없이 자바스크립트에 의해 암묵적으로 타입이 자동 변환되는 것","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"type casting","slug":"type-casting","permalink":"http://mjae404.github.io/tags/type-casting/"},{"name":"Short-Circuit evaluation","slug":"Short-Circuit-evaluation","permalink":"http://mjae404.github.io/tags/Short-Circuit-evaluation/"}]},{"title":"JS 이터러블","slug":"js-iterable","date":"2020-09-15T12:05:03.000Z","updated":"2020-09-15T12:05:38.000Z","comments":true,"path":"2020/09/15/js-iterable/","excerpt":"이터러블 프로토콜을 준수한 객체를 이터러블(iterable)라 한다. 이터러블은 for…of 문으로 순회할 수 있으며 스프레드 문법과 디스트럭처링 할당의 대상으로 사용할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"iterable","slug":"iterable","permalink":"http://mjae404.github.io/tags/iterable/"}]},{"title":"JS 배열 고차 함수","slug":"js-array-higher-order-function","date":"2020-09-13T15:19:46.000Z","updated":"2020-09-13T15:20:34.000Z","comments":true,"path":"2020/09/14/js-array-higher-order-function/","excerpt":"고차함수함수를 인자로 받거나 함수를 반환하는 함수 → 필요한 시점에 호출하거나 클로저를 생성하여 반환","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"arry","slug":"arry","permalink":"http://mjae404.github.io/tags/arry/"},{"name":"HOF","slug":"HOF","permalink":"http://mjae404.github.io/tags/HOF/"},{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"}]},{"title":"git stash","slug":"git-stash","date":"2020-09-08T12:43:37.000Z","updated":"2020-09-08T12:44:18.000Z","comments":true,"path":"2020/09/08/git-stash/","excerpt":"git stash는 하던 작업을 임시로 저장해두고 싶을 때 사용하는 명령어이다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"}]},{"title":"마크다운","slug":"markdown","date":"2020-09-03T15:10:16.000Z","updated":"2020-09-03T15:10:34.000Z","comments":true,"path":"2020/09/04/markdown/","excerpt":"마크다운(markdown)은 일반 텍스트 문서를 편집하는 문법이다. 사용법이 쉽고 빠르게 문서를 정리할 수 있다. 엔터키 한 번은 제대로 적용되지 않기 때문에 문장이 연달아서 적용된다. 줄바꿈은 엔터 두 번으로 구분한다.","categories":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/categories/blog/"}],"tags":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/tags/blog/"},{"name":"markdown","slug":"markdown","permalink":"http://mjae404.github.io/tags/markdown/"}]},{"title":"JS 배열 메소드","slug":"js-array-method","date":"2020-09-03T13:18:49.000Z","updated":"2020-10-02T07:57:22.000Z","comments":true,"path":"2020/09/03/js-array-method/","excerpt":"배열 메소드가 결과물을 반환하는 패턴 원본 배열(this가 가리키는 객체)을 직접 변경하는 메소드(mutator method) 원본 배열을 직접 변경하지 않고 배열을생성하여 반환하는 메소드(accessor method)","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"method","slug":"method","permalink":"http://mjae404.github.io/tags/method/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"arry","slug":"arry","permalink":"http://mjae404.github.io/tags/arry/"}]},{"title":"GitHub 버전 생성","slug":"git-process","date":"2020-09-01T16:13:53.000Z","updated":"2020-09-01T16:14:10.000Z","comments":true,"path":"2020/09/02/git-process/","excerpt":"GitHub는 오픈 소스에서 비즈니스에 이르기까지 4천만 명의 개발자와 함께 코드를 호스트하고 검토하고 프로젝트를 관리하며 소프트웨어를 구축할 수 있는 개발 플랫폼이다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"}]},{"title":"Git 브랜치","slug":"git-branch","date":"2020-08-28T11:33:09.000Z","updated":"2021-02-13T06:46:08.000Z","comments":true,"path":"2020/08/28/git-branch/","excerpt":"똑같은 코드를 동시에 고칠 가능성이 있기 때문에, 브랜치를 분기를 나누어 작업을 진행한다. 분기를 나누어 작업한 후에, 추후에 합친다. 충돌이 일어난다고 하더라도 명시적으로 충돌을 해결할 수 있다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"}]},{"title":"Git & GitHub 개요","slug":"git-overview","date":"2020-08-26T16:13:12.000Z","updated":"2021-01-02T13:29:28.000Z","comments":true,"path":"2020/08/27/git-overview/","excerpt":"현대 개발 팀 프로젝트에서 버전관리와 클라우드 저장소는 꼭 필요한 것이며, 버전관리를 위해서 Git, 클라우드 저장을 위해서 Github를 익히면 팀프로젝트 때 효율적인 개발 협업을 할 수 있다.","categories":[{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"}]},{"title":"SCSS Mixins","slug":"scss-mixins","date":"2020-08-25T15:33:33.000Z","updated":"2021-08-04T10:03:06.000Z","comments":true,"path":"2020/08/26/scss-mixins/","excerpt":"스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의 해준다. 약간의 Mixin으로 다양한 스타일을 만들 수 있다. 선언하기: @mixin (만들어서) 포함하기: @include (사용하기)","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"SASS","slug":"SASS","permalink":"http://mjae404.github.io/tags/SASS/"},{"name":"mixins","slug":"mixins","permalink":"http://mjae404.github.io/tags/mixins/"}]},{"title":"SCSS 함수","slug":"scss-function","date":"2020-08-25T12:24:41.000Z","updated":"2021-08-04T10:03:02.000Z","comments":true,"path":"2020/08/25/scss-function/","excerpt":"자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins는 거의 유사하지만, 반환되는 내용이 다르다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"},{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"SASS","slug":"SASS","permalink":"http://mjae404.github.io/tags/SASS/"}]},{"title":"SCSS 기본 연산","slug":"scss-operations","date":"2020-08-22T09:41:08.000Z","updated":"2021-08-04T10:03:08.000Z","comments":true,"path":"2020/08/22/scss-operations/","excerpt":"Sass는 기본적으로 연산 기능을 지원하며, 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작업할 경우 유용하게 사용할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"operation","slug":"operation","permalink":"http://mjae404.github.io/tags/operation/"},{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"SASS","slug":"SASS","permalink":"http://mjae404.github.io/tags/SASS/"}]},{"title":"Sass & SCSS 개요","slug":"scss-overview","date":"2020-08-21T13:36:05.000Z","updated":"2021-12-04T13:22:04.000Z","comments":true,"path":"2020/08/21/scss-overview/","excerpt":"CSS Preprocessor CSS가 동작하기 전에 사용할 수 있는 기능. Sass, Less, Stylus 등이 있다. CSS 문법과 흡사하지만 선택자의 중첩, 조건문, 반복문, 단위의 연산등 표준 CSS보다 훨씬 많은 기능을 사용 하여 편하게 작성할 수 있다.","categories":[{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"SASS","slug":"SASS","permalink":"http://mjae404.github.io/tags/SASS/"}]},{"title":"JS 배열","slug":"js-array","date":"2020-08-20T13:51:10.000Z","updated":"2021-09-09T07:04:10.000Z","comments":true,"path":"2020/08/20/js-array/","excerpt":"순서가 있는 값들의 연속적인 나열. 자바스크립트의 배열은 엄밀하게 말하면 배열의 동작을 흉내낸 특수한 객체이다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"arry","slug":"arry","permalink":"http://mjae404.github.io/tags/arry/"}]},{"title":"JS 제어문","slug":"js-control-flow-statuement","date":"2020-08-19T12:21:30.000Z","updated":"2020-10-11T13:14:22.000Z","comments":true,"path":"2020/08/19/js-control-flow-statuement/","excerpt":"순차적으로 진행되는 실행 흐름을 변화시키는 문장을 제어문이라고 하며, 주어진 조건에 따라 코드 블록을 실행하거나 반복할 때 사용된다. 조건문과 반복문, 점프문이 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"JS 전역 변수의 문제점","slug":"js-global-variable","date":"2020-08-17T16:01:02.000Z","updated":"2020-08-17T16:01:58.000Z","comments":true,"path":"2020/08/18/js-global-variable/","excerpt":"전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용할 이유가 없다면 지역 변수를 사용하는 것이 좋다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"global variable","slug":"global-variable","permalink":"http://mjae404.github.io/tags/global-variable/"}]},{"title":"JS let, const와 블록 레벨 스코프","slug":"js-block-level-scope","date":"2020-08-17T16:00:00.000Z","updated":"2020-08-17T16:00:34.000Z","comments":true,"path":"2020/08/18/js-block-level-scope/","excerpt":"ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 몇가지 특징이 있다. 변수 중복 선언 허용 함수 레벨 스코프 변수 호이스팅","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"block level scope","slug":"block-level-scope","permalink":"http://mjae404.github.io/tags/block-level-scope/"},{"name":"scope","slug":"scope","permalink":"http://mjae404.github.io/tags/scope/"},{"name":"let","slug":"let","permalink":"http://mjae404.github.io/tags/let/"},{"name":"const","slug":"const","permalink":"http://mjae404.github.io/tags/const/"}]},{"title":"JS 스코프","slug":"js-scope","date":"2020-08-17T13:52:44.000Z","updated":"2021-12-04T13:23:12.000Z","comments":true,"path":"2020/08/17/js-scope/","excerpt":"식별자가 유효한 범위 를 말한다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정된다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 이라고도 할 수 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"scope","slug":"scope","permalink":"http://mjae404.github.io/tags/scope/"}]},{"title":"JS 객체","slug":"js-object","date":"2020-08-17T13:51:11.000Z","updated":"2022-02-02T12:49:28.754Z","comments":true,"path":"2020/08/17/js-object/","excerpt":"자바스크립트는 객체 기반의 프로그래밍 언어이다. 원시 타입을 제외한 나머지 값들은 모두 객체이다. 프로퍼티: 객체의 상태를 나타내는 값(data). 메소드: 프로퍼티를 참조하고 조작할 수 있는 동작(behavior). 프로퍼티의 값이 함수일 경우에 일반 함수와 구분하기 위해 메소드라 부름.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"}]},{"title":"JS 함수","slug":"js-function","date":"2020-08-16T14:26:09.000Z","updated":"2020-10-02T08:00:22.000Z","comments":true,"path":"2020/08/16/js-function/","excerpt":"일련의 과정을 문(statement)들로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 함수는 함수 정의를 통해 생성한다. 함수는 객체이며 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 가지고 있다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"}]},{"title":"JS 변수","slug":"js-variable","date":"2020-08-16T14:24:47.000Z","updated":"2020-08-16T14:25:16.000Z","comments":true,"path":"2020/08/16/js-variable/","excerpt":"하나의 값을 저장할 수 있는 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"variable","slug":"variable","permalink":"http://mjae404.github.io/tags/variable/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"자바스크립트 개요","slug":"js-overview","date":"2020-08-10T17:13:52.000Z","updated":"2020-08-10T17:14:26.000Z","comments":true,"path":"2020/08/11/js-overview/","excerpt":"자바스크립트란? 1.인터프리터 언어이다.2.동적 프로토타입 기반 객체 지향 언어이다.3. 동적 타입 언어이다.4. 함수가 일급 객체다.5. 함수가 클로저를 정의한다.","categories":[{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"}],"tags":[{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"}]},{"title":"Hello World","slug":"hello-world","date":"2020-08-08T14:26:09.000Z","updated":"2020-08-16T14:34:04.000Z","comments":true,"path":"2020/08/08/hello-world/","excerpt":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.","categories":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/categories/blog/"}],"tags":[{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/tags/blog/"}]}],"categories":[{"name":"web","slug":"web","permalink":"http://mjae404.github.io/categories/web/"},{"name":"performance","slug":"web/performance","permalink":"http://mjae404.github.io/categories/web/performance/"},{"name":"HTML & CSS","slug":"HTML-CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/"},{"name":"HTML","slug":"HTML-CSS/HTML","permalink":"http://mjae404.github.io/categories/HTML-CSS/HTML/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/categories/Python/"},{"name":"django","slug":"Python/django","permalink":"http://mjae404.github.io/categories/Python/django/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/categories/JavaScript/"},{"name":"Vue","slug":"JavaScript/Vue","permalink":"http://mjae404.github.io/categories/JavaScript/Vue/"},{"name":"React","slug":"JavaScript/React","permalink":"http://mjae404.github.io/categories/JavaScript/React/"},{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/categories/Java/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/categories/exercise/"},{"name":"CSS","slug":"exercise/CSS","permalink":"http://mjae404.github.io/categories/exercise/CSS/"},{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/categories/Data-Base/"},{"name":"SQL","slug":"Data-Base/SQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/"},{"name":"mySQL","slug":"Data-Base/SQL/mySQL","permalink":"http://mjae404.github.io/categories/Data-Base/SQL/mySQL/"},{"name":"SQL","slug":"exercise/SQL","permalink":"http://mjae404.github.io/categories/exercise/SQL/"},{"name":"JavaScript","slug":"exercise/JavaScript","permalink":"http://mjae404.github.io/categories/exercise/JavaScript/"},{"name":"Python","slug":"exercise/Python","permalink":"http://mjae404.github.io/categories/exercise/Python/"},{"name":"SVG","slug":"exercise/SVG","permalink":"http://mjae404.github.io/categories/exercise/SVG/"},{"name":"CSS","slug":"HTML-CSS/CSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/CSS/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/categories/SVG/"},{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/categories/npm/"},{"name":"git","slug":"git","permalink":"http://mjae404.github.io/categories/git/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/categories/php/"},{"name":"bootstrap","slug":"HTML-CSS/bootstrap","permalink":"http://mjae404.github.io/categories/HTML-CSS/bootstrap/"},{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/categories/blog/"},{"name":"WAI-ARIA","slug":"HTML-CSS/WAI-ARIA","permalink":"http://mjae404.github.io/categories/HTML-CSS/WAI-ARIA/"},{"name":"jQuery","slug":"JavaScript/jQuery","permalink":"http://mjae404.github.io/categories/JavaScript/jQuery/"},{"name":"Sass & SCSS","slug":"HTML-CSS/Sass-SCSS","permalink":"http://mjae404.github.io/categories/HTML-CSS/Sass-SCSS/"}],"tags":[{"name":"web","slug":"web","permalink":"http://mjae404.github.io/tags/web/"},{"name":"performance","slug":"performance","permalink":"http://mjae404.github.io/tags/performance/"},{"name":"HTML","slug":"HTML","permalink":"http://mjae404.github.io/tags/HTML/"},{"name":"Python","slug":"Python","permalink":"http://mjae404.github.io/tags/Python/"},{"name":"django","slug":"django","permalink":"http://mjae404.github.io/tags/django/"},{"name":"overview","slug":"overview","permalink":"http://mjae404.github.io/tags/overview/"},{"name":"vue","slug":"vue","permalink":"http://mjae404.github.io/tags/vue/"},{"name":"webgame","slug":"webgame","permalink":"http://mjae404.github.io/tags/webgame/"},{"name":"number baseball","slug":"number-baseball","permalink":"http://mjae404.github.io/tags/number-baseball/"},{"name":"multiplication table","slug":"multiplication-table","permalink":"http://mjae404.github.io/tags/multiplication-table/"},{"name":"JavaScript","slug":"JavaScript","permalink":"http://mjae404.github.io/tags/JavaScript/"},{"name":"react","slug":"react","permalink":"http://mjae404.github.io/tags/react/"},{"name":"nextjs","slug":"nextjs","permalink":"http://mjae404.github.io/tags/nextjs/"},{"name":"Java","slug":"Java","permalink":"http://mjae404.github.io/tags/Java/"},{"name":"object-oriented programming","slug":"object-oriented-programming","permalink":"http://mjae404.github.io/tags/object-oriented-programming/"},{"name":"array","slug":"array","permalink":"http://mjae404.github.io/tags/array/"},{"name":"control flow","slug":"control-flow","permalink":"http://mjae404.github.io/tags/control-flow/"},{"name":"variable","slug":"variable","permalink":"http://mjae404.github.io/tags/variable/"},{"name":"operation","slug":"operation","permalink":"http://mjae404.github.io/tags/operation/"},{"name":"CSS","slug":"CSS","permalink":"http://mjae404.github.io/tags/CSS/"},{"name":"CSS3","slug":"CSS3","permalink":"http://mjae404.github.io/tags/CSS3/"},{"name":"exercise","slug":"exercise","permalink":"http://mjae404.github.io/tags/exercise/"},{"name":"Data Base","slug":"Data-Base","permalink":"http://mjae404.github.io/tags/Data-Base/"},{"name":"SQL","slug":"SQL","permalink":"http://mjae404.github.io/tags/SQL/"},{"name":"mySQL","slug":"mySQL","permalink":"http://mjae404.github.io/tags/mySQL/"},{"name":"Primary Key","slug":"Primary-Key","permalink":"http://mjae404.github.io/tags/Primary-Key/"},{"name":"table join","slug":"table-join","permalink":"http://mjae404.github.io/tags/table-join/"},{"name":"data analysis","slug":"data-analysis","permalink":"http://mjae404.github.io/tags/data-analysis/"},{"name":"data query","slug":"data-query","permalink":"http://mjae404.github.io/tags/data-query/"},{"name":"methods","slug":"methods","permalink":"http://mjae404.github.io/tags/methods/"},{"name":"router","slug":"router","permalink":"http://mjae404.github.io/tags/router/"},{"name":"vuex","slug":"vuex","permalink":"http://mjae404.github.io/tags/vuex/"},{"name":"async","slug":"async","permalink":"http://mjae404.github.io/tags/async/"},{"name":"on","slug":"on","permalink":"http://mjae404.github.io/tags/on/"},{"name":"for","slug":"for","permalink":"http://mjae404.github.io/tags/for/"},{"name":"if","slug":"if","permalink":"http://mjae404.github.io/tags/if/"},{"name":"model","slug":"model","permalink":"http://mjae404.github.io/tags/model/"},{"name":"bind","slug":"bind","permalink":"http://mjae404.github.io/tags/bind/"},{"name":"array function","slug":"array-function","permalink":"http://mjae404.github.io/tags/array-function/"},{"name":"class","slug":"class","permalink":"http://mjae404.github.io/tags/class/"},{"name":"symbol","slug":"symbol","permalink":"http://mjae404.github.io/tags/symbol/"},{"name":"function","slug":"function","permalink":"http://mjae404.github.io/tags/function/"},{"name":"spread opeartor","slug":"spread-opeartor","permalink":"http://mjae404.github.io/tags/spread-opeartor/"},{"name":"various","slug":"various","permalink":"http://mjae404.github.io/tags/various/"},{"name":"templete literal","slug":"templete-literal","permalink":"http://mjae404.github.io/tags/templete-literal/"},{"name":"SVG","slug":"SVG","permalink":"http://mjae404.github.io/tags/SVG/"},{"name":"python","slug":"python","permalink":"http://mjae404.github.io/tags/python/"},{"name":"data type","slug":"data-type","permalink":"http://mjae404.github.io/tags/data-type/"},{"name":"the red","slug":"the-red","permalink":"http://mjae404.github.io/tags/the-red/"},{"name":"animation","slug":"animation","permalink":"http://mjae404.github.io/tags/animation/"},{"name":"effect","slug":"effect","permalink":"http://mjae404.github.io/tags/effect/"},{"name":"npm","slug":"npm","permalink":"http://mjae404.github.io/tags/npm/"},{"name":"gulp","slug":"gulp","permalink":"http://mjae404.github.io/tags/gulp/"},{"name":"git","slug":"git","permalink":"http://mjae404.github.io/tags/git/"},{"name":"ignore","slug":"ignore","permalink":"http://mjae404.github.io/tags/ignore/"},{"name":"dart sass","slug":"dart-sass","permalink":"http://mjae404.github.io/tags/dart-sass/"},{"name":"php","slug":"php","permalink":"http://mjae404.github.io/tags/php/"},{"name":"cookie","slug":"cookie","permalink":"http://mjae404.github.io/tags/cookie/"},{"name":"session","slug":"session","permalink":"http://mjae404.github.io/tags/session/"},{"name":"get","slug":"get","permalink":"http://mjae404.github.io/tags/get/"},{"name":"form","slug":"form","permalink":"http://mjae404.github.io/tags/form/"},{"name":"validity check","slug":"validity-check","permalink":"http://mjae404.github.io/tags/validity-check/"},{"name":"filter input","slug":"filter-input","permalink":"http://mjae404.github.io/tags/filter-input/"},{"name":"post","slug":"post","permalink":"http://mjae404.github.io/tags/post/"},{"name":"loop","slug":"loop","permalink":"http://mjae404.github.io/tags/loop/"},{"name":"include","slug":"include","permalink":"http://mjae404.github.io/tags/include/"},{"name":"require","slug":"require","permalink":"http://mjae404.github.io/tags/require/"},{"name":"gulp file include","slug":"gulp-file-include","permalink":"http://mjae404.github.io/tags/gulp-file-include/"},{"name":"conditions","slug":"conditions","permalink":"http://mjae404.github.io/tags/conditions/"},{"name":"error","slug":"error","permalink":"http://mjae404.github.io/tags/error/"},{"name":"github","slug":"github","permalink":"http://mjae404.github.io/tags/github/"},{"name":"bootstrap","slug":"bootstrap","permalink":"http://mjae404.github.io/tags/bootstrap/"},{"name":"blog","slug":"blog","permalink":"http://mjae404.github.io/tags/blog/"},{"name":"hexo","slug":"hexo","permalink":"http://mjae404.github.io/tags/hexo/"},{"name":"reset","slug":"reset","permalink":"http://mjae404.github.io/tags/reset/"},{"name":"revert","slug":"revert","permalink":"http://mjae404.github.io/tags/revert/"},{"name":"WAI-ARIA","slug":"WAI-ARIA","permalink":"http://mjae404.github.io/tags/WAI-ARIA/"},{"name":"web accessibility","slug":"web-accessibility","permalink":"http://mjae404.github.io/tags/web-accessibility/"},{"name":"vendor prefix","slug":"vendor-prefix","permalink":"http://mjae404.github.io/tags/vendor-prefix/"},{"name":"transition","slug":"transition","permalink":"http://mjae404.github.io/tags/transition/"},{"name":"box shadow","slug":"box-shadow","permalink":"http://mjae404.github.io/tags/box-shadow/"},{"name":"overflow","slug":"overflow","permalink":"http://mjae404.github.io/tags/overflow/"},{"name":"jQuery","slug":"jQuery","permalink":"http://mjae404.github.io/tags/jQuery/"},{"name":"selecotr","slug":"selecotr","permalink":"http://mjae404.github.io/tags/selecotr/"},{"name":"font","slug":"font","permalink":"http://mjae404.github.io/tags/font/"},{"name":"web font","slug":"web-font","permalink":"http://mjae404.github.io/tags/web-font/"},{"name":"typography","slug":"typography","permalink":"http://mjae404.github.io/tags/typography/"},{"name":"method","slug":"method","permalink":"http://mjae404.github.io/tags/method/"},{"name":"Sass","slug":"Sass","permalink":"http://mjae404.github.io/tags/Sass/"},{"name":"SCSS","slug":"SCSS","permalink":"http://mjae404.github.io/tags/SCSS/"},{"name":"built-in Function","slug":"built-in-Function","permalink":"http://mjae404.github.io/tags/built-in-Function/"},{"name":"arry","slug":"arry","permalink":"http://mjae404.github.io/tags/arry/"},{"name":"array HOF","slug":"array-HOF","permalink":"http://mjae404.github.io/tags/array-HOF/"},{"name":"sections","slug":"sections","permalink":"http://mjae404.github.io/tags/sections/"},{"name":"methodology","slug":"methodology","permalink":"http://mjae404.github.io/tags/methodology/"},{"name":"SMACSS","slug":"SMACSS","permalink":"http://mjae404.github.io/tags/SMACSS/"},{"name":"OOCSS","slug":"OOCSS","permalink":"http://mjae404.github.io/tags/OOCSS/"},{"name":"BEM","slug":"BEM","permalink":"http://mjae404.github.io/tags/BEM/"},{"name":"media query","slug":"media-query","permalink":"http://mjae404.github.io/tags/media-query/"},{"name":"responsive","slug":"responsive","permalink":"http://mjae404.github.io/tags/responsive/"},{"name":"cherry-pick","slug":"cherry-pick","permalink":"http://mjae404.github.io/tags/cherry-pick/"},{"name":"flex","slug":"flex","permalink":"http://mjae404.github.io/tags/flex/"},{"name":"filter","slug":"filter","permalink":"http://mjae404.github.io/tags/filter/"},{"name":"event","slug":"event","permalink":"http://mjae404.github.io/tags/event/"},{"name":"box model","slug":"box-model","permalink":"http://mjae404.github.io/tags/box-model/"},{"name":"selector","slug":"selector","permalink":"http://mjae404.github.io/tags/selector/"},{"name":"algorism","slug":"algorism","permalink":"http://mjae404.github.io/tags/algorism/"},{"name":"programmers","slug":"programmers","permalink":"http://mjae404.github.io/tags/programmers/"},{"name":"HTML5","slug":"HTML5","permalink":"http://mjae404.github.io/tags/HTML5/"},{"name":"Content Model","slug":"Content-Model","permalink":"http://mjae404.github.io/tags/Content-Model/"},{"name":"grid","slug":"grid","permalink":"http://mjae404.github.io/tags/grid/"},{"name":"recursive function","slug":"recursive-function","permalink":"http://mjae404.github.io/tags/recursive-function/"},{"name":"date object","slug":"date-object","permalink":"http://mjae404.github.io/tags/date-object/"},{"name":"object","slug":"object","permalink":"http://mjae404.github.io/tags/object/"},{"name":"built-in object","slug":"built-in-object","permalink":"http://mjae404.github.io/tags/built-in-object/"},{"name":"wrapper object","slug":"wrapper-object","permalink":"http://mjae404.github.io/tags/wrapper-object/"},{"name":"closure","slug":"closure","permalink":"http://mjae404.github.io/tags/closure/"},{"name":"es6","slug":"es6","permalink":"http://mjae404.github.io/tags/es6/"},{"name":"regexp","slug":"regexp","permalink":"http://mjae404.github.io/tags/regexp/"},{"name":"Document Object Model","slug":"Document-Object-Model","permalink":"http://mjae404.github.io/tags/Document-Object-Model/"},{"name":"DOM","slug":"DOM","permalink":"http://mjae404.github.io/tags/DOM/"},{"name":"DOM tree","slug":"DOM-tree","permalink":"http://mjae404.github.io/tags/DOM-tree/"},{"name":"module","slug":"module","permalink":"http://mjae404.github.io/tags/module/"},{"name":"string wrapper object","slug":"string-wrapper-object","permalink":"http://mjae404.github.io/tags/string-wrapper-object/"},{"name":"number wrapper object","slug":"number-wrapper-object","permalink":"http://mjae404.github.io/tags/number-wrapper-object/"},{"name":"math object","slug":"math-object","permalink":"http://mjae404.github.io/tags/math-object/"},{"name":"spread syntax","slug":"spread-syntax","permalink":"http://mjae404.github.io/tags/spread-syntax/"},{"name":"standard built-in object","slug":"standard-built-in-object","permalink":"http://mjae404.github.io/tags/standard-built-in-object/"},{"name":"destructuring","slug":"destructuring","permalink":"http://mjae404.github.io/tags/destructuring/"},{"name":"this","slug":"this","permalink":"http://mjae404.github.io/tags/this/"},{"name":"prototype","slug":"prototype","permalink":"http://mjae404.github.io/tags/prototype/"},{"name":"constructor","slug":"constructor","permalink":"http://mjae404.github.io/tags/constructor/"},{"name":"strict mode","slug":"strict-mode","permalink":"http://mjae404.github.io/tags/strict-mode/"},{"name":"execution context","slug":"execution-context","permalink":"http://mjae404.github.io/tags/execution-context/"},{"name":"type casting","slug":"type-casting","permalink":"http://mjae404.github.io/tags/type-casting/"},{"name":"Short-Circuit evaluation","slug":"Short-Circuit-evaluation","permalink":"http://mjae404.github.io/tags/Short-Circuit-evaluation/"},{"name":"iterable","slug":"iterable","permalink":"http://mjae404.github.io/tags/iterable/"},{"name":"HOF","slug":"HOF","permalink":"http://mjae404.github.io/tags/HOF/"},{"name":"markdown","slug":"markdown","permalink":"http://mjae404.github.io/tags/markdown/"},{"name":"SASS","slug":"SASS","permalink":"http://mjae404.github.io/tags/SASS/"},{"name":"mixins","slug":"mixins","permalink":"http://mjae404.github.io/tags/mixins/"},{"name":"global variable","slug":"global-variable","permalink":"http://mjae404.github.io/tags/global-variable/"},{"name":"block level scope","slug":"block-level-scope","permalink":"http://mjae404.github.io/tags/block-level-scope/"},{"name":"scope","slug":"scope","permalink":"http://mjae404.github.io/tags/scope/"},{"name":"let","slug":"let","permalink":"http://mjae404.github.io/tags/let/"},{"name":"const","slug":"const","permalink":"http://mjae404.github.io/tags/const/"}]}