Languages

타입(type), 인터페이스란 (interface) 객체의 속성, 구조로 다른 타입과 합치거나, 확장시킬 수 있다. ( 기능은 동일하나, 서로 사용하는 방식의 차이가 존재한다. ) 타입과 인터페이스의 차이점 타입 인터페이스 지정 가능 형식 타입, 원시값, 유니온, 튜플 등 여러가지 지정 가능 타입만 지정 가능 확장 특성 폐쇠적이고, 제한 사항이 많아 확장이 까다로움 declaration merging으로 확장 가능하므로, 더 자유로움 파일 번들링 새로운 타입 생성시 번들링 컴파일 시점에 번들링 interface 확장하기 interface Animal { type: string; } interface Camel extends Animal { place: string; feed: string; } 확장된 C..

👉 flexbox란? 여러가지 요소들(html 태그)을, 자유 자재로 디자인 할 수 있도록 만든 박스 flexbox 내부의 요소들은, flexbox의 규칙을 기준으로 위치와, 크기를 결정한다. display: flex; 를 사용하여 flexbox를 지정할 수 있다. // HTML 안녕 하세요 ? // CSS .container { display: flex; } 👉 flex-shrink 란? flexbox의 공간이 부족할때, 각 항목의 사이즈를 줄인다. 항목 : flex-item 요소 ( display : flex가 적용된 Container 내부 요소 ) flex-shrink 사용법 1. flex-shrink : 0 ( 줄이지 않고, 원본 사이즈로 사용 ) { flex-shrink: 0; } 2. bord..

box-sizing 이란? 너비와 높이 설정시, 테두리를 포함하여 설정할지, 테두리를 제외하고 설정할지 결정하는 것 box-sizing 사용법 1. content-box ( 테두리 제외하고 너비, 높이 설정 / 기본값 ) { box-sizing: content-box; } 2. border-box ( 테두리 포함하여 너비, 높이 설정 ) { box-sizing: border-box; }

fs란? FileSystem의 약자로, 파일 처리와 관련된 여러가지 기능을 하는 js라이브러리 기능 설명 1. 파일 읽기 import fs from "fs"; // 파일 읽기 - "filename"에 파일 경로를 입력해줍니다 fs.readFile("filename", [options], callback); // "filename" 파일을, [options]을 적용해 읽은후, callback 함수를 실행! fs.readFileSync("finename", [options]); // "filename"파일을, [options]을 적용해 읽은후, 문자열 반환 // Sync : 동기적 읽기를 뜻함 ( 한 작업을 마치기 전까지, 다른 작업 불가 ) 2. 파일 쓰기 import fs from "fs"; // 파일 ..

Vue.js란? 웹 개발을 쉽게할 수 있도록 도와주는 프론트엔드 프레임워크 프론트엔드란? [프로그래밍] 프론트엔드와 백엔드란? 프론트엔드 - 사용자에게 나타나는 부분 ( UI, GUI ... ) 백엔드 - 사용자에게 보이지 않는 부분 ( DB, API ... ) defineall.tistory.com 프레임워크란? [프로그래밍] 라이브러리, 모듈과 프레임워크란? 라이브러리 = 모듈 프로그래밍 언어(코드)에서, 자주사용하는 기능을 함수나 클래스로 묶어서 [쉽게 재사용할 수 있게 만들어 놓은 파일]을 라이브러리라고 한다. 프레임워크 프로그래밍 언어( defineall.tistory.com Vue.js의 필요성 기존 웹 개발자뿐만 아니라, 웹 개발 입문자들도 쉽게 배울 수 있다. React, Angular보다..

👉 CJS, AMD, UMD, ESM의 목적 처음 JS는 모듈로 가져오거나 내보내는 방법이 없어, 하나의 파일에 모든 기능을 담아야 했다. JS 프로그램을 모듈로 개발하고, 배포할 수 있게 하기 위하여, CJS, AMD, UMD, ESM을 개발했다. 👉 CJS (CommonJS) javascript를 브라우저에서만 아니라, 다른 곳에서도 사용할 수 있게 해주는 API API란? [프로그래밍] API란? API란? 서로 다른 프로그램끼리 연결해주는 도구 Application Programming Interface 앱 프로그래밍 인터페이스 API 예시 REST API : 서버와 클라이언트를 연결 GraphQL API : 서버와 클라이언트를 연결 defineall.tistory.com CJS 구문 ( 사용법 ..

reset.css란? 웹브라우저마다 기본적으로 적용되어있는 스타일을 지워주는 용도의 css 파일 reset.css의 필요성 시중에 나와있는 브라우저는 여러가지이고, 모두들 그들만의 기본적인 스타일(css)가 적용되어 있는 경우가 많다. 이를 초기화 하고, 스타일을 적용해주어야 어떤 브라우저에서든지 우리가 원하는 스타일을 보여줄 수 있다. reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,..

aws-sdk란? aws에 파일을 쉽게 저장할 수 있게 해주는 Node.js 패키지 AWS에 파일을 저장하는 이유 서버에 파일을 저장하고 있으면, 서버를 재시작할때 백업되지 않은 파일이 지워질 수 도 있다 aws-sdk 설치하기 npm i aws-sdk ws-sdk에서 aws s3 사용하기 (GraphQL 파일 업로드 기능 구현) S3에 접근하기 위한 API 키 입력해주기 import AWS from "aws-sdk"; AWS.config.update({ credentials: { accessKeyId: process.env.AWS_KEY, secretAccessKey: process.env.AWS_SECRET_KEY, }, }); 파일업로드 기능 gql 쿼리 작성하기 // typeDefs.js 에 파일..

정규표현식이란? "/"(슬래시) 사용해서 만들기 - 정규식 리터럴 var re = /ab+c/; 정규식 리터럴의 특징 스크립트가 불러와질때 컴파일 된다. RegExp 객체의 생성자 함수로 만들기 var re = new RegExp("ab+c"); 생성자 함수의 특징 함수가 실행되는 시점에 컴파일 된다. "정규식 패턴이 변경될 수 잇는 경우", 사용자 입력과 같이 "다른 출처로부터 패턴을 가져와야 하는 경우"에 유용