반응형 전체 글340 [일상] 이러고 있다. RESTful api 공부해볼겸 노드로 주소록을 만들어보았다.밖에 나가서 운동하고 싶은데 미세먼지 때문에 나가지도 못하고집에서 이러고 있다.빨리 날이 좋아졌으면 좋겠다. 2017. 5. 9. [Javascript] Jasmine을 이용한 테스트 코드 작성 Jasmine을 이용한 테스트 코드 작성 테스트 주도 개발(TDD)에서 테스트 코드는 가장 중요한 요소로 손꼽힌다.이러한 테스트코드 작성을 도와주기 위한 툴(라이브러리)은 여러개가 있는데그 중 자바스크립트 관련 도서에서 자주 언급되는 자스민(jasmine)을 사용하는 기본적인 방법에 대해 알아보자 1234567891011121314151617181920212223 test Colored by Color Scriptercs 우선 테스트 코드를 사용하기 위한 기본적인 HTML 코드이다.자스민은 다운받은 후 폴더에 추가하여 사용 할 수도 있지만 개인적으로 이렇게 예제 용으로 작성하는것은 CDN을 선호하므로 위와 같이 자스민 코드의 link를 걸어준다.그리고 하단에 테스트를 원하는 js파일과 이에 대한 테스트 .. 2017. 5. 8. [CSS] 7:3 비율 텍스트 레이아웃 7:3 비율 텍스트 레이아웃 기본적으로 7:3 비율로 이루어진 기본적인 텍스트 레이아웃을만들어보자 12345678910111213141516171819 About me Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officia quod, maxime modi eaque rerum atque blanditiis animi expedita velit quibusdam repudiandae architecto iusto natus soluta sequi ab similique, fugit ut minus. Optio saepe dolorum numquam repellendus commodi ducimus dicta deleniti. Ex do.. 2017. 5. 5. [CSS] 백그라운드 이미지 위에 글씨 배치 - 응용 백그라운드 이미지 위에 글씨 배치 앞선 포스팅에서 백그라운드 이미지 위에 글씨를 배치해보았다.이번에는 좀 더 나아가서 어떻게 border를 넣고, 깔끔하게 보이게 하는지를 알아보겠다. 12345 .img .content{ font-family: 'Archivo Black', sans-serif;}Colored by Color Scriptercs 가장 먼저 기본이 되는 폰트를 수정해주도록 하자구글 폰트에서 마음에 드는 폰트를 골라 넣어주면 되는데,나는 위와 같은 폰트를 골랐다. 1234.img .content{ padding: 30px; border: 5px solid white; }cs 다음으로 외부에 있는 테두리를 넣어준다.padding이 없으면 테두리와 텍스트가 너무 달라 붙기 때문에적당한 간격으로 .. 2017. 5. 1. [CSS] 백그라운드 이미지 위에 글씨 배치 백그라운드 이미지 위에 글씨 배치 요새 웹 디자인은 싱글 페이지에 길게 스크롤 되어 정돈된 이미지를 보여주는것이 많다.이 때 가장 첫번째 보여지는 이미지는 하얀색 글씨에 톤 다운된 이미지를 쓰곤 한다.이를 구현하기 위해 어떤 식으로 CSS를 넣는지 알아보자 디자인적인 부분은 제외하고 기본적인 부분만 구현하도록 하겠다.(물론 나는 전문적인 웹 디자이너나 퍼블리셔가 아니므로 꼼수나 잘못된 코드가 있을 수 있다.) 123456789101112131415 Hello! My name is nunu Colored by Color Scriptercs 우선 기본적인 HTML 코드이다.태그마다 기본적으로 설정되어 있는 스타일을 제거하기위해 reset.css를 적용해준다reset.css 코드는 구글에서 검색하면 제일 상단.. 2017. 5. 1. [알고리즘] Tree - 레드 블랙 트리(Red Black Tree) - 3 Tree - 레드 블랙 트리(Red Black Tree) - 3 12345678910111213141516171819RB-DELETE(T,z) if left[z] = nil[T] or right[z] = nil[T] then y 2017. 4. 24. [NodeJS] 템플릿을 더욱 템플릿 답게 - ejs 템플릿을 더욱 템플릿 답게 - ejs 템플릿을 사전에서 검색해보면, 형판, 견본, 본보기 등의 단어라고 나온다.확실히, PPT 작업을 위해 미리 제작된 견본이나,웹 사이트를 만들때 제공되는 레이아웃 등을 템플릿 이라고 부른다.(구글이나 네이버에 PPT, 웹 템플릿을 검색해보면 예가 나온다.) 웹 프로그래밍에서 템플릿이란큰 틀에서는 웹사이트 전체의 레이 아웃과 디자인일 수도 있지만작은 범위에서는 컴포넌트 단위의 미리 제작된 틀을 의미 한다. 예를 들어 네이버 메인 하단의 카테고리들은 상단의 탭을 클릭하면 같은 형식으로 내용만 바뀌게 된다.이러한 구조 자체를 미리 제작된 '템플릿' 이라고 부르는 것이다. 클라이언트 부분에서는 이러한 구조를 매번 입력하거나 바꿔 줄수 없으므로script 타입을 템플릿으로 만들.. 2017. 4. 23. [꿀팁] mac - 특정 포트를 사용중인 프로세스 확인/종료 mac - 특정 포트를 사용중인 프로세스 확인/종료 node 작업을 프로젝트를 넘나들면서 하다보니이유는 모르겠지만 터미널이 꺼졌는데도 불구하고 port상태는 listen인 경우가 있었다. 이때 특정 포트를 사용중인 프로세스를 점검하고kill 명령어로 종료 시켜야한다. 12sudo lsof -i :"포트 번호"sudo kill -9 "프로세스 번호" cs 첫번째 줄의 명령어를 입력해서 해당 포트를 사용하고 있는 프로세스를 찾는다. 해당 두번째 명령어로 종료시키면, 깔끔하게 프로세스가 사라지게 된다. node를 실행 시키려다가 포트가 이미 막혀서 실패했었는데프로세스를 종료시키고 실행하니올바르게 서버가 열리는것을 확인할 수 있었다. 2017. 4. 23. [Javascript] 비동기(asynchronous) 방식의 동작 원리 비동기(asynchronous) 방식의 동작 원리 웹을 공부하다가, 이벤트 루프 콜백 함수가 비동기 적으로 동작한다고 했을 때내부에서 어떤식으로 돌아가는지 궁금했었다.비동기로 동작하면 그냥 순서에 상관 없이 실행되는구나~ 하면서 넘겼는데멀티 스레드에서는 각 스레드 별로 함수를 실행하면 되는데싱글 스레드 환경에서는 동작 방식이 아무래도 납득이 가지 않았다. 그러던중 다음과 같은 컨퍼런스 영상을 보고 비동기 방식의 동작원리에 대해서 어느정도 생각해보게 되었다. https://www.youtube.com/watch?v=8aGhZQkoFbQ 자바 스크립트에서 함수를 실행 시키면 함수가 call stack에 쌓이며 LIFO(Last in First out)방식으로, 나중에 들어온 함수부터 처리하게 된다.이는 자바.. 2017. 4. 22. 이전 1 ··· 20 21 22 23 24 25 26 ··· 38 다음 반응형
