Take Knowledge's Tech & Knowledge Take Knowledge's Tech & Knowledge

Knowledge

• 입문자들을 위한 Vim 공부 처음 시작하기

  Knowledge/ETC 2019. 11. 22. 23:44

  주말마다 SQL 튜닝 강의를 듣고 있는데 Vim Editor를 배워오는 것이 이 주의 과제중 하나였다. 그런데 이것 저것 검색해봐도 이걸 대체 어떻게 시작해야 할지 조차 애매했다. vim은 unix 에디터라는데 윈도우 환경에서 vim을 어떻게 시작해야 할지도 모르겠고.. 그래도 goormide ( https://ide.goorm.io/?plan=ZnJlZQ== )에서 공짜로 리눅스 가상 머신을 만들 수 있던 건 기억나서 일단 리눅스 가상머신부터 만들어보기로 했다. 방법은 간단하다 위의 URI로 들어가서 새 컨테이너 생성을 누르고 소프트웨어 스택은 마음에 드는 걸 선택한 다음에 ( 나는 gradle을 선택했는데 나 gradle 쓰는 법 모른다.. ㅋ ) OS만 Ubuntu로 선택해서 생성하기를 누르면 리눅..

  Read More
• React를 시작해보자! create-react-app으로 React 앱 생성하기! ( js )

  Knowledge/React 2019. 11. 20. 12:43

  먼저 create-react-app으로 react 앱을 생성하기 위해선 npm과 npx 가 설치되어 있어야 한다. 이 부분은 설치 방법을 검색하면 결과가 많이 나오니 따로 설명하진 않겠다. 만약 터미널에 'npm -v' 와 'npx -v'를 입력했을 때 위와 같이 설치된 버전이 출력된다면 설치되어 있는 것이다. - create-react-app npm이 설치되어 있다면 React App을 만드는 두가지 방법이 있다. 하나는 React App을 만들고자 하는 폴더에 가서 터미널에 'create-react-app' 명령어를 입력하는 것. 나머지 하나는 만들고자 하는 상위 폴더에가서 create-react-app react_basic 명령어 폴더명 위와 같은 키워드를 터미널에 입력해 react 프로젝트를 생성..

  Read More
• Javascript ES6 에 추가된 기능 간단 정리

  Knowledge/javascript 2019. 11. 15. 23:01

  ES6에서 추가된 기능 ( String Literal, 객체 비구조화 ( Object Destructuring ), 객체 리터럴 ( Object Literal ), for .. of, Spread Operator, Rest Parameter, Arrow Function, Default Params, includes, let & const, import & export, Classes , Trailing Commas, Map & Set, Async & Await ) 에 대해 공부하고 최대한 간단히 볼 수 있도록 짧게 정리했습니다. 예제 코드에서 주석처리한 부분은 출력 결과고 예제 실습은 https://es6console.com/ 에서 진행할 수 있습니다 - String Literal ES6의 String ..

  Read More
• CSS 클래스명을 정돈해보자 BEM ( Block, Element, Modifier ) 방법론

  Knowledge/HTML & CSS 2019. 11. 14. 15:06

  - BEM BEM은 Block(블럭), Element(요소), Modifier(블럭 또는 요소의 속성)을 활용한 CSS 클래스 작성법이다. - Block Block은 어떤 요소를 담고 있는 컨테이너를 의미한다. 예를 들어 웹이 header, footer, sidebar, article 의 구조로 이루어져 있다면 이런 것들을 block이라 할 수 있다. block은 그냥 block의 이름을 클래스 명으로 적어주면 된다 1 2 3 4 5 6 .block {} /* ex */ .header {} .footer {} - Element element(요소)는 블럭이 포함하고 있는 한 조각을 의미한다. 그렇기 때문에 요소는 블럭의 클래스명을 적고 두 개의 밑줄 표시 (__)를 해준다음 요소명을 붙여주면 된다 1 2..

  Read More
• 반응형 웹 기초 뷰포트(View port) 와 미디어 쿼리(Media Queries)

  Knowledge/HTML & CSS 2019. 11. 13. 16:19

  - 뷰포트 ( View Port ) 본격적으로 뷰포트에 대해 얘기하기 전에 먼저 픽셀에 대해 짚고 넘어갈 필요가 있다. 픽셀은 화면을 구성하는 가장 기본이 되는 단위다. 예를 들어 15인치 모니터의 해상도가 1024 X 768의 라고 하면 수평으로는 1024개의 픽셀이, 수직으로는 768개의 픽셀이 배치되어 있다고 보면 된다. 즉 786,432개의 픽셀로 화면이 이루어진 셈이다. 모바일이 대두되기 전의 웹은 이 정도 수준의 해상도를 기준으로 제작되었다. 문제는 거기서 발생했다. 모바일과 태블릿 등 손 안에 들어오는 작은 디스플에이에 일반 모니터의 픽셀 기준을 적용할 수 없었기 때문이다. 이런 문제를 해결하기 위해 모바일 브라우져에서 시도한 것이 가상 viewport 개념의 도입이다. 처음에는 980px인..

  Read More
• 덱에 대해 알아보자

  Knowledge/Data Structure 2019. 10. 18. 17:15

  - 덱이란? 양쪽 끝 모두에서 자료를 넣고 뺄 수 있는 자료구조. 한 쪽에서만 자료를 넣고 빼면 스택처럼 사용할 수 있고 한 쪽에서 자료를 넣고 한 쪽으로 빼면 큐처럼 사용할 수 있다. 하지만 덱을 사용해야만 풀 수 있는 문제는 거의 없기 때문에 PS에서는 거의 사용되지 않는다 - 주로 사용하는 메소드 addFirst: 덱 앞 쪽에 자료를 넣는 연산 addFirst: 덱 뒷 쪽에 자료를 넣는 연산 removeFirst: 덱 앞 쪽에서 자료를 빼는 연산 removeLast: 덱 뒷 쪽에서 자료를 빼는 연산 getFirst : 덱 앞 쪽에있는 자료를 가져온다 getLast : 덱 뒷 쪽에있는 자료를 가져온다 empty: 덱이 비어있는지 아닌지를 알아보는 연산 자세한 메소드는 1 java.util.Deque ..

  Read More
• TDD 실천법과 도구 - JUnit과 Hamcrest ( + Junit 5 )

  Knowledge/TDD 2019. 10. 16. 00:20

  이 포스팅은 아래 링크에서 확인할 수 있는 "TDD 실천법과 도구" 책을 읽고 정리한 내용입니다. "TDD 실천법과 도구" 책 전체를 PDF 공개합니다. 2010년 6월에 출간되었던 "TDD 실천법과 도구" 책 전체를 PDF로 공개합니다. 책소개: http://naver.me/GaYZCDjD Updated --- - [1장 - 테스트주도개발 Test Driven Development](https://repo.yona.io/doortts/blog/issue/2) - 18.07.18 - [2장 - doortts/blog repo.yona.io 테스트 픽스처의 개념 테스트를 반복적으로 수행할 수 있게 도와주고 매번 동일한 결과를 얻을 수 있게 도와주는 '기반이 되는 상태나 환경'을 의미한다. 일관된 테스트 실..

  Read More
• TDD 실천법과 도구 - TDD ( Test Driven Development )

  Knowledge/TDD 2019. 10. 15. 16:02

  이 포스팅은 아래 링크에서 확인할 수 있는 "TDD 실천법과 도구" 책을 읽고 정리한 내용입니다. "TDD 실천법과 도구" 책 전체를 PDF 공개합니다. 2010년 6월에 출간되었던 "TDD 실천법과 도구" 책 전체를 PDF로 공개합니다. 책소개: http://naver.me/GaYZCDjD Updated --- - [1장 - 테스트주도개발 Test Driven Development](https://repo.yona.io/doortts/blog/issue/2) - 18.07.18 - [2장 - doortts/blog repo.yona.io TDD의 정의 TDD는 제품 코드를 작성하기 전에 테스트 코드를 먼저 만드는 것이다 TDD의 목표 잘 동작하는 깔끔한 코드를 만들기 위해 사용한다 개발에 있어 TDD의..

  Read More