hyungju-lee
Home
study
study
VUE-GUIDE-2
1. working with data
2. multiple vue instances
3. accessing the instance data
4. method
5. directives v-cloak
6. two-way data binding
7. binding attributes
8. outputting raw html (feat. v-html)
9. listening to events
10. passing on data with events
11. event modifiers
12. keyboard events and modifiers
13. v-model modifiers
14. computed properties
15. watchers
16. binding classes
17. binding styles
18. conditional rendering
19. the v-show directive
20. list rendering
21. understanding the role of the key attribute
22. creating a perspective playground
23. copying to the clipboard
24. mounting the vue instance
25. understanding lifecycle hooks
26. using lifecycle hooks
27. virtual DOM
28. understanding reactivity with proxies
29. The vue compiler
30. Introduction to Components
31. Overview
32. Optional Videos in Appendix
33. Introduction to Vite
34. Exploring Vite
35. Understanding SASS
36. PostCSS
37. Installing ESLint
38. Configuring ESLint
39. Webpack
40. Scaffolding a Vue Project
41. Sidebar: Understanding Servers
42. Reviewing the Files
43. Creating Components
44. Child Components
46. Using SASS in Components
47. Communicating Between Components
48. Props
49. The Limitations of Props
50. Emitting Events
51. Validating Props
52. Callback Functions
53. Inserting content with slots
54. Named Slots
55. Dynamic Components
56. Animating with CSS Transitions
57. Fine-tuning Transitions
58. Animating with CSS Animations
59. Animating with JavaScript
60. JavaScript Zoom Animation
61. CSS and JavaScript Transitions
62. Animating a List
63. Fixing the Animation
64. Transition CSS Class Names
65. Setting up the Quiz Application
66. Rendering the Questions
67. Moving between Questions
68. Finishing Touches
69. Exercise: Imposter Syndrome
70. The Next Step
71. Creating a New Project
72. Reviewing the Files
73. Formatting with ESLint and Prettier
74. Adding the Template
75. What is Tailwind?
76. Installing Tailwind
77. Practicing with Tailwind
78. Loading Assets
79. Understanding State
80. Reviewing the Pinia Configuration
81. Splitting the Template info Components
82. Disabling Vue's Rules
83. Working with State
84. Alternative Mapping Functions
85. Understanding Getters
86. Using Getters
87. Closing the Modal
88. Aliases
89. Adding Tabs
90. Setting up Form Validation
91. Registering a Plugin
92. Validation Components
93. Defining Rules
94. Applying Rules
95. Additional Rules
96. Validating Emails
97. Validating Numbers
98. Validating Passwords
99. Dropdown and Checkbox Fields
100. Validating the Form
101. Sidebar: Slot Properties
102. Rendering Multiple Error Messages
103. Default Values
104. Custom Error Messages
105. Validation Triggers
106. Showing Alerts
107. Setting up the Login Form
108. Understanding Authentication
109. Reviewing the Rules
110. Setting up the Firebase SDK
111. User Registration
112. Handling the Response
113. Exporting Services
114. Storing the User Form Data
115. Extra Exercise: Add Another Field
116. Understanding Authentication
117. Logging the user in after Signup
118. Understanding Actions
119. Using Actions
120. Connecting the User with their Data
121. Initializing Firebase First
122. Persisting the User Authentication
123. Setting up the Login
124. Signing Out
125. Sidebar: JSON Web Tokens
126. Understanding Routing
127. Reviewing the Router Configuration
128. Creating Routes
129. History Mode
130. Navigating with Links
131. Custom Links
132. Tailwind Styles for Active Links
133. Naming Routes
134. Setting up 'Catch-All' and Redirect Routes
135. Route Alias
136. Guarding Routes
137. Route Specific Guards
138. Guarding Authentication Only Routes
139. Redirecting after Logging Out
140. Route Meta Fields
REACT-GUIDE-1
1. 리액트를 선호하는 이유
2. JSX, Flux 패턴
3. 최초 버전의 리액트에서 컴포넌트를 렌더링하는 방식
4. 자바스크립트의 동등 비교
4.1 자바스크립트의 데이터 타입
4.2 함수
4.3 클래스
4.4 클로저
4.5 이벤트 루프와 비동기 통신의 이해
REACT-GUIDE-2
1. 공부 주제
2. 리액트란?
3. 리액트를 쓰는 이유
4. 리액트 간단 맛보기
5. 자바스크립트 기본
6. 리액트 기본
7. localhost:5173 화면 소스 보기
8. Component Tree
9. 동적 값 출력 및 활용
10. 동적 HTML Attributes(속성) 설정 & 이미지 파일 로딩
11. Prop(속성)으로 컴포넌트 재사용
12. Props(속성) 대체 문법
13. 컴포넌트 분리 저장
14. 컴포넌트 옆에 컴포넌트 스타일 파일 저장하기
15. 컴포넌트 구성: 특별한 children Prop
16. 이벤트 처리하기
17. 함수를 Prop(속성)의 값으로 전달하기
18. 이벤트 함수에 커스텀 인자 전달하기
19. UI를 업데이터하지 않는 법 - 리액트의 뒷편 살펴보기
20. State(상태) 관리 & Hooks(훅) 사용법
21. 데이터 기반 State(상태) 가져오기 및 출력
22. 조건적 콘텐츠 렌더링
23. CSS 스타일링 및 동적 스타일링
24. 리스트 데이터 동적 출력
25. 리액트 심화 학습 주제
26. JSX를 꼭 사용하지 않아도 되는 이유
27. Fragments(프래그먼트) 사용법
28. 컴포넌트를 분리해야할 때는 언제일까?
29. Feature 및 State 로 컴포넌트 분리하기
30. 내부 요소에 Props 가 전달되지 않을 경우
31. 감싸진 요소에 Props 전달하기
32. 여러 JSX 슬롯 활용법
33. 컴포넌트 타입 동적으로 설정하기
34. 기본 Prop 값 설정
35. 모든 컨텐츠가 컴포넌트에 보관될 필요가 없는 이유
36. 이미지 저장소는 public/ vs assets/
37. 틱택토 게임 첫 단계
38. 개념 복습: 컴포넌트 분리 & 재사용 가능한 컴포넌트 구축
39. 개념 복습: state 활용법
40. 컴포넌트 인스턴스의 분리된 동작법
NODE-GUIDE-1
1_1. REPL
1_2. CommonJS
1_3. module.exports, exports 1
1_4. require
1_5. circular reference
1_6. 노드에서의 this
1_7. module.exports, exports 2
1_8. dynamic import CommonJS
1_9. dynamic import ES Module - Error
1_10. dynamic import ES Module - Success
1_11. ES Module - filename, dirname
1_12. Top Level await
1_13. ES Module, Dynamic Import, Top Level await
1_14. node global 객체 1
1_15. node global 객체 2
1_16. node console 객체
1_17. node timer 객체
1_18. node process 객체
1_19. process.env
1_20. process.env 2
1_21. process.nextTick
1_22. process.exit
1_23. os
1_24. path
1_25. dns
1_26. url
1_27. crypto 단방향 암호화
1_28. pbkdf2
1_29. crypto encrypt 양방향 암호화
1_30. util
1_31. worker threads
1_32. worker threads 2
1_33. worker threads 3
1_34. worker threads primes 1
1_35. worker threads primes 2
1_36. child process
1_37. spawn
1_38. 기타 내장모듈들
1_39. fs - 파일 시스템
1_40. fs - promises
1_41. fs - promises, writeFile
HTTP-GUIDE-1
HTTP
1. HTTP - 웹의 기초
1.1 HTTP: 인터넷의 멀티미디어 배달부
1.2. 웹 클라이언트와 서버
1.3. 리소스
1.3.1. 미디어 타입
1.3.2. URI
1.3.3. URL
1.3.4. URN
1.4. 트랜잭션
1.4.1. 메서드
1.4.2. 상태 코드
1.4.3. 웹 페이지는 여러 객체로 이루어질 수 있다.
1.5. 메시지
1.5.1. 간단한 메시지의 예
1.6. TCP 커넥션
1.6.1. TCP/IP
1.6.2. 접속, IP 주소 그리고 포트번호
1.6.3. 텔넷(Telnet)을 이용한 실제 예제
1.7. 프로토콜 버전
1.8. 웹의 구성요소
1.8.1. 프락시
1.8.2. 캐시
1.8.3. 게이트웨이
1.8.4. 터널
1.8.5. 에이전트
1.9. 시작의 끝 및 추가 정보
2. URL과 리소스
2.1. 인터넷의 리소스 탐색하기
2.1.1. URL이 있기 전 암흑의 시대
2.2. URL 문법
2.2.1. 스킴: 사용할 프로토콜
2.2.2. 호스트와 포트
2.2.3. 사용자 이름과 비밀번호
2.2.4. 경로
2.2.5. 파라미터
2.2.6. 질의 문자열
2.2.7. 프래그먼트
2.3. 단축 URL
2.3.1. 상대 URL
2.3.1.1. 기저 URL
2.3.1.2. 리소스에서 명시적으로 제공
2.3.1.3. 리소스를 포함하고 있는 기저 URL
2.3.1.4. 기저 URL이 없는 경우
2.3.1.5. 상대 참조 해석하기
2.3.2. URL 확장
2.3.2.1. 호스트명 확장
2.3.2.2. 히스토리 확장
2.4. 안전하지 않은 문자
2.4.1. URL 문자 집합
2.4.2. 인코딩 체계
2.4.3. 문자 제한
2.4.4. 좀 더 알아보기
2.5. 스킴의 바다
2.6. 미래
2.6.1. 지금이 아니면, 언제?
2.7. 추가 정보
3. HTTP 메시지
3.1. 메시지의 흐름
3.1.1. 메시지는 원 서버 방향을 인바운드로 하여 송신된다
3.1.2. 다운스트림으로 흐르는 메시지
3.2. 메시지의 각 부분
3.2.1. 메시지 문법
3.2.1.1. 메서드
3.2.1.2. 요청 URL
3.2.1.3. 버전
3.2.1.4. 상태 코드
3.2.1.5. 사유 구절(reason-phrase)
3.2.1.6. 헤더들
3.2.1.7. 엔터티 본문
3.2.2. 시작줄
3.2.2.1. 요청줄
3.2.2.2. 응답줄
3.2.2.3. 메서드
3.2.2.4. 상태 코드
3.2.2.5. 사유 구절
3.2.2.6. 버전 번호
3.2.3. 헤더
3.2.4. 엔터티 본문
3.2.5. 버전 0.9 메시지
VUE-ETC.
1. vue - writable computed
2. vue - undo/redo composable hook (feat. vueuse)
3. vue version 3.3
4. pinia simplified
5. useColorMode (feat. vueuse)
6. useDraggable (feat. vueuse)
7. vue animation library
8. composable functions
9. vuejsforge
10. vue-route-key
11. portal-vue v2
12. vue multi instance
13. accessing the instance data
14. vue-router version 4 beforeEach, beforeResolve, beforeEnter
15. vue-router version 3 beforeEach, beforeResolve, beforeEnter
16. 권한 처리 문제
17. 기존 event handler 실행 전에 어떤 로직을 추가해야된다면..
18. built-in directives v-cloak
19. 2 way data binding
REACT-ETC.
1. router layout
2. react server component
WEBPACK-ETC.
1. webpack version 4 (vue.config.js)
FRAMEWORKLESS-FRONTEND
1. 프레임워크란
2. 렌더링 엔진
3. 웹 컴포넌트 setter / getter / connectedCallback
4. 웹 컴포넌트 attributeChangedCallback
5. 웹 컴포넌트 - 가상 DOM 통합
6. 웹 컴포넌트 - 사용자 정의 이벤트
7. 웹 컴포넌트 - TodoMVC에 웹 컴포넌트 사용
8. 웹 컴포넌트 - 웹 컴포넌트와 렌더링 함수
9. HTTP 요청
10. HTTP 요청 - Todo 리스트 REST 서버
11. HTTP 요청 - 코드 예제
12. HTTP 요청 - XMLHttpRequest
13. HTTP 요청 - Fetch
14. HTTP 요청 - Axios
15. HTTP 요청 - 아키텍처 검토
16. HTTP 요청 - 적합한 HTTP API를 선택하는 방법
17. 라우팅
18. 라우팅 - 프래그먼트 식별자
19. 라우팅 - 프로그래밍 방식으로 탐색
20. 라우팅 - 경로 매개변수
21. 라우팅 - 히스토리 API
22. 라우팅 - 링크 사용
23. 라우팅 - Navigo
24. 라우팅 - 올바른 라우터를 선택하는 방법
25. 상태 관리
26. 상태 관리 - TodoMVC 어플리케이션 리뷰
27. 상태 관리 - 옵저버블 모델
JAVASCRIPT
1. tagged template literal
2. prototype
3. class
4. for await
5. Map
6. Set
7. WeakMap
8. Optional Chaining
9. Nullish coalescing operator
10. http request
11. FormData
12. encodeURIComponent, decodeURIComponent
13. dataset
INTERACTIVE
BLOG
1. 마크업 개발과 프론트엔드 개발
2. Storybook과 Headless Ui Component
ISSUES
1. tabindex, aria-hidden
2. app 설치 여부
MARKDOWN
1. tabs
2. codetabs
FRONTMATTER
WOOWAHAN_JS
GitHub
open in new window
Search
K
#
8. Component Tree
프로젝트 링크
open in new window
Component Tree
Component Tree 는 컴포넌트의 계층 구조를 시각적으로 표현한 것이다.
hyungju-leehyungju-lee