밀래의 코딩북

이번 포스팅은 Proxy의 개념과 Forward Proxy와 Reverse Proxy의 차이점을 알아보겠습니다. 1. Proxy 프록시 서버를 위키 백과에서 찾아보면 아래와 같은 의미를 찾아볼 수 있습니다. 프록시 서버는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로써 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다. 위키 백과의 의미처럼 프록시는 중계 서버입니다.클라이언트와 서버 간 통신을 직접 하지 않고 중계 서버인 프록시 서버를 사용하여 보안, 트랙픽 분산 등.. 여러 장점을 가질 수 있도록 해주는 고마운 서버입니다. 또한 프록시 서..

로또 당첨 번호를 조회하는 API를 사용하여 Get Api를 만들어 보겠습니다. 우선 로또 당첨 번호 API를 알아보고 node.js를 사용하여 Api를 만들어 보겠습니다. 1. 로또 당첨 번호 API 나눔 로또에서 제공하는 로또 당첨 번호 API가 있습니다. https://www.dhlottery.co.kr/common.do?method=getLottoNumber&drwNo=903 회차당 당첨 번호를 가져오는 API입니다. drwNo에 원하는 회차 번호로 API를 호출하면 그 회차의 당첨 번호를 가져올 수 있습니다. API를 호출하면 아래 응답 결과를 받을 수 있습니다. { "totSellamnt": 96962255000, "returnValue": "success", "drwNoDate": "2020..

Express는 node 활용을 도와주는 웹 프레임워크입니다. Express를 사용하면 쉽게 노드 서버 생성이 가능합니다. 1. node, npm 설치하기. Express 프로젝트를 생성하기 전에 노드를 설치해야 합니다. 노드는 노드 공식 홈페이지에서 설치해도 되지만 저는 nvm을 활용하여 설치하는 것을 권장드립니다. 만약, 노드 서버에서 설치하고 싶다면 아래 노드 공식 홈페이지에서 다운로드 받으세요. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org nvm으로 노드를 설치하는 방법은 아래 포스팅을 확인하여 설치하세요. https://firework-..

nvm 활용하여 node, npm 설치하는 방법을 알아 보겠습니다. 1 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 2 설정 설치 후 nvm 명령어가 실행이 되지 않는 다면 환경설정을 해주어야 합니다. nano ~/.bashrc 아래 내용을 복사 후 저장합니다. export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 설정을 로딩 하기 위해 아래 명령어를 실행 합니다. source ~/.bashrc 3 설치 확인 명령어를 쳤을때 아래와 같이 나온다면 성공적으로 설치가 완료 된 ..

이제 로또 번호를 생성하는 알고리즘을 짜보도록 하겠습니다. 생각보다 간단히 로또 번호를 생성하는 알고리즘을 만들 수 있습니다. 1. Javscript 로또 번호 알고리즘 로또 번호를 생성하는 알고리즘은 다양합니다. 선택한 번호로 6개 + 보너스 번호 1개를 뽑아주는 알고리즘이 있을 수 있으며 제외한 번호로 6개 + 보너스 번호 1개를 뽑아주는 알고리즘이 있을 수 있겠죠. 아니면 무조건 46개의 숫자중 7개를 뽑아 보여주는 알고리즘도 있을 수 있습니다. 번호를 선택하는 것 외에 중복된 숫자를 제외하고 7개를 뽑아내는 것은 동일합니다. 그래서 아래 알고리즘은 선택한 번호들 가운데 6개 + 보너스 번호 1개를 뽑아주는 알고리즘입니다. 참고하셔서 자신이 필요한 알고리즘을 만들면 됩니다. 1-1 선택한 번호들 가..

1. Props란 ? 우선 Props를 간단히 설명하면 사용자 컴포넌트의 엘리먼트 인자를 해당 컴포넌트의 단일 객체로 전달하는데 이것이 Props 입니다. function Welcome(props) { return Hello, {props.name}; } const element = ; ReactDOM.render( element, document.getElementById('root') ); 예시로 보면 더욱 쉽게 이해가 가능합니다. 위의 코드는 React 공홈에 있는 예제 입니다. 함수 컴포넌트를 사용하였으며 Welcome 사용자 컴포넌트를 확인 할 수 있습니다. 이때, name 이라는 인자를 선억하였는데 이것을 Welcome 컴포넌트에 전달하는 전달할때 Props 단일 객체로 전달합니다. 그래서 우..

안녕하세요. Commit 합치는 방법을 다양하게 확인해보겠습니다. Commit을 합치는 이유는 Commit History를 단순화하는 것도 있지만 로컬상에서 step by step으로 단계적으로 Commit을 한 뒤 하나의 Commit으로 합치고 싶을 때 사용할 수 있습니다. 그럼 여러 방법으로 Commit을 합치는 방법을 알아볼게요. 1. GitKraken으로 합치는 방법 두개의 Commit을 GitKraken으로 합치는 방법은 상당히 쉽습니다. 두 개의 Commit History를 선택한 후 오른쪽 버튼을 눌러 Squash 2 commits를 선택합니다. Squash 2 commits를 누르면 바로 합쳐지는 것을 확인할 수 있습니다. 하나의 Commit으로 합쳐졌고 Commit Message는 두개에..

이체 Lotto Random 번호를 생성하는 Component를 만들어 기능을 만들어 보겠습니다. 2,3,4 번의 Component를 만들어 보겠습니다. 2 - NumberPlateComonent 3 - NumberPlateBoxComponent 4 - LottoNumberBoxComponent 3가지 기능을 만들어 보겠습니다. 1. NumberPlate NumberPlateComponent는 체크박스와 랜덤 번호를 생성하는 버튼을 담고 있는 Component입니다. lotto 폴더 밑에 number-plate 폴더를 생성한 뒤 4개의 파일을 생성합니다. NumberPlateComponent.js NumberPlateComponent.css NumberPlateBoxComponent.js NumberPl..

간단한 웹사이트 디자인을 완료하였고 어떻게 Component를 나눌지 정해졌기에 이제 Component를 나눠 생성해보겠습니다. 우선, 생성하기전 create-react-app 으로 생성한 기본구조를 알아보고 Components 폴더를 생성한 뒤 Components들을 생성하겠습니다. 1. 기본 폴더 구조 index.js : react app의 가장 먼저 진입점이 되는 js 파일 App.js : index.js에서 root로 렌더링 되는 페이지 1-1. index.js index.js는 엔트리 포인트가 되는 파일입니다. index.js 먼저 살펴보면 다음과 같은 코드를 확인할 수 있습니다. import React from 'react'; import ReactDOM from 'react-dom'; imp..

이번 포스팅에서는 로또 번혼 랜덤 사이트를 만들어보기 위해 아래 기능을 만들어 보려고 합니다. 1. 1~46번까지 사용자가 체크 박스로 번호를 선택하는 기능을 만든다. 2. 사용자가 체크 박스에 선택한 번호로 랜덤으로 6개의 번호를 선택한다. 3. 사용자가 뽑은 랜덤 번호를 히스토리로 보여준다. React는 Component 구조를 가지고 있습니다. 그렇기에 우리가 만들려고 하는 구조를 React 스럽게 모두 컴포넌트로 쪼게야 합니다. 그러기 위해선 바로 코딩을 하기보단 어떤 구조로 Component를 만들지 고민해봐야 합니다. 카카오 오븐을 사용한 사이트 간단 스케치 먼저 화면을 디자인 해보는 것이 중요합니다. 화면을 디자인하실때는 파워포인트나 그림판도 좋습니다. 간단하게 화면을 그려보는 것이 좋죠. ..