반응형

분류 전체보기 489

[VanillaJS] 바닐라JS의 setTimeOut을 이용한 간단한 로또추첨기 만들기

요즘 리액트를 만지다가 기본 바닐라js의 중요성을 다시 한 번 깨닫게 됐다. 마침 리액트 프로젝트를 같이 하고 있는 친구가 중간고사 기간이라 프로젝트를 잠시 중단하겠다고 선언했기 때문에, 나도 그 기간동안 리액트의 기본이 되는 바닐라js를 다시 한 번 공부하는 시간을 가지는 중이다. 그렇게 해서 만들어본게 간단한 로또추첨기이다. 추첨 결과에 해당되는 6개의 볼이 1초씩 간격을 두고 차례대로 뜨며, 마지막으로 보너스에 해당되는 볼이 텀을 두고 뜨게 하는 프로그램이다. 어렵지 않아 초심자들이 바닐라js 감을 익히기에 좋을 듯하여 코드작성과정을 포스팅하려 한다. 개발환경은 vscode이다. 알고리즘 1. 1~45까지의 숫자 중 랜덤하게 7개의 숫자를 뽑는다. 이 때, 7개의 숫자는 중복돼선 안된다. 2. 7개..

JS/VanillaJS 2021.10.11

[211008] 2021년 10월 오랜만에 단거리 3km 달리기

그동안 5km, 7km, 10km 위주로 달리다가 최근에 3km를 달린 적이 없어서 오랜만에 3km 기록 갱신도 해볼겸 3km 달리기를 진행해보았다. 참고로 3km는 군대 체력측정 기준이기도 하므로 군대 체력검정 기준표를 적어보자면 아래와 같다. 군인 남자 3km 달리기 시간 특급 12분 30초 이하 1급 12분 30초 ~ 13분 30초 2급 13분 30초 ~ 14분 30초 3급 14분 30초 ~ 15분 30초 훈련소에서 나의 기록은 3급, 15분 초반대였다. 15분 초반대에, 훈련소 중대 21등이었다.... 우리 중대가 인재가 별로 없었나.. 근데 훈련소에선 어차피 말만 3km고 실제론 2.5~2.8km 정도였던 것으로 기억한다. 실제로 FM으로 3km로 측정하면 대부분 불합격하기 때문이다. 나의 기초..

[BOJ] 백준 3088. 화분 부수기 (Gold V)

쉬울 줄 알았는데 생각보다 헤맨 문제. 관찰의 중요성을 일깨워주는 문제이다. 문제는 아래와 같다. https://www.acmicpc.net/problem/3088 3088번: 화분 부수기 상근이는 K512 뒤쪽에 화분 N개를 놓았다. 태완이는 이 화분을 모두 부수어 버리려고 한다. 화분은 한 줄로 놓여져 있으며, 세 정수가 쓰여져 있다. 태완이가 화분 하나를 깼을 때, 그 화분에 쓰여 www.acmicpc.net 주의할 점은 인접한 오른쪽 화분만 깨뜨리는 것이 아닌, 오른쪽에 있는 화분들 중 숫자가 하나라도 겹치는 화분들은 모조리 깨뜨리는 것이다. 문제를 잘못 읽지 않도록 주의하자. 의식의 흐름 및 해설 처음에는 문제를 잘못 읽어서 인접한 화분만 비교하여 유니온파인드로 같은 숫자일 경우 merge해주어..

PS/BOJ 2021.10.10

[BOJ] 백준 20052. 괄호 문자열 ? (Platinum IV)

괄호 문자열 시리즈 문제 중 하나이다. 문제는 아래와 같다. https://www.acmicpc.net/problem/20052 20052번: 괄호 문자열 ? 괄호 문자열은 '('와 ')'로 이루어진 문자열이고, 올바른 괄호 문자열은 다음과 같이 정의된다. 빈 문자열은 올바른 괄호 문자열이다. S가 올바른 괄호 문자열일 때, (S)도 올바른 괄호 문자열이 www.acmicpc.net 사실 괄호 문자열 문제가 시리즈로 있다는 것을 이 문제로 처음 알았다. 예전에 풀어본 9935번 문자열폭발 문제랑 비슷한 줄 알았는데, 생각해보니 그 문제는 괄호가 아니라 문자열 관련 문제였다. 괄호라고 해서 스택, 카탈란수가 생각나서 비슷하게 생각했나보다. 의식의 흐름 및 해설 처음에는 스택이나 카탈란 수를 떠올렸다. 그러..

PS/BOJ 2021.10.10

[VanillaJS] addEventListener, 콜백 함수 알아보기

이번 포스팅에선 VanillaJS에서 굉장히 많이 쓰이는 addEventListener, 그리고 이벤트리스너 함수에서 빠뜨릴 수 없는 콜백함수에 대해 알아본다. 콜백함수는 바닐라js 뿐만 아니라 js를 사용하는 모든 프레임워크(react, vue, angular, ...)에서 굉장히 중요한 개념이므로 꼭 제대로 알아두어야 한다! addEventListener, 콜백함수 특정 이벤트가 발생했을 경우를 선택해주는 함수이다. 이렇게 용어를 보기만 해선, 전혀 무슨 소리인지 모를 것이기 때문에 바로 예시로 들어간다. input 요소에 글자를 입력할 때마다 현재 입력된 글자가 무엇인지 알려주는 프로그램을 만들어보자. 아래 코드를 보자. document.querySelector('input').addEventLis..

JS/VanillaJS 2021.10.09

[VanillaJS] html 태그를 선택하는 querySelector에 대해 알아보자

사실 프론트 프레임워크를 다룬다면 querySelector는 거의 쓰이지 않지만, 바닐라js를 다룬다면 꽤나 자주 보게 될 querySelector에 대해 알아보자. 프론트 프레임워크를 배울거라고 querySelector 안배우겠다고 하면 안된다. 결국 프론트 프레임워크도 바닐라js 기반으로 만들어진 것이기 때문에 바닐라js를 어려워하면 프론트 프레임워크를 잘 다루지 못할 확률이 매우 높기 때문이다. (내가 그래서 지금 다시 바닐라 복습하고 있다 ㅠㅠ) 그리고 바닐라js에서 querySelector는 꽤나 자주 보이는 함수이다. 우선 이 코드에서 다양한 태그를 선택해볼 것이다. 1번째 참가자 제시어: 입력 F12를 눌러 Chrome Console에서 여러가지 실험을 해볼 것이다. querySelector..

JS/VanillaJS 2021.10.09

[VanillaJS] 확인창, 경고창을 띄우는 prompt, alert, confirm 이용해보기

리액트를 하면서 js 기본을 좀 더 갈고닦아야할 필요성을 느껴서 다시 javascript es2021 기본 강좌를 들어보고 있다. 즉, 이 포스팅은 조현영님의 es2021 강좌의 내용을 듣고 기록하고 복습하는 용도로 작성한 것이다. 모든 강의를 포스팅하진 않을 것 같고, 기록해둘만한 내용이나, 시간이 좀 괜찮을 때 포스팅할 듯하다. 우리가 흔히 인터넷을 하다 보면 이 창을 한번쯤은 봤을 것이다. 우린 이제 javascript로 이 창을 띄우는 방법을 이번 포스팅을 통해서 배울 것이다. 참고로 이 창을 띄우는 방법은 한가지가 아니다. 총 3가지가 존재하는데, 용도에 따라 다 다른 함수를 가진다. Prompt 사용자에게 값을 전달받기 위한 함수이다. 아까 위에서 본 이미지가 바로 prompt 창으로 띄워준 ..

JS/VanillaJS 2021.10.09

[211009] 회원이 작성한 게시글 목록을 JPA 1:N 양방향 매핑으로 구현해보자

사실 이 작업은 댓글 기능까지 어느정도 구현한 후에 진행해보려 했는데, 댓글-게시글, 댓글-회원 테이블에 양방향 연관관계 매핑이 필요할 것 같아 연습 겸 이 작업 먼저 해보았다. https://github.com/kth990303/BOJStudyList/issues/20 회원이 작성한 게시글 수를 볼 수 있게 해주세요 · Issue #20 · kth990303/BOJStudyList 양방향 매핑으로 수정하면 될 듯? 그 전에 연관관계도 다시 공부하면 좋을 것 같습니다. github.com 그동안 단방향 매핑 코드만 짜다가, 오랜만에 양방향을 적용하려 하니까 가물가물해서 헤맸다. 오늘 한 작업은 아래와 같다. Member - Post 양방향으로 수정 회원이 작성한 게시글 목록 메소드 생성 Test Code..

[211007] 프로그래머스 월간 코드 챌린지 시즌3 10월 후기

이번 달에도 어김없이 프로그래머스에서 주최하는 월간 코드 챌린지가 열렸다. 오늘은 어떤 문제가 나올지, 그리고 이번엔 어떤 성적을 얻을지 기대하면서 응시해보았다. https://programmers.co.kr/competitions/1581 JetBrains x 프로그래머스 월간 코드 챌린지 시즌3 접수 21년 08월 23일 11:00 ~ 10월 07일 18:00 테스트 21년 09월 09일 19:30 ~ 10월 07일 22:30 programmers.co.kr 시즌3 9월 후기는 아래 포스팅에서 볼 수 있다. https://kth990303.tistory.com/132 [210909] 프로그래머스 월간 코드 챌린지 시즌3 9월 후기 프로그래머스에선 1년에 두번 꼴로 코드 챌린지가 개최된다. 이번 챌린지..

[211007] 템플릿엔진(thymeleaf)으로 비동기 처리 방식에 대해 고민중이다.

그동안 나는 '소박하지만 그룹입니다' 백준 그룹 멤버들의 공간을 만들기 위한 작인 개인프로젝트를 진행중이었다. 회원, 로그인, 게시글 기능까지 구현을 완료하고 이제 댓글 기능을 구현하려던 중, 문제점이 하나 발생했다. 바로 댓글 기능이다. https://github.com/kth990303/BOJStudyList/issues/18 댓글 기능을 만들어주세요. · Issue #18 · kth990303/BOJStudyList 드디어 댓글 기능을 추가할 차례입니다. Post : Comments 1:N 연관관계로 진행하면 될 것 같습니다. 기한은 11월 초까지이며, 요구사항은 아래와 같습니다. 게시글에 댓글을 작성할 경우, 댓글내용이 github.com 비동기가 필요하다고 느낀 이유? 우리가 흔히 생각하고 있는..

반응형