내 경우는 실수로 client 밖 경로에 node_modules폴더를 설치해 stomp.js의 모듈을 그곳에서 가져다 쓰고 있었다.client .gitignore안에는 node_modules가 포함 되어 있었지만, client 밖에서는 없었기에 당연히 push가 되고
websocket과 stompJs를 연결하고, roomId를 받아오려고 할 때, 백엔드 측에서 response-header의 location filed로 network tap에서 보면 location으로 값이 오는 걸 확인 할 수 있었다!그런데, post 요청으로 보낸
csr 문제점\-lighthouse 점수가 낮게 나옴. \- 초기 body가 비어있다가 js가 돌면서 렌더링이 되는 방식 \- client에서 초기에 렌더링 해야 할 요소가 많아짐\-메모리 누수가 많음ssr node.js의 발전으로 client와 server를
백엔드의 websocket을 client에 연결하기 위해서 stompJs를 사용했다.우선 stompJS를 설치해야 했다. 타입스크립트를 쓰고 있었기 때문에 옵션을 추가했다.npm install --save-dev @types/sockjs-clientsocketjs를 설
1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다.네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다.세 주사위에서 나온 숫자가 p로 같고 나머지 다른 주사위에서 나온 숫자가
프로그래머스에서 적용한 vanilla-js로 만든 todoList코드다. 구현 조건은 아래와 같았다. 이 외의 보너스 구현사항이 더 있었는데, 아래와 같았다. new 키워드로 함수의 인스턴스를 만들 때 올바른 파라미터가 아닐경우 에러 발생하게 하기 extra da
pixel -ratio가 높을수록 선명하구나! vw는 추천 x 그러나. 이전 고객을 끌고갈 생각이 없으면 상관하지 않고 사용해도 된다. pixel이랑 %만 가지고도 반응형 커버 가능 레티나로 작성해줬으면 이미지 그대로 저장...아니면 2배로 해서 저장? 이게...몬소
class는 component화 하는곳에 쓰이지 않을뿐이지 쓴다..? class문법은 캡슐화하는데 도움이 된다! 초기화에는 constructor 클래스의 인스턴스를 만드는데는 new 상속은 extends와 super 클래스 문법의 예제를 같이 보자! constru
이런 html이 있다고 가정해보자!이 예에서는 ID가 "child"인 요소에 대한 참조를 가져오고 'parentNode' 속성을 사용해서 상위 요소를 가져온다.그런 다음 상위 요소의 id를 콘솔에 기록하고 "parent"를 출력한다.Document 노드와 같이 노드에
pre-onboarding에 제출할 과제를 만들다가,원격저장소를 설정하고,git remote add origin git-urlgit push -u origin master로 설정한게 기억나, -u 명령어에 대해 찾아보았다.u는 upstream의 약자로, 매번 명시적으
vanillaJs, css, html만 사용해서 만들어본 반응형 웹페이지다! 사실 그 전까지 react, styled-component, tailwind-css로 자주 써서 media-query를 쓰는게 익숙하지는 않지만,...이제는 라이브러리보다는 순수 JS,CSS를
vanilla JS와 React의 차이점을 되새겨 보던 와중에,다시 한 번 reflow, repaint의 개념을 되짚어보고 싶다.렌더링 엔진에서 요소를 배치하는 과정렌더 트리가 탐색되고 paint 메서드가 호출, UI 기반의 구성요소를 사용해서 그리는 과정그렇다면 브라
카카오 developers - 내 애플리케이션에 들어간다.키 값이 필요한데, JavaScript 키를 쓰면 된다.
사실 나는 청개구리가 아닐까?예전에는 분명히 공부하는걸 개인 블로그나 메모로 남겼으면 얼마나 편하고 좋아?라고 생각했었는데.. 어느 순간 영상 강의를 들으며 필기하는건 아날로그식 노트 정리가 더 좋다.사실 영상을 들으며 노트필기한 건 많은데, 너무 보기 싫게 적어서..
페이로드란 전송되는 데이터를 의미한다. 데이터를 전송할 때 헤더 등등 다양한 요소들을 보내게 되는데, 데이터 그 자체가 바로 페이로드라고 할 수 있다. 구글링으로 쳐보면, 쉬운 예제를 들어 설명하고 있는데 > 편지지 : payload (수신자에게 전달하고자 하는
page 하위에 section1 / getStaticProps.tsx라는 파일을 만들면,경로대로 이동했을 때 url이 만들어지는 것을 확인할 수 있다.revalidate: 5 의 뜻은서버가 request를 받은지 5초가 지난 후, 다시 이 함수를 실행해서 만약 데이터가
next.js로 프로젝트를 시작하는데 parsing error가 발생했다.Parsing Error: Cannot find module 'next/babel'루트에 .babelrc 파일을 생성하고,코드를 작성해준다.그리고, .eslintrc.json에 아래와 같이 코드를
socket.io로 채팅 방을 구현하고, 방에 들어와서 메세지를 남기는 기능을 구현해보았다.사실 처음에는 websocket을 이용해서 백엔드와 통신하는 것이 목표였는데, 어찌하다보니 socket.io를 통한 js로 client와 server를 내가 구현해보게 되었다!맨