Coding
-
[개발일지] Github Api 연동 App - CommitManager- 2) Express 서버 만들기Coding/Dev.log 2020. 5. 4. 15:51
안녕하세요. 커밋매니저 어플리케이션 개발일지 두번째입니다. 오늘은 Express 서버를 만들어보겠습니다. Express는 node.js에서 인기 많고 흔히 사용되는 프레임워크 중 하나입니다. 바닐라 자바스크립트로, 혹은 다른 프레임워크를 사용하여 만들 수도 있었지만, node.js 서버 개발을 처음 해보는 저이기에 가장 무난한 Express로 시작하도록 하겠습니다. 우선 루트 폴더를 생성해줍시다. express init이라는 명령어를 사용하면 기본 프로젝트 생성에 필요한 디렉토리와 git 설정 등, 여러가지를 한번에 할 수 있습니다. 우선 그 전에, express를 글로벌 옵션으로 설치해 봅시다(node가 기본적으로 설치되어 있다고 가정하겠습니다). $npm install express-generator..
-
[개발일지] Github Api 연동 App - CommitManager- 1) Github Api 파헤치기Coding/Dev.log 2020. 4. 14. 23:01
안녕하세요, 이번 개발일지는 CommitManager라는 앱 어플리케이션에 대한 개발 일지입니다. 아직 배포된 앱도 아니며, 개발 중에 있으며, 완성도가 높은 앱일지는 모르지만, 이번 앱을 제작하며 공부한 내용에 대해 공유하고자 개발일지를 작성하게 되었습니다. 개발 기간이 꽤 길어질 거라고 예상되어, 여태까지 진행한 부분에 대하여 일지를 작성하려고 해요! 기본적으로 CommitManager는 Android(Kotlin) + Node.js(Express)를 사용합니다. 프론트엔드인 Android(Kotlin)은 다른 분이 담당할 예정이고, 저는 Nodejs의 Express 프레임워크를 사용하여 백엔드를 구축할 예정입니다. CommitManager는 유저의 커밋 내역을 Github Api로부터 요청받아 오늘..
-
[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)Coding/React.js 2020. 3. 22. 14:32
안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으..
-
[React] - 17) React 프로젝트에서 api 호출하기Coding/React.js 2020. 3. 14. 00:09
안녕하세요 실로 오랜만의 포스팅입니다.. 그동안 리액트 공부를 꾸준히 해왔으나 프로젝트에 집중하다보니 포스팅이 많이많이 늦어졌습니다. 앞으로는 다시 꾸준하게 포스팅하도록 하겠습니다 ㅠ ㅠ 이번 포스팅에서는 리액트 내부에서 Api를 호출하는 코드를 작성해보도록 하겠습니다. 자바스크립트의 Promise 문법과 매우 연관이 있으며, 사실 api 호출은 백엔드를 사용하여 서버에서 호출한 뒤 다듬어 프론트 단으로 넘겨주 는 방식이 일반적이지만, 지금은 아주 단순한 Github Api를 호출할 것이기 때문에 리액트 내부에서만 작성하도록 하겠습니다. 우선 axios라는 라이브러리를 설치해야 합니다. 이에 대해 잠깐 알아봅시다. axios는 http 통신을 하는데에 있어 가장 인기많고 사용하기 쉬운 편인 자바스크립트 ..
-
[JavaScript] 콜백 함수로 화살표 함수를 전달하기Coding/JavaScript 2020. 1. 21. 21:05
Callback은 비동기 프로그래밍에서 자주 활용되는 방식입니다. 콜백 함수를 활용하면, A 함수의 파라미터로 B 함수를 전달하여, A함수의 작동이 끝나고 나면 B함수를 호출하는 방식으로 작동하게 됩니다. 보다 심도높은 비동기 프로그래밍에서는 복잡한 콜백 구조가 형성되어야겠으나, 간단한 함수의 순서 처리는 보다 간단합니다. ES6 이전의 콜백 함수는 다음과 같은 방식으로 구현할 수 있었습니다. function add (a, b, callback) => { var result = a + b; callback(result); } add(10, 10, function(result) { console.log('파라미터로 전달된 콜백 함수가 계산을 마치고 호출됨'); console.log('%d',result);..
-
[React] - 16) package.json을 이용하여 패키지 정보 옮기기Coding/React.js 2020. 1. 19. 21:26
안녕하세요, 리액트 포스팅이 많이 늦었습니다 ㅠ ㅠ 그동안 토익공부니 스터디니 이것저것 일이 많이 겹치는 동안에 리액트에 시간을 쓸 겨를이 없었습니다..(네다핑) 이제 리액트에서 매우매우 기초라고 될 부분은 라우팅 이전까지 모두 끝냈으니, props와 state 관리를 통하여 아주 간단한 웹 페이지 하나쯤 만드는 것은 가능할 것입니다. 물론 거기에 reactstrap 같은 라이브러리를 사용해준다면 금상첨화겠죠 ! 그런 뜻에서 이번 포스팅에서는 프로젝트의 패키지 정보를 다른 패키지로 옮기는 방법에 대해 알아보겠습니다 ! create-react-app으로 리액트를 설치하면 자동으로 경로에 package.json이 생성됩니다. 이 파일에 프로젝트의 패키지 정보가 저장됩니다. 이건 이전 포스팅에 사용했던 rea..
-
[JavaScript] console 객체Coding/JavaScript 2020. 1. 19. 20:53
console 객체는 전역 객체라고 불리며 코드의 어느 부분에서나 이용할 수 있습니다. 특히 전역 객체들이 그렇듯 프로그램을 만들면서 필요할 때마다 사용할 수 있으며, 당연히 프로그램을 만드는데 도움을 주는 기능을 합니다. console에서 사용하는 기능들은 다음과 같습니다. console 객체 console.log 로그 찍기 console.log('안녕하세요'); console.log('%s', __filename); console.log('%s', __dirname); __filename : 파일의 경로 __dirname : 상위 폴더의 경로 console.time 시간 기록 var result = 0; console.time('duration_sum'); for (var i = 1; i
