분류 전체보기

CSS At-Rules (@import, @font-face 등) 란?

CSS At-rules 란? (@import, @namespace 등) CSS 의 At-rules 란 CSS Statement(CSS 문) 의 한 종류이다. CSS 문은 CSS 가 어떻게 동작할지에 대해 지시한다. At-rules 는 At 기호 ('@', U+0040 COMMERCIAL AT) 으로 시작하여 다음 세미콜론 (';', U+003B SEMICOLON) 혹은 다음 CSS 블록이 나오기 전까지 내용이 포함된다. 문법 내부 블록을 활용하지 않는 At-rules /* General structure */ @identifier (RULE); /* Example: tells browser to use UTF-8 character set */ @charset "utf-8"; ..

CSS 핵심 개념 요소들

CSS 핵심 개념 요소들이란? CSS 가 해석됨에 있어서 그 근간이 되는 개념들이다. 알아놓으면 CSS 의 구동 원리를 파악하는데 큰 도움이 된다. CSS Syntax (문법) Comments (주석) Specificity (구분법) CSS Selector 와 같은 구분자에 대해 세세하게 설명하는 개념이다. Inheritance (상속) Box model (박스 모델) Layout mode (레이아웃 모드) Visual formatting models (비주얼 양식 모델) Margin Collapsing (마진 붕괴) 값 Initial values (초기 값) Computed values (계산 값) Used values (사용된 값) Actual values (실제 값) Value definition ..

CSS transform 속성이란?

CSS transform 속성이란? CSS 에서 제공하는 transform 프로퍼티를 통해서 HTML 요소를 rotate(회전), scale(사이즈 조정), skew(왜곡), translate(이동) 시킬 수 있다. transform 속성은 CSS Visual formatting model 의 좌표 공간을 수정할 수 있는 기능이 있다. transform 속성이 none 값을 갖지 않는다면, stacking context 가 만들어진다. 이 경우에는 엘리먼트가 포함하는 position: fixed; 혹은 position: absolute; 엘리먼트에 대해 containing block 으로서 동작할 수 있다. 속성 예제 transform 에서 사용할 수 있는 다양한 함수들은 transform-functio..

CSS Animation 속성이란?

CSS Animation 속성이란? animation 과 관련된 여러 속성을 한번에 입력할 수 있는 축약 (shorthand) 속성이다. 예제 .animation { animation: 3s ease-in 1s infinite reverse both running slidein; } 순서 속성의 의미는 각각 아래와 같은 순서를 갖으며, 중간에 하나씩 생략도 가능하다. animation-name: 애니메이션의 이름 보통 @keyframes 의 이름이 들어간다. animation-duration: 애니메이션 한 싸이클의 지속시간 animation-timing-function: 애니메이션 시간대별 효과 가속, 선형 등의 옵션이 있다. animation-delay: 애니메이션이 얼마간의 딜레이를 갖고 실행될지 ..

CSS 포지션 (position) 속성이란?

CSS 포지션 (position) 속성이란? HTML 요소가 어떻게 위치할지에 대한 속성이다. top, right, bottom, left 프로퍼티가 최종 위치를 결정한다. position 의 종류 알아보기 position: static; position: relative; position: absolute; position: fixed; position: sticky; /* Global values */ position: inherit; position: initial; position: revert; position: revert-layer; position: unset; 위는 position 속성의 값으로 들어올 수 있는 모든 케이스를 적어둔 것이다. static 기본적인 엘리먼트 배치 원리를 따른..

리액트 네이티브 초기 프로젝트 생성 방법 (feat. Expo vs React Native CLI )

리액트 네이티브 프로젝트 생성 방법 2가지 리액트 네이티브 프로젝트를 생성하는데는 대표적으로 2가지 방법이 있다. Expo React Native CLI 리액트 네이티브 공식문서 를 보면, 아래 두가지 방법이 나오는데, 하나는 Expo 를 이용한 방법이고, 하나는 React Native CLI 를 이용한 방법이다. 아래는 공식문서 스크린샷이고, 두가지 방법이 분기되어 있다. Expo 의 특징 단점 네이티브 기능 제어를 완벽하게 할 수 없다. Expo 에서 제공하는 기능을 사용해야 한다. 장점 초기 환경 세팅이 간단하다. 빠르게 모바일 웹 개발이 가능하다. 모바일 앱 개발에 친숙하지 않은 사람에게 좋은 도구이다. 앱스토어나 구글 스토어에 출시하기 쉽다. React Native CLI 의 특징 단점 초기 환..

리액트 네이티브 apk 파일 생성하기

APK 파일 생성 방법 - 안드로이드 android/app/build.gradle 수정하기 enableSeparateBuildPerCPUArchitecture def enableSeparateBuildPerCPUArchitecture = true 이 설정은 universal apk 파일 생성이 아닌, CPU 특화된 apk 파일을 생성하기 위해 true 로 설정해준다. apk 파일을 여러개 생성하는 대신 각 안드로이드 CPU 에 최적화된 apk 파일을 생성할 수 있다. enableProguardInReleaseBuilds def enableProguardInReleaseBuilds = true proguard 를 사용할지 선택하는 것이다. 자바 바이트 코드를 줄여준다. 단, 자바 바이트코드를 줄이는 과정에..

리액트 네이티브, 헤르메스(Hermes) 란?

리액트 네이티브, 헤르메스 (Hermes) 란 React Native 에 최적화된 오픈 소스 자바스크립트 엔진이다. 헤르메스를 활성화 시키면, 앱 사이즈도 작아지고 메모리 사용량도 줄고 앱 시작시간도 짧아지는 효과가 있다. 리액트 네이티브 0.70 이후에는 헤르메스가 디폴트라 따로 활성화하기 위해 설정해야 하는 것이 없다. 리액트 네이티브 0.70 이전 버전에서는 이 문서 를 보고 따라하면 된다.

리액트 네이티브 코드 푸시(Code Push) 란, 그리고 코드 푸시 설정법

코드푸시란 react-native 혹은 cordova 로 개발한 앱을 번거로운 심사과정 없이 바로 업데이트 할 수 있도록 해주는 서비스이다. 어떻게 가능한 것일까? 리액트 네이티브 앱은 JS 파일과 이미지로 이루어져 있다. 이는 metro bundler 에 의해 번들링 된다. 이후 플랫폼에 적합한 바이너리 파일인 .ipa 혹은 .apk 파일로 배포된다. 일단 앱이 릴리즈되면, 코드를 변경할 때, 전체 바이너리를 다시 컴파일해야 한다. 컴파일된 바이너리는 당연히 까다로운 심사과정을 다시 거쳐야 한다. 코드푸시 서버는 코드 푸시 서버에 자바스크립트 파일과 이미지를 업데이트 함으로써, 즉시 앱을 업데이트하는 것을 가능하게 한다. 또한 코드 푸시는 유저에게 동작되는 버전을 제공하기 위해, 이전 버전의 업데이트를..

시멘틱 버저닝 (Semantic Versioning) 이란? (feat. package.json 표현 방식)

시멘틱 버전(semantic versioning) 시멘틱 버저닝 이란 패키지의 일반적인 버전의 표현 방식을 이야기한다. 숫자 3자리로 버전을 표현한다. 이를테면 노드의 package.json 에서는 "react":"16.8.6" 와 같이 리액트 버전 표기가 가능하다. .으로 구분된 3개의 숫자는 각각의 숫자마다 의미를 갖고 있다. 첫번째 숫자, Major Digit (16.8.6) 첫번째 숫자는 이전 버전들과의 호환성을 나타낸다. 이번 업데이트에 이전 버전과 호환되지 않는 큰 변화가 있었다면, major digit이라 불리는 가장 앞의 숫자를 올린다. 이를테면 1.0.1 버전을 업데이트해서 더이상 이전 버전과 호환되지 않으면 2.0.1 버전이 된다. 두번째 숫자, Minor Digit (16.8.6) 두..

루프백 아이피 (loopback ip) 란?

개요 루프백 아이피 (loopback ip) 란 자기 자신을 가리키는 아이피 주소이다. 로컬호스트 주소 (localhost) 라고도 한다. ipv4 에서는 127.0.0.0 ~ 127.255.255.255 대역을 루프백용으로 예약해둔다. ipv6 에서는 ::1/128 단 하나의 주소만 사용한다. /etc/hosts 파일에 localhost 를 127.0.0.1 로 연결시켜두고, 호스트 이름에 localhost 를 입력하면, DNS 를 타지 않고 바로 로컬로 연결된다.

러스트 (Rust) 메서드 (Method) 문법

메서드 문법 (Rust Method Syntax) 구조체 (혹은 열거형 혹은 트레이) 에 종속된 함수를 말한다. 구조체의 내용 안에 정의된다. 첫번째 파라미터는 언제나 &self 이다. 첫번째 파라미터가 &self 가 아닌 경우엔, 연관 함수가 된다. 메서드 정의하기 #[derive(Debug)] struct Rectangle { length: u32, width: u32, } impl Rectangle { fn area(&self) -> u32 { self.length * self.width } } fn main() { let rect1 = Rectangle { length: 50, width: 30 }; println!( "The area of the rectangle is {} square pixe..