ORM (Object Relational Mapping) 이미지 은 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다. 객체 관계 매핑을 가능하게 하는 상용 또는 무료 소프트웨어 패키지들이 있고, 경우에 따라서는 독자적으로 개발하기도 한다. 그래서 ORM(Object Relational Mapping) 이란? ORM은 Object Relational Mapping(객체∙관계∙매핑)의 약자이다. ORM은 객체 지향 언어에서 사용할 수 있는 ****이다. ORM은 객체와 데이터베이스의 해주는 도구이다. ORM은 프로그래밍 언어의 객체와 관계형 데이터베이스의 데이터를 매핑해주는 도구이다. ORM은 프로그래밍 언어의 객체와 관계형 데이터베이스 사이의 역할을 한다. ORM은 하는 도구이다. ORM은 객체와 모델 사이의 관계를 기술하는 도구이다. Persistant API라고도 할 수 있다. ORM 사용 이유 (OOP vs Relational…

트랜잭션(Transaction)이란? 은행 ATM이나 데이터베이스 등의 시스템에서 사용되는 이다. 트랜잭션 처리가 정상적으로 완료된 경우 커밋(commit)을 하고, 오류가 발생할 경우 원래 상태대로 롤백(rollback)을 한다. 영어로 1초당 처리할 수 있는 트랜잭션의 개수를 TPS라고 한다. 사용목적 시스템에서 병행 제어 및 회복 작업 시 처리되는 작업의 논리적 단위로 데이터베이스 서버에 여러 개의 클라이언트가 동시에 액세스 하거나 응용프로그램이 갱신을 처리하는 과정에서 중단될 수 있는 경우 등 한다. 데이터베이스 기능 중, 트랜잭션을 조작하는 기능은 데이터베이스 하게 한다. 은 데이터베이스 내에 읽거나 쓰는 여러 개 쿼리를 요구한다. 트랜잭션의 성질 (ACID?) 는 데이터베이스에 대한 쓰기 하기 위해 트랜잭션 데이터베이스가 을 설명하는 속성 집합 Atomicity(원자성) 은 데이터베이스에 모두 반영되든지 아니면 전혀 반영되지 않아야 한다.() 트랜잭션 내의 모든 명령…

SEO란? 웹사이트가 검색 엔진에서 검색 시에 상위에 노출을 시키고 싶다면 를 고려해야한다. 사용자의 검색의도를 명확히 이해하여, 고객니즈 기반으로 웹사이트의 기능을 개선∙콘텐츠를 제작하는 방법이다. 단순히 검색엔진의 로직에만 맞추는 것이 아니라 웹사이트의 품질, 콘텐츠의 질이 함께 개선되어야 페이지 퀄리티가 높아져서 실질적인 효과를 거둘 수 있다. 검색엔진의 일련의 과정 은 수집 → 정제 → 색인 → 랭킹의 과정을 거치게 되며, 상세하게는 수집(크롤링, Crawling): 검색 엔진의 크롤러를 통하여 각 사이트를 크롤링하여 홈페이지의 콘텐츠 정보를 가져온다. 정제(정제, Refinedness) : 크롤링하여 가져온 콘텐츠 정보를 유사∙중복문서, 가비지 데이터, 화이트 폰트 등 여러가지의 판단요소를 구별하여 판별을 한다. 색인(인덱싱, Indexing) : 판별 후 주제별로 색인하여 보관한다. 랭킹(순위,Ranking) : 검색의도에 맞춰 색인된 콘텐츠에 미리 검색 랭킹 순위를 …

Fluid Grid 란? 우선 그리드 시스템 (grid system)이란? 화면을 요소를 배치하도록 하는 시스템으로 화면을 단순하게 만들면서 동시에 으로 할 수 있다는 장점이 있다. 그리고 고정 그리드 레이아웃 (fixed grid layout) 고정 그리드 레이아웃 이미지 말 그대로 를 로 고정하는 것을 의미한다. 예를 들어 그리드의 너비를 360px로 입력하였다면 화면의 크기와 상관없이 해당 그리드는 너비 360px을 유지한다. 위의 그림처럼 , 다양한 기기를 사용하는 현대 사회에서 을 떨어틀일 수 있다. 그래서 가변 그리드 레이아웃 (fluid grid layout)이란? 가변 그리드 레이아웃 이미지 을 이용하여 화면 너비에 대해 각 그리드의 너비 비율을 정하고, 화면의 크기 변화에 따라 그리드의 크기를 같이 변하게 할 수 있다. 때문에 고정 그리드 레이아웃에서 사용자의 사용감을 떨어트리는 요소를 가변 그리드 레이아웃을 사용한다면 해결할 수 있다. 그리드의 구성요소 열(C…

Media Query 란? 구체적인 조건을 필요한 스타일 적용할 수 있도록 확장하였다. 간단한 이야기로 말하면 각 화면의 비율마다 각각 다른 화면을 보여주자 라는 개념을 가고 있다. 다양한 기기들이 많아 웹 페이지를 접속할 때, 각기 다른 페이지를 보여줘야 되는데, 반응형을 사용하지 않는다면 각 페이지마다 새로운 파일을 만들어서 각기 다른 버전으로 관리해야 한다. 이 때 그런 번거로움을 없애기 위하여 한 파일에서 pc, 모바일, 태블릿 등을 고려한 웹 사이트를 만들 수 있게 반응형 웹 페이지를 만드는 것이다. Fluid Grid Fluid Grid 이미지 그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것을 뜻함 가로 폭의 길이의 변화에 따라 컬럼의 크기가 상대적으로 변하게 하는 방법 레이아웃에는 변화가 없을 수 있으므로 폭이 많이 좁은 모바일에서 큰 효과를 볼 수 없을 수 있음 Liquid Layouts Liquid Layouts 이미지 유동형 그리드와 같이 반응형…

Viewport란? 현재 보고 있는 컴퓨터 그래픽의 영역을 나타내는 말로, 웹 브라우저 용어에서는 일반적으로 UI, 메뉴 표시줄 등을 제외하고는 브라우저 창과 동일하다. 보고 있는 문서의 일부이며, 웹 페이지에서 사용자가 볼 수 있는 영역이라고 할 수 있다. 태블릿이나 스마트폰이 있기 전에는 웹 페이지가 컴퓨터 화면만을 위해 설계가 되었었는데, 현재 다양한 기기들을 사용자들이 사용하고 있기 때문에 기존에 컴퓨터 화면에만 맞추어서 설계되었던 가 설계를 에서 → 가 가능한 설계 방식으로 바뀌게 되었다. Viewport 설정 뷰포트 요소를 모든 반응형 웹 페이지에 포함해야 한다.  뷰포트 요소는 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 브라우저에 제공한다. 은 페이지의 너비를 설정하여 기기의 화면 너비를 따르도록 한다.(기기에 따라 다름) 은 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정한다. 콘텐츠 크기 조정 사용자들은 보통 데스크톱과 모바일 기…

반응형 웹 이미지 반응형 웹이란? Google Developers 반응형 웹 레이아웃은 기기의 크기와 기능에 따라 변합니다. 예를 들어, 휴대폰에서는 콘텐츠가 하나의 column으로 표시될 수 있지만 태블릿에서는 두 개의 column으로 표시될 수 있습니다. 은 를 가진 들에서 웹 페이지의 하기 위한 기술로 HTML과 CSS만을 사용해서 반응형 웹 설계가 가능하며, 다양한 기기를 사용하는 모든 사용자에게 UX를 선사하기 위한 설계 방식이다. 다양한 기기에서 웹 UI를 의도한 대로 보여주고, 의도한 대로 동작하는 웹 페이지를 설계하기 위함이다. 반응형 웹을 설계하기 위한 핵심기술 1. 가변 그리드(Fluid Grid) 라고 부르기도 한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다. 전체 에 하고 할 수 있다. 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다. 과 같이 상황에 맞게 변할 수 있는 단위인 …

가비지 컬렉터란? 자바스크립트는 우리가 사용하지 않는 값들에 대한 메모리 영역을 주기적으로 정리하고 불필요한 메모리 사용이 없도록 이라는 자동 메모리 관리방법을 통하여 관리한다. 성능에 예민한 상황에서 작업하는 경우를 제외하고, 일상반적인 상황에서는 에 대해 크게 신경 쓰는 경우는 없다. 하지만 이런 자동 메모리 관리는 잠재적 혼란의 원인을 일으키는 경우도 있다. 특징 이다. 생성된 함수가 주변 환경에 대한 값을 지속적으로 사용하고 있을 수 있으므로, 참고링크 트리 쉐이킹(Tree Shaking) MDN - 자바스크립트의 메모리 관리 가비지 컬렉션 - 모던 JavaScript 튜토리얼 특징 참고링크

V8 JavaScript engine이란? C++로 작성된 Google의 오픈 소스 고성능 JavaScript 및 WebAssembly 엔진이다. Chrome 및 Node.js 등에서 사용된다. V8과 다른 엔진의 가장 큰 차이점은 V8 엔진의 컴파일러다. JIT-C(Just In Time Compiler) JIT 이미지 일반적인 Compiler 방식에는 과 이 있다. 이 두개의 컴파일 방식을 합친 것으로 실행시점에서 인터프리터 방식으로 바이트 코드를 생성한다. 그 후 바이트 코드를 기계어 코드로 만들고, 그 코드를 캐싱하여, 같은 함수가 여러 번 불릴 때 매번 기계어 코드를 생성하는 것을 방지한다. V8의 컴파일 과정 V8의 컴파일 과정 이미지 Blink에서 를 만나면, Javascript 스트리밍을 시작한다. 스트리밍으로 전달 받은 UTF-16 문자열은 Scanner를 이용해 Token(let, for)을 생성한다. 생성된 Token을 가지고, Parser가 추상 구문 트…

프로세스(Process) 단순히 실행 중인 프로그램이라고 할 수 있다. 즉, 사용자가 작성한 프로그램이 운영체제에 의해 메모리 공간을 할당받아 실행 중인 것을 말함 이러한 프로세스는 프로그램에서 사용되는 데이터와 메모리 등의 자원 그리고 스레드로 구성됨 스레드(Thread) 를 의미 또는 모든 프로세스에는 한 개 이상의 스레드가 존재하여 작업을 수행 또한, 두 개 이상의 스레드를 가지는 프로세스를 멀티스레드 프로세스라고 한다. 참고링크 스레드 (컴퓨팅) - 위키백과, 우리 모두의 백과사전 코딩교육 티씨피스쿨 프로세스(Process) 스레드(Thread) 참고링크

EventLoop 이미지 은 Memory Heap / Call Stack로 구성되어 있으며, JS로 작성된 코드를 해석하고 실행하는 인터프리터(프로그래밍 언어의 소스 코드를 바로 샐행하는 컴퓨터 프로그램 또는 환경)다. JS는 단일 스레드(single thread)인데 즉, Call Stack이 한 개(single)라는 뜻이다. (가장 유명한 으로는 구글의 V8 Engine이 있다) Memory Heap 메모리 할당이 일어나는 곳 (변수, 함수 등) Call Stack 코드가 실행될 때 쌓이는 곳. (stack : 자료구조 중 하나, 선입후출) Web API 브라우저에서 제공하는 API (DOM, Ajax, Timeout 등) Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 Callback Queue 안에 넣는다. Callback Queue 비동기적으로 실행된 콜백함수가 보관되는 곳 (setTimeout, addEventListen…

먼저 알아두면 좋은 멱등이란 단어 멱등의 사전적 정의는 을 의미한다. 을 과 이 를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 을 가졌다고 말합니다. 각 메소드의 특징 메소드 명 메소드 용도 정의 메소드 특징 GET 데이터 조회 서버에 전달하고 싶은 데이터를 query(parameter, query string)을 통해 전달 Query를 BODY에 담아서 조회가능하나 지원하지 않는 곳도 있기 때문에 권장하지 않는다. POST 다양한 요청 처리 BODY에 리소스 데이터를 전달 GET 방식 사용시 전달해야할 데이터가 많다면 POST를 사용하여 BODY에 조회할 데이터를 전달할 수 있지만 POST로 조회시 캐싱하기에 어려운 문제가 있기 때문에 권장하지 않는다.(기술적으로 캐싱은 가능하다.) PUT 데이터 추가 or 덮어쓰기 요청한 데이터가 없다면 추가하고 있으면 덮어쓰기 POST와 PUT은 다르다. POST를 계속 요청하면 데이터가 계속 생성되지만 PUT은 여러번…

restful 이미지 RESTful이란? 두 컴퓨터 시스템이 인터넷을 통해 하기 위해 사용하는 인터페이스이다. 대부분의 비즈니스 애플리케이션은 다양한 태스크를 수행하기 위해 다른 내부 애플리케이션 및 서드 파티 애플리케이션과 통신해야 하는데, 는 할 수 있으며 을 따르므로 이러한 합니다. RESTful을 알아가기 전 알아두어야 할 REST란? 를 통해 자원을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD OPERATION을 적용하는 것을 의미한다. 즉, 는 에 Resource가 있고 를 통해 Resource를 처리하도록 설계된 를 의미한다. 웹의 모든 자원에 고유한 ID인 를 부여한다. REST의 구성 1. 자원(Resource) - URI 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원을 구별하는 ID는 와 같은 이다. 2. 행위 (Verb) - Http Method HTTP 프로토콜의 …

이벤트 위임이란? 상위 요소에서 하위 요소의 이벤트를 제어하는 방식 을 하면 강력한 이벤트 핸들링 패턴인 을 이벤트 위임을 이용해 요소마다 핸들러를 할당하지 않고, 에 이벤트 핸들러를 공통 조상에 할당한 핸들러에서 하면 사용자의 인터랙션을 통해 추가되는, 아직 만들어지지 않은 요소에 이벤트 핸들러를 할당해야 하는 경우 사용한다. 장점과 단점 장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아진다. 이나 유사한 기능을 하는 스크립트로 요소 덩어리를 더하거나 뺄 수 있기 때문에 DOM 수정이 쉬워진다. 단점 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다. 하지만 몇몇 이벤트는 버블링 되지 않습니다. 그리고 낮은 레벨에 할당한 핸들러엔 를 쓸 수 없다. 컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트이든 아니든 …

시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말함 시멘틱 마크업이란? 의미를 잘 전달하도록 문서를 작성하는 것을 말함 시멘틱 마크업 예시 - 1 시멘틱 마크업 예시 - 2 잘 구성하기 위해서는? 각 태그가 그 용도에 맞게 사용되어야 한다. 헤더/푸터에 와  사용 메인 컨텐츠에 과  사용 독립적인 컨텐츠에  사용 최상위 제목으로  사용 순서가 없는 목록으로 과  사용 내비게이션에 사용 예를 들어, 동일한 효과를 부여하는 과  태그가 있다. 둘은 동일하게 글자색을 진하게 하지만  태그의 경우는 그 자체가 “bold”의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 의 경우에는 “그 안의 내용이 다른 내용보다 더 강조되어야 한다”라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다. 시맨틱 마크업이 잘 이루어 진다면? 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화…

PWA 이미지 PWA란? 네이티브 앱을 개발하고 유지보수하는 것은 상당히 길고 복잡한 과정을 거치며, 상당한 비용이 발생한다. 그래서 접근성이 높은 웹에서 사용하는 기술과 플랫폼 API를 사용할 수 있는 네이티브 앱의 장점을 결합한 것이 이다. PWA는 HTML, CSS, Javascript와 같은 웹 기술로 만들어지며, 대표적인 예시 케이스로는 트위터, 스타벅스, 우버 등이 있다. 웹 앱을 PWA로 식별되기 위한 주요 구성요소 Responsive Web Design(반응형) : web page 속도 및 기능, 사용자 편의성 증대를 위해 다양한 Devices에서 반응형 Layout을 제공하도록 반응형 디자인을 제공할 수 있어야 한다. Manifest File(설치파일) : 기기의 홈화면에서 icon을 생성하는 기능을 제공함으로써 App store를 통하지 않고도 Web App을 install 가능하게 해야한다. 제이슨(JSON, 용량이 적은 데이터를 교환하기 위한 형식) 파일이며,…

리액트의 상태 업데이트는 항상 으로 수행되어야 한다. mutate(돌연변이한)한 값의 대상과 위치에 따라 컴포넌트가 렌더링 되지 않을 수 있다. 데이터가 실제로 업데이트 된 시기와 이유에 대해 혼란을 겪을 수 있다. 불변성이란? Immutability(불변성)는 상태나 값을 변경하지 않는 것이다. JavaScript에서 예를 들자면, JavaScript의 원시 타입의 값들은 을 갖고 있다. 데이터 타입 원시 타입(string, number, bigint, boolean, undefined, ES6 부터 추가된 symbol) 변경이 불가능한 값(읽기전용) 원시 값을 변수에 할당하면 확보된 메모리 공간(주소)에는 실제 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달된다. 참조 타입(Object, Array, Function) 변경이 가능한 값 객체를 변수에 할당하면 확보된 메모리 공간에 참조값이 저장됨 객체를 가르키는 변수를 다른 변수에 할당하면…

Flux Architecture 이미지 에서 보다 일관된 데이터 관리를 위해 고안된 아키텍처 방식 기존에 보편적으로 사용된 MVC 패턴의 사용 시, 데이터 흐름의 복잡도가 올라가는 문제가 발생하였고, 를 고안하였고, 이것이 Flux 아키텍처이다. Flux 흐름 Action은 버튼을 누르는 것과 사용자 액션에 대한 이벤트 이름이다. Dispatcher는 Action에서 발생한 이벤트 이름에 따라 처리할 값들을 Store에 보낼 수 있다. Store는 데이터가 저장되어 있는 저장소로 Disspatcher에서 받은 행동에 따라 데이터를 핸들링한다. View에서는 Store에서 핸들링한 데이터를 받는다. 그리고 Action을 통해 이벤트를 발생시키는데, 데이터는 전달하지 않는다. 참고링크 Flux: An Application Architecture for React - React Blog In-Depth Overview | Flux 참고링크

둘다 외부의 파일이나 라이브러리의 코드를 불러온다는 목적을 가지고 있다. require / exports 에서 사용되고 있는 키워드이고 Ruby 언어 스타일과 비슷하다고 볼수 있다. 모듈을 내보낼때는 ES6처럼 명시적으로 선언하는 것이 아니라 특정 변수나 그 변수의 속성으로 해 줘야 한다. 특히, 유사해 보이는 export 변수와 module.exports 변수를 상황에 맞게 잘 사용해야 한다. 기본적으로 2가지 규칙만 기억하면 된다. 여러개의 객체를 내보낼 경우 → 의 개별 속성으로 할당 딱 하나의 객체를 내보낼 경우 → 자체에 할당 노드 프로젝트에서 import를 사용하기 위해서는  을 추가해주면 된다. import / export 에서 새롭게 도입된 키워드로서 Java나 Python 언어 방식과 비슷하다. ES6 와 CommonJS 의 export(내보내기) 차이점 CommonJS와 ES6라는 모듈 시스템에서는 객체라는 개념이 존재한다. 는 모듈로부터 내보내지는 데이…

각각의 브라우저 이미지 브라우저란 무엇인가? 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시한다. → 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 기본 구조 브라우저의 기본 구조 브라우저에 URL 입력 후 일어나는 전체적인 과정(네트워크 상에서의 전체적인 흐름) url 입력 후 일어나는 네트워크 상에서의 전체적인 흐름 이미지 브라우저에서 URL을 해석 후, DNS 서버를 통하여 URL(www.google.com)을 호스팅하는 서버의 IP 주소를 찾는다. 찾은 ip 주소와 url 내부의 port 정보를 바탕으로 HTTP 요청 메세지를 생성한다. + + + (HTTP 요청 메시지 구성) HTTP GET 요청 메시지 이미지 생성된 HTTP 요청 메시지는 소켓 라이브러리를 통해 TCP / IP로…

SSR (Server Side Rendring) 서버로 부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다. 1.1 과정 유저가 웹사이트에 요청을 보낸다. 서버는 필요하다면 데이터베이스에서 데이터를 가지고 오고, 페이지를 렌더링하는데 필요한 작업을 수행한 HTML 파일을 만든다. 유저는 이제 서버가 렌더링 해준 HTML을 이용하여 콘텐츠를 볼 수 있다. (Time to view) 하지만 아직 페이지에서 상호작용을 할 수 있는 JS파일이 존재하지 않기 때문에 페이지에서 클릭했을 때 반응이 일어나지 않는 부분이 존재한다. 브라우저에서 필요한 상호작용에 필요한 JS 파일을 서버로 부터 받는다. JS 파일을 브라우저에서 컴파일 후 인터랙티브한 페이지가 완성된다. (Time To Interact) ssr 1.2 장점 HTML 컨텐츠가 이미 담겨져 있기에 **SEO(Search Engine Optimizaion)**에 좋다. 사용자에게 첫 콘텐츠를 빨리 보여줄 수…

WebRTC(Web Real-Time Communications)란? WebRTC는 서버를 최대한 거치지 않고 P2P로 브라우저나 단말 간에 데이터를 주고받는 기술의 웹 표준이다. 웹에서 실시간 미디어 스트림을 송수신할 수 있는 유일한 표준이고 또 유일한 P2P 표준이기도 하다. 쉽게 말하자면 웹 어플리케이션(최근에는 Android 및 IOS도 지원) 및 사이트들이 별도의 소프트웨어 없이 음성, 영상 미디어 혹은 텍스트, 파일 같은 데이터를 브라우져끼리 주고 받을 수 있게 만든 기술이다. WebRTC 통신 원리 위의 그림을 통한 설명 보통 두 기기가 실시간으로 소통하기 위해서는 WebRTC에서 제공하는 등의 API와 API들을 적절하게 데이터를 교환할 수 있도록 처리해 주는 과정인 이라는 프로세스를 통해 통신을 조정해야하며, 네트워크 주소 변환기(NAT) 및 방화벽에 대처하기 위해 메타데이터를 교환할 수 있는 역시 필요하다. 또 P2P 연결이 불가능한 상황을 대비한 릴레이 서버…

트리거란? 데이터베이스 삽입, 갱신, 삭제 등의 관련 되는 절차형 SQL이다. 테이블에 대한 이벤트에 반응해 자동으로 실행되는 작업을 의미 목적 일반적으로 이벤트와 관련된 테이블의 데이터 삽입, 추가, 삭제 작업을 DBMS가 자동적으로 실행시키는데 활용 데이터 무결성 유지 및 로그 메시지 출력 등의 별도 처리를 위해 사용되기도 함 데이터베이스에 저장된 데이터 값과 그 것이 표현하는 실제 값이 일치하는 정확성을 의미 구성 구성요소 설명 선언부(DECLARE) 트리거의 명칭을 정의하는 부분 이벤트부(EVENT) 트리거가 실행되는 타이밍, 이벤트를 명시하는 부분 시작/종료부(BEGIN/END) 트리거의 시작과 종료를 표현하는데 필수적이며, BEGIN/END가 쌍으로 이루어 추가되므로 블록으로 구성, 다수 실행을 제어하느 기본적 단위가 되며 논리적 프로세스를 구성 제어부(CONTROL) 기본적으로 순차적으로 처리, 비교 조건에 따라 블록 또는 문장을 실행, 조건에 따라 반복 실행 SQ…

JWT는 웹표준으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전성 있게 전달함 구성요소 JWT는 을 구분자로 3가지 문자열로 구성되어 있음 헤더(Header) typ와 alg 두가지의 정보를 가지고 있는데, 는 을 지정하고 는 을 지정함 typ에는 JWT이기 때문에 JWT의 값이 들어가며, alg에는 기본적으로 HMAC, SHA256, RSA가 사용되며, 토큰을 검증 할 때 사용되는 signature부분에서 사용 정보(Payload) Payload 부분에는 정보의 한 을 이라고 부르고, 으로 이루어짐 클레임의 종류는 총 3가지로 등록된 클레임 / 공개 클레임 / 비공개 클레임이 있음 서명(Signature) 헤더의 인코딩값과 정보의 인코딩값을 합친 후 주어진 비밀키로 해쉬를 하여 생성’ 로그인 인증시 JWT 사용 JWT 토큰 사용시, 유효기간이 짧거나 길면 작업이 번거롭거나 보안에 취약함 이를 보안하기 위해 이 나오게 되었고, 의 유효기간이 만…

Software as a Service의 약어 클라우드 기반의 소프트웨어 제공 모델 클라우드 제공업체가 클라우드 애플리케이션 소프트웨어를 개발 및 유지 관리하고, 자동 소프트웨어 업데이트를 제공하고, 인터넷을 통해 Pay-as-you-Go 방식으로 고객에게 소프트웨어를 제공 보통 클라우드 제공업체는 미들웨어, 애플리케이션 소프트웨어, 보안을 포함한 모든 하드웨어 및 전통적인 소프트웨어를 관리함 이점 이용 클라이언트는 온프레미스 시스템 및 소프트웨어를 유지 관리할 때보다 더 비지니스 을 배포, 확장, 업그레이드 등 총 을 더 정확하게 SaaS의 예 Freshdesk Google Workspace (이전 GSuite) Dropbox GoToMeeting 유사 다른 용어 IaaS Infrastructure as a Service의 약어 서비스형 인프라로 비즈니스 운영에 필요한 스토리지, 네트워킹 및 컴퓨팅 리소스를 제공 IaaS의 예 DigitalOcean Linode Racks…

Cache 물건을 일시적으로 저장, 보관하기 위해 사용하는 곳이라는 사전적 의미를 가지고 있는데 개발 기술적인 Cache의 뜻으로는 의 복사본을 으로 을 말한다. Caching 에 데이터나 계산된 결과 값의 복사본을 저장해 둠으로써 전체적인 처리 속도를 향상 시킨다. 데이터에 직접적으로 접근하는데 걸리는 시간이 오래 걸릴 때 필요한 값을 얻기 위해 계산하는 과정을 생략하고 싶을 때 반복적으로 동일한 결과를 돌려주는 경우(이미지나 썸네일 등) 은 복사본을 이용하는 것이다. 하지만 복사본과 가 생길 수 있으니 에 유의해야 한다. 컴퓨터의 동작원리 컴퓨터의 동작원리 CPU RAM Hard Drive 중앙처리장치 주기억장치 보조기억장치 매우 빠름 빠름 매우 느림 기억장치에서 데이터를 받아들여 연산작업 전원이 꺼지면 데이터가 지워짐 전원이 꺼져도 데이터가 지워지지 않음 RAM은 하드 디스크에서 데이터를 불러오고 CPU는 RAM에 저장되어 있는 데이터를 이용하여 연산 작업을 수행하는 구조이다…

각 주제에 따라 테이블을 나누어 작성한 후, 정보를 가져오는 경우 가 있다. 이때 을 사용하게 되는데, 그 중 많이 사용하는 것이 과 이다. 차이점 두 테이블에서 을 위한 기준 열이 서로 값을 가지고 있는 경우 조회에서 누락되는 행은 존재하지 않는다. 그렇다면 과 은 같은 조회 결과를 보인다. 이때, 이 상대적으로 성능이 좋다고 한다. 결론 은 합집합, 은 교집합이다. 결과가 같다면 대신 을 사용하는게 좋다. 차이점 결론

SQL(관계형 DB) SQL을 사용하면 RDBMS(관리 시스템)에서 데이터를 저장, 수정, 삭제 및 검색할 수 있음 관계형 데이터베이스의 핵심 특징 데이터는 테이블에 저장된다. 데이터는 여러 테이블에 분산된다. 데이터는 테이블에 레코드로 저장되는데, 각 테이블마다 명확하게 정의된 구조가 있다. 해당 으로 정의된다. 따라서 스키마를 준수하지 않은 레코드는 테이블에 추가할 수 없다. 즉, 스키마를 수정하지 않은 이상 정해진 구조에 맞는 레코드만 추가가 가능한 것이 관계형 데이터베이스의 특징 중 하나다. 또한, 데이터 중복을 피하기 위해 ‘관계’를 이용한다. 데이터 중복을 피하기 위한 데이터 관계 예시 하나의 테이블에서 중복 없이 하나의 데이터만을 관리하기 때문에 다른 테이블에서 부정확 데이터를 다룰 위험이 없어지는 장점이 있다. NoSQL(비관계형 DB) SQL(관계형 DB)와 반대로 스키마도 없고, 관계도 없다. NOSQL에서는 레코드를 문서(documents)라고 부른다. 여기…

HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 WebStorage 스펙이 포함됨(로컬과 세션스토리지로 나뉨) Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 젖아할 수 있는 방법을 제공한다. SessionStorage 각각의 출처에 대해서 독립적인 저장 공간을 페이지 세션이 유지되는 동안(브라우저가 열려있는 동안) 제공한다. 세션에 한정해, 즉 브라우저 또는 탭이 닫힐 때까지만 데이터를 저장한다. 데이터를 절대 서버로 전송하지 않는다. 저장 공간이 쿠키보다 큽다.(최대 5MB) 입력 폼 정보, 비로그인 장바구니 용도로 많이 사용된다. LocalStorage SessionStorage와 비슷하지만, 브라우저를 닫았다 열어도 데이터가 남아있다. 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라진다. 저장 공간이 셋중 제일 크다. 자동 로그인을 유지시킬 때 …

인증과 인가 정의 전달, 공개하기 위한 방법으로 인증 : (식별가능한 정보로) 서비스에 등록된 유저의 신원을 입증하는 과정 인가 : 인증된 사용자에 대한 자원 접근 권한 확인 HTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특성이자 약점을 보완하기 위해 을 사용 기본적으로 HTTP 프로토콜 환경은 “connectionless(무연고), stateless(국적없는)” 한 즉, ****을 가지기 때문에 서버는 클라이언트가 누구인지 매번 확인해야되는데, 이를 해결하기 위해서 쿠키와 세션, 그리고 추가적으로 토큰을 사용하게 되었다. 쿠키(Cookie) 쿠키란? 에서 쿠키를 개발하였다. 클라이언트(브라우저) 에 된다. 로 구성되어 있으며, 브라우저 환경마다 다르긴하지만 로 데이터를 보낼 수 있다. 로 구성되어 있으며, 이다. 사용자 인증이 할 수 있으며, 유효 시간이 정해지면 되는 특징이 있다.(날짜를 정해주면 , 안 정해주면 참고) 쿠키는 사용자가 따로 요청하지 않아도…

차이점은 파일은 으로 되어 있고, 파일은 로 되어있어 이미지 확대시, 는 이 일어나고 는 가 유지된 채 표현된다. PNG(Portable Network Graphics, PNG) 비손실 그래픽 파일 포맷(픽셀형식) 특허 문제가 얽힌 GIF 포맷의 문제를 해결하고 개선하기위에 고안됨 컬러 팔레트 화상과 그레이스케일 화상, 풀 컬러 화상 방식을 지원함 고해상도를 지원하므로 파일 크기가 큼(이미지를 처리/공유/저장/실행하는데 시간이 걸려 페이지 로딩 시간이 길어짐) SVG(Scalable Vector Graphics, SVG) 2차원 벡터 그래픽을 표현하기 위함 XML 기반의 파일 형식(벡터 그래픽 파일 형식) SVG 형식의 이미지와 그 자동은 XML 텍스트 파일들로 정의 되어 있어 검색화/목록화/스크립트화가 가능하며, 필요하다면 압축도 가능함(검색 엔진이 텍스트를 분석할 수 있어서, 접근성과 SEO(검색 엔진 최적화)측면에서 좋음) 기본적으로 파일 사이즈는 작은 편에 속하지만, 수…

CDN이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 동영상 또는 웹 사이트 이미지와 같은 대용량 파일을 로드하는 경우 시간이 오래 걸릴 수 있는데, 클라이언트와 웹 사이트 서버 간에 를 두어 효율성을 높일 수 있다. CDN 서버를 통해서 를 할 수 있음 이미지 CDN의 URL을 이용하여 최적화 옵션을 나타내는 방법 이미지 CDN에서의 URL에는 이미지에 대한 변환 및 최적화에 대한 중요한 정보를 전달하게 되는데, URL의 형식은 보통 아래와 같다. url 예시 Origin: 도메인(자체 도메인 또는 이미지 CDN의 도메인이 있을 수 있다.) Image: 이미지(일반적으로 필요할 때 기존 위치에서 이미지를 자동으로 검색하도록 구성할 수 있다.) Security key: 이미지의 새 버전마다 고유한 보안 키를 필요로 하게하여, 다른 사람이 이미지의 새 버전을 만드는 것을 방지 Transformati…

개요 란 클라이언트가 자신을 거쳐 다른 네트워크에 접속할 수 있도록 해주는 서버를 말한다. 서버와 클라이언트 사이에서 대리로 통신을 라고 하고 그 기능을 하는 라 부르게 되는 것이다. 프록시 서버의 원리 프록시 서버는 서버와 클라이언트 사이에서 요청과 응답을 처리해주게 되는 것을 말하는데 클라이언트에서 프록시 서버로 데이터 전송 프록시 서버에서 다시 웹 서버로 웹 응답 웹 서버에서 프록시 서버로 웹 응답 프록시 서버에서 클라이언트로 데이터 전송 프록시 서버의 사용 목적(이유) 캐시 데이터를 사용하기 위함 프록시 서버 중 일부는 프록시 서버에 요청된 내용을 캐시를 사용해 저장해둔다. 그러면 캐시에 저장되어있는 내용에 대한 재요청은 서버에 따로 접속할 필요가 없어 저장된 내용을 그대로 돌려주면 되기 때문에 전송 시간을 절약할 수 있고 외부 트래픽을 줄임으로써 네트워크 병목 현상을 방지할 수 있다. 보안 목적 프론시 서버가 중간에 경유하게 되면 IP를 숨기는 것이 가능하기 때문이다. 또…

정의 Object를 사용하여 Object를 생성하면 Object가 반환된다. 이때 라고 부른다. new 연산자를 사용하여 Object를 생성하여 변수에 할당할 수 있으며, 변수에 할당된 Object가 instance인 것이다. ## instance를 사용하는 이유는? instance마다 다른 값을 유지/제어하기 위해서 instance를 생성하는 것이다. 다시말해, 원본의 값을 그대로 사용하면 원본의 데이터가 변경되기 떄문에 instance를 생성하여 원본의 값을 건들지않고 사용하기 위해 instance를 생성하여 사용하는 것이다. 참고링크 object MDN 오브젝트(Object)와 인스턴스(instance),instanceof 정의 참고링크

면접에서 기술질문으로 아래와 같은 질문을 받게되었다. 나는 위와 같은 질문을 받고 와 관련된 최적화 방안에 대해 질문한 것이라고 생각은 들었지만, 알지못하여서 답변으로는 아래와 같이 말을 하게 되었다. 아직까지는 대규모 프로젝트를 진행해본 경험이 없다. 하지만 2차례의 프로젝트를 진행하면서 최적화 방안으로 사용하거나 학습한 바로는 관심사의 분리나 단일 책임원칙을 적용하여, 컴포넌트가 최대한 한개의 기능을 수행하게 작성하거나 분리를 하고 공통으로 사용되는 코드는 분리하여, 코드의 양을 줄이고 최소화는 방법을 이야기하였다. 그 후 추가적으로 와 , 에 대해 말을 하였지만 면접관의 질문에 대한 답변을 말한 것이 아니여서 이 글을 작성하게 되었다. 지금 드는 생각 단순하게 최적화를 하기위해서는 코드를 적재적소에 사용한다. 라는 생각이 들게 되었는데 이유는 작성한 코드들이 항상 사용되는 것이 아니여서 필요할 경우에만 사용하면 된다 라는 생각이 들었다. 그래서 다음 면접시, 모르는 답안이 나…

하드웨어 생산자와 소프트웨어 개발자의 관계를 나타낼 때 사용 그 중에서 게임제조사와 소비자를 연결해주는 게임회사(퍼블리싱) 스마일게이트와 같은 회사 개발자 측면에서 보면 퍼스트 파티 개발자 : 하드웨어 생산자가 직접 소프트웨어를 개발하는 경우 세컨드 파티 개발자 : 하드웨어 생산자인 기업과 자사간의 관계(또는 하청업체)에 속한 소프트웨어 개발자 서트 파티 개발자 : 아무 관련없는 제 3자 소프트웨어 개발자 결론 주로 편한 개발을 위해 이나   혹은  를 사용하는데, 이처럼 제 3자로 중간다리 역할로 도움을 주는 것이 서드 파티 로 볼 수 있고, 이런 것을 만드는 개발자가 서드 파티 개발자다. 참고링크 서드 파티 개발자 - 위키백과, 우리 모두의 백과사전 결론 참고링크

CI란? 자동화 과정 자동화 프로세스인 을 의미하는데, CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결할 수 있음 동작을 확인하고 변경으로 인해 문제가 생기는 부분이 없도록 보장 CD란? 자동화 과정 지속적인 서비스 제공(Continuous Delivery) 또는 지속적인 배포(Continuous Deployment)를 의미하며 으로 사용됨 는 테스트 및 배포 단계를 자동화하는 DevOps 방식을 논리적 극한까지 끌어 올림 코드 변경이 파이프라인의 이전 단계를 모두 성공적으로 통과하면 수동 개입 없이 해당 변경 사항이 프로덕션에 자동으로 배포 됨 는 또한 성숙하고 입증된 지속적 통합 및 지속적인 전달 단계를 기반으로 함 간단한 코드 변경이 정기적으로 마스터에 커밋되고, 자동화된 빌드 …

정의 애플리케이션을 트리의 각 노드들 즉, 일종의 나무와 같이 보고 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 이라고 명명하였다고 한다. 사용하지 않는 코드를 제거하는 기법 방법 import시, 필요한 것만 작성하여 사용 사용하는 모듈로부터 으로 한다. Babel이 ES6 모듈을 commonjs module로 변환하지 않도록 조치(.babelrc 설정) Babel은 대부분의 웹 애플리케이션에서 필수로 사용하는 도구 중 하나 이지만 를 사용중에 있다면 를 자동으로 로 한다. 좋은 기능이지만 트리 쉐이킹 관점에서는 그렇지 못하다고 한다. 에서 로 변환하지 못하도록 설정을 추가해 줘야한다. 또한 위와 같이 설정을 하면 웹팩은 코드를 광범위하게 호환되는 형식으로 변환하므로, 이 프로세스는 호환성 문제를 일으키지 않는다고 한다. 프로젝트의 모듈들이 Tree Shaking시, 해야 한다.(package.json 설정) 예측 가능한 입력을 가지고 동일하게 함수의 스코프 밖에 어떤 …