Phot_o_matic Programming

Feature Flag의 정의 Feature Flag(이하 피처 플래그)는 흔히 Feature Toggle이라고도 표현합니다. 표현 그대로 특정 기능에 대해 on/off와 같은 상태를 외부에서 제어할 수 있도록 하는 시스템입니다. if (useFeatureIsOn('unhide-hidden-posts')) { // 게시글 숨김 목록 UI 노출 및 숨김 해제 기능 제공 } else { // 게시글 숨김 목록 UI 미노출 및 페이지 라우팅 제어 } useFeatureIsOn 함수가 반환하는 값은 외부에서 해당 인자를 key로 갖는 설정값을 통해 결정됩니다. 피처 플래그를 조작할 권한이 있는 자가 unhide-hidden-posts 기능을 활성화하면 if문 으로 분기될 것이고, 비활성화하는 경우는 else문으..

Programming/Concept 2024. 3. 1. 22:08

1. Import 스타일을 여러 파일들로 나누고, 다른 파일에서도 불러와 사용하는 기능이다. @import 지시자를 사용하면 특정 .scss 파일을 불러올 수 있다. @import "base.scss"; @import "base2"" //확장자를 붙이지 않아도 된다 partial .sass 파일이나 .scss 파일의 이름을 _ 로 시작하면 css 파일로 컴파일되지 않는다. HTML에서 해당 css 파일을 부를 일이 없고, import만 되는 경우 이 기능을 사용하자. 2. Extend 특정 선택자를 상속할 때, @extend 지시자를 사용한다. 예를 들어, box 클래스의 속성을 상속받고 싶은 success-box라는 클래스가 있다면? .box { border: 1px solid gray; padding..

Programming/Concept 2019. 11. 4. 15:39

Sass란? => Synthetically Awesome Style Sheet (문법적으로 짱 멋진 스타일 시트) css의 전처리기로서, css 코드의 재활용성을 높일 뿐 아니라 가독성을 높여준다. 덕분에 유지보수를 쉽게 할 수 있게 된다. 컴파일을 통하여 sass/scss 파일이 css 형태로 바뀌게 된다. node-sass 사용 => 빠른 컴파일 속도와, Node.js 환경에서 작업할 때 libsass를 사용할 수 있게 해준다 # NPM 을 통하여 node-sass 글로벌 설치 $ sudo npm install -g node-sass # 컴파일하여 현재 디렉토리에 저장 $ node-sass style.scss -o . # style.scss 파일에 변화가 있을 떄 마다 자동으로 리컴파일 $ node-..

Programming/Concept 2019. 11. 4. 15:02

https://ko.wikipedia.org/wiki/%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D

Programming/Concept 2019. 7. 17. 22:39

Hello world! It is my first time to practice Typora for saving my works in markdown 대쉬 하나 별 표 하나 플러스 하나로 목록 만들기 first second third 이탤릭은 양옆에 언더바를 넣으세요 강조하고 싶을 땐 양옆에 언더바 두 개 아니면 별 두 개 이탤릭과 두껍게를 동시에는 요렇게 별 두 개씩과 언더바 하나로 감싸기 취소선은 물결 표시 두 개 언더바는 u 태그로 감싸주세용 NAVER 링크는 '[]'대괄호로 링크명을 쓰고 그 뒤에 '()'소괄호를 붙여서 링크 주소를 넣어주세요 let a = 1 코드를 강조하고 싶을 땐 Grave로 감싸주세요 줄바꿈

Programming/Concept 2019. 7. 16. 21:08

부트스트랩은 "오픈형 UI 플러그인"이다. 빠르고 쉽게 레이아웃을 구성할 수 있고, 다양한 인터페이스 사용이 가능하다. HTML5와 CSS, Javascript로 만든 프레임워크로써 기본 레이아웃과 메뉴, 버튼, 리스트, 탭 이미지 등을 다양한 형태의 엘리먼트를 제공하여 쉽게 홈페이지 개발을 할 수 있게 도와준다. 장점 무엇보다도 "반응형 웹" 개발을 도와주는 프레임워크이기 때문에, 브라우저의 크기나 장비의 크기에 따라 웹페이지를 유동적으로 보여줄 수 있게 된다. 모바일에서도 적절한 크기로 변화하므로 서비스를 제공할 수 있는 대상의 폭이 넓어질 수 있다. 단점 jQuery에 대한 의존성이 강하고, 정형화되어 있어서 내 마음대로 디자인의 구성요소를 변경하는 것이 어렵다. 구형 브라우저에서 지원이 되지 않는..

Programming/Concept 2019. 7. 11. 17:41

package-lock.json package-lock.json은 npm을 사용하여 package.json 파일 또는 node_modules 트리를 수정하면 자동으로 생성되는 파일이다. 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있다. package-lock.json 파일이 꼭 필요한 이유 package.json 파일의 의존성 선언(dependency)에는 version range가 사용된다. 이것은 특정 버전이 아니라 버전의 범위를 의미한다. 예를 들어 npm install express를 실행하면 package.json 파일에는 “^4.16.3”(Caret Ranges)로 버전 범위가 추가된다. 이 package.json 를 기반으로 npm install을 실행하면 현재는 4.16.3 ..

Programming/Concept 2019. 7. 11. 13:47

switch문은 어떠한 조건에 따라 미리 설정한 행동을 취하도록 하는 문법이다. 이제껏 써 온 if문과는 어떠한 차이점이 있는지 아래의 예시 코드로 알아보자. switch (test) { //test라는 변수에 대해서, 설정되어 있는 조건과 비교하게 된다 case 100 : //if(test === 100)과 같은 의미이다 alert('100점입니다.'); break; //어떤 case에 부합하였다면, 그 case 내에서 switch문을 종료하기 위하여 break 걸어준다 case 0 : alert('빵점입니다!'); break; default : //test의 값이 어떠한 case와도 부합하지 않을 경우에 실행되는 구문이다 alert('채점을 해 주세요.'); break; }

Programming/Concept 2019. 7. 3. 15:19