https://material.io/https://material.io/design/introduction\* https://materializecss.com/showcase.htmlhttps://namu.wiki/w/%EB%A8%B
https://ui.toast.com/weekly-pick/ko_20200213/#:~:text=%EC%95%84%ED%86%A0%EB%AF%B9%20%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%80%20%EC%9B%90%EC%9E%90(Ato
์์ด์ดํ๋ ์๊ณผ ํ๋กํ ํ์ ์ ๋ํ ๋ชจ๋ ๊ฒ (https://blogs.adobe.com/creativedialogue/design-ko/everything-you-need-to-know-about-wireframes-and-prototypes/
https://www.w3schools.com/cssref/css_units.asp
"๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ "์ด๋ผ๋ ์ฑ ์ ๋ณด๋ฉด์ ๋ฆฌ์กํธ ๊ณต๋ถ์คํฌ๋์ฑ ๋ง๋ค๊ธฐํ๊ณ ์๋๋ฐ ์ด๋ฐ๊ฒ ๋์จ๋นprevet.Default ์์ผ๋ฉดprevent.Default ์์ผ๋ฉด์ด๋ ต์ ํด๋ ์์์ฒ๋ผ ์ด๊ธฐํ ๋จ
https://pro-self-studier.tistory.com/89https://pro-self-studier.tistory.com/10?category=659555https://opentutorials.org/course/2136http
throttle๊ณผ debounce ๋ชจ๋ DOM ์ด๋ฒคํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์คํํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฑ๋ฅ์์ ์ด์ ๋ก JS์ ์์ ์ธ ์ธก๋ฉด, ํน ์ด๋ฒคํธ(event)๋ฅผ ์ ์ด(์ ํ)ํ๋ ๋ฐฉ๋ฒ๊ณผ๋ํ ์ด๋ฒคํธ ํ์์ ์คํ์ผ๋ก ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋ฌด๊ฑฐ์ด ๊ณ์ฐ ๋ฐ ๊ธฐํ DOM ์กฐ๊ฐ๊ณผ ๊ฐ์ ์์ ์ ์์
<a href="
์ด๋ฒคํธ ํจ์์ ๊ฐ๋จํ ์์ ๋ ์๋์ ๊ฐ๋ค. (์ถ์ฒ:MDN) "adddEventListener('์ด๋ฒคํธํ์ ', ํจ์๋ช , false)" ์ด๋ ๊ฒ ์ฐ๋๋ฐ!๋ง์ง๋ง false์ ์ ์ฒด๋ ๋ฌด์์ผ๊น?MDN์์ addEventListener์ ๋ฌธ๋ฒ์ ์ดํด๋ณด๋ ์๋์ ๊ฐ๋ค. ์ ๋ชจ๋ฅด๊ฒ ๋ค.
What will your website look like? (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
https://material-ui.com/api/container/Material UI ์ ์ฉํ๊ธฐ (https://haleyryu.gitbook.io/engineer/frontend/react-x-redux/3.-material-ui)Material
https://reactjs.org/docs/events.html
Building a Cool Horizontal Scroll Interation in React (https://medium.com/dailyjs/horizontal-scroll-animation-fc39ae43cbe5)
Material UI ๋ชจ๋ฌ(Modal) ๋์์ธ ๊ตฌํํ๊ธฐ (https://ndb796.tistory.com/231)
"yarn add ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฆ"์ ํฐ๋ฏธ๋์ ์น๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ค์นํด์ค๋ค.๋ฌธ๋ ๊ถ๊ธํ๋ค๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฆ์ ์ธํฐ๋ท๋๋ฉ์ธ์ฒ๋ผ ์ ์ผํด์ ์ด๋ ๊ฒ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ด๋ฆ๋ง ๋ช ์ํ๋ฉด ๋ค์ด ๋ฐ์ ์ ์๋๊ณ ?!์ด๋ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ? ์ด๋ฆ ์์๋ @๊ฐ ๋ถ๋๋ฐ ์ด๊ฑด ๋ฌด์จ ์๋ฏธ์ผ๊น์์?!
5๊ฐ์ง ๋ฆฌ์กํธ ์ ๋๋ฉ์ด์ ์ฌ์ฉ๋ฐฉ๋ฒ ๋น๊ต (https://medium.com/@minoo/%EB%B2%88%EC%97%AD-5%EA%B0%80%EC%A7%80-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%95%A0%EB%8B%88%EB%A9%94%E
๋ฒ์ญ ๊น์ด ์๋ ๋ฆฌ์กํธ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ถํ๊ธฐ (https://sujinlee.me/webpack-react-tutorial/)ํ๋ก๋์ ๋น๋์ Create-React-App ํ๋ก์ (https://www.it-swarm-ko.tech/ko/reactjs/
Internet Explorer 11์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ๋ ๋์ฐ์ฐ๋ฅผ ์ธ์ํ์ง ๋ชปํด์๋ฆฌ์กํธ ํ๋ก์ ํธ์์ ์คํ๋ ๋ ์ฐ์ฐ์๋ฅผ ์ผ๋๋ ํ์ ํ๋ฉด์ด ๋์จ๋ค!ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ด์! ๋ฐ๋ฒจ๋ก ํด๊ฒฐํด๋ณด์!react, IE์์ ํธํ(ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง) (https://velog.
Styled components not working in IE11
๋ธ๋ผ์ฐ์ ๋ ๋๋ง (https://12bme.tistory.com/140)๋ธ๋ผ์ฐ์ ์ ๋์ (3) - ์น ํ์ด์ง ์ต์ ํ (https://nykim.work/81)์ฃผ์ ๋ ๋๋ง ๊ฒฝ๋ก ์ฑ๋ฅ ๋ถ์ (https://developers.google.com/
๋ฆฌ์กํธ๋ก ๋ง๋ ๋์ ์นํ์ด์งie11์์๋ณด๋ฉด ์์ฐ..๋๋ฌด ๋ชป์๊ฒผ์ด.........๋๋์ฒด ์?!์ฌ๋ฌ ์ฌ์ดํธ๋ค์๊ตฌ๊ธ๊ณผ ie11๋ก ๊ฐ๊ฐ ์ด์ด๋ณด๋ฉด์ ๋น๊ตํด๋ดค๋ค"zum"์ ๊ตฌ๊ธ๊ณผ ie11 ์ด๋ฏธ์ง๊ฐ ๊ฑฐ์ ์ ์ฌ๋ฒจ๋ก๊ทธ๋ ie11์์ ๋ฉ์ธํ๋ฉด์ด ๋ถ๋ถ์ ์ผ๋ก ๊นจ์ง๊ตฌ๊ธ์ ๊ฑฐ์ ์ ์ฌ๋์ ์นํ์ด
css text-align center not working on IE11 (https://stackoverflow.com/questions/49668656/css-text-align-center-not-working-on-ie11)
๋ง์ฐ์ค ์ค๋ฒ(hover) ํจ๊ณผ ์ด๋ฏธ์ง ํ๋ ๊ธฐ๋ฅ (https://uioweb.tistory.com/entry/%EB%B0%95%EC%8A%A4%EC%97%90-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%98%A4%EB%B2%84-%ED%95%A0
img ํ๊ทธ ์๋ฌ์ฒ๋ฆฌ ๋ฐฉ๋ฒ (https://sub0709.tistory.com/126)HTML img src ์ด๋ฏธ์ง ๋งํฌ ์๋ฌ ์ฒ๋ฆฌ - onerror (https://mylife365.tistory.com/119)์ด๋ฏธ์งํ๊ทธ ์ค๋ฅ์ฒ๋ฆฌ (onerror)
์ํ์น์ ๋ฆฌ์กํธ ๋ฐฐํฌํ๊ธฐ์ํ๋ค๐ฅ์ํ์ํ ์ํ์น..............์ฐ๋ถํฌ Apache(์ํ์น) ์ดํด (https://webdir.tistory.com/196)
IE์์ ์๋์ ๋ก๊ทธ ๋ฐ์MIME type issue in InternetExplorer using Proxy (https://stackoverrun.com/ko/q/13141230)
DEVLOG ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ IE ์ด๋ฏธ์ง ๊นจ์งํ์ (https://huurray.github.io/devlog/2018/12/20/css-imgBugInIE/)
JavaScript Collections (https://velog.io/@yesdoing/JavaScript-Collections)
์๋ฆฌ๋จผํธ์ ๋ ธ๋์ ์ฐจ์ด (https://ohgyun.com/333)
https://ko.javascript.info/searching-elements-dom
https://ko.javascript.info/basic-dom-node-properties
https://ko.javascript.info/basic-dom-node-properties
https://ko.javascript.info/basic-dom-node-properties
React์์ ๋จ์ ํ ์คํธ ์์ฑํ๊ธฐ (https://medium.com/@ljs0705/react%EC%97%90%EC%84%9C-%EB%8B%A8%EC%9C%84-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9E%91%EC%84%B1%ED%95%
๊ณจ๋ฒต์ด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Unit testing components using Reactโs new Context API (https://medium.com/@ryandrewjohnson/unit-testing-components-using-reacts-new-context-api-4
MochaJavaScript์์ Unit Testํ๊ธฐ - ์์ด๋ณด๋ง (https://kamang-it.tistory.com/entry/MochaJavaScript%EC%97%90%EC%84%9C-Unit-Test%ED%95%98%EA%B8%B0-%EC%99%95
https://ko.javascript.info/dom-attributes-and-properties
https://ko.javascript.info/modifying-document
Dnote 3 - 2. React - ๊ฐ๋ฐ ํ๊ฒฝ ์ค์ ๋ฐ ๊ตฌ์กฐ ์ก๊ธฐ.(ํ๋ก์ ํธ ๊ตฌ์กฐ์ก๊ธฐ) (https://velog.io/@killi8n/3-2.-React-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95-
์ ์ง๋ณด์์ ํ์ฅ์ฑ์ ๊ณ ๋ คํด์ ํ๋ก ํธ์๋๋ฅผ ๊ฐ๋ฐํด์ฃผ์ธ์. feat ๋์์ด๋ ์์UI/UX ๋์์ธ ๋ป, ์ฐจ์ด์ ์ ๋ฌด์์ผ๊น? (http://blog.wishket.com/uiux-%EB%94%94%EC%9E%90%EC%9D%B8-%EB%9C%BB-%EC%B0%A8%
https://community.airtable.com/t/too-many-re-renders/31671
https://jaroinside.tistory.com/20
์์๊น์ง ์ชผ๊ฐ ๋ค....?!์ปดํฌ๋ํธ๋ฅผ ์ด๋๊น์ง ์ชผ๊ฐ์ผํ ๊น?!์ปดํฌ๋ํธ๋ฅผ ์ชผ๊ฐฌ์ผ๋ก์จ์ ํจ์ฉ/ํธ๋ฆฌํจ๊ณผ ์ ์ง๋ณด์์ ์๊ด๊ด๊ณ?!
Storybook์ ๋ค์ํ Addon๊ณผ ํจ๊ป ํ์ฉํด๋ณด๋ฉด์ ์ฌ์ฉ๋ฒ ์ ๋ณตํ๊ธฐ (https://velog.io/@velopert/start-storybook)Storybook ์ ๋ฌธ ๊ฐ์ด๋ (https://hyunseob.github.io/2018/01/08
์ค์ฉ์ ์ธ ๋ฆฌ์กํธ ํ ์คํธ ์ ๋ต (https://velog.io/@sdong001/%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A0%8
https://heropy.blog/2019/04/24/html-css-starter/
๋ฐ์ํ์ ์ํ ๋ถํธ์คํธ๋ฉ
์ค๋ ๋ถํธ์คํธ๋ฉ๊ณผ ๋ฆฌ์กํธ์ ์กฐํฉ์ ์ฐ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๊ฐ ๊ถ๊ธํด์ ๋ฌผ์ด๋ดค๋ค๊ฐํ๋จ๋์ด ์ถ์ฒํด์ค ant design์ดํด๋ณด์ :-)https://wndtlr1024.tistory.com/entry/1-4-Ant-design-%EC%A0%81%EC%9A%A9https&#
React๋ฅผ ์ด์ฉํด ์ฌ์ฌ์ฉ์ฑ์ ๊ฐ์ถ ๋์์ธ ์์คํ ๊ตฌ์ถํ๊ธฐ (https://code.tutsplus.com/ko/tutorials/build-a-reusable-design-system-with-react--cms-29954)
์ฌ์ฌ์ฉ?!์ฌ์ฌ์ฉํ๋ฉด ๋ญ๊ฐ ์ข์๊ณ ์ผ?์ฑ๋ฅ์ ์ผ๋ก ์ข์ ๊ณ ์ผ?์ฝ๋๊ฐ ๊ฐํธํด์ง๋ ๊ณ ์ผ?๋ชจ์ผ๋ชจ์ผ?useCallback (https://developer-alle.tistory.com/310)https://react.vlpt.us/basic/18-useCallb
2020๋ ๊ณผ ์ดํ JavaScript์ ๋ํฅ - JavaScript(ECMAScript) (https://d2.naver.com/helloworld/4268738)2020๋ ๊ณผ ์ดํ JavaScript์ ๋ํฅ - WebAssembly (https://d
์ค๋ ํ์ ์คํฌ๋ฆฝํธ ๋ฐฐ์ฐ๊ณ ์๋๋ฐ..๋๋ฌด ์ฌ๋์ค๋ฝ๋ค...๐์๋์ ์บก์ณ๐์ ์ธ๊ณ๋ค.... ๐
์ด๋ค ๋ณ์์ ์ํ๊ฐ ์๋ค์ํ๋ฅผ ๊ด๋ฆฌํด์ผํ๋ค.์๋ํ๋ฉด ์ด ์ํ์์ ๋ฐ๋ผ์ ์ปดํฌ๋ํธ์์ ๋ ๋๋๋ ๋ฐ์ดํฐ๊ฐ ๋ฐ๋์ด์ผํ๋ค.๊ทธ๋ฆฌ๊ณ ๋ณ์์ ๋ณ์๋ค์ ์๋ก์ ์ํ์ ์ํฅ์ ์ค๋ค.๋ฐฉ๋ฒ์ํ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ: useStateuseState๋ฅผ ์ต์์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํด์ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ํ
https://haruair.github.io/flux/docs/overview.html
์ํ ๊ฐ๋ฐ์๋ถ์ด ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฐ์ดํฐ ๊ทธ๋ํ๋ฅผ ๋ง๋ ๋ค๊ณ ํ๋ค.์ด๋ป๊ฒ ์๊ธด ๊ทธ๋ํ๋ฅผ ๋ง๋ค ์์ ์ด๋๊ตฌ ๋ฌผ์ด๋ดค๋๋d3๋ฅผ ์ด์ฉํด์ ์๋์ ๊ทธ๋ํ๋ฅผ ๋ง๋ค ๊ฒ์ด๋ผ๊ณ ํ๋ค.์ด ์ต์จํ ๊ทธ๋ํ๋! git commitํ๊ฐ ๋ ์ฌ๋๋คใ ใ ใ ๊ทธ๋ํ์ด๋ฆ์ด heatmap์ด๊ตฐใ ใ ๋ง์ด๋๋ค.he
์๋น์ค ์์ปค๋ฆฌ์กํธ ์์ปค์น ์์ปค์์ปค์์ปค์์ปคA Simple Introduction to Web Workers in JavaScript (https://medium.com/young-coder/a-simple-introduction-to-web-workers-in-
styled component ์ฐ๋ฉด div์ ์ผ ํธํ๋ค๊ทธ๋ฐ๋ฐsemanticํ๊ฒ html์ ๋ง๋ค๋ ค๋ฉด๊ฐ ํ๊ทธ๋ฅผ ๋ฌธ๋งฅ์ ๋ง๊ฒ ์จ์ผํ๋๋ฐ....?!?!?!
https://validator.w3.org/
https://jercy.tistory.com/8
๋ฐฉ๋ฒ1. ์ธ๋ผ์ธ ์ ์ฉ ๋ฐฉ๋ฒ2. embedded ๋ฐฉ๋ฒ ๋ฐฉ๋ฒ3. ์คํ์ผ ๋งํฌ ์ฝ์ ๊ทธ๋ผ ์ฐ์ ์์๋ ์ด๋ป๊ฒ ๋จ? ์ธ๋ผ์ธ > stylesheet ๋งํฌ > embedded
๊ฐ๋ณ์ ์ธ state๋ค์ด ๋ณํ ๋ ๋ง๋ค ์๋ก์ ์ํ์ ์ํฅ์ ์ค๋ค...state๋ค์ด ๋ ๋ฆฝ์ ์ด์ง ๋ชปํ๊ณ dependency๊ฐ ์๊ธด๋ค...๋ ๋ฆฝ!!! state ๋ ๋ฆฝ ๋ง์ธ!!!์ธ์น๊ณ ์ถ๋ค...!!!
์ฑ , ๋ ๊ด์ฐฎ์ ์น ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ ์ํ ๋ฆฌ์กํธ ์คํ์ผ ๊ฐ์ด๋, ํ๋ฆฌ๋ ์ถํ์ฌ, ์ด์๋ฐ์ ์ผ์ดํ ์ง์, ๊ตฌ๋ฉ๊ฐ๊ฒ ์ฝ๋ฉ๋จ/์๋ํ ์ฎ๊น
ํจ์ํ ์ปดํฌ๋ํธ this ์ ์์ด?
๋ธ๋ผ์ฐ์ ๋ง๋ค ๋ํดํธ๋ก ์ค์ ๋์ด ์๋ css ๊ฐ๋ค์ด ์๋ค.์๋ฅผ ๋ค์ด margin, padding ๊ฐ์ css ์์ฑ(property)์ ๊ฐ๋ค์ด 0์ด ์๋๋ผ ๋ธ๋ผ์ฐ์ ๊ฐ ์ ํ ์์์ ๊ฐ์ผ๋ก ์ค์ ๋์ด ์๋ค๋ ๋ง!์ด๋ฐ ๊ฐ๋ค์ ์ด๊ธฐํํ๊ณ ์์ ์ ํด์ผ๋ด๊ฐ ์๋ํ ๊ฐ์ผ๋ก ํ๋ฉด์ ์ถ๋ ฅ
Block ์์Inline ์์
How to let the user download data (CSV) in React? (https://stackoverflow.com/questions/56098940/how-to-let-the-user-download-data-csv-in-react)
HTMLํ ์ด๋ธ ํค๋ ๊ณ ์ ํ๋ ๋ฐฉ๋ฒ (https://usang0810.tistory.com/m/30?category=887358)
ํ์ผ๊ณผ ํก์ฌํ ๋ถ๋ณ ๊ฐ์ฒด๋ก raw data๋ฐ์ดํฐ๋ฅผ ํํํ๊ธฐ ๋๋ฌธ์ ํ์ฐ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ๋ค์ดํฐ๋ธ ํฌ๋งท์ด ์๋๋คFile ์ธํฐํ์ด์ค๋ ๊ธฐ๋ณธ์ ์ผ๋ก Blob์ ํตํด ์ด๋ค์ง๋ฉฐ, Blob์ ํจ์๋ค์ ์์๋ฐ๊ณ ํ์ฅํ์ฌ ์ฌ์ฉ์ ์์คํ ์ ํ์ผ์ ์ง์ํด์คhttps://fore
https://www.shutterstock.com/blog/how-to-design-a-websiteAbove the Fold๋? (https://m.blog.naver.com/PostView.nhn?blogId=beusable&logNo=22088
10 Tips for Creating a Design Portfolio That Lands Your Next Great Gig (https://www.shutterstock.com/blog/design-portfolio-tips)
๋ฐฐ์ด๋ฒํผ, ์ด์ง ๋ฐฐ์ดIn web-development we meet binary data mostly while dealing with files (create, upload, download). Another typical use case is image proces
GSAP 3 FWA - The Cool Club deck (https://codepen.io/petebarr/pen/JjPKrqg)
CSS border-collapse Property (https://www.w3schools.com/cssref/pr_border-collapse.asp)
https://happy-noether-c87ffa.netlify.app/presentations/level2/css3/
https://happy-noether-c87ffa.netlify.app/presentations/level2/css3/
SheetJS : JS๋ก ์์ ํ์ผ ์ฝ๊ธฐ ์์ (https://eblo.tistory.com/83)
How to use JSON.stringify() and JSON.parse() in JavaScript (https://medium.com/javascript-in-plain-english/how-to-use-stringify-and-parse-in-java
https://www.oreilly.com/library/view/high-performance-web/9780596529307/
https://heropy.blog/2019/05/26/html-elements/https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/
html lang ์์ฑ (https://mygumi.tistory.com/52)
๋ฆฌ์กํธ-์คํํฑ์ ์๊ฐํฉ๋๋ค. - ๋ฆฌ์กํธ๋ฅผ ์ํ ์ง๋ณด์ ์ธ ์ ์ -์ฌ์ดํธ ํ๋ ์์ํฌ! (https://velog.io/@gtah2yk/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%83%9C%ED%8B%B1%EC%9D%84-%EC%86%8
๋ฆฌ์กํธ๋ก ๋ง๋ ์น์ฑ์ GitHub Page๋ฅผ ์ด์ฉํด์ ์ ์ ์น์ฌ์ดํธ ๋ฐฐํฌ! https://eunkyoungjung.github.io/throw-spots-on-the-map/์์ ํ์ผ์ ์๋์ ๊ฐ์ ํฌ๋งท์ ๋ฐ์ดํฐ๋ฅผ ๋ฃ์ด์ฃผ๋ฉด์ง๋์ ๋ง์ปค๋ฅผ ์ฐ์ด์ค๋น :-)ithub๋ฅผ
JavaScript๋ฅผ ์ด์ฉํ์ฌ ๋ง๋ ๊ฐ์ฒด๋ฅผ csv๋ก ๋ค์ด๋ก๋ ํ๋ ๊ธฐ๋ฅ์ ์ํด์blob ๊ฐ์ฒด๋ฅผ ์ด์ฉํ์๋ค๊ทธ.๋ฐ.๋ฐํฌ๋กฌ์์๋ ์๋ง ๋ค์ด์ ๋ฐ์๋๋ฐIE์์๋ ๋ค์ด๋ก๋ ๋ฒํผ์ ํด๋ฆญํด๋ ๋ฐ์์ด ์๋ค. ๋ญฅ๋ฏธ?blob url in ie is not working (https&#x
๋ฐ ์ ์ ์์ฑ๋ ๊ธ์๊ฐ ์๋ ๊ฒฝ์ฐ, ๊ธ์๊ฐ ๊นจ์ง ์ ์์์ซ ์๋ ๋ฐฉ์์!ใ ใ ใฑใ ใ ใ ใ ใ
https://developer.mozilla.org/ko/docs/Web/HTML/Elementhttps://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
ํ๊ทธ๋ก ์ค๋์ค๋ ๋ณด์ฌ์ค๋น๋จ์ํ ํ ์คํธ๋ง์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด ์๋๋ผ์ค๋์ค ํ๊ทธ, ๋น๋์ค ํ๊ทธ๋ฅผ ํตํด์ ๋ฏธ๋์ด๋ฅผ ๋ณด์ฌ์ฃผ๋ค๋ํ๊ทธํ๊ทธ ์ ๊ธฐํฑํ๊ทธ๋ฅผ ๋๊ฐ ๊ฐ๋ฐํ๋ ๊ณ ์ผ์?!html 5์ผ๋ก ๋ฒ์ ์ ํ๋ฉด์ ์๋ฉํฑ ์ธก๋ฉด์์ ๋ค์ํ ํ๊ทธ๋ค์ด ๋์๋ค๊ณ ํ๋๋ฐ.ํ๊ทธ๋ ๋๊ฐ ๊ฐ๋ฐํ๋ ๊ณ ์ผ์?ํ๊ทธ
rem์ ์ธ ๊ฒ์ ์ถ์ฒ!rem ์ฌ์ด์ฆ์ ๊ธฐ์ค์ root์ ํฐํธ ์ฌ์ด์ฆ!์น์ฌ์ดํธ root๋ ๋ฐ๋ก body ํ๊ทธ!๊ทธ๋ฌ๋๊น!bodyํ๊ทธ์๋ค๊ฐ ๊ธฐ์ค์ด ๋๋ font์ฌ์ด์ฆ๋ฅผ ๋ช ์ํด ์ฃผ์ธ์!body { font-size: 16px;}์น ๋ธ๋ผ์ฐ์ ์ ๊ตฌํ๋ฐฉ์์ ๋ฐ๋ผ์ ๋ํดํธ ํฐํธ ์ฌ
๋ชจ๋ฐ์ผ์์ 100vh๋ 100vh๊ฐ ์๋๋น ๐ญhttps://hot-time.tistory.com/1214
๋ชจ๋ฐ์ผ์์ ์ ๋ ฅ ์ฐฝ์ ํฌ์ปค์ค ๊ฐ๋ ๊ฒฝ์ฐ ํ๋๋๋ ํจ๊ณผ ์์ ๊ธฐ (http://blog.freezner.com/archives/1880)
User-Agent Client Hints์ ๋์ , UA ํ๋ฆฌ์ง์ ๋๋นํ๋ผ (https://d2.naver.com/helloworld/6532276)
content-visibility: the new CSS property that boosts your rendering performance (https://wit.nts-corp.com/2020/09/11/6223?utm_source=gaerae.com&u
CSS @import๋ฅผ ์ด์ฉํ์ฌ ์ธ๋ถ ๋ฌธ์๋ก CSS๋ฅผ ๋ถ๋ฌ์ ์ ์ฉํ๋ ๋ฐฉ์https://happy-noether-c87ffa.netlify.app/presentations/level1/css/summary/
์ค ๋์ด(์ค ๊ฐ๊ฒฉ) ์ง์ ์ผ๋ฐ์ ์ผ๋ก 1.4 ~ 1.7 (๋ฐฐ์)๋ก ์ค์ ํ๋ ๊ฒ์ด ์ผ๋ฐ์ :-)https://happy-noether-c87ffa.netlify.app/presentations/level1/css/properties/
https://learnjs.vlpt.us/useful/06-destructuring.html
https://heropy.blog/2017/09/30/markdown/
a๊ฐ null๋ ์๋๊ณ undefined๋ ์๋๋ฉด a๊ทธ ์ธ์ ๊ฒฝ์ฐ๋ b๋น๊ต์ ์ ๊ท ๋ฌธ๋ฒ์ด๋ผ ๊ตฌ์ ๋ธ๋ผ์ฐ์ ์์๋ ํด๋ฆฌํ์ด ํ์https://ko.javascript.info/nullish-coalescing-operator
https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7
Google์ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ผ ๊ฐ์ด๋Airbnb์ ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ผ ๊ฐ์ด๋Idiomatic.JSStandardJShttps://ko.javascript.info/coding-style
http://www.yes24.com/Product/Goods/74223605
!youtubeL1dtkLeIz-Mhttps://www.youtube.com/watch?v=L1dtkLeIz-M&fbclid=IwAR1fypdPSFTV20lsBAv_k2gLkeH0qPJh7RnVFOxpjd21m5lVVCElZTjec4I
์์ฆ ํ๋ก ํธ์๋ ๊ฐ๋ฐํ๊ณ ์๋๋ฐํ ๋ด์ ๋์์ด๋๊ฐ ์์ด์๊ทธ๋์ ๋์์ธ์ ์ข ์์์ผํ ๊ฒ ๊ฐ์์๊ทธ๋์ ์ค์ค์ค์ข์ ๋ฌธ์๋์์ธ ๊ธฐ๋ณธ ์๋ฆฌ 29๋์์ด๋๊ฐ ์์๋์ด์ผ ํ ์ฌ์ดํธ(์์์กฐํฉํธ)์น์ฌ์ดํธ ๋์์ธํ๋ ๋ฒ: ์ด๋ณด์๋ฅผ ์ํ 10๊ฐ์ง ํฉ๊ธ ๋ฒ์น
ํค์๋ ๊ด๋ จ: URL, ์ ๋ชฉ, ๋ฉํ ์ค๋ช , ๋ฉํ ํค์๋, ํค๋ฉ ํ๊ทธ, ์ํธ ํ๊ทธ, ๊ฐํ ํ๊ทธ, ์จ๊ฒจ์ง ํ ์คํธ, ์ต์ปค ํ ์คํธ, ํ๋ ์ธ ํ ๊ฒ์ ์์ง ์ ์ด: ๋ก๋ด.txt, ํ์ด์ง ๋ฆฌ๋ค์ด๋ ์ , ์ค๋ณต ๋ด์ฉ ํ์ธ, ์บ๋ ธ๋์ปฌ ํ๊ทธ, ๋ชจ๋ฐ์ผ&PC ๋ฏธ๋์ด์ฟผ๋ฆฌ, ๋ชจ๋ฐ์ผ&PC ์บ๋ ธ๋์ปฌht
https://ko.javascript.info/object-copy
https://ko.javascript.info/garbage-collectionA tour of V8: Garbage CollectionWhat is V8?
https://ko.javascript.info/object-methods
8 Cool Web Design Trends in 2020
https://blog.nerdfactory.ai/2019/10/25/react-styled-components.html
http://mobilehtml5.org/๋ชจ๋ฐ์ผ ์น๋ธ๋ผ์ฐ์ ์์ ์นด๋ฉ๋ผ ์ฌ์ง/๋์์ ์ฐ๊ธฐandroid html5 ์ค๋งํธํฐ ์นด๋ฉ๋ผ์ ์ฐ๊ฒฐํ๊ธฐ, ์ฌ์ง(๊ฐค๋ฌ๋ฆฌ) ๋ฐ ๋์์ ์ฐ๊ธฐ ์์ ์นด๋ฉ๋ผ API๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ง ์ดฌ์ํ๊ธฐ
CSS Selector Reference
https://ko.javascript.info/object-methods
https://react.vlpt.us/basic/05-props.html
https://github.com/facebook/react/blob/fd557d453d37eab29eca18f0507750ab2093669d/packages/react-reconciler/src/ReactFiberHooks.jshttps://blog
๋ฆฌ์กํธ์์๋ ๋ถ๋ณ์ฑ์ ์ง์ผ์ฃผ์ด์ผ๋ง ์ปดํฌ๋ํธ ์ ๋ฐ์ดํธ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ ๋๋ก ํ ์ ์์ต๋๋คhttps://react.vlpt.us/basic/09-multiple-inputs.html
์ค์ฉ์ ์ธ ๋ฆฌ์กํธ ํ ์คํธ ์ ๋ต
select box, input box style ์ด๊ธฐํ CSS
ํ๋ ์์ํฌ ์์ด ๋ชจ๋ฌ ์ปดํฌ๋ํธ ๋ง๋๋ ์ค๊ทธ๋ฅ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์นํ๊ณ importํ๋ฉด ๋๋๋ฐ๋ฐ๋๋ผ๋ก ์์ ๋ ๊ฒ์ผ๋ก ๋ง๋๋ ๊ฑด ์ฒ์์ด๋น
์์ด์คํฌ๋ฆผ์ ์ด์ฝ๋ง๊ณผ ๋ฐ๋๋ผ๋ง๋ฆฌ์กํธ๋ก ๊ฐ๋ฐํ๋ค๊ฐ๋ฐ๋๋ผ๋ก ๋ ๊ฒ๊ทธ๋๋ก ๋ง๋๋ ๊ฑด ์ฒ์์ด๋ค์นธ๋ฐ์ค ํ๊ทธ๋ก ๋ง๋ ์๊ณ์ด ์ฐจํธ์ div๋ก ๋ง๋ ๋ง๋ ์ฐจํธ!๋ฟ๋ฏ๋ฟ๋ฏ
๋ฐ์ค ํ๋กฏ(box plot) ์ค๋ช
์์ฐ! ์ผ์ธ์ด์ ๋ํจ!!!!
https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html\* https://cheatsheetseries.owasp.org/
PRs Welcome (https://github.com/elsewhencode/project-guidelines/blob/master/README-ko.md)
NPM์ ์์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐฐํฌํ๊ธฐ (https://dev-yakuza.posstree.com/ko/share/deploy-npm-library/)
"์ฃผ์"์ ๋ฐ๋ฅธ ๋ค๋ฅธ "๋ทฐ"๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ
https://github.com/ryanmcdermott/clean-code-javascript\* https://www.udemy.com/course/javascript-essentials/learn/lecture/4393202\* https&#x
๋ฏธ๋์ ์ํฐํด ์ฝ๋ค๊ฐ ๋ฐ๊ฒฌํ ๊ธฐ๋ฅ!์ํฐํด์ ํ์ด๋ผ์ดํธ ํ ์ ์๊ณ ! ๋ฉ๋ชจ๋ ๊ฐ๋ฅ!!!์ ์์ฑ ์๋ง ์๋ ๊ธฐ๋ฅ๋ค์ด ์ํฐํด์๋ ์ ์ฉ๊ฐ๋ฅํ๋ค๋!!!!๋ฏธ๋์ ๋๋ฌด ์ข๋ค!!!์ด๋ฐ ๊ธฐ๋ฅ ๋๋ฌด๋๋ฌด๋๋ฌด ์ข์!!!!!!!!!https://medium.com/better-progr
CSS ์์ฑ(property) ์ค ํ๋์ธ "flex"๋ฅผ ํ๋ ์คํด๋ณด์ฅ!๐
์์ฒญ์ ๊ฒฐ๊ณผ๋ก๋ฉ ์ํ์๋ฌ
redux์ ๊ตฌ์กฐ
https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html
A์์ A์์ ์ ์ธํ ํจ์๋ฅผ ๋ถ๋ฅด๋ ๊ฒ์ ์ฐจ์ด๊ฐ ๊ถ๊ธ์ฐ!
Google Docs ๊ฐ์ ์ค์๊ฐ ํ์ ์๋ํฐ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ (https://hackerwins.github.io/2019-04-16/co-editor)
http://bbom.org/tools/ani.html
https://levelup.gitconnected.com/how-to-convert-excel-file-into-json-object-by-using-javascript-9e95532d47c5https://codesandbox.io/s/excel-t
https://bezkoder.com/react-hooks-crud-axios-api/
https://medium.com/better-programming/top-vscode-extensions-for-js-devs-f066ab889b6
https://rinae.dev/posts/why-every-beginner-front-end-developer-should-know-publish-subscribe-pattern-kr
formikreact-hook-formhttps://betterprogramming.pub/6-regrets-i-have-as-a-react-developer-52e95a8ff8a4
https://beforesemicolon.medium.com/10-css-tricks-you-need-to-know-about-382d6a34248ahttps://beforesemicolon.medium.com/10-css-tricks-you-nee
https://www.youtube.com/watch?v=1fdxT7TJBfMhttps://codepen.io/beforesemicolon/pen/BaQdgvK
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat๋งํดํ์ธ๋ฌ/๋ฆฌํฉํ ๋ง2ํ
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://www.daleseo.com/js-module-import/
๋ณต์ฌ๋ฅผ ํ ์ด์ ๋ ํจ์๋ก ๊ฑด๋จ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ธฐ ์ซ์ด์๋ค.๊ฐ๋ณ(mutable) ๋ฐ์ดํฐ๋ ๊ธ๋ฐฉ ์ํ๊ธฐ ๋๋ฌธ์ ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ต๋ํ ๋ถ๋ณ(immutable)์ฒ๋ผ ์ทจ๊ธํ๋ค๋งํดํ์ธ๋ฌ/๋ฆฌํฉํ ๋ง2ํ๋งํดํ์ธ๋ฌ/๋ฆฌํฉํ ๋ง2ํ
https://ui.toast.com/weekly-pick/ko_20210402?fbclid=IwAR1sAz-7Dfy-uRDYar7Qhoi9YZmRzC6Fbn07Unh-R4TZaQJQ_YVGdUA6opghttps://blog.maximeheckel.c
๋ฆฌ์กํธ๋ก ๋ง๋ SPA ์น์ฑ!๋ค๋ก๊ฐ๊ธฐ ๋ฒํผ์ ๋๋ฅด๋ฉด ์ด๋ป๊ฒ ๋ ๊น?!์์ ๋ฐ๋๋ผ๋ก ๋ง๋ ์น์ฑ์ ๊ฒฝ์ฐ๋ ์ด์ ๋ด์ฉ๋ค์ด ๋ธ๋ผ์ฐ์ ์บ์์ ๋จ๋ ๋ค.ํ์ง๋ง ๋ฆฌ์กํธ๋...!
์๋์ ๊ธ์ ๋ฒ์ญํ ๊ธ์ ๋๋ค.Popups and window methodshttps://ko.javascript.info/popup-windowsํ์ ์ฐฝ(popup window)์ ์ฌ์ฉ์์๊ฒ ์ถ๊ฐ์ ์ธ ๋ฌธ์๋ฅผ ๋ณด์ฌ์ฃผ๋ ์์ฃผ ์ค๋๋ ๋ฐฉ๋ฒ ์ค ํ๋๋ค.๊ธฐ๋ณธ์ ์ผ๋ก ์๋์
์๋์ ๊ธ์ ๋ฒ์ญํ์์ต๋๋ค.Cross-window communication(https://ko.javascript.info/cross-window-communication)
https://www.w3.org/TR/navigation-timing-2/#processing-model
Originally,HTML was primarily designed as a languagefor semantically describing scientific documents.HTML Living Standard
๋ฆฌ์์ค ๐ป
https://ko.wikipedia.org/wiki/%EC%A0%9C%EC%9D%B4%EC%BD%A5\_%EB%8B%90%EC%8A%A8UX ๋์์ธ ๋ฐฉ๋ฒ๋ก '์ ๋ฌธ๊ฐ ํ๊ฐ Expert Review' ๋จ๊ณ ์ดํดํ๊ธฐ (https://www.wedesign
https://jonnung.dev/python/2018/12/22/celery-distributed-task-queue/
๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ ์ฒ๋ฆฌ๋๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ธํฐ๋ฝํธ๋ ๋ถ๊ฐ๋ฅํ ๋จ์ผ ์ค๋ ๋๋ก ๋์๊ฐ๋ค๋ฐ๋ผ์, ๋ฃจํ๋ฅผ ๋๊ฑฐ๋ DOM์ ํ์ํ๊ฑฐ๋ ์ฒ๋ฆฌํ ๋ ๋์์ ํ๊ฐ์ง ๋ช ๋ น๋ง ์ํํ ์ ์๋ค์ค๋ ๋ ํ๋จ์ผ ์ค๋ ๋ ํ๊ฒฝ์์ ์ง์ฐ์ด ๋ฐ์ํ๋๋ผ๋ ์์๋๋ก ๋ค์ด์จ ์์ฒญ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ๊ฒ์ค๋ ๋
ํ์ผ์ ๋ถ๋ฆฌํ๋ ์์ 1) SplitChunks์ ์ฒด ํ์ผ์ ํฐ ๋ฉ์ด๋ฆฌ๋ก ๋๋ ์ ์คํ๋ฆฌํ ํจ์จ์ ์ธ ์บ์ฑ ํจ๊ณผ2) ์ฝ๋ ๋น๋๊ธฐ ๋ก๋ฉ๊ทธ๋๊ทธ๋ ํ์ํ ํ์ผ๋ง ๋ก๋ฉ์ฑ /๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ (๊ฐ์ ํ)
https://ko.reactjs.org/docs/react-component.html\*
์ฝ๋ฐฑ ํจ์๋, ์ ์๋ ์์น์์ ์คํ๋์ง ์๊ณ , ์ดํ ํน์ ์ํฉ(์ด๋ฒคํธ, ๋ค๋ฅธ ํจ์ ํธ์ถ ๋ฑ)์์ ์คํ๋๋ ํจ์๋ฅผ ๋งํ๋ค์ฑ /Do it! ๋ฆฌ์กํธ ํ๋ก๊ทธ๋๋ฐ ์ ์
PropTypes๋ฅผ ์ด์ฉํด์, props ๋ฐ์ดํฐํ์ ์ฒดํฌํ ์ ์๋ค.ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ณ๋๋ก ์ฐ๋ ์ด์ ๋ ๋ฌด์?
http://www.yes24.com/Product/Goods/876314282020๋ 2์์ ์ถํ๋์ด์ ๋งค์ฐ ๋ฐ๊ทผ๋ฐ๊ทผํ๋ค๋ฆฌ์กํธ๋ฒ์ ๊ณผ ์คํ ๋ฆฌ๋ถ ๋ฒ์ ์ด (ํ์ฌ: 2021-10-06) ์ต์ ๋ฒ์ ๋ณด๋ค๋ ๋ฎ๋ค.์ค๋ฌด์์ ๋ง์ด ์ฐ๋ ์์ ๋ฒ์ ์ด๋ผ๊ณ ํ๋ค.์คํ ๋ฆฌ๋ถ์ ๊ฒฝ์ฐ
https://blog.songc.io/react/react-js-in-css/
https://css-tricks.com/almanac/properties/f/flex-wrap/
https://haesoo9410.tistory.com/168
https://developers.google.com/maps/documentation/javascript/elevation์๊ฒฝ๋ => ๊ณ ๋๋ฅผ ์ ์ ์์!
https://wonit.tistory.com/305
DOM reflow๋ DOM์ด ํ๋ฉด์ ํ์๋๋ ๊ตฌ์กฐ๊ฐ ๋ฐ๋ ๋, ๋๋ CSS ํด๋์ค๊ฐ ๋ฐ๋ ๋ ์ผ์ด๋จ์ด๋ DOM ํธ๋ฆฌ๊ฐ ๋ฐฐ์น๋๋ ์์น๋ฅผ ์ ์ฒด์ ์ผ๋ก ๋ค์ ๊ณ์ฐํด์ ํ๋ฉด์ ์ถ๋ ฅํ๋ ๊ฒ์ ์๋ฏธํ๋ค.DOM repaint๋ ๊ฐ ์๋ฆฌ๋จผํธ์ ์์น๊ฐ ๋ณ๊ฒฝ๋์ง ์๋๋ค๊ณ ์ ์ ํ์ง๋ง, D
JavaScript๋ ๋ค๋ฅธ ์ธ์ด๋ค(C์ธ์ด, ํ์ด์ฌ ๋ฑ)๊ณผ๋ ๋ค๋ฅธ ๋ธ๋ก scope ๊ฐ๋ ?์ ๊ฐ๋๋ค.์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ค๋ฅธ ์ธ์ด์๋ ๋ฌ๋ฆฌ ์ผ๋ฐ์ ์ธ ๋ธ๋ก ์คํฌํฌ๋ฅผ ๋ฐ๋ฅด์ง ์๋๋ค.์๋ฐ์คํฌ๋ฆฝํธ์ ์ค์ฝํ๋ ํน์ ๊ตฌ๋ฌธ์ด ์ํ๋ ๋ ์๋ก ์์ฑ๋๋ค.์ค์ฝํ๋ฅผ ์์ฑํ๋ ๊ตฌ๋ฌธ๋ค: functio
๋ฐ๋๋ผ๋ก ์์ฑํ ์นํ์ด์งindex.html ์ ๊ทผํด๋ฆญ์ด๋ฒคํธ ์คํ๋ค์ ํ์ด์ง ์ด๋๋ค๋ก๊ฐ๊ธฐ์คํ์์ ์์๋ก ์คํ์ ํ๊ฒ ๋๋ฉด,๋ค๋ก๊ฐ๊ธฐ ์คํ์ ํ๋ฉด "ํด๋ฆญ์ด๋ฒคํธ๋ฅผ ์คํํ์ง ์์๋!!! ํด๋ฆญ์ด๋ฒคํธ๊ฐ ์ด๋ฏธ ์คํ๋์ด ์๋ค!!"์๋ํ๋ฉด "Back Forward Cache" ๋๋ฌธBack
https://docs.webix.com/desktop\_\_dataprocessor.html
https://velog.io/@dowon938/react-dnd-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-drag-resizing-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0grid-template%EC%9D%B
https://donggyu9410.medium.com/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EB%A7%8C%EB%93%A0-%ED%8E%98%EC%9D%B4%EC%A7%80-progressive-web-app-%EC%9C%BC%
์๋์ฐ ํฐ๋ฏธ๋์์ ๋ฆฌ์กํธ ์คํํฌํธ ๋ณ๊ฒฝ๋ฐฉ๋ฒ
https://qaos.com/sections/images/sections/cgi/sections.php?op=viewarticle&artid=205https://htmlschool.tistory.com/entry/HTML-isindex-%ED%83%
๋ธ๋ผ์ฐ์ ์ ์ฅ์ ์ข ๋ฅ (ํฌ๋กฌ)
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefaulthttps://pa-pico.tistory.com/20https://programming119.tistory.com/1
https://junwoo45.github.io/2019-10-02-package-lock/
https://tech.kakao.com/2020/12/01/frontend-growth-02/https://jcon.tistory.com/123https://swimfm.tistory.com/entry/%ED%8F%B4%EB%A6%AC%ED
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/radiohttps://steadily-worked.tistory.com/464https://bytes.com/topic/javasc
https://www.inflearn.com/questions/58743
์ปดํฌ๋ํธ ์์ฑ์ ํต์ฌ์ ์ฌ์ฌ์ฉ์ฑ์ปดํฌ๋ํธ A์์ input๊ณผ label์ด ์๋ค.ํ ํ๋ฉด์ ์ปดํฌ๋ํธ A๊ฐ ๋๊ฐ๊ฐ ๋ํ๋๋ค๋ฉด?!?!?ํ ํ๋ฉด์ ๋์์ ๊ฐ์ id๋ฅผ ๊ฐ์ง ํ๊ทธ๊ฐ 2๊ฐ์ธ ์ ์ด๋ด๊ฒฝ์ฐ ์ด๋ป๊ฒ??!?!?
https://paperblock.tistory.com/164
sentryhotjar, fullstoryjenniferhttps://okky.kr/article/646473
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
https://aboooks.tistory.com/308
https://godsenal.com/posts/web-push-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
๋ฐฐ๊ฒฝ์์ ๋ฐ๊พธ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฐจ์ด๋ ๋ฌด์? ๋ฐฉ๋ฒ1. dom ์์ ํ๊ธฐ ๋ฐฉ๋ฒ2. css๋ก ๋ฐฑ๊ทธ๋ผ์ด๋ ๋ณ๊ฒฝํ๊ธฐ
https://velog.io/@edie_ko/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C%ED%95%98%EA%B8%B0-with-Axios
https://ratseno.tistory.com/17
memoization ๋ ๊ฐ์ ๋ฐํ์์กด์ฑ์ด ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ, ์ด์ ์ ๊ธฐ์ตํ๊ณ ์๋ ๋ฆฌํด ๊ฐ๊ณผ ๋น๊ตํด์ ๋ค๋ฅธ ๊ฒฝ์ฐ์๋ง ๋ฆฌ๋๋useMemo์์ ์ ๋ฌ๋ ํจ์๋ ๋๋๋ง ์ค์ ์คํ๋๋ฏ๋ก, ๋๋๋ง ์ค์์ ์คํํ์ง ์๋ ํจ์๋ useEffect๋ฅผ ์ฌ์ฉํ ๊ฒuseRef์์ ์ฐจ์ด๋, u
๋ง์ฐ์ค ์ด๋ฒคํธํผ ์์ ์ด๋ฒคํธํค๋ณด๋ ์ด๋ฒคํธ๋ฌธ์ ์ด๋ฒคํธCSS ์ด๋ฒคํธhttps://ko.javascript.info/introduction-browser-eventshttps://ko.javascript.info/events
ํ๋ฉด ๋ ๋๋ง์ด ๋๋ฆฌ๋ค ์๋๋ฌธ์ธ๊ฐ?
https://stackoverflow.com/questions/56641194/react-redirecting-a-mobile-user
https://xtring-dev.tistory.com/11
https://hianna.tistory.com/666
๋ฆฌ์กํธ๋ก ์น์ฑ ๋ง๋๋์ค3๊ฐ์ง ์กฐ๊ฑด์ ์ ํํ๋ฉด, ๊ทธ ์กฐ๊ฑด์ ํด๋นํ๋ ์ด๋ฏธ์ง๋ค์ด ํ๋ฉด์ ๋์์ผํ๋๋ฐ์ด๋ค ์กฐ๊ฑด์ ์กฐํฉ์ ๊ฒฝ์ฐ, ์ด๋ฏธ์ง๊ฐ ์๋ ๊ฒฝ์ฐ๋ ์๊ณ ์ด๋ฏธ์ง๋ก๋ฉ ์๊ฐ์ด ์ด๋ฏธ์ง๋ง๋ค ์ ๊ฐ๊ฐ์ด๋ผ์ ํ๋ฉด์ด ์ข...์์์๋คIntersection ObserverLazy-Loading
์ฑ /2022/ํ๋น๋ฏธ๋์ด/๋ฌธ์ค์/๊ณ ๊ฐ์ ๋์ด์ค๋ ๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค 4http://www.yes24.com/Product/Goods/107874804
https://velog.io/@ordidxzero/Image-URL%EC%9D%84-File-object%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0
FilerReader ์ค๋ธ์ ํธ๋ ์ปดํจํฐ์ ์๋ ์ฌ์ฉ์์ ํ์ผ๋ค(๋๋ raw data buffer)๋ฅผ ์น์ฑ์ด '๋น'๋๊ธฐ์ ์ผ๋ก ์ฝ์ ์ ์๋๋ก ํ๋ค!"File" ๋๋ "Blob" ๊ฐ์ฒด๋ ์ฝ์ผ๋ ค๊ณ ํ๋ ํ์ผ(๋๋ ๋ฐ์ดํฐ)์ ๋ช ์ํ๋๋ฐ ์ฌ์ฉํ๋ค.ํ์ผ ์ค๋ธ์ ํธ๋ "FileLis
https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv
https://hulint.tistory.com/39
http://juha.blog/dev/js/how-to-display-large-number-of-markers-on-leaflet-open-street-map-without-performance-issues/
https://github.com/plotly/react-colorscales
http://www.yes24.com/Product/goods/105782949https://github.com/seungwongo/javascript-project
https://jw910911.tistory.com/108
https://www.syncfusion.com/succinctly-free-ebooks/leafletjs/working-with-base-layers
https://apidocs.geoapify.com/samples/geojson/leflet-geojson-polygon/
https://curryyou.tistory.com/449
https://stackoverflow.com/questions/44689463/export-print-map-in-leaflet
์๋ฐ์คํฌ๋ฆฝํธ์ ์์น๋ณ ์ฐจ์ด(๋ก๋ฉ ๊ด์ ) : head ํ๊ทธ vs. body ํ๊ทธ
Expires ํค๋๋ ์๋ต ํค๋์ ํฌํจ๋๋ ๋ด์ฉ์ผ๋ก, ์น์๋ฒ์์ ํ์ฌ ํ์ผ์ด ์ธ์ ๊น์ง ์ ํจํ์ง ์๋ ค์ฃผ๋ ์ญํ Expires๋ฅผ ์ค์ ํ๋ฉด ๋ธ๋ผ์ฐ์ ์๋ ์บ์๋ก ํด๋น ํ์ผ์ ์ ์ฅํ๊ณ ์๋ค๊ฐ, Expires ๋ ์ง๊ฐ ์ง๋๊ธฐ ์ ์ ๋ค์ ๊ฐ์ ํ์ผ์ ์ ๊ทผํ๊ณ ์ ํ ๋ ์น์๋ฒ๋ก ์์ฒญ์
https://medium.com/swlh/getting-started-with-usequery-react-query-9ea181c3dd47#:~:text=React%20Query%20is%20often%20described,%E2%80%9CuseQuery%E
์ ํฌ๋ธ/๋๋ฆผ์ฝ๋ฉ/์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ฐ๊ธฐ์ ๊ผญ ๋ด์ผํ ์์ | ์๋ฐ์คํฌ๋ฆฝํธ์ ์ญ์ฌ์ ํ์ฌ ๊ทธ๋ฆฌ๊ณ ๋ฏธ๋ (JavaScript, ECMAScript, JQuery, Babel, Node.js)/https://www.youtube.com/watch?v=wcsVjmHrUQ
https://www.semrush.com/blog/what-is-a-url-slug/
semi: false: Next.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ง์ง๋ง ์ธ๋ฏธ์ฝ๋ก (;)์ ์ฌ์ฉํ์ง ์์ต๋๋ค.singleQuote: true: Next.js๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ ๋ฐ์ดํ(')๋ฅผ ์ฌ์ฉํฉ๋๋ค.https://dev-yakuza.posstree.com/ko/react/ne
https://heokknkn.tistory.com/7
https://tech.madup.com/react-query-vs-swr/
https://dev.to/payapula/minimizing-lodash-size-in-cra-and-next-js-5598
https://blog.ab180.co/posts/exploring-the-technical-side-of-ingesting-data-into-braze
https://unlyed.github.io/next-right-now/guides/analytics/use-amplitude.html
https://ko.reactjs.org/docs/dom-elements.html
https://kyounghwan01.github.io/blog/React/next/mui/
https://linguinecode.com/post/when-to-use-useref-and-uselayouteffect
https://bskyvision.com/entry/css-css%EC%97%90%EC%84%9C-%EA%BA%BD%EC%87%A0-%EC%9D%98-%EC%9D%98%EB%AF%B8%EB%8A%94
https://tecoble.techcourse.co.kr/post/2021-10-24-svg-viewBox/
https://heewon26.tistory.com/262
https://developer-talk.tistory.com/300
์์ฆ ๋ถ์ฉ ๋๋ ๋์ ๊ณ ๋ฏผ๋์ ๋ณ์/ํจ์๋ช ์ด ๊ธธ๋ค๋ ๊ฒ์น์ ํ๊ฒ ์๋ฏธ๋ฅผ ์ ๋ฌํ๊ณ ์ถ์ง๋ง, ๊ทธ๋ ๋ค๊ณ ๊ธธ๋ฉด ์ซ์ดใ ใ ์ด์ฉ๋ฉด ์ข์๊น?https://brunch.co.kr/@goodvc78/12
https://pythonblog.co.kr/blog/67/
https://melonicedlatte.com/2022/06/27/214900.html
https://igotit.tistory.com/entry/Xcode-%EC%95%84%EC%9D%B4%ED%8F%B0-USB-%EC%97%B0%EA%B2%B0-%ED%95%98%EC%97%AC-%EA%B0%9C%EB%B0%9C%EC%A4%91-%EC%95%B
https://velog.io/@leehyunho2001/nextbundle-analyze
https://velog.io/@newwwbi/Dayjs-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EC%97%90%EC%84%9C-%ED%83%80%EC%9E%84%EC%A1%B4%EC%9D%84-%EB%8B%A4%EB
https://ui.toast.com/posts/ko_20210909
https://blog.naver.com/hanlaonline/222004576341
https://blog.hoseung.me/2022-03-13-dayjs-instead-of-momentjs/
https://www.joshwcomeau.com/animation/css-transitions/
๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ์ ๋์ํ๋ lazy loading ์ ๊ตฌํํ๊ธฐ ์ํด์๋ Intersection Observer ํน์ scroll ์ด๋ฒคํธ๋ฅผ ํตํด ์คํฌ๋ฆฐ์ element๊ฐ ๋ณด์ผ ๋๋ฅผ ์บ์นํ์ฌ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋๋ก ๊ตฌํํด์ผ ํฉ๋๋ค(ํฌ๋กฌ 76 ๋ฒ์ ์ด์๋ถํฐ๋ img ํ๊ทธ์
https://ko.javascript.info/custom-errors
https://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/comment-page-2/https://codepen.io/Kaitoz/pen/QWoGdMo?editors=1010https
Reference https://ko.javascript.info/script-async-defer
https://doridori-samsam.tistory.com/19https://www.youtube.com/watch?v=O-n1EjDEuIchttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_d
Reference ๋งํฌํ ์คํธ
https://han-py.tistory.com/507
AS-IS์ด์ ์ฌํญ ๊ฐ์ ์ค๋ช ์ด์์ ์ ํ๊ฒ๋ ๋ฐฐ๊ฒฝ ์ค๋ช ์ด์์ ํด๋นํ๋ ์บก์ณ ์ด๋ฏธ์ง (์: ์๋ฌ๋ฐ์ ํ๋ฉด ๋ฑ)์ด์ ์ฌํญ์ด ๋ฐ์ํ๊ฒ ๋ ์์ธ ๋ถ์ (์: ์๋ฌ๊ฐ ๋ฐ์ํ ์์ธ)TO-BE๋ณ๊ฒฝ๋๋ ์์ ๋ฌผ์ ๋ชจ์ต ๊ตฌํ์์ ์ด๋ฏธ์ง๋์์ธ ๋ณ๊ฒฝ์ฒ๋ผ ๋ช ํํ to-be๊ฐ ์๋ค๋ฉด as-is
https://medium.com/@eveciana21/creating-a-drag-and-drop-ui-3caa7d519836
next.js์๋ 2๊ฐ์ง ๋ผ์ฐํฐ๊ฐ ์กด์ฌ/pages/app => next.js 14์์ ๋ฑ์ฅ!data fetching๊ณผ routing ํ๋ ๋ฐฉ์์ด ๊ธฐ์กด๊ณผ๋ ๋ค๋ฅด๊ฒ ๋ณ๊ฒฝ๋จhttps://nextjs.org/docs/messages/invalid-new-link-w
UI(User Interface) ๋์์ธ์ธํฐํ์ด์ค๋ '์ ์, ์ ์ '์ ์๋ฏธ์ฌ๋ฏธ์ฑ, ๋ ผ๋ฆฌ์ ํจ์จ์ฑ ๊ทธ๋ฆฌ๊ณ ๋์์ธ ํด ํ์ฉ ๋ฅ๋ ฅ๊ณผ ๋์งํธ ํ๊ฒฝ์ ์ดํด๊ฐ ํ์์ฌ๋ฏธ์ฑ๋ธ๋๋์ ์ด์ธ๋ฆฌ๋ฉด์๋ ๊น๋ํ UI๋ ์ฌ์ฉ์์๊ฒ ๋ง์กฑ์ค๋ฌ์ด ์๋น์ค ๊ฒฝํ์ ์ ๊ณตํ๋ฉด์ ๋ค์ด๊ฐ ์์ด์ฝ, ์ผ๋ฌ์คํธ๋ ์ด์
https://medium.com/@jjungmin/%EC%9B%B9%EB%A7%81%ED%81%AC-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%ED%99%94%EB%A9%B4-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B
ํ์์ ์์ ECMAScript์ ์ต์ ๋ฒ์ ์ ๊ฐ๋ฆฌํค๋ ์ฉ์ดhttps://stackoverflow.com/questions/56521178/what-is-esnexthttps://www.javascripttutorial.net/es-next/https&
์๋ฐ์คํฌ๋ฆฝํธ ๋ชจ๋ํ๋ฅผ ์ํ ํ๋ก์ ํธ ์ค ํ๋2009๋ ServerJS์ ์ด๋ฆ์ผ๋ก ์์ํด ๋ค์ CommonJS๋ก ์ด๋ฆ์ด ๋ณ๊ฒฝ๋จCommonJS๋ฅผ ๊ตฌ๋ถํ๋ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ผ๋ก require()๊ณผ module.exports๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ผ๋ก ํ๋จํ ์ ์์(ECMA Scrip
๋ฐฐํฌ ํ๊ฒฝ ์๋ฌ๋ฉ์์ง
Vite flexbox
package.json ํ์ผ์์ dependencies์ devDependencies๋ ํ๋ก์ ํธ์ ํจํค์ง๋ฅผ ๊ด๋ฆฌํ๋ ๋ ๊ฐ์ง ์ฃผ์ ์น์ ์ ๋๋ค. ์ด๋ค์ ๊ฐ๊ฐ ๋ค๋ฅธ ๋ชฉ์ ์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ, ์ฌ์ฉ ์ฉ๋์ ๋ฐ๋ผ ํจํค์ง๋ฅผ ๊ตฌ๋ถํ์ฌ ์ค์นํฉ๋๋ค.dependencies ์น์ ์ ์ ํ๋ฆฌ์ผ
Next.js๋ ์์ฒด์ ์ผ๋ก ๋ชจ๋ ๋ฒ๋ค๋ฌ๋ฅผ ํฌํจํ๊ณ ์์ด, ์ถ๊ฐ์ ์ธ ์ค์ ์์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐํ ์์ฐ์ ๋ฒ๋ค๋งํ ์ ์์ต๋๋ค. Next.js๋ ๋ด๋ถ์ ์ผ๋ก ์นํฉ(Webpack)์ ์ฌ์ฉํ์ฌ ๋น๋์ ๋ฒ๋ค๋ง์ ์ฒ๋ฆฌํฉ๋๋ค. ๋ฐ๋ผ์ Next.js๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก ํธ์๋ ํ์ด์ง๋ฅผ
TypeScript์์ interface์ type์ ๋ชจ๋ ๊ฐ์ฒด์ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค. ํ์ง๋ง, ๋ช ๊ฐ์ง ์ฐจ์ด์ ์ด ์์ต๋๋ค. ์๋์์ interface์ type์ ์ฃผ์ ์ฐจ์ด์ ๋ค์ ์ค๋ช ํ๊ฒ ์ต๋๋ค.ํ์ฅ ๊ฐ๋ฅ์ฑ (Extensibility):interface๋ ์
useEffect ์์์ API ํธ์ถ์ด ๋ ๋ฒ ๋ฐ์ํ๋ ์ด์๋ ์ข ์ข React์ Strict Mode์ ์ํด ๋ฐ์ํฉ๋๋ค. React 18๋ถํฐ๋ Strict Mode๊ฐ ๊ฐ๋ฐ ๋ชจ๋์์ ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ ๋ฐ ์ธ๋ง์ดํธ๋๋ ๊ณผ์ ์ ๋ ๋ฒ์ฉ ์คํํ๊ฒ ๋ฉ๋๋ค. ์ด๋ ๋ถ์์ฉ์ ๊ฐ์งํ
ES ๋ชจ๋์ ์ต์ ํ์ค์ผ๋ก, ์ ์ ๋ถ์์ด ๊ฐ๋ฅํ๊ณ ๋น๋๊ธฐ์ ์ผ๋ก ๋ก๋๋๋ฉฐ, ๋ธ๋ผ์ฐ์ ์ Node.js์์ ๋ชจ๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.CommonJS ๋ชจ๋์ ์ฃผ๋ก Node.js์์ ์ฌ์ฉ๋๋ฉฐ, ๋์ ์ผ๋ก ๋ก๋๋๊ณ ๋๊ธฐ์ ์ผ๋ก ๋์ํฉ๋๋ค.