전체 글

사이드 프로젝트를 마무리하며 정리하기로 했다.짧은 기간이었지만 배운 것과 느낀 것이 참 많았다.1.프로젝트 소개 번호 생성하기를 누르면 로또 5게임의 랜덤한 번호를 생성해준다.여기까지는 코딩을 처음배울 때 많이 만드는 부분이라 뭘 더해야 특별할까해서 몇가지 기능을 추가했다.  이러한 통계기능인데, 추출기로 생성한 번호를 실제 당첨 번호와 비교해서 추출기의 당첨확률이 얼마나 되는지 통계를 만들어주는 기능이다. 이 기능을 만들다 테스트로 만든 계정에서 2등 번호가 나왔다. 이 번호를 샀어야 했는데... 이 기능을 위해 스프링 부트의 `@Scheduler`과 `jsoup`라이브러리를 사용했다. 매주 로또 당첨 번호가 공개되면 자동으로 그 번호를 크롤링해 DB에 넣어준다.그리고 이번주에 생성된 번호와 비교해 당..

replaceAll() 문법String newStr = originStr.replaceAll(String regex, String replacement);`regex` : 변경하고 싶은 문자열에 해당하는 정규 표현식(혹은 그냥 문자열)을 넣어주면 된다.`replacement` : 대체할 문자열을 입력하면 된다. `originStr` 문자열에서 `regex`와 일치하는 부분을 모두 `replacement`로 바꿔준다.replaceAll() 예시public class ReplaceAllExample{ public static void main(String[] args){ String str = "나랑드 사이다 우리는 이제 그런 사이다"; str = str.replaceAll("사이다", ..

키보드를 이용해 간단한 게임을 만들어보고 싶다는 생각이 들었다.그전에 `KeyboardEvent.key`를 활용해 간단한 예제를 구현해 봤다.코드 실행 See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.  HTML 코드 🧍‍♂️ 방향키를 입력해보세요! CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300..

언젠가 누군가의 티스토리에 들어갔는데 마우스를 움직일 때마다 뭔가가 마우스를 따라 온다거나, 꽃가루 같은 것을 뿌리는 것을 경험한 적이 있다.그걸 구현하고 싶었다.코드 실행 See the Pen Monkey Follow by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 🐒 CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; h..

코드 실행 See the Pen money rain by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드 생성 초기화  CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; positi..

코드 예시  See the Pen love is always run by Wi daehyeon (@widaehyeon) on CodePen.CSS 코드body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.container { text-align: center;}.box { width: 300px; height: 300px; background-color: white; border: 2px solid #333; position: relative; overflow: hi..

구현See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.HTML 코드                                                                                    주사위 굴리기`container` div안에 주사위와 주사위 굴리기 버튼을 구현했다.점 9개를 그려놓고 주사위 숫자에 맞게 점들을 보였다 숨겼다 만들 것이다.CSS 코드body {    display: flex;    justify-content: center;    align-items: center;    height: 100vh;    margin: 0;    background-color: #f0f0f0;}.container..

문제설명문자열 `str`이 주어질 때, `str`을 출력하는 코드를 작성해 보세요. 정답코드const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0]; console.log(str)});해설주어진 코드에 `console.log(str)`만 추가하면 되는 문제였다.하지만 자바스크립트 코딩테스트 문제에 익숙하지 않았기 때문에 기본 제공되는 코드..

웹디자인을 흔히 1px의 전쟁이라고들 한다.미적인 요소에 있어서 모든 사람은 인간의 영역을 뛰어넘은 매의 눈을 가지기 마련이며, 매우 뛰어난 직감으로 1px의 오차까지 다 잡아내기 때문이다. 디자인은 웹사이트의 첫인상이다. 디자인이 구린 웹사이트는 아무리 기능이 뛰어나도 예선탈락, 서류광탈 할 가능성이 높아지기 때문에 디자인은 정말 중요하다! 물론 디자이너가 아니라면 한계가 있겠지만 본인의 눈에 보이는 구린 요소 정도는 잡고 가야 할 것이다. 그 과정에서 굉장히 많은 수정이 발생하게 되는데, 이때마다 서버를 껐다 켰다 했다가는 소중한 시간이 서버 재기동에 모두 사용되어 버릴 것이다. 소중한 시간을 절약할 수 있도록 해주는 편리한 기능을 잘 사용해보도록 하자. 바로 `Spring boot devtools`..