[NODE] REPL 사용하기

in JS Technology on Node.js
[NODE] REPL 사용하기

REPL(read-eval-print loop) 또는 인터랙티브 톱레벨(interactive toplevel), 랭기지 셸(language shell)은 단일 사용자의 입력(예: 단일 식)을 취하고 이를 평가(실행)하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴퓨터 프로그래밍 환경이다.

1.REPL 이란?

REPL(read-eval-print loop) 또는 인터랙티브 톱레벨(interactive toplevel), 랭기지 셸(language shell)은 단일 사용자의 입력(예: 단일 식)을 취하고 이를 평가(실행)하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴퓨터 프로그래밍 환경이다. REPL 환경으로 작성된 프로그램은 구간마다 실행된다. 이 용어는 보통 클래식 리스프 머신 상호작용 환경과 유사한 프로그래밍 인터페이스를 의미하기도 한다. 일반적인 예로는 프로그래밍 언어를 위한 명령 줄 셸 및 유사 환경을 들 수 있으며 기법은 스크립트 언어의 특징과 매우 닮아있다.

[GIT] GITHUB - PR(pull request) 해보기

in It. on Git
[GIT] GITHUB - PR(pull request) 해보기

오픈소스에 기여 할수있는 PR에 대해 알아보자

1.PR (pull request)란

PR 이란 내가 작업한 코드가 있으니 내 브랜치를 당겨 검토 후 병합해주세요 라는 요청을 원본 저장소에 요청하는 것으로 여러개의 원격 저장소끼리의 코드 병합 방법으로 이해하면 쉽습니다.

당연히 react 나 vue 와 같은 대형 프로젝트 같은 경우에는 Contributing Guide 부분이 따로 목차에 소개되어 있습니다. 아래의 링크를 한번 읽어보시는 것도 좋습니다.

React Contributing Guide Link

[Vue] Vue 디렉티브 (Directive)

in JS Technology on Vue.js
[Vue] Vue 디렉티브 (Directive)

Vue의 기본 디렉티브를 예제를 통해 알아보자.

1. 디렉티브(Directive)란

번역을 하면 “지시” 라는 뜻을 가지며, Vue.js 에서는 엘리먼트에서 사용되는 특별한 속성입니다. 정리 하자면 디렉티브(Directive)는 HTML 태그안에 들어가는 하나의 속성이며 ‘V-‘ 라는 앞글자를 지니고 있습니다.

디렉티브는 속성으로 다루어지며 Vue에서 기본적으로 제공되는 기본 디렉티브와 사용자가 만든 디렉티브가 있습니다. 이 포스팅에서는 기본적으로 제공되는 기본 디렉티브에 대해서 기본개념과 간단한 예제로 동작원리를 학습하는데 중점을 두겠습니다.

[Svelte] Svelte의 소개

in JS Technology on Svelte.js
[Svelte] Svelte의 소개

Svelte를 학습하기에 앞서 Svelte 의 기본 원리와 다른 프레임워크와의 차별성을 알아보자.

1.Svelte 란

selvte는 vue, react 와 같은 frontend 프레임 워크 입니다. 그렇다면 누가 왜 이 프래임 워크를 만들고 배포 하였을까요 ?

바로 이사람 리치 해리스 (Rich Harris) 는 모듈 번들러인 Rollup을 포함하여 널리 사용되는 여러 오픈소스 라이브러리 프로젝트의 제작자이며 selvte의 아버지 입니다.

리치해리스의 github Link

현재 정식 릴리즈된 Svelte 버전은 3버전으로 릴리즈 시기는 다음과 같습니다.

  • 2016년 ver.1 릴리즈
  • 2018년 ver.2 릴리즈
  • 2019년 ver.3 릴리즈

[JS] JS 의 Event Loop (이벤트 루프)

in Web Basic on Javascript
[JS] JS 의 Event Loop (이벤트 루프)

JavaScript의 비동기/동시성 처리 구동원리 이벤트 루프에 대해 알아보자.

1.개요

자바스크립트는 비동기 / 동시성을 어떻게 처리할까요 ?

자바스크립트는 태생적으로 단일스레드 기반의 언어로 이루어진 대표적인 언어 입니다. 스레드가 하나라는 말은 곧 절자치향적으로 동시에 하나의 작업만을 처리할 수 있다는 이야기인데 어떻게 Node.js 기반에서 또는 브라우저에서 동시적인 처리들이 일어날 수 있는 것일까요?

이러한 자바스크립트에서 동시성을 처리할 수 있는 개념이 바로 이벤트루프(Event loop) 입니다.

[CSS] CSS Layout 의 기본 (4.position - fixed, sticky)

in Web Basic on Css
[CSS] CSS Layout 의 기본 (4.position - fixed, sticky)

CSS layout, box-model, margin collapse, position, box-sizing

4.Css의 position - fixed, sticky

1)개요

이전 포스트에서 position 속성중 3가지 속성을 학습해 봤습니다. 요번 포스팅에서는 fixed 와 sticky 속성을 알아보고 position 속성에 대해 마무리 하겠습니다. 다음은 이전 포스팅 링크입니다.

연관 링크 : CSS Layout 의 기본 (4.position - relative vs static)

연관 링크 : CSS Layout 의 기본 (4.position - absolute)

먼저 MDN 문서에 fixed 와 sticky 가 어떻게 설명되어 있는지 알아 볼까요?

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다. 이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.

요_소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.

상세적인 용어의 기본 지식이 없다면 글로만 봤을때 와닿지 않습니다. 하지만 저희는 이미 relative 와 absolute 속성을 배웠기때문에 실제적으로 기본 동작의 원리는 이해가 쉬울 것 입니다. fixed와 sticky 속성은 기준점 차이만 있을뿐 absolute 와 같이 부모와의 연관 관계가 끊기면서 위치를 지정하는 방식은 동일합니다. 그렇다면 소스로 이해해 볼까요?


2)코드로 absolute, fixed, sticky 속성 살펴보기

//file: `absolute, fixed, sticky 속성 살펴보기`
<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-size: 16px;
      line-height: 24px;
    }

    .pb-100 {
      padding-bottom: 100px;
    }

    .circle {
      display: inline-block;
      width: 100px;
      height: 100px;
      line-height: 100px;
      border-radius: 50%;
      text-align: center;
    }

    .fixed {
      position: fixed;
      background-color: gray;
    }

    .sticky {
      top: 0;
      position: sticky;
      margin-left: 120px;
      background-color: skyblue;
    }

    .absolute {
      position: absolute;
      background-color: yellow;
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div style="height:10000px; background-color: tomato;">
    <div style="height:100px; background-color: green;">
      Header
    </div>
    <div class="circle fixed">Fixed</div>
    <div class="circle sticky">Sticky</div>
    <div class="circle absolute">Absolute</div>
    <p class="pb-100"> </p>
  </div>
</body>

다소 긴 코드 입니다. 위의 코드를 동작하면 위의 header 부분이있고 원형의 요소들과 스크롤을 위한 div가 나타납니다. 이때 스크롤시 각각 요소들이 어떻한 행동을 하는지 차이점을 안다면 쉽게 fixed와 sticky absolute 속성을 어떠할때 사용할지 판별할 수 있을 것입니다.

static

위의 그림을 보면 어떤가요 fixe는 뷰포트 기준으로 고정되어있고 sticky는 스크롤이 끝날시 top에 붙어서 따라 내려오는것을 보실수 있고 absolute 는 스크롤의 영향이아니라 자기 자신의 좌표를 지키는 것을 볼수 있습니다. 아래에 실행할수 있는 환경에서 이것저것 바꾸어서 테스트해보면서 감을 익히셨으면 좋겠습니다. 현재 모바일 codepen 에경우 아래의 sticky 동작이 안먹는것으로 확인되었습니다. 감안하고 동작해주세요

3) 정리

position 은 정말 어려운 주제입니다. 이해가 힘들고 숨겨진 원리들이 소개해드린 내용보다 많이 있습니다. 이것저것 바꾸어보고 실습을 해야지 몸에 터득되는 부분도 존제합니다. 하지만 왜 이렇게 요소들이 표현되었는지 알수 있는 정도만 얻어가셨어도 성공인것 같습니다.

[CSS] CSS Layout 의 기본 ( 3.마진겹침 part1)

in Web Basic on Css
[CSS] CSS Layout 의 기본 ( 3.마진겹침 part1)

CSS layout, box-model, margin collapse, position, box-sizing

3.마진겹침 (margin-collapsing)-형제노드마진겹침

1)개요

흔히 마진 상쇄 현상이라고도 불립니다. (혹자는 '마진 빡침 현상' 이라고도 합니다) 하지만 인과관계로 볼 때, 마진이 겹치게 되면 상쇄가 일어나기 때문에 영미권에서는 '마진 상쇄(Margin collapsing)'로 부르고 있습니다. 다음은 MDN 마진 상쇄에 대한 설명입니다.

블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동 -MDN

Pagination

© 2021. All rights reserved.