TodayILearned

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

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

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

CSS나 JavaScript에서 항상 색상을 쓰면서도 그냥 갖다써서 색상에는 정확히 어떤 방식들이 있고 각 방식은 어떤 식으로 표기되는건지 깊게 생각해보지 못했다.그러던 중 JavaScript로 버튼을 클릭하면 배경색과 배경색의 헥스코드가 나타나도록 하는 화면을 구현하

오늘은 자바스크립트의 기초 중의 기초, 기본 문법을 공부해본다. 지금 리액트를 하면서 무슨 자바스크립트 기초 중의 기초를 쓰는거지? 생각할 수도 있겠지만, 공부를 하면 할수록 자바스크립트 기초 지식을 탄탄하게 쌓아둬야 한다는 것을 느끼고 있다. 그리고 일단 머릿속에만

두 개의 React 프로젝트를 완성해보고 나니, 잘 정리된 파일 구조의 필요성을 느끼게 되었다. 파일 구조는 사실 개발자의 개인 취향에 따른다고들 하는데, 일단은 잘 알고, 왜 그렇게 하는지 기준을 세우고 하는 것과 그냥 막연히 나누는 것에는 차이가 있다고 생각한다.

노션이나 블로그에 공부한 것들을 드문드문 적어놓기는 했지만 이제는 매일 공부한 것들을 블로그에 올리는 것이 좋을 것 같다는 생각이 들어 오늘(3월 25일)부터 TIL을 시작한다! 첫번째 TIL은 React에서 공식문서를 읽고 새롭게 알게 된 사실이 흥미로워 작성하게

Flexbox는 이제 개발하면서 css에서 절대 빠질 수 없는 요소가 되었다. 정말 한번도 안쓴적이 없었던 것 같다. 그런데 뭔가 기능이 더 많고 더 다양하게 쓸 수 있는데 매일 쓰는 것만 쓰고 있다는 생각이 들었다. 게다가 부모 컨테이너만 움직이니 자꾸 자식 아이템들

어제 Flexbox를 공부한 것에 이어 오늘은 Grid를 정리해보려고 한다. 사실 Grid의 A to Z까지 상세히 정리하기에는 이미 너무나도 잘 정리된 포스트들과 강의들이 나와있다.특히 1분코딩 이 포스트도 정말 잘 정리되어있고 공부가 많이 되었던 것 같다. 여기서는

input에 글을 작성하면 message content에 나타나게 하는 자바스크립트를 짜보았다. 그러면서 왜 안되지 땀 뻘뻘 흘렸던 뻘짓들을 잊지 않기 위해 이 글을 작성.계속 텍스트를 입력해도 밑에 전달에 안되는 현상이 발생했다.나는 그냥 깊게 생각을 못하고 버튼만

오늘은 웹사이트 제작시 많이 쓰이는 <input>의 요소들을 더 확실히 공부해보고자 한다. 그리고 그렇게 공부한 것을 바탕으로 '설문조사' 폼을 만들어보도록 하겠다.<form>요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.<

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

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

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

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

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

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

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

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

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

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

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

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

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