HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🐹
이세희팀
/
📚
참고자료/추천자료
📚

참고자료/추천자료

유용한 자료나 영상 올려주세요!
 
스코프 클로져
[스코프 클로져 테코톡]: https://www.youtube.com/watch?v=PVYjfrgZhtU
[딥다이브]: https://poiemaweb.com/js-closure
 
네트워크 기초
[10분 테코톡] 🌯서브웨이의 ARP 프로토콜
🙋‍♀️ 우아한테크코스의 크루들이 진행하는 10분 테크토크입니다. 🙋‍♂️ '10분 테코톡'이란 우아한테크코스 과정을 진행하며 크루(수강생)들이 동료들과 학습한 내용을 공유하고 이야기하는 시간입니다. 서로가 성장하기 위해 지식을 나누고 대화하며 생각해보는 시간으로 자기 주도적인 성장을 지향하는 우아한테크코스의 문화 중 하나입니다. 🌕우아한테크코스란 🌕 우아한테크코스는 일반 사용자용 서비스를 개발하는 회사가 필요로 하는 역량을 가진 프로그래머를 양성하기 위한 교육입니다. 우리의 목표는 자기 주도적으로 학습하고 성장하고 싶은 개발자를 위한 교육을 만드는 것입니다.
[10분 테코톡] 🌯서브웨이의 ARP 프로토콜
https://www.youtube.com/watch?v=KMEPEdsK71I
[10분 테코톡] 🌯서브웨이의 ARP 프로토콜
TCP 3way handshake, 4way handshake
네트워크를 그림으로 쉽게 이해할 수 있는 강의, [네트워크, 그림으로 이해하자] 中 TCP 3-way handshake, 4-way handshake편입니다. 풀 버전 강의 영상과 무료 영상은 댓글에서 확인하실 수 있습니다. '예술하는 개발자' 브런치 https://brunch.co.kr/@artprogrammer64#info #네트워크강의 #네트워크 #그림으로배우는네트워크 #네트워크그림 #사설네트워크 #공용네트워크 #프로토콜 #3-way handshake
TCP 3way handshake, 4way handshake
https://www.youtube.com/watch?v=gPsSLwaFhYo
TCP 3way handshake, 4way handshake
이벤트 루프
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
JavaScript programmers like to use words like, “event-loop”, “non-blocking”, “callback”, “asynchronous”, “single-threaded” and “concurrency”. We say things like “don’t block the event loop”, “make sure your code runs at 60 frames-per-second”, “well of course, it won’t work, that function is an asynchronous callback!” If you’re anything like me, you nod and agree, as if it’s all obvious, even though you don’t actually know what the words mean; and yet, finding good explanations of how JavaScript actually works isn’t all that easy, so let’s learn! With some handy visualisations, and fun hacks, let’s get an intuitive understanding of what happens when JavaScript runs. Transcript: http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html License: For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
https://www.youtube.com/watch?v=8aGhZQkoFbQ
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
[javascript런타임작동방식 비동기와 이벤트루프]: https://hanamon.kr/javascript-런타임-작동-방식-비동기와-이벤트-루프/
Window: requestAnimationFrame() method - Web API | MDN
화면에 애니메이션을 업데이트할 준비가 될 때마다 이 메서드를 호출해야 합니다. 이는 브라우저가 다음 리페인트를 수행하기 전에 애니메이션 함수를 호출하도록 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 웹 브라우저에서는 W3C 권장사항에 따라 디스플레이 주사율과 일치됩니다. requestAnimationFrame()은 배터리 수명과 성능 향상을 위해 대부분의 브라우저에서 백그라운드 탭들이나 숨겨진 <iframe> (en-US)들이 실행될 때 중단됩니다.
Window: requestAnimationFrame() method - Web API | MDN
https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame
Window: requestAnimationFrame() method - Web API | MDN
[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)
자바스크립트에서 비동기 함수가 동작하는 원리에 대해서 공부했다면, Task Queue에 대해 들어보았을 것이다. Task Queue는 Web API가 수행한 비동기 함수를 넘겨받아 Event Loop가 해당 함수를 Call Stack에 넘겨줄 때까지 비동기 함수들을 쌓
[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)
https://velog.io/@titu/JavaScript-Task-Queue말고-다른-큐가-더-있다고-MicroTask-Queue-Animation-Frames-Render-Queue
[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)
[Javascript] 자바스크립트의 호출 스택과 이벤트 루프
자바스크립트의 호출 스택과 이벤트 루프
[Javascript] 자바스크립트의 호출 스택과 이벤트 루프
https://iamsjy17.github.io/javascript/2019/07/20/how-to-works-js.html
[Javascript] 자바스크립트의 호출 스택과 이벤트 루프
TIL29⎟JavaScript : Request Animation Frame
window.requestAnimationFrame(callback)브라우저 화면이 업데이트되기 전에 등록한 콜백 함수를 수행해 애니메이션을 부드럽게 넘겨주는 효과를 준다. 애니메이션을 알리고 다음 repaint가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호
TIL29⎟JavaScript : Request Animation Frame
https://velog.io/@itssweetrain/TIL29JavaScript-Request-Animation-Frame
TIL29⎟JavaScript : Request Animation Frame
 
자료구조 알고리즘 유튜브
[바킹독의 실전 알고리즘 강의]: https://www.youtube.com/watch?v=LcOIobH7ues&list=PLtqbFd2VIQv4O6D6l9HcD732hdrnYb6CY
[엔지니어 대한민국 - 자료구조 알고리즘]: https://www.youtube.com/@eleanorlim
[삼성 알고리즘 강의 사이트]코드없는 프로그래밍
SW Expert Academy
SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요!
SW Expert Academy
https://swexpertacademy.com/main/main.do
SW Expert Academy
https://www.youtube.com/@user-pw9fm4gc7e/playlists?view=50&sort=dd&shelf_id=3
코드없는 프로그래밍
https://www.youtube.com/@user-pw9fm4gc7e/playlists?view=50&sort=dd&shelf_id=2
https://www.youtube.com/@user-pw9fm4gc7e/playlists?view=50&sort=dd&shelf_id=3
알고리즘 잘푸는법
내가 알고리즘 문제를 푸는 방법
내가 알고리즘 문제를 푸는 방법
필자가 알고리즘 문제를 접하고 해결하는 나름의 과정과 절차를 소개해보겠습니다.
내가 알고리즘 문제를 푸는 방법
https://shoark7.github.io/programming/algorithm/how-i-approach-algorithm-from-my-way
내가 알고리즘 문제를 푸는 방법
요약
## 나만의 방식으로 문제 정리하기 형식 - 문제 요약 - 입력 - ex) 변수명 : 자료형 := 변수소개 - 출력 - 어떤 결과여야하는지와 그 자료형은 무엇인지 - 처리 (주요조건) - 주요조건을 적는다. ## 알고리즘 선택 : 입력의 크기를 바탕 입력크기등 조건을 활용하여 알고리즘이 실현 가능한지 확인 ## 문제 분해 및 조합 원문제에서 마치 트리처럼 서브 문제들로 구분하자. 함수에서 함수를 빼내자 (응집도를 높인다, 의존도를 낮춘다)
코딩 문제 접근법
How To Approach A Coding Problem ? - GeeksforGeeks
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
How To Approach A Coding Problem ? - GeeksforGeeks
https://www.geeksforgeeks.org/how-to-approach-a-coding-problem/
How To Approach A Coding Problem ? - GeeksforGeeks
요약
문제 이해하기
  1. 완벽히 이해됐나요?
  1. 누군가에게 문제를 설명할수있나요?
  1. 무엇이 그리고 얼마나 많은 입력이 필요한가요?
  1. 입력에의한 결과는 무엇이어야하나요?
  1. 문제를 모듈 혹은 부분으로 분리할필요가있나요?
  1. 문제를 풀기위한 충분한 정보가 있나요? 없다면 문제다시읽으세요.
완전 탐색 솔루션을 찾아라
완전 탐색은 다른 정답을 찾기전까지 모든 문제의 정답이다.
이 방법은 매우 비효율적이지만, 작은 문제이거나 더 최적화할것이있는지 방법을 찾는 전단계로서 확인할때 좋다.
문제를 나눠라
1. 문제의 다이어그램을 손으로 그린다 2. 문제를 작은 문제로 나눈다 3. 작은 문제들을 푼다 (작은 문제들을 독립적인 함수로 만든다) 4. solution 들을 합친다
https://www.youtube.com/@user-pw9fm4gc7e/playlists?view=50&sort=dd&shelf_id=2
https://www.youtube.com/@user-pw9fm4gc7e/playlists?view=50&sort=dd&shelf_id=3
트라이
[자료구조 알고리즘] Trie(트라이) Tree에 대해서
[선행학습자료] Tree의 종류 https://youtu.be/LnxEBW29DOw Binary Tree의 3가지 순회방법 구현하기 https://youtu.be/QN1rZYX6QaA Binary Heaps (Min-Heaps and Max-Heaps) https://youtu.be/jfwjyJvbbBI
[자료구조 알고리즘] Trie(트라이) Tree에 대해서
https://www.youtube.com/watch?v=TohdsR58i3Q
[자료구조 알고리즘] Trie(트라이) Tree에 대해서
병합정렬
https://www.youtube.com/watch?v=QAyl79dCO_k
// 합치는 부분 함수 def merge(left, right): result = [] i = j = 0 while i < len(left) and j < len(right): if left[i] < right[j]: result.append(left[i]) i += 1 else: result.append(right[j]) j += 1 result.extend(left[i:]) result.extend(right[j:]) return result
트리 순회
[자료구조 알고리즘] Binary Tree의 3가지 순회방법 구현하기
[선행학습자료] Tree의 종류 https://youtu.be/LnxEBW29DOw
[자료구조 알고리즘] Binary Tree의 3가지 순회방법 구현하기
https://www.youtube.com/watch?v=QN1rZYX6QaA&t=207s
[자료구조 알고리즘] Binary Tree의 3가지 순회방법 구현하기
코드 시각화
https://pythontutor.com/render.html#code= class Node { constructor(value) { this.value %3D value%3B this.left %3D null%3B this.right %3D null%3B } } class BinaryTree { constructor(node) { this.root %3D node%3B } preOrderTraverse(node) { if (node !%3D%3D null) { console.log(node.value)%3B this.preOrderTraverse(node.left)%3B this.preOrderTraverse(node.right)%3B } } inOrderTraverse(node) { if (node !%3D%3D null) { this.inOrderTraverse(node.left)%3B console.log(node.value)%3B this.inOrderTraverse(node.right)%3B } } postOrderTraverse(node) { if (node !%3D%3D null) { this.postOrderTraverse(node.left)%3B this.postOrderTraverse(node.right)%3B console.log(node.value)%3B } } } const tree %3D new BinaryTree(new Node(9))%3B tree.root.left %3D new Node(3)%3B tree.root.right %3D new Node(8)%3B tree.root.left.left %3D new Node(2)%3B tree.root.left.right %3D new Node(5)%3B tree.root.right.right %3D new Node(7)%3B tree.root.left.right.right %3D new Node(4)%3B console.log("전위 순회")%3B tree.preOrderTraverse(tree.root)%3B&cumulative=false&curInstr=0&heapPrimitives=nevernest&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=[]&textReferences=false
History API
pks2974.medium.com
https://pks2974.medium.com/jam-stack-개념-정리하기-17dd5c34edf7