코딩 196

자바스크립트 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

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

안녕하세요? 2021년 9월 25일 세번째 업데이트가 있어 글을 수정합니다. 기존의 NextJS + Material-UI에서 NextJS + Chakra-UI로 변경했습니다. 이번에 Chakra-UI로 작업한 결과 느낀 점은 굉장히 가볍고 사용하기 쉬운 UI 라이브러리라는 겁니다. Material-UI 가 생각보다 많이 무겁기 때문에 앞으로는 Chakra-UI를 더 많이 사용할 거 같네요. 그럼. 많은 이용 부탁드립니다. https://kakaoweb.netlify.app/ 카카오톡 웹 카카오톡 웹은 Kakao Developer API와 NextJs, Chakra-UI로 만들어졌습니다. 카카오톡 PC 버전 설치 없이 간단한 메시지와 이미지를 전송할 수 있습니다. kakaoweb.netlify.app 안녕..

코딩/Javascript 2020.12.06

4편, c++ 프로그래밍 CMake 예제

안녕하세요? C++ 프로그래밍 4번째 편입니다. 3편까지 프로젝트의 기본 구성을 TDD (Test-Driven Development)에 맞게 구성했으며, 첫 번째 유닛 테스트까지 완료했습니다. 자 그럼, 원래의 목적인 renamer-youtube-dl에 맞게 라이브러리를 확장해 나가 볼까요? 그럼, TDD에 맞게 테스트를 해야 되는데 어떤 이유 때문에 우리가 이 프로그램을 만드는지 한번 볼까요? https://cpro95.tistory.com/42 유튜브에서 블랙핑크 뮤직비디오 다운 받기 안녕하세요? 유튜브 보시다 보면 꼭 맘에 드는 콘텐츠를 다운로드하고 싶은 욕망이 생길 때가 있는데요. 그래서 나온 게 youtube-dl 이란 파이썬 프로그램이 있습니다. https://github.com/ytdl-or..

코딩/C와 C++ 2020.12.05

3편, c++ 프로그래밍 CMake 예제

안녕하세요? 2편까지 TDD 의 유닛테스트인 myTest.cpp 까지 만들어 봤는데요. 이제 TDD 유닛테스트를 할려면 컴파일해서 실행해 봐야겠죠. 컴파일은 가장 유명하고 많이 쓰는 cmake를 이용하겠습니다. 일단 프로젝트 상단에 최상위 CMakeLists.txt 파일을 만들고, test 폴더에도 CMakeLists.txt 파일을 만들어 자동으로 컴파일 및 유닛테스트가 실행되게끔 할 예정입니다. 일단 최상위 CMakeLists.txt 파일을 만듭시다. CMakeLists.txt 의 기본 내용은 다음과 같습니다. # Example CMake file for compiling & linking a project # # Copyright (c) 2012-2020 cpro95 (cpro95@gmail.com)..

코딩/C와 C++ 2020.12.03

2편, c++ 프로그래밍 CMake 예제

안녕하세요? 1편에 이어 2편에서는 본격적인 개발에 들어가 보도록 하겠습니다. 들어가기 전에 먼저 TDD에 대해 들어보셨는지요? TDD란 Test Driven Development인데 간단히 소개하면 다음과 같습니다. 기존 개발방식은 개발을 먼저 하고 나중에 테스트하는 방식인데 TDD 방식은 테스트 코드를 작성하고 검토해서 최종적으로 개발코드를 작성하는 방식입니다. 우리는 TDD 방식을 따라 개발할 예정입니다. TDD 방식에서 테스트 코드를 작성한다는 얘기는 내가 개발할 라이브러리를 작성한다는 얘기와 같습니다. 1편에서 우리가 원했던 기능은 youtube-dl로 다운로드한 파일의 이름을 변경하는 기능이 있는 나만의 라이브러리를 만드는 것입니다. 그럼 먼저, 디렉터리 구조를 짜야 합니다. C++ 개발에서 ..

코딩/C와 C++ 2020.12.02

1편, c++ 프로그래밍 CMake 예제

안녕하세요? C++로 프로젝트를 구성할 때 Visual Studio 같은 IDE를 많이 사용하는데, 저는 리눅스나 맥에서 콘솔 방식의 CLI 개발 방식을 선호합니다. 이에 구글링으로 배웠던 C++ Console CLI 프로젝트 개발기를 블로그 할 예정입니다. 먼저, 준비할 것은 C++ 컴파일러, cmake, git 이 필요합니다. 위 세가지는 개발자라면 당연히 가지고 있다고 봅니다. 그럼 먼저, 뭔 만들지 생각해 봅시다. 저는 youtube-dl 을 이용해 BLACKPINK 뮤직 비디오를 다운 받아서 보는데 youtube-dl을 이용하면 다운로드한 파일 이름 끝에 이상한 난수 문자가 있습니다. 간혹 유투브에서 playlist를 youtube-dl로 다운로드하면 그 개수가 너무 많아 일일이 파일 이름을 고..

코딩/C와 C++ 2020.12.02

로또에서 제일 많이 나온 숫자는 뭘까요?

예전에 로또 처음 시작했을 때 1등이 몇번 이월되고 당첨금이 계속 쌓이니까 우리 사회나, 직장 내에서도 광풍이 불었었는데요. 오늘은 로또 얘기를 좀 해볼까 합니다. 저는 개인적으로 로또 숫자를 고를 때 첫번째 당첨번호부터 맞추는 걸 좋아합니다. 그래서 통계 좀 내 봤는데요, 역대 로또 당첨번호 중에 첫번째 숫자로 가장 많이 나온 번호가 뭔지 아십니까? 다름 아닌 "1" 입니다. "일"입니다. 무려 첫번째 숫자로 "1"이 나온 경우가 2020년 11월 28일까지 결과를 보면 131번 있었습니다. https://lotto365.netlify.app/ 로또 365 lotto365.netlify.app 그럼 "2" 는 첫번째 숫자로 몇 번 나왔을까요? 결과는 "104"번입니다. 자 그럼, 우리도 통계를 이용해서..

코딩/Javascript 2020.12.01