본문 바로가기
반응형

전체 글81

슬기로운 VScode 생활 1 - Better Comments 알록달록한 걸 좋아하는 나를 잘 아는 회사 동료가 주석을 알록달록하게 할 수 있다며 추천해준 VScode 익스텐션이 있다 그것은 바로 Better Comments!!! Better Comments는 주석을 달 때 주석의 유형에 따라 색으로 구분하여 더 직관적으로 볼 수 있도록 도와주는 VScode 익스텐션이다 주석 앞에 *, !, ?, TODO, // 이런 문자를 넣어 색을 구분한다 * : 설명 - 초록 ! : 주의 - 빨강 ? : 궁금 - 파랑 TODO : 할일 - 주황 // : 취소 - 검회색 이 익스텐션은 사용자 설정 또는 작업 영역 설정에서 구성할 수 있다 "better-comments.multilineComments": true : 멀티라인의 스타일을 지정할지 여부를 제어한다 "better-co.. 2020. 4. 21.
Create React App을 이용하여 React 앱, TypeScript 시작하기(with github) React와 Typescript 조합을 사용하여 개발을 하게 되어 공부하자는 의미로 이 글을 끄적여본다 Create React App를 이용하는 방법에는 여러가지가 있다고 한다 하지만 일단 나는 Create React App 홈페이지에 있는 빠른 시작을 따라해보았다 npx create-react-app my-app cd my-app npm start 여기서 npx는 실수가 아닌 npm 5.2+ 버전의 패키지 실행 도구라고 한다 npm start를 하면 http://localhost:3000/ 가 열린다 하지만 여기서 나는 Typescript와 리액트를 함께 이용해볼까한다 이미 생성된 Create React App에 Typescript를 적용하는 방법이 있지만 나는 작업한 것이 1도 없기에 그냥 새로 만드.. 2020. 4. 7.
11. UI와 API 그리고 문서보는 법 UI(User Interface)와 API(Application Programming Interface)는 공통점과 다른점이 있다. 공통점은 Interface라느 말이 같고 다른 점은 UI는 User로 시작하고 API는 Application Programming로 시작한다는 점이다. UI 사용자를 대면하는 접점이 되는 지점을 포괄적으로 User Interface라 부르고 줄여서 UI라고 한다. 웹브라우저에서의 버튼들이 바로 UI라 할 수 있다. API 주소창에 javascript:alert("Hello world");를 치면 경고창에 Hello world라는 문자가 표시된다. 이처럼 alert() 이라는 명령은 웹브라우저를 제어하기 위한 Interface이며 코드의 형태를 띠고 있기에 Applicatio.. 2019. 5. 14.
10. 모듈 모듈이라는 것을 알아보기 전에 부품이라는 단어의 의미를 생각해볼 필요가 있다. 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 작고 단순한 것에서는 그렇게 필요없지만 크고 복잡한 것에서는 반드시 필요한 것들이 바로 코드의 재활용성 또는 유지보수를 쉽게 할 수 있는 다양한 기법들이다. 이러한 것들을 통해서 어떤 프로그램을 구성하고 있는 수많은 로직들을 재사용할 수 있는 단위로 조각 조각 나눠서 구획화를 시켜 별도의 모듈이라는 형태로 떼어내서 이것을 또 다른 프로그램에 부품으로 사용하는 기법, 또 그 부품들을 모듈이라하고 이를 모듈화라고 한다. 모듈화라는 목적을 이루는 방법 중에 하나가 바로 이 코드를 어떤 취지에 따라 동작하는 방법에 따라 여러개의 파일로 분리해서 사용하는 것이다. 이를 통해 .. 2019. 5. 14.
9. 객체 객체는 영어로는 Object라고 한다. Object라는 객체가 자바스크립트에서 하는 역할은 배열과 유사하다. 배열이 연관되어 있는 데이터들를 담아내기 위한 그릇이라 보면 되는데 객체 역시도 연관되어 있는 데이터들를 담아내기 위한 그릇이라는 점에서 유사하다. 하지만 객체는 인덱스 식별자를 숫자를 사용하는 배열과는 달리 문자도 사용이 가능하다. 다른 언에서 객체에 해당하는 데이타 타입은 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 것이 해당한다. 객체는 객체 지향이라는 프로그래밍 패러다임과 아주 중요하게 연결되는 개념이지만 지금 공부하는 객체는 데이터를 담아내는 그릇으로서 공부하는 것임~ ( 이 부분은 추후 공부!) 객체의 생성 배열을 만드는 방법과 유사.. 2019. 4. 18.
디데이 카운트다운 구현하기(feat. jQuery & moment.js) 디데이 카운트다운을 구현하기에 도전했다.(feat. jQuery & moment.js) 처음에는 어떻게 해야 할지 몰라서 구글링을 열심히 해서 내가 원하던 기능을 구현해보았다. [HTML] D-Day Count [JS] function CountDownTimer(dday) { var countDownDate = new Date(dday).getTime(); var x = setInterval(function() { var now = new Date().getTime(); var distance = countDownDate - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (100.. 2019. 4. 18.
8. 배열 배열이라고 하는 것은 영어로는 Array라고 한다. 배열을 정의한다면 연관되어 있는 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터의 형식이다. 데이터들을 담는 그릇이라 보면 된다. 또한 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 배열의 생성 배열은 대괄호로 시작해서 대괄호로 끝난다([]). 대괄호 안의 데이터는 콤마(,)로 구분하여 나열하면 된다. // 변수로 하나씩 데이터 담기 var member1 = 'egoing'; var member2 = 'k8805'; var member3 = 'sorialgi'; // 배열로 한번에 데이터 담기 var member = ['egoing', 'k8805', 'sorialgi'.. 2019. 4. 16.
chart.js 로 그래프 그리기 chart.js 를 활용하여 그래프를 그리는 작업을 했다. (chart.js 링크: https://www.chartjs.org/) 기본 bar 그래프를 사용하면 좋으려만 디자인은 그렇게 나오지 않았기에..... 그리하여 이번에 작업하면서 사용했던 코드를 끄적여 보려 함~ 설치 GitHub 릴리즈에서 최신 버전 다운로드: https://github.com/chartjs/Chart.js/releases/tag/v2.8.0 CDN 사용: https://www.jsdelivr.com/package/npm/chart.js npm 또는 bower로 설치: https://www.chartjs.org/docs/latest/getting-started/installation.html 이 중에서 하나를 택하여 설치하면 되.. 2019. 4. 11.
7. 함수 함수는 영어로 function으로 프로그래밍에서의 함수는 수학에서의 함수와 같은 개념이지만 수학이 필요한 것은 아니다. 그렇지만 프로그래밍에서 함수의 가장 중요한 역할을 꼽자면 하나의 로직을 재실행할 수 있도록 하는 것으로 코드의 재사용성을 높여준다는 것이다. 재사용성이라는 것은 작성한 코드를 여러 맥락에서 다시 사용할 수 있도록 하는 것이다. 함수의 형식 함수는 function이라는 키워드로 시작한다. function 다음에는 함수의 이름을 지정해주고 그 뒤에는 소괄호()가 나온 다. 소괄호 뒤에는 중괄호{}가 오고 그 안에는 실제 사용할 코드를 작성한다. function 함수명 ([인자...[,인자]]) { 코드 return 반환값 } function numbering() { // numbering이.. 2019. 4. 10.
반응형

티스토리툴바