화가 난다...화가나.... 이거 가지고 한두시간은 끙끙거린거 같다...문제의 발단나는 아예 이런식으로 함수를 짜서 collection의 전체 데이터를 불러왔다.근데 다른 것들은 다 잘 불러와졌는데 전체 유저 데이터만 계속 빈배열로 출력됐다.다른 건 잘 되는데 왜 유저

강의를 듣다가 html의 img 자체 속성에서 lazy loading이 있다는 것을 알게 되었다. 마침 넷플릭스 클론코딩(물론 똑같이 만드는 건 아니지만...)을 하면서 이미지를 여러개 써야 하는 상황이 있었어서 적용을 해봤다. 그리고 결과는 성공적이었다. 워낙 영화

비동기처리 🔎 비동기 자바스크립트 Asynchronous Javascript 위의 그림같이 기능 대부분을 외부 API에 의존하며, 외부 API를 호출하면 결과를 콜백으로 전달받는다. 실제 순수 자바스크립트만의 기능은 전체에서 아주 일부분이기 때문에 자바스크립트에서

🔎 자바스크립트의 동작 원리 ✔️ 자바스크립트는 싱글 스레드 언어 싱글 스레드라는 것은 한번에 한가지 동작밖에 처리하지 못한다는 것이다. 이벤트 루프와 스택을 통해 어떤 것을 먼저 처리할 것인지 스케쥴링한다. ✔️ 이벤트 루프 Event Loop 자바스크립트의 동시성(concurrency) 처리 모델의 기본 원리 여러가지 동작을 한꺼번에 처리하려...

클로져는 예전에 공부했다고 생각했는데 다시 떠올리려고 보니까 명확하게 생각이 안난다...😭명확하게 기록해야지!처음 만들어 질 때의 어휘적 범위를 그대로 유지한 함수. 어휘적 범위 바깥에서 해당 범위에 접근할 수 있다. 값을 저장할 변수,1씩 증가시킬 함수를 구현하면

나는 고등학교 때문에 언어(컴퓨터 언어가 아니라 사람 언어다)를 좋아해 대학교도 독일어과로 갔다. 독일어과를 선택한 이유도 그냥 독일이라는 나라에 호기심이 많았고, 또 독일에 가서 한번쯤 살아보고 싶어서다🫢🙄😮.(그리고 실제로 독일에서 1년을 산다.) 미친거다..

정말 계속 삽질하다가 알게 된 뜻밖의 사실이럴 경우 hidden이 전혀 안먹힌다....?!처음에는 css flexbox속성 때문인지 모르고, 오타나 자바스크립트 코드만 계속 보고 있었다... 근데 개발자도구에서 element를 봐도 hidden이 잘 부여가 되고 아무리

저번 시간에 webRTC에 이어 이번에는 Data Channels에 대해 공부해볼 것이다!무언가를 offer하는 socket이 data channel을 생성하는 주체가 되어야 한다. MDN: RTCPeerConnection.createDataChannel()실시간으로

ICE Candidate RTCIceCandidate WebRTC에서 offer와 answer을 모두 받았을 때, 그러면 peer to peer 연결의 양쪽에서 ICE Candidate 이벤트를 실행한다. ICE(Internet Connectivity Establi

저번 시간에 이어 Socket.io의 Adapter 기능에 대해 정리해보려고 한다. ❓ Adapter는 뭔가요 ? > An Adapter is a server-side component which is responsible for broadcasting events

enum은 typescript가 제공하는 기능으로, 열거형으로 이름이 있는 상수들의 집합을 정의한다. 그러니까 이름이 정해져 있는 상수들을 열거한 것들의 집합소라고 보면 된다.상수들을 열거해놓으면 의도를 문서화하거나 구분되는 사례 집합을 더 쉽게 만들수 있다. type

저번 시간엔 websocket을 알아보았다. 저번 포스트에서 websocket보다는 socket.io라는 라이브러리를 쓰면 더 쉽게 양방향으로 통신하고 더 많은 기능을 사용할 수 있다고 썼었다. 오늘은 socket.io가 무엇인지에 대해, 웹소켓과 어떤 차이점이 있는지

❓ nodemon? > nodemon은 Node.js 프로젝트에서 변경 사항이 발생했을 때 자동으로 서버를 재시작해주는 프로그램이다. 계속 ctrl + c로 서버를 종료했다가 켜는 것은 굉장히 불편하기 때문에 그런 상황에서 굉장히 유용한 모니터링 유틸리티이다. 이제

코딩애플 - websocket유저와 서버간의 양방향 데이터 통신이 가능한 컴퓨터 통신 프로토콜이다. 전통적 통신 방식인 HTTP와는 구별된다. 서버와 유저가 데이터를 주고 받으려면 전통적인 방식으로는 http통신이 있다. (자바스크립트의 fetch같은 문법) 전통적인

❓오늘 공부한 내용 타입스크립트 / Typescript로 블록체인 만들기 (노마드코더) ⚙️ 타입스크립트 설정하기 타입스크립트는 어디에 설정해야하고 어떤 것들을 설정해야 하는지를 배웠다. 물론 React나 NextJS같은 프레임워크나 라이브러리를 사용한다면 자동으로

❓ 한페이지 북클럽 앱은 무슨 프로젝트인가요? Demo > 북클럽인 한페이지는 제가 참여하고 있는 책모임입니다. 책을 좋아하는 사람들이 모여 다양한 분야의 책을 읽어봐야 한다는 취지 아래 한달에 한번 만남을 갖고 있습니다. 한달동안 책 한권을 읽고 발제자가 발제문을

자바스크립트 클래스 제대로 이해하기 요즘 노마드코더로 타입스크립트를 공부하고 있는데, Classes and Interfaces이라는 단원이 있다. 현재 이 강의를 들으며 타입스크립트 챌린지도 같이 병행하고 있는데 Geolocation Api에 대한 추상 클래스와 제네

내가 한달 전부터 진행하고 있는 프로젝트가 있는데, 여기서 이런 에러를 만나게 되었다. 저번에도 비슷한 에러를 만났던 것 같은데, 정리를 안했어서 이번에 정리하려고 한다.위는 유저의 프로필 페이지에서 props를 전달받아 현재 이 프로필 정보 페이지에서 수정할 수 있다

오늘 포스트는 Grid Template Areas와 Grid Row, Grid Column을 활용하여 레이아웃을 짜는 방법을 정리해보려고 한다.Grid Template Areas는 세세한 요소까지 아니라 부모 요소들의 레이아웃들을 짤 때 굉장히 유용할 것 같다. 일단

framer-motion은 Variants, Gesture, MotionValues 등 개념만 알고 나면 정말 쉽게 애니메이션 도움을 받을 수 있는 라이브러리다. 정말 다양한 효과를 줄 수 있어서 화려한 효과가 필요한 UI에 자주 애용할 것 같다.