[Node.js 강의 정리] Call stack, Event Loop, EventEmitter, child_process, cluster, worker_threads 등에 관하여
·
Node.js
얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com 1. ..
[Node.js 강의 정리] 파일 시스템, TCP/UDP, HTTP, 버퍼와 스트림, 각종 모듈에 관하여
·
Node.js
얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com1. 파..
[Node.js 강의 정리] Node.js, REPL, Promise, async/await, Module, Nodemon에 관하여
·
Node.js
얄코님의 '얄코의 Node.js (Korean ver.)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%EC%96%84%EC%BD%94-node-js?srsltid=AfmBOopKCXPw7NK1HS79aeI2BufjFmy-iOHOM9eHCl2q_BVo1UNRMURr 얄코의 Node.js (Korean ver.) 강의 | 얄팍한 코딩사전 - 인프런얄팍한 코딩사전 | , 🇰🇷 This course is designed for Korean-speaking learners. If you speak English, Japanese, Vietnamese, or any other language, please take twww.inflearn.com1. N..
[Next.js 강의 정리] 서버 액션, Parallel Route, 최적화에 관하여
·
Frontend/Next.js
이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..
[Next.js 강의 정리] App Router에 관하여
·
Frontend/Next.js
이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..
[Next.js 강의 정리] Next.js와 Page Router에 관하여
·
Frontend/Next.js
이정환님의 '한 입 크기로 잘라먹는 Next.js(v15)' 강의를 듣고 정리한 내용입니다.강의 링크: https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOoryPUbZjBwZDQne9kDfuiHCFu7VdxmeCNFtMqj4F58vfjIaezUX 한 입 크기로 잘라먹는 Next.js(v15) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , [임베딩 영상]한 입 크기로 잘라먹는 Next.js | Official Trailler한입 크기로 잘라먹는 Next.js(15+)15시간의 분량으로 Page Router부터 App Router까지💡 Page Router란?Nex..
useRef를 활용하여 stale closure를 해결해보자
·
Intern
주의: 정확하지 않은 서술이 있을 수 있습니다. 컴포넌트 A에서 버튼을 클릭하면 recoil state가 변경되고, Hook B의 useEffect의 의존성 배열에 해당 recoil state가 있어서 Hook B에서 동작이 수행되게 설계를 했었다.하지만 Hook B에서 recoil state의 변경을 잘 감지하지 못하는 경우가 발생했고, 따라서 의도치 않게 작동이 되는 상황이 벌어졌다.1. 왜 recoil state의 변경을 감지하지 못했을까? // Component A const [something, setSomething] = useRecoilState(somethingState); const handleItemClick = (e: React.MouseEvent) => { set..
배경이 따라오는 메모장을 만들기 위해 contentEditable을 사용해보자
·
Intern
사용자가 글을 입력할 수 있는 컴포넌트를 만들려면 보통 input이나 textarea를 활용한다. 디자이너님께서 새로 메모장 디자인을 전달해주셨는데,글이 한 줄일 때는 뒤의 회색 배경이 글자와 딱 맞게 입력해야할 때마다 따라와야 하지만,두 줄 이상일 때부터는 배경이 메모장의 최대 width로 유지되면서 줄 수 만큼 height가 늘어나야했다. 처음에는 textarea를 활용해보았는데, 뒤의 회색 배경이 글자를 따라오게 만드는데 실패했다 (fit-content 속성을 주었음에도 불구하고) 그 다음에는 input을 활용해보았는데, 뒤의 회색 배경이 글자를 따라오긴 하였지만, 글이 두 줄일 때 뒤의 회색 배경이 다음 줄로 넘어가지 않았다. 그래서 div에 contentEditable 속성을 주어 원하는 동작..
모노레포에서 다른 프로젝트로 파일을 옮길 때 조심해야 할 점
·
Intern
현재 인턴으로 근무하는 회사의 웹 프론트엔드 프로젝트는 다수의 프로젝트를 단일 레포지토리에서 관리하는 모노레포 방식을 채택하고 있다. common 프로젝트에 컴포넌트 A가 있었다. 컴포넌트 A가 common 프로젝트에 있긴 했지만 현재 내가 작업하고 있는 프로젝트 B에서 밖에 사용이 안되었고, 프로젝트 B에서 만든 api hook을 활용해 컴포넌트 A에서 데이터를 주고받아야 했기 때문에, 고민 끝에 컴포넌트 A를 common 프로젝트에서 프로젝트 B로 옮기기로 하였다.1. 그냥 drag and drop을 하면 될 것이라 생각했지만컴포넌트 A를 옮길 때 고려해야 될 내용이 있었나 싶었지만, vscode가 알아서 업데이트해주겠지 싶어서 일단은 그냥 drag and drop으로 파일을 옮겼다. 옮기고 나서 v..
[Network] 프로토콜(OSI, TCP/IP), 네트워크 장치에 관하여
·
Study/Network
책 '그림으로 배우는 네트워크 프로토콜 활용'을 읽고 정리한 내용입니다.0. 들어가며 호스트: 네트워크 상의 IP 주소를 가진 컴퓨터노드: 호스트에 네트워크 장치를 추가한 용어 스탠드 얼론: 한 대의 단말기가 독립적으로 존재, 작업자는 차례를 기다려 사용 TSS(time sharing system: 시분할 시스템): 한 대의 컴퓨터를 여러 사람이 사용, 로컬 단말기에서 원격으로 액세스 가능 ARPANET: 세계 최초의 패킷 교환 방식의 네트워크패킷 교환 방식(Packet Switching): 전송할 데이터를 패킷 단위로 나누어 전송하고, 수신한 단말기에서 원래 데이터로 복원하는 방식장점: 필요한만큼만 회선을 이용할 수 있고, 여러 사람이 회선을 공유할 수 있다. 회선 교환 방식: 컴퓨터끼리 통신할 때 ..