공부의 발자취를 남기는 블로그

본격적으로, Socket.io를 사용해 볼것이다. Socket.io는 기본적으로 JS에 친화적이라, Node.js와 상성이 잘맞는다. 물론, Spring에 Socket.io를 의존성을 부여해 구현할수 있지만 이에 대해선 지금 다룰게 아닌것같다. 시작하기전에 준비 Node.js 설치, Socket.io 설치 , express서버 설치 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 JS를 설치하면 npm 키워드를 사용할수 있게된다. npm 키워드를통해, npm install socket.io 코드를 입력하여 소켓.io를 설치하자. 또한, 우린 서..

WebSocket... 쓰기전에 webSocket을 왜? 쓰는지부터 파악을해보자! 우리가 갑자기 프로젝트에서 실시간 채팅방 시스템을 만들어야한다!! 여기서 말하는 "실시간"은 나와 상대방이 계속 연결되어 있어야한다. 헌데, 우리가 메세지를 보내는 행위는 POST 요청을 할것이다. HTTP 기초를 배웠다면, 기본적으로 통신은 무상태(stateless) 이다. 이유는 간단한데, 서버와 클라이언트를 계속 유지시키는건 서버낭비가 심하기때문이다. 이런 무상태에서 메세지를 보내면(POST) , 기본적으로 Re-Rendering (새로고침) 이 발생하고, 기존에 적었던 채팅메세지는 전부 홀라당 까먹어버린다. 그리하여, 실시간 채팅 또는 화상통화 같은경우 연결상태(Stateful) 가 되야한다. 그 Stateful를 ..

문제분석 수열이 주어지고, 이 수열에다 -1 , 1 이 반복한 수열을 곱하거나 1, -1을 반복한 수열을 곱한다. 그렇게 나온 수열중에 부분수열이 젤 높은값을 반환하는 문제다. DP , 부분합의 개념이없으면 풀기 힘든문제다. 윗개념을 사용하지않고 푼다면, 모든 부분수열을 구해야하는데, 비효율적이다. 첫 시작을 -1로 곱한것과 , 그대로 시작하는 결과는 매우 달라져서 둘의 경우를 분리하여 보셔야합니다. dp를 2개를 생성해야 한다는 말이죠. dp 작성 dp 기준을 잡는게 제일 중요한데, dp[n] = n까지 탐색한 모든 부분수열중 최댓값으로 잡습니다. 예시 {2,3,-6,1} dp[0] 를 음수로 시작을 해보자면, dp[0] = -2 입니다. dp[1]은 여기서 2가지 선택지가 있습니다. 0번째 숫자를 그..

문제분석 문제 이해는 매우쉽다. 요점은 한 지점을 골랏으면 양옆 지점을 못고른다. 이 규칙을 유지하면서 최대로 얻을수있는 스코어를 반환하면된다. 놀라운건 이 스티커문제와 도둑질문제 로직이 100%같다. (중복문제..) 이해는 쉽게했는데 막상 짜려고하면 참 막막할것이다. DP를 짜는건 늘 새롭고 어렵다.. 하나씩 생각해보자.. 1.첫번째를 고르면 마지막과 두번째를 못고른다. 2.두번째를 고르면 첫번째 와 세번째를 못고른다. 이 2가지 경우가 명백하게 다른 결과를 나타내는걸 푸는 사람 모두가 동의할것이다. 1번루트를 한번 타보자. 예시 {14,6,5,11} 첫번째를 고르면 첫번째는 14이다. 두번째를 고르는건 불가능하다. -> 현재 까지 최고값인 14로 저장해두자. 세번째를 고를수도 있고 안고를수도있다. -..

문제분석 timetable로 주어진 시간을 전부다 숫자로 변환한다. 그 후, 한번 대기열순대로 정렬한다. 버스는 n 개 손님은 m명 배차간격은 t분이다. 9시부터 시작하여 버스 도착시간까지 대기열이 있다면 입장을시켜 출발시킨다. 여기서 문제는 어떻게든 늦게출근하고싶은 주인공을 반환해줘야한다. 어떻게든 늦게출근하고싶으니, 막차시간을 유의하며 보면된다. 막차+ 자리가 남을땐, 막차시간에 탑승을하면된다. 막차 + 자리가 없을땐, 대기열을 유리하게 가져가야하므로, 버스에 마지막에타는사람보다 1분일찍오면된다. 문제풀이 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 32 33 34 35 36 37 38 39 40..

문제분석: 전형적인 레벨 1 문제다. 문제는 원하는 문자열을 만들기위해 주어지는 2개의 단어 컨테이너 벨트가 존재하는데, 이 컨테이너벨트에서 뽑아서 문자열을 만들수있으면 ,Yes 아니면 No를 반환하자. 이 로직은 idx순회만 잘 조절하면 쉽다. 1번째 카드를 사용하면 1번째카드 ids를, 2번째카드를 사용하면 2번카드 idx를 둘다 못움직이면 NO를반환하자. 문제풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class Solution { public String solution(String[] cards1, String[] cards2, String[] goal) { String answer = ""; int idx1=0; int idx2=0; for(..

리액트로 영화 웹 서비스를 클론코딩을 해보려고한다. App.js 이 js에서 REST API를 작성한다. index 페이지는 Home.js로 영화 상세페이지는 /movie/{id} 이다. Home.js 첫 화면을 담당하는 Home.js 코드다. 우선, Home() 함수에 들어갈 loading, movies의 useState()를 작성 그후, getMovies 함수로 JSON 파일을 받아온다. 이는, 로딩이 걸리는 작업이니 asyn await 로 비동기처리를 하였다. useEffect로 getMovies()를 딱 한번만 re-rendering 하게 만들어준다. return 으로 그리고 싶은 HTML코드를 입력하자. 불러온 영화들을 처리하는 로직이다. 불러온 영화들의 JSON 데이터를 파라미터로 받아, 필요..

문제분석: 전형적인 스케쥴링 문제이다. 제일 쉽게 푸는방법은 0시부터 24시까지 1분마다 체크하여 입실,퇴실조치를 하면 편하다. 근데, 이 방법은 효율성이 매우 나쁜건 누구나 아는사실이고 실제로 이방법보다 효율성 좋게 스케쥴링하는방법이 널렸다. 근데 이 문제는 앞선 방법으로해도 풀린다... 그래도 귀찮터라도 효율적인방법으로 접근했다. 전략: 실제로 인간이 스케쥴링했을때 시뮬레이션대로 코드작성 말 그대로, 인간이 스케쥴했을때를 가정하여 짠다. 1. 우선 입실시간순 대로 정렬한뒤, 입실처리를한다. 2. 만약 퇴실시간이 되면 퇴실한다 But, 우리는 1분마다 체크를하는 방법은 포기했으니 다른 방법으로 퇴실시간을 체크한다. Arrange 2 : 이후에 입장할 사람의 입장할 시간보다 적은 퇴실시간은 퇴실조치한다...

문제분석 문제 설명대로 풀어주면된다. 딱히 효율성도 중요하지않아서 정말 하고싶은대로 풀기만하면 된다. 각 문자를 index마다 밀고, 만약 z를 넘으면 다시 돌아오고 , skip해야할 문자는 넘어주는 로직을 작성하자. 일단, 스킵과 문자열을 char형태로 모두 쪼개고, skip은 맵에저장한다. skip문자열의 확인을 map.containsKey로 확인할것이다. 스킵과 'z'를 넘어서는 조건을 입력했다. z를넘어가면 알파벳 갯수 (26개)만큼 빼주고, 스킵이되는 알파벳이면 for문의 i를 하나빼준다. i를 하나 빼주면 다시 계산하는 형태가된다. 전체풀이 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 32..

만들기전에 알아야할 React 개념: React.useState(): -> 이 문법은 하나의 오브젝트와, 그 오브젝트를 수정하는 메소드를 함께제공한다. EX) const [zip , setZip] = React.useState(""); 이걸 이용해서, zip이란 문자를 setZip으로 새로 바꿀수있다. 물론 문자말고 다른것도 가능하다. Fuction App()을 생성하자. toDo로 할것을 저장할 Strng과 할것들을 저장할 toDos 배열을 useState로 오브젝트와, 수정자를 만들어준다. 이벤트로는 onChange, onSubmit을 준비한다. App의 리턴으론 html코드를 작성한다. My to Dos 의 옆에 리스트의 길이를 반영하고, form을통해 할것을 작성해서 리스트의 추가한다. 추가한 리..