이체 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를 만들지 고민해봐야 합니다. 카카오 오븐을 사용한 사이트 간단 스케치 먼저 화면을 디자인 해보는 것이 중요합니다. 화면을 디자인하실때는 파워포인트나 그림판도 좋습니다. 간단하게 화면을 그려보는 것이 좋죠. ..
로또 번호를 랜덤으로 생성해주는 프로젝트를 만들기 위해 React 프로젝트를 생성해보도록 하겠습니다. 우선 프로젝트를 생성하기전에 node 8.10 혹은 상위 버전 및 npm 5.6 혹은 상위 버전을 설치해야 됩니다. 기본적으로 node를 설치할 때는 node 공식 홈페이지에서 다운로드 후 설치 하곤 합니다. 저는 어플리케이션 마다 node 버전 관리를 하기 위해 nvm을 주로 사용합니다. 이번 프로젝트 생성 포스팅에서는 nvm을 먼저 설치 한 후 React 프로젝트를 생성해 보겠습니다. 1. nvm 및 node 설치하기. (맥 OS) 1-1 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash..
Git Merge와 Rebase의 차이, 아름다운고 깔끔한 Git History 만들기. 0. 서론 그동안 git을 사용하면서 소수의 인원으로 같이 일할때는 push, pull, merge만 사용해도 큰 문제는 없었습니다. git history도 손보지 않아도 될만큼 깔끔 했죠. 하지만 작년 하반기부터 새로운 팀에 합류하면서 8명의 개발자가 하나의 git 저장소를 보며 개발하게 되었습니다. 모두 push, pull, merge만 사용하다보니 git history도 엉망이 되어 가는 것을 볼 수 있었습니다. 그래서 내가 git 기능을 제대로 알지 못하고 간단한 것만 쓰고 있구나 하는 생각이 들었습니다. 그러다 찾아보니 Rebase 기능에 대해 알게 되었습니다. 이 포스팅은 Merge와 Rebase의 차이점..
코딩할때 HashMap을 자주 사용하지만 어떻게 동작 하는지 자세히 알지 못하는 것 같아 정리 해보려고 합니다. 내부적으로 어떻게 동작하는지 살펴보겠습니다. 1. HashMap 사용 방법 Key와 값으로 데이터를 관리하며 키를 이용하여 데이터를 추출 할 수 있습니다. HashMap의 개체생성시에 key와 value의 Type을 선언하며 put 매서드로 객체를 삽입, get 매서드로 객체를 추출합니다. // HashMap 생성 Map map = new HashMap(); // HashMap 데이터 삽입 map.put("펭수", 1); // HashMap 데이터 추출 map.get("펭수") 2. HashMap의 저장방법 HashMap읜 Key, Value를 각각 저장하는 것이 아닌 Entry(Node) C..
백준 1644 문제 정리 글입니다. (최적화된 답은 아니니 참고만 하시기 바랍니다.) 백준 1644문제 소수의 연속함 해당 문제를 풀기 위해서는 두개 단계를 고려 해야 한다. 1. 소수 구하기. 2. 소수의 연속 합으로 주어진 정수를 구할 수 있는지 판단하기. 1. 소수 구하기 소수를 구하기 위해서는 에라토스테네스의 체를 이용하면 된다. 자세한 알고리즘은 아래 글에서 확인 https://firework-ham.tistory.com/8 [JAVA] 소수 구하는 알고리즘 : 에라토스테네스의 체 소수 구하는 알고리즘으로 유명한 에라토스테네스의 체입니다. 고대 그리스의 수학자 에라토스테네스가 만들어 낸 소수를 찾는 방법으로 코딩 알고리즘에서 소수를 구할 때도 이 방법을 사용합니다. 0. 에라토스테.. firew..
소수 구하는 알고리즘으로 유명한 에라토스테네스의 체입니다. 고대 그리스의 수학자 에라토스테네스가 만들어 낸 소수를 찾는 방법으로 코딩 알고리즘에서 소수를 구할 때도 이 방법을 사용합니다. 0. 에라토스테네스의 체를 이해하기. 에라토스테네스의 체는 정말 간단한 알고리즘 입니다. "소수가 되는 수의 배수를 지우면 남은 건 소수가 된다"라고 생각하는 알고리즘입니다. 소수가 무엇인지 찾을 필요가 없으며 2부터 자기 자신을 제외한 배수가 되는 것을 지우면 됩니다. 아래는 위키백과에서 나온 에라토스테네스를 구하는 방법으로 이해하기 쉽습니다. 1. 2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. 2. 소수가 되는 수의 배수를 지우면 남은 건은 소수만 된다 자기 자신을 제외한 2의 배수를 모두 지운다. 남아 ..
EasticSearch에 가장 기본이 된다고 생각하는 3가지에 대해서 한번 정리해보려고 합니다. 본 포스팅은 7.x 버전 이후의 EasticSearch를 기준으로 하고 있습니다. 읽기 쉽게 지금부터는 한글로 일라스틱 서치로 작성하겠습니다. 0. 정리 3가지 요소를 간단히 이야기하자면 아래와 같습니다. Index ( 인덱스 ) : Table Shard ( 샤드 ) : 분산 저장소 Replica ( 복제본 ) : Shard의 복제본 1. 개념 정리 1-1 Index 란? 인덱스(Index)는 테이블 입니다. 6.X 이하 버전에서 인덱스는 데이터베이스로 타입(Type)은 테이블로 설명되었습니다. 하지만 타입을 관리하는 구조에 문제가 있어 7.X 이상부터 인덱스당 타입을 1개로 고정시켰습니다. 또한 이후 버전에..
안녕하세요. 전자공학을 전공했지만 소프트웨어가 좋아 개발자로 일하는 밀래입니다. 2013년 부터 개발자로 일하기 시작하여 현재 8년차 개발자가 되었습니다. 그 동안 여러가지 경험은 있었지만 경험을 글로 남기지 못했다는 생각이 많이 들었습니다. 앞으로 더욱 공부하기 위해 블로그에 공부 내용을 정리 하려고 합니다. 현재 회사에서는 백엔드, 프론트엔드 개발자로 일하고 있으며 서버 관리 또는 DevOps 일도 조금씩 하고 있습니다. 여러면에서 포스팅을 남기려고 하고 있습니다. 혹시 포스팅에 잘못된 내용이나 수정이 필요한 내용을 보신다면 언제든지 댓글 또는 메일 환영합니다. 감사합니다. 메일 : voguebloom@naver.com
- Total
- Today
- Yesterday
- LeetCode 30일 챌린지
- 퍼셉트론
- 넘파이
- CHATGOT
- 에라토스테네스
- Node
- Component
- git
- 파이썬
- Java leetcode
- 30 Day LeetCode Challenge
- LeetCode 알고리즘 공부
- 파이썬 numpy
- numpy
- LeetCode 5월 챌린지
- 버츄얼스튜디오코드
- GPTGOT
- LeetCode 풀이
- Next.js 프로젝트 생성
- vscode
- 노드
- 지도학습
- react
- JavaScript ID 정규식
- Java
- 리엑트
- Python
- 머신러닝
- GPT서비스
- React 프로젝트 생성
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |