코딩 192

[JS-기초편] 3.함수(Function)

지금까지 우리가 작성한 모든 코드는 실제로 구조적이지 않습니다. 그저 달랑 한문장이죠. alert("hello, world!"); 이와 같은 코드를 갖는 것은 잘못된 것이 아닙니다. 코드가 단일 명령문으로 구성된 경우 특히 그렇습니다. 하지만 대부분의 경우에는 그렇지 않습니다. 현실 세계에서 사용하는 경우 코드는 이렇게 간단치 않습니다. 예를 들어보겠습니다. 비행기가 이동한 거리를 계산하는 공식을 생각해 봅시다. 학교에서 배운 기억을 되짚어 보면 이동한 거리는 속도와 시간을 곱하여 계산됩니다. 자바스크립트 버전으로 바꿔 보겠습니다. let speed = 10; let time = 5; alert(speed * time); 속도와 시간이라는 두 개의 변수가 있으며 각각 숫자를 저장합니다. "alert"함수..

코딩/Javascript 2020.12.14

[JS-기초편] 2.변수(variable)와 값(value)

JavaScript에서는 우리가 제공하거나 사용하는 모든 데이터는 값을 포함하는 것으로 간주됩니다. 1편에서 배운 아래 예제에서는 "hello, world!"라는 텍스트 값이 "alert" 함수에 전달하는 값을 포함하는 데이터입니다. alert("hello, world!"); JavaScript에게 이러한 단어는 표면 아래에 특정 표현이 있습니다. 그것들은 값(value)으로 간주됩니다. 우리가 그 단어를 입력 할 때 그것에 대해 많이 생각하지 않았을 수도 있지만 JavaScript 세계에서는 모든 데이터가 값(value)으로 간주됩니다. 자, 왜 이것이 중요할까요? 앞으로 자바스크립트에서 우리는 값(value)를 많이 다룰 것이기 때문에 중요합니다. 실수만 하지 않는다면 자바스크립에서 값(value)과..

코딩/Javascript 2020.12.14

[JS-기초편] 1.소개

1. 자바스크립트 소개 HTML은 구조와 내용에 관한 것입니다. CSS는 HTML을 멋지게 만드는 것입니다. 둘을 잘 조합하면 아주 멋진 사이트를 만들 수 있습니다. CSS와 HTML만 사용하여 사이트를 구축해도 멋진 사이트를 만들 수 있지만 그 사이트는 매우 정적입니다. 사용자의 행동에 반응하지 않습니다. 마치 재미없는 TV드라마의 재방송을 계속해서 보는 것과 같습니다. 잠시 동안은 재미있지만 결국 지루해집니다. 오늘날 웹은 정적이 아닙니다. 웹은 HTML과 CSS 자체가 제공 할 수 있는 것 이상의 상호 작용과 커스터마이징 기능을 갖추고 있습니다. 콘텐츠가 살아 나게 하려면 외부의 도움이 필요합니다. 이 때 필요한 것이 바로 자바스크립트(JavaScript)입니다! 2. 자바스크립트는 무엇? Java..

코딩/Javascript 2020.12.13

자바스크립트 웹 스크래핑 맛보기 - 2편

안녕하세요? 1편에 이어 2편에서 자바스크립트로 웹 스크래핑하는 방법에 대해 알아 보겠습니다. https://cpro95.tistory.com/71 자바스크립트 웹 스크래핑 맛보기 안녕하세요? 오늘은 웹 스크래핑 (web scrapping)에 대해 알아보겠습니다. 웹 스크래핑이 왜 필요할까요? 대학 과제나 회사 업무에서 간혹 기초 자료가 필요한 경우가 있습니다. 이럴때 보통 구글 검 cpro95.tistory.com 1편 마지막에서 문제점이 발생됐는데요, 모든 차종 개수와 판매대수 개수가 틀립니다. 다른 차종의 판매대수 css 클래스는 "total_num"인데, "버스/트럭 (현대)" 차종은 판매대수의 css 클래스가 "total_num"이 아닌 그냥 "num"입니다. 그 외 "카운티", "더 뉴 G70..

코딩/Javascript 2020.12.13

자바스크립트 웹 스크래핑 맛보기

안녕하세요? 오늘은 웹 스크래핑 (web scrapping)에 대해 알아보겠습니다. 웹 스크래핑이 왜 필요할까요? 대학 과제나 회사 업무에서 간혹 기초 자료가 필요한 경우가 있습니다. 이럴때 보통 구글 검색을 통해 자료를 찾았어도 만약 그 양이 방대할 경우 일일이 시간 낭비할 수 없습니다. 이럴 때 필요한게 웹 스크래핑인데요, 오늘은 자바스크립트 정확히는 NodeJS로 알아 보겠습니다. 일단 웹 스크래핑 목적이 있어야 되는데요. 2020년 현대기아차 판매실적을 알아 보겠습니다. 국내에서 판매되는 국산차와 수입차 통계 실적을 잘 보여주는 곳이 있습니다. http://auto.danawa.com/auto/?Work=record 2020년 12월 판매실적 | 자동차 백과 : 다나와 자동차 2020년 12월 국..

코딩/Javascript 2020.12.12

C++에서 spdlog 를 활용해서 log를 좀 더 쉽게 해보기

안녕하세요? C와 C++ 코딩을 할 때 간단하게 디버그할 때나 또는 나중을 위해서 로그파일을 남길 필요가 있는데요. 이럴때 필요한 유틸중에 C++ 세계에서는 유명한게 spdlog입니다. github 링크: https://github.com/gabime/spdlog gabime/spdlog Fast C++ logging library. Contribute to gabime/spdlog development by creating an account on GitHub. github.com 이 spdlog 사용법을 알아 보겠습니다. 일단 C++ 컴파일을 위한 세팅을 해보겠습니다. mkdir spdlog-test cd spdlog-test mkdir src mkdir external touch CMakeLists..

코딩/C와 C++ 2020.12.11

자바스크립트 fetch를 이용한 비동기 및 동기방식 프로그래밍의 이해

NodeJS가 나오면서 자바스크립트는 세상을 바꿔놓을 정도의 임팩트를 보였는데요, C/C++ 프로그래머라면 자바스크립트를 처음 접했을 때 비동기 방식의 프로그래밍에 적응이 힘들었습니다. 오늘은 자바스크립트에서 많이 쓰이는 fetch에 대해 알아 보면서 동기식/비동기식에 대해 이해하도록 하겠습니다. 그럼, 먼저 개발 환경을 만들어 볼까요? NodeJS를 이용해서 만들도록 하겠습니다. 터미널에서 다음과 같이 입력하고 필요한 모듈을 설치하도록 합시다. mkdir fetch-test cd fetch-test npm init -y npm install xmlhttprequest --save code . fetch-test 란 폴더를 만들고 npm init으로 초기화 후 xmlhttprequest 모듈을 설치하고 ..

코딩/Javascript 2020.12.11

자바스크립트의 덧셈 연산 완벽 분석

NodeJS, DenoJS, TypeScript 모두 최근 가장 핫한 프로그래밍 언어인데요! 모두 자바스크립트입니다. 자바스크립트가 브라우저에서만 머물다가 NodeJS가 나오면서 본격적으로 유명해지기 시작했는데요. 이제은 웹페이지를 HTML, CSS, Javascript로 만들면 약간 촌스럽다고 해야 하나요? 다들 React, Vue, Angular, Svelte 등등 Javascript Framework을 많이 사용합니다. 그래도 이 모든 Framework의 기본은 자바스크립트인데요. 이번 블로그 내용은 자바스크립트에서의 덧셈 (Addition) (더하기) 에 대해 알아 보겠습니다. 맛보기로 다음 결과를 예상해 보시겠어요? true + [] = ? 어려우시죠? 이제 본격적으로 자바스크립트 덧셈에 대해 ..

코딩/Javascript 2020.12.09

3편, 카카오톡 웹 버전 만들기 (React, Material-UI)

안녕하세요? 2편까지 리액트(React)로 카카오톡 웹 버전이라는 그럴싸한 취미앱을 만들었는데요, 이제 어디서든 쓸 수 있게 웹에 호스팅하는 방법을 알려 드리겠습니다. 먼저 우리의 사이트를 Github 리포지터리에 업로드해야 합니다. Github에 가셔서 새로운 Repository를 만듭니다. 우리의 프로젝트 이름이 kakao-test이니까 이름도 같은 걸로 했습니다. 그럼 다음, 우리의 프로젝트를 Github에 push 해야 겠죠. git add --all git commit -m "kakao-test version 1.0" git remote add origin https://github.com/cpro95/kakao-test.git git branch -M main git push -u origin..

코딩/Javascript 2020.12.07

2편, 카카오톡 웹 버전 만들기 (React, Material-UI)

안녕하세요? 1편에 이어 2편째 쓰고 있는 카카오톡 웹 버전 만들기 (React, Material-UI)입니다. 1편에서는 카카오 디벨로퍼 세팅하는 방법을 알아 보았는데요, 2편에서는 본격적인 코딩을 해보겠습니다. 일단 터미널창에서 다음과 같이 입력합니다. create-react-app kakao-test cd kakao-test yarn start 리액트 앱을 "kakao-test"라는 이름으로 만들고 "yarn start"로 서버를 돌린 상태입니다. 정상적으로 돌아가는 모습은 다음과 같습니다. create-react-app명령어가 없다면 다음과 같이 입력하여 설치하시면 됩니다. npm install -g create-react-app 우리의 리액트 앱이 잘 실행되고 있네요. 그럼 본격적인 코딩에 들어..

코딩/Javascript 2020.12.06