BEM 방법론은 css를 작성할때 좀더 효율적이고 유지보수가 쉽도록 해주는 일종의 규칙이다. B (Block) E(Element) M(Modifier) 으로 구조를 나누어서 class이름을 주는것이다. 이 규칙을 적용하면 모듈화가 편해 코드의 재사용성도 올라가게되어 여러모로 좋은 방법론인것 같다. B - Block 블록은 말 그대로 html에서 요소들을 감싸고 있는 큰 요소이다. (컨테이너라고 이해해도 되겠다.) 블록은 아무 dom node가 와도 상관없다. (위는 예시로 div태그를 사용한것일뿐) class 이름을 붙일때는 해당 dom node가 block이라는것만 알도록 naming 해준다. (한단어로 해주면됨.) (ex. ... ) css를 작성할때는 class만 사용한다. (tag name, id..

node에서 file system 은 표준 posix 기능에 기반한 api다. 바로가기 : [ what is posix? ] node의 file system api들은 비동기함수(asynchronous)과 동기(synchronous) 함수 기반으로 되어있다. const fs = require('fs'); fs.unlink('/tmp/hello', (err) => { if (err) throw err; console.log('successfully deleted /tmp/hello'); }); 비동기 형식의 api는 해당 함수의 마지막 인자(2번째가 아니라 마지막!) 로 완료를 알리는 callback 함수를 받게 된다.(이하 완료콜백이라 하겠음.) 완료콜백은 ap..

Cambridge Dictionary 에서 call back의 뜻을 알아보았다. 정의들을 보면 빈번하게 중복되는 단어를 볼수가 있다. request 와 return 어떤 요청을하고 그에 따른 리턴을 받는것. 프로그래밍에서의 callback도 동일하다. function sayHello(){ console.log("hello!"); } sayHello(); 이 코드는 sayHello함수의 실행의 주체가 '나' 다. 내가 불렀으니까. function sayHello(){ console.log("hello!"); } setTimeout(sayHello, 3000); 하지만 이 코드는 sayHello함수의 실행주체는 setTimeout함수다. (나는 함수 작성만 했을 뿐.) "setTimeout함수야, 3초후에 ..

this는 가리킬뿐. this는 객체 생성시, 함수 생성시 자동으로 생성되는 변수같은 놈이다.(그렇다고 변수는 또 아니다...) this는 객체를 "가리킬"뿐이다. (자.동.으로) [Javascript] 값을 저장하는 방식, pass by value vs. pass by reference 1. 값을 저장하는 방식 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어들은 값을 변수에 저장하는 방식이 크게 2가지가 있다. 1. 어떤 값을 메모리 공간에 직접 넣고 변수를 할당하는 방법 2. 어떤 값을 저장.. artdev.tistory.com "가리키다" 라는것이 잘 이해가 되지 않는다면 이 글을 보고 이해하고 와야한다. (pass by reference 부분) this는 우리가 강제로 다른것을 할당할수는 없다. ..

git이 변경이력을 저장하려면 일련의 순서를 지켜야 한다. 이 그림만 잘 기억한다면 git의 기본은 안다고 할수 있겠다. git으로 하는 일은 기본적으로 아래와 같다. 워킹 디렉토리에서 파일을 추가,수정,삭제,생성 한다. Staging Area에 있는 파일을 Stage 해서 커밋할 스냅샷을 만든다. 모든 파일을 추가 할수도 있고, 선택하여 추가할수도 있다. Staging Area에 있는 파일들을 커밋해서 git 디렉토리에 영구적인 스냅샷으로 저장한다. 이 일련에 순서에 따라서 깃에 변경이력을 남기는 작업을 하게 되는것이다. 실제로 커밋하는 예제를 보자. 1. 워킹 디렉토리에서 파일을 추가,수정,삭제,생성한다. git을 쓰기위한 기본조건은 워킹디렉토리에 git init 명령어를 사용하는것을 기본 전제로 한..

영화 알라딘을 보면 아그라바의 술탄이 자신의 권력에 도전하는 자파에게 하는말이 있다. "Remember your place, Jafar!" html 과 css는 브라우저에서 시각적인요소를 표현하는 역할을하고 있다. 이번 포스팅에서 할 얘기는 "각자의 일은 각자가 하자" 이다. ... ...내용... 위의 html을 보면 태그를 이용하여 내용에 이텔릭체를 주고 있다. html와 css는 그 역할이 명확하게 정해져 있기 때문에 html이 시각적인 이유로 이텔릭체를 표현할 필요는 없다. 이 부분은 css가 해야할 일 인것이다. mdn의 내용을 보면 그 내용을 알수가 있다. Remember your place! html은 html의 일만, css는 css의 일만, jacascript는 javascript의 일만..

자바스크립트에서 객체(object)를 만드는 방법은 크게 2가지 정도(세분화하면 3가지)가 있다. (더 있으면 댓글로 알려주세여...) 1. 리터럴로 객체 만들기 이 방법은 앞선 object(기본)포스팅에서 다룬적이 있으므로 넘어가겠다. [Javascript] Object(기본,리터럴) 객체(object)는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티(proprty)와 메소드(method)라고 부름)의 집합이다. 1. 선언 curly bracket({})사이에.. artdev.tistory.com 2.1 객체 생성자로 객체 만들기 (function) - ES5 생성자로 객체를 만드는법은 객체지향 프록래밍을 이용하는법이라고 할 수 있겠다. clas..

보통 os에서 파일과 폴더는 gui 방식으로 관리를 한다. (우리가 잘 알고있는 마우스 우클릭으로...) 하지만 리눅스는 gui보다는 cli방식으로 많이 관리한다. server를 사용할때 (혹은 다른 용도일지라도) 보통은 원격컴퓨터를 많이 사용하게 되는데 해당 원격 컴퓨터가 linux os를 많이 사용하게 된다. cli의 명령어가 gui에서의 명령보다 훨씬 더 많은 기능을 가지고 있고 무엇보다 cli를 능숙하게 다루면 gui보다 빠르게 명령을 실행 시킬수가 있다. 기본적인 파일관리와 폴더관리 명령어에 대해서 포스팅하려 한다. 이 명령어가 가장 기본적인 명령어이다. 리눅스의 터미널을 열고 명령어를 하나씩 실행해보자. 1. 디렉토리 이동과 현재 디렉토리 보기 cd(change directory) 상단바를 보..

클로저(Closure) : (공장,학교,병원 등의 영구적인) 폐쇄(되는 상황) - naver 사전 자바스크립트에서 가장 어려운 개념을 말하라면 아마 클로저를 말할것같다. 클로저를 이야기하기 전에, 자바스크립트의 함수는 변수에 저장이 가능하다는것, (함수의 주소값을 가진다는것) 변수의 스코프와 스코프 적용규칙을 알고있다는것 (let, const, var 들의 스코프) 이 2가지만 알고 있으면 그리 어렵지 않다. [Javascript] 변수가 살아가는곳, scope 사람도 사는 반경이 있듯 프로그래밍언어에서 변수는 그 삶의 범위가 있다. scope: the range of subject covered by a book, programme, discussion, etc. 프로그래밍에서의 스코프의 의미는 변수를..

사람도 사는 반경이 있듯 프로그래밍언어에서 변수는 그 삶의 범위가 있다. scope: the range of subject covered by a book, programme, discussion, etc. 프로그래밍에서의 스코프의 의미는 변수를 쓸수있는(사용할수있는) 범위를 말한다. 범위 -> 정해져 있는 range(구간) 이라고 생각하면 편하다. 어디에 변수를 선언하는지에 따라서 변수를 쓸수 있는지 없는지 정해져 버린다. 변수를 선언하는 방법은 이전 포스팅에서 설명을 하였으니 이 부분은 넘어가겠다. [Javascript] 변수와 값(타입) 1.변수 프로그래밍에 있어서 변수는 숫자, 문자와 같은 값들을 저장하는 공간을 의미한다. 선언 프로그래밍 언어는 변수를 선언하지 않으면 표현할수가 없다. 변수의 선..