프론트 엔드

[CSS] SASS와 SCSS

이번 시간에는 CSS를 지원하는 라이브러리 중 제일 간단하고 스타일리시하게 css를 구성하는 SASS와 SCSS를 알아보자. SASS 란? SASS(Syntactically Awesome StyleSheets)는 CSS의 pre-processore로서 CSS의 한계와 단점을 보환하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 확장 기능(extension)이다. CSS를 배우기 쉬워 프로젝트 초기단계에서는 문제가 없지만 프로젝트가 커질수록 코드가 복잡해지고, 스타일시트도 같이 관리할게 많아지면서 더욱 복잡해진다. 따라서 추가 및 수정 등 유지 보수에 힘이 들어간다. SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높여준다. 정리하자면 SASS는 CSS보다 더욱 심플한 표기법으..

[Javascript] 자바스크립트 엔진, V8

Javascript 엔진? 개발자가 자바스크립트에 대한 코드를 짜면 이 자바스크립트 코드를 해석하고 실행시켜줘야 하는데, 바로 이것이 자바스크립트 엔진의 역할을 담당한다. 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하기 위해 안들어진 일종의 프로세스 가상머신인 것이다. WebPack 에서는 자바스크립트 엔진을 다음과 같이 정의한다. 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다. 여러 목적으로 자바스크립트 엔진을 사용하지만 대체적으로 웹 브라우저에서 사용된다. 자바스크립트 엔진의 역할 자바스크립트 엔진의 역할은 어떤 역할을 담당해주는 것일까? 자바스크립트 ..

[GO] Go - Introduction

Go - Introduction Go란? Go 언어란 Python과 같은 인터프리터 언어(스크립트 언어)가 아닌 컴파일 언어이다. The Go Programming Language DevOps & Site Reliability With fast build times, lean syntax, an automatic formatter and doc generator, Go is built to support both DevOps and SRE. go.dev 인터프리터 언어 : 원시코드(프로그래머가 작성한 소스코드)를 기계어로 변환하는 과정없이 한줄 한줄 해석해 바로 명령어를 실행하는 언어 컴파일 언어: 원시코드(프로그래머가 작성한 소스코드)를 모두 기계어로 변환한 후에 기계(JVM 같은 가상머신)에 넣고 기..

[Docker] Docker의 개념 및 핵심 설명

이번 포스팅은 Docke에 대해서 간단할 핵심 설명을 포스팅하고자합니다. Doker라는 것은 0.9버전 부터 직접 개발한 libcontainer를 사용하고 있다고 합니다. 가상화를 사용하는 이유는? 가상화를 사용하는 이유는 향상된 컴퓨터의 성능을 더욱 효율적있게 사용하기 위해 가상화 기술이 많이 등장 하였습니다. 서버 관리자 입장에서는 CPU 사용률이 단 10%대밖에 되지 않는 활용도가 낮은 서버들은 리소스 낭비일 수밖에 없습니다. 그렇다고 모든 서비스를 한 서버 안 에서 올린다면 안정성에 문제가 발생할 수 있습니다. 그렇기 때문에 안정성을 높이고 리소스도 최대한 활용할 수 있는 방법으로 나타낸 것이 바로 가상화입니다. 모두가 알고 있는 대표적인 가상화 플랫폼은 VM(Virtual Box)가 있습니다. ..

[React] State 생명주기 (클래스형과 함수형의 차이)

이번 시간에는 React에서 state를 이용해 생명주기 및 Class형과 함수형 생명주기의 차이점을 알아보자. React에서 생명주기란? React에서 모든 컴포넌트는 아래 세가지 단계를 거친다. 초기화 단계 업데이트 단계 소멸 단계 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하고 각 단계 속에서 호출되는 메서드들을 바로 생명주기 매서드 라고 부른다. 리액트는 웹에서 UI 데이터가 변경되면 자동으로 컴포넌트가 업데이트되고 동적으로 화면을 그려준다. 제대로 된 기능을 수행하려면 이런 자동으로 업데이트 되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공해줘야 할때도 있다. 따라서 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재한다. 위 이미지는 리액트..

[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이

1. 클래스형 컴포넌트 react 컴포넌트를 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 아직도 사용하는 기업들도 있다. 클래스형으로 구성된 프로젝트의 유지보수를 위해서도 클래스형 컴포넌트에 대한 개념도 알아야 한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트의 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component {..

[Javascript] Event Loop

Event Loop? Event Loop란 자바스크립트에 기반인 동시성 모델이라고 합니다. 이벤트 루프는 코드 실행과 collecting(이벤트 수집) and processing events(이벤트 처리), queued sub-tasks(큐에 놓인 하위 테스크) 실행을 담당합니다. 이 모델은 C언어와 Java와는 확실히 다른 언어에 해당합니다. JS Engine 자바스크립트 엔진은 Memory Heap(메모리 힙)과 Call Steak(콜 스택)으로 구성되어 있습니다. 자바스크립트는 단일 스레드 프로그래밍(single thread Programming)언어 인데, 이 의미로는 Cell Steak이 하나라는 이야기 입니다. Memory Heap: 메모리 할당이 일어나는 곳 (즉 우리가 프로그렘에 선언한 변..

[Javascript] OOP vs FP란 무엇인가?

OOP Object Oriented Programming의 약자로 class와 object에 기반한 프로그래밍 페러다임(디자인 패턴) 입니다. OOP는 관련된 데이터끼리 묶어 class를 형성하고 그 안에서 object instance를 만듬으로써 프로그램을 디자인 해줍니다. OOP의 장점 OOP는 코드의 재사용률을 높이고 코드를 간결하게 함으로써 유지보수가 쉽다는 장점이 있습니다.(DRY pinciple) 데이터를 안전하게 보존시킬 수 있습니다.(encapsolution(캡슐화)과 abstraction(추출화) 등) 대표적인 언어 C++, Java, Python, Javascript 등 ✨ Features Encapsulation (캡슐화) 캡슐화는 객체의 내부 로직은 감추고 외부에는 상대적으로 안정적..

[Javascript] null과 undefined의 차이

Javascript의 null과 undefined의 차이점 null과 undefined는 둘 다 변수에 값이 없는 것을 나타내지만, 둘의 의미는 꽤 다릅니다. undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체) 라고 말할 수 있습니다. 즉 undefined는 자료형이 없는 상태입니다. 따라서 typeof를 통해 자료형을 확인해보면 null은 object로 undefined는 undefined가 출력되는 것을 확인해볼 수 있습니다. // typeof typeof null; // 'object' // null의 문자열 typeof undefined; // 'undefined' // undefined의 무낮열 null == undefined..

[Javascript] Javascript와 Node.js의 차이

코드깍는 노인 - 유튜브 이글은 코드깍는 노인님의 유튜브 동영상을 보고 분석한 글입니다. 결론 Javascript는 프로그래밍(Programming) 언어 Node.js: Javascript 프로그래밍 기반으로 컴퓨터내에서 구동시켜주는 일종의 프로그램이다. 설명 nodeJs는 chrome의 자바스크립트 엔진인 v8을 이용합니다. 자바 스크립트는 스크립트 언어로써 특정한 환경(브라우저) 에서만 사용가능한데 nodejs를 통해 특정한 환경(브라우저) 없이도 실행을 도와줍니다. Javascript는 크롬(Chrome) 같은 브라우저에서만 사용되는 것이 아닌 브라우저 밖, 즉, 내 컴퓨터 에서 다양한 용도로 확장하기 위해 만들어진 바로 Node.js입니다. node.js를 이용해 Express 같은 라이브러리를..

변수 타입 (var, let, const)와 스코프 연산자(scope) 개념

var, let, const 의 차이 var은 function scope(함수블록 {}이외 모든 변수는 전역 변수)이고 let과 const는 block scope(모든 코드 블록 -if, for 등에서 선언된 변수는 해당 코드 블록 내에서만 유효)임 var은 재선언 및 재할당이 가능하고, hoisting이 가능하다. var은 초기값이 없으면 자동으로 undefined를 초기값으로 메모리 할당하므로 에러가 발생하지 X let은 한번 선언 한 후로는 재선언이 불가능하다. 다만 재할당은 가능, const는 상수로서 변하지 않는 값이기에 재선언 및 재할당이 불가능하다. let & const는 hoisting이 불가능(Template Dead Zone이 선언과 초기화 사이에 생긴다.) 단, const로 변수선언을..

[Javascript] Javsacript ES6 주요 특징

ES6 주요 특징 class 전격 지원 let, const 문법 화살표 함수(Arrow Function) Modules Promise 비구조화 할당(Destructuring Assignment) 템플릿 리터럴(Template Literals) 매개변수 기본값 설정 1. class 전격지원 기존의 Javascript는 다른 객체지향 언어와는 달리 prototype을 기반으로 class를 묘사했는데, es6 문법에서는 new라는 키워드로 class 생성이 가능하다. class Cat { // constructor constructor(name) { this.name = name; } sayHi() { console.log(`Hi! ${this.name}`); } } const dd = new Cat("DD"..