전체 글178 this와 this를 지정하는 방식 call, apply, bind에 대해 알아보자 Background const stephen = { age: 12 }; function printAge() { console.log(this.age); } printAge(); // undefined 왜 age가 출력되지 않은걸까? this는 stephen이 아닌 window를 가리키고 있다. 함수는 별도의 this 지정을 안 해주면 window 객체를 가리킨다. this란 함수를 실행한 객체를 가리키는 키워드이다 함수를 호출할 때 결정된다. 전역범위에서 this는 전역객체를 가리킨다 함수에서 호출되면 this는 함수를 호출한 객체를 가리킨다 일반함수 호출이면 : 전역객체 메소드 호출이면 : 메소드가 속한 객체 생성자 함수 호출이면 :생성된 객체 이벤트핸들러에서 this는 이벤트를 발생시킨 요소를 가리킨.. 2024. 4. 20. React로 채팅앱 구현 시 스크롤 맨 아래로 내리는 법 채팅창에서는 내가 메세지를 보낼 때마다, 또는 상대가 나에게 메세지를 보낼 때마다 스크롤이 맨 아래로 내려가게 만들고 싶었다. scrollIntoView element.scrollIntoView() scrollIntoView를 사용하면 element가 사용자에게 보여지도록 스크롤이 된다 따라서 채팅 메시지 맨 밑에 빈 div를 만들어서 ref를 연결해준 뒤, useEffect에서 chatData 상태가 변할 때마다 위의 빈 div로 스크롤해준다. const msgBottom = useRef null; useEffect(() => { if (msgBottom && msgBottom.current) { msgBottom.current.scrollIntoView({ behav.. 2024. 4. 16. React로 WebSocket 통신해보기 (client, server) 사이드 프로젝트에서 채팅을 담당하게 되서 이참에 Websocket을 정리해보려고 한다. (환경은 React + Typescript + NodeJS이다) 웹소켓 클라이언트와 서버 간의 양방향 통신 프로토콜이다 실시간 통신이 가능하다 Server 백엔드분과 통신하기 전에, 로컬서버를 만들어 채팅을 주고 받을 수 있는지 테스팅해보기로 했다. 서버 폴더를 생성하고 server.ts를 생성한다. mkdir websocket_test cd websocket_test npm init -y 그리고 다음 패키지들을 설치한다 npm i ws npm i ts-node-dev npm i --save-dev @types/ws npm i --save-dev @types/node server.ts를 만든후 다음과 같이 작성한다 i.. 2024. 4. 16. [NextJS] React Hydration Error 해결하기 포폴을 nextjs로 만드는 중 위와 같은 에러를 만났다Hydration failed because the initial UI does not match what was rendered on the server 초기 UI와 서버상의 렌더링결과가 match되지 않는댄다 <p data-k.. 2024. 4. 8. [백준] 쇠막대기 https://www.acmicpc.net/problem/10799 여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저의 배치는 다음 조건을 만족한다. 쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓는다. 각 쇠막대기를 자르는 레이저는 적어도 하나 존재한다. 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않는다. 아래 그림은 위 조건을 만족하는 예를 보여준다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향이다... 2024. 3. 14. [AWS] Elastic Ip 삭제 aws 프리티어 EC2를 사용해 토이 프로젝트를 만든지 한달째..VPC 요금이 3달러나 나왔다. VPC 너 뭐냐Virtual Private Cloud의 약어인 VPC는 클라우드 환경에서 가상의 네트워크를 제공하는 서비스이다 찾아보니 주요 기능은 이런 것들이다가상 네트워크 구성서브넷라우팅인터넷 게이트웨이보안 그룹 및 네트워크 ACL가상 사설 클라우드IPv4 및 IPv6 aws입문자로써 자세히는 모르지만 IPv4는 Elastic IP를 생성하면서 설정해봐서 이에 대해 더 찾아봤다. 그리고 이분의 글을 보고 프리티어는 Elastic IP 1개만 무료로 제공한다는 것을 알았다.체크해보니 나는 EIP 2개를 생성했고 1시간당 요금 0.005달러 * 24시간 * 28시간 = 대략 3달러가 나온다 자 이제 안.. 2024. 2. 28. 이전 1 2 3 4 5 ··· 30 다음
