테오의 프론트엔드
#Talk14#Talk13#Talk12#Talk11#Talk10#Talk9#Talk8#Talk7#Talk6#Talk5#Talk4#Talk3#Talk2#Talk1 #Link14#Link13#Link12#Link11#Link10#Link9#Link8#Link7#Link6#Link5#Link4#Link3#Link2#Link1
2022년 8월 11일 목요일
https://discord.gg/ZCFTMTfGQj
https://beta.reactjs.org/learn/state-as-a-snapshot
https://beta.reactjs.org/learn/you-might-not-need-an-effect
https://ko.reactjs.org/docs/forms.html#controlled-components
https://www.linkedin.com/posts/sryoo_scitcu-testdrivendevelopment-tdd-activity-6949219052850421760-USIe
https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render
https://www.google.com/search?q=bootstrap+alternative&oq=bootstrap+alter&aqs=chrome.1.69i57j0i512j0i10l8.7140j0j7&sourceid=chrome&ie=UTF-8
https://velog.io/@prayme/%EB%8C%80%ED%95%99%EC%83%9D-IT-%EC%97%B0%ED%95%A9-%EB%8F%99%EC%95%84%EB%A6%AC-%EC%A0%95%EB%B3%B4-%EB%AA%A8%EC%9D%8C-feat.-RUFree-%EC%A3%BC%EB%8B%88%EC%96%B4
https://css-tricks.com/the-great-divide/
https://campaign.naver.com/band-10th-anniversary/?pcode=naver_timeboard
https://eignatik.space/2019/06/19/no-hello-policy-how-to-not-be-annoying/
https://tech.kakao.com/2020/06/08/websocket-part1/
https://tc39.es/proposal-temporal/docs/
https://stackoverflow.com/questions/344380/why-is-january-month-0-in-java-calendar
https://www.notion.so/ReadIT-Letter-IT-6c11b1b3749e45e58268e816b1e473ea
https://zereight.tistory.com/948
https://medium.com/steve-cruz/til-destructuring-from-object-undefined-689f459f546
https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control
https://bestofsvelte.com/
https://code.jquery.com/jquery-1.12.4.min.js"
https://cdn.iamport.kr/js/iamport.payment-1.1.7.js"></script>
https://jbee.io/career/2020-turnover-6/
https://flex.team/blog/2021/11/15/reference-check/
2022년 8월 10일 수요일
2022년 8월 9일 화요일
2022년 8월 8일 월요일
2022년 8월 7일 일요일
2022년 8월 6일 토요일
2022년 8월 5일 금요일
https://discord.gg/ZCFTMTfGQj
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/globalThis
https://wormwlrm.github.io/2021/10/11/Why-User-Agent-string-is-so-complex.html?utm_medium=share
Node.parentElement - Web APIs | MDN
The read-only parentElement property of Node interface returns the DOM node's parent Element, or null if the node either has no parent, or its parent isn't a DOM Element.
https://velog.io/@lokijoji2/ESLint랑-Prettier-쓰기-귀찮으면-이거-써-cak7e4uo
https://youtu.be/Lh5CrFJQSz4
https://codesandbox.io/s/temp-react-input-puzzle-demo-iicceb
https://www.youtube.com/c/hyosunglim%EC%9E%84%ED%9A%A8%EC%84%B1/featured
https://bit.ly/3OACOF1
https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/App.js#L21-L26
https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/components/UserInput/UserInput.js#L32-L42
https://github.com/nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/blob/master/src/shell/components/UserInput/UserInput.js#L32-L42
https://woobiblog.com/Javascript/Typescript_FunctionComponent_FC_%EC%82%AC%EC%9A%A9_%EC%A4%84%EC%9D%B4%EA%B8%B0
Designing with Data: Improving the User Experience with A/B Testing
Designing with Data: Improving the User Experience with A/B Testing [King, Rochelle, Churchill, Elizabeth F, Tan, Caitlin] on Amazon.com. *FREE* shipping on qualifying offers. Designing with Data: Improving the User Experience with A/B Testing
https://github.com/velopert/react-tutorial
https://react.vlpt.us/)은
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
https://ko.javascript.info/events
https://stackoverflow.com/questions/63510325/how-can-i-clear-the-central-cache-for-npx
https://forms.gle/56Sy8bMuKhYv7ydA8
https://qiita.com/Kani_Kim
https://github.com/mithi/react-philosophies
Strict 모드 – React
A JavaScript library for building user interfaces
Viewing contributions on your profile - GitHub Docs
Your GitHub profile shows off your pinned repositories, Achievements, and a graph of your repository contributions over the past year.
GitHub Docs
classnames
A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 35761 other projects in the npm registry using classnames.
npm
2022년 8월 4일 목요일
https://discord.gg/ZCFTMTfGQj
https://tkdodo.eu/blog/react-query-as-a-state-manager
http://127.0.0.1:5500/day01/day01.html
Carbon
Carbon is the easiest way to create and share beautiful images of your source code.
https://www.w3schools.com/howto/howto_css_dropdown.asp
당근마켓에 웹 프로젝트 배포하기 #2 — 웹 서버로 돌아가기
우리는 로컬 파일 기반 웹뷰 방식의 제약사항을 탈피하고 다음으로 나아가기 위해 기존에 익숙하던 방식을 과감하게 버리고 다시 웹 서버를 도입하기로 했어요. 다만 이번엔 각자가 API 서비스와 연관 없이 프론트엔드 서빙에 대해서만 제한된 책임을 가지는 형태로요. 그래도 웹 서버를 다시 도입하면서 웹 플랫폼 기능들을 활성화할 수 있었고, 각 프로젝트 담당자들이…
Medium
당근마켓에 웹 프로젝트 배포하기 #1 — 파일 기반 웹뷰
최근에는 많은 팀이 함께 쓰던 공용 시스템을 벗어나 큰 변화를 만들어가고 있어요. 더 나은 사용자 경험을 만들어 나가기 위해서 변화를 더 미룰 수 없다는 판단과 공감대가 있었기 때문인데요. 예전엔 어떤 선택을 했었고 왜 지금은 다른 선택을 하게 되는 걸까요? 지금까지 만났던 다양한 고민거리와 해결 전략들을 공유해볼게요. 당근마켓에 웹뷰 기반 서비스가 처음…
Medium
도서출판 인사이트
전자책 판매 서점, 프로그래밍 IT 서적
https://attardi.org/why-we-memo-all-the-things/
2022년 8월 3일 수요일
열심히 하고 싶은데 내 연봉 보니 일 하기 싫을 때
#회사생활 #직장인 #고민직장생활의 고민을 나누고 성장하고 싶은 사람들과 함께 도전하고 싶다면?👉 https://bit.ly/3z6YYHo직장생활에 지친 직장인 필독서 [JOY AT WORK]👉 https://bit.ly/3mSlxgg지금 당장 퇴사하고 더 좋은 회사로 이직하고...
YouTube
https://discord.gg/ZCFTMTfGQj
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
Notion
Invalid Dynamic Link
https://open.kakao.com/me/h2bal]
overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.
https://stackoverflow.com/questions/9280258/prevent-body-scrolling-but-allow-overlay-scrolling
Vue 3, 기본 버전이 되다
22년 초에 일어난 Vue.js 진영의 큰 변화를 살펴봅니다. 라이브러리 기본 버전이 된 Vue 3 이야기
캡틴판교
React Tabs component - Material UI
Tabs make it easy to explore and switch between different views.
GitHub - airbnb/javascript: JavaScript Style Guide
JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub.
GitHub
[무료] 이펙티브 타입스크립트 스터디 - 인프런 | 강의
《이펙티브 타입스크립트》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!, - 강의 소개 | 인프런...
인프런
temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/UserInputState.js at master · nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be
Scratch Project. Contribute to nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be development by creating an account on GitHub.
GitHub
temp-803c0db0-872c-4547-bda4-29f7c0f5d2be/AppState.js at master · nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be
Scratch Project. Contribute to nightlyherb/temp-803c0db0-872c-4547-bda4-29f7c0f5d2be development by creating an account on GitHub.
GitHub
https://www.w3schools.com/howto/howto_js_form_steps.asp
GitHub - carbon-language/carbon-lang: Carbon Language's main repository: documents, design, implementation, and related tools. (NOTE: Carbon Language is experimental; see README)
Carbon Language's main repository: documents, design, implementation, and related tools. (NOTE: Carbon Language is experimental; see README) - GitHub - carbon-language/carbon-lang: Carbon Language's main repository: documents, design, implementation, and related tools. (NOTE: Carbon Language is experimental; see README)
GitHub
2022년 8월 2일 화요일
Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?
Redux Toolkit 최근 훅 기반의 API 지원이 가속화되고 React Query, SWR 등 강력한 데이터 패칭과 캐싱 라이브러리를 사용하면서 리덕스 사용이 줄어드는 방향으로 프론트엔드 기술 트렌드가 변화하고 있다고 생각합니다.
화해 블로그 | 기술 블로그
https://youtu.be/kORKuULdiKM
https://discord.gg/ZCFTMTfGQj
https://rebrand.ly/loungeevent05
https://rebrand.ly/loungeeventnotion
https://reactrouter.com/docs/en/v6/components/navigate
GitHub - brave-people/Dev-Event: 🎉🎈 개발자 {웨비나, 컨퍼런스, 해커톤} 행사를 알려드립니다. [with 남송리 삼번지]
🎉🎈 개발자 {웨비나, 컨퍼런스, 해커톤} 행사를 알려드립니다. [with 남송리 삼번지] - GitHub - brave-people/Dev-Event: 🎉🎈 개발자 {웨비나, 컨퍼런스, 해커톤} 행사를 알려드립니다. [with 남송리 삼번지]
GitHub
https://velog.io/@yujuck/Javascript-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8A%A4%EC%99%80-%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81
Planning next to your code - GitHub Projects is now generally available | The GitHub Blog
Today, we are announcing the general availability of the new and improved Projects powered by GitHub Issues. GitHub Projects connects your planning directly to the work your teams are doing in GitHub and flexibly adapts to whatever your team needs at any point.
The GitHub Blog
Vue.js
캡틴판교
Vue.js - The Progressive JavaScript Framework | Vue.js
Vue.js - 프로그래시브 자바스크립트 프레임워크
https://usingu.co.kr/frontend/url%EA%B3%BC-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C/
Nullish coalescing operator - JavaScript | MDN
널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.
https://news.hada.io/topic?id=6391
Just a moment...
ViteConf
A free online conference about Vite and the projects reimagining Web Development, brought to you by StackBlitz
리스트와 Key – React
A JavaScript library for building user interfaces
2022년 8월 1일 월요일
ECMAScript® 2022 Language SpecificationMenu
웹 프로그래밍 튜토리얼 | PoiemaWeb
Front-end Development Tutorial
PoiemaWeb
Join the 테오의 프론트엔드 Discord Server!
Check out the 테오의 프론트엔드 community on Discord - hang out with 415 other members and enjoy free voice and text chat.
Discord
GitHub - developer-1px/adorable: Action Dispatch On Reducer Effect Story / Observable based State Management Library
Action Dispatch On Reducer Effect Story / Observable based State Management Library - GitHub - developer-1px/adorable: Action Dispatch On Reducer Effect Story / Observable based State Management Library
GitHub
https://discord.gg/ZCFTMTfGQj
Tips for first deployment to Netlify
Hi everyone, I’m looking for some tips when first deploying a site to Netlify and would welcome any advice! I have a Gatsby site that’s in local development. Most of the site is complete but I’m still waiting on some c&hellip;
Netlify Support Forums
[React] Form 상태 다루기 (Formik vs react-hook-form)
이 포스트에서는 form 상태관리를 하는 방법중에서 React-hook-form 과 Formik을 다루면서 두 라이브러리를 비교하는 글입니다. Form 상태를 다루기 위해서 어떤 것을 사용하고 선호하시나요? Form 상태를 다루는 방법은 다양하게 있습니다. 기본적인 Controlled Components 사용하기 React Context로 Form의 상태 관리하는 법 formik react-hook-form redux-form 목차 [React에서 기본 Form…
Vite
Next Generation Frontend Tooling
React 톺아보기 - 01. Preview | Deep Dive Magic Code
모든 설명은 v16.12.0 버전 함수형 컴포넌트와 브라우저 환경을 기준으로 합니다. 버전에 따라 코드는 변경될 수 있으며 클래스 컴포넌트는 설명에서 제외됨을 알려 드립니다.…
React Hooks useEffect에서 oldValues와 newValues를 비교하는 방법은 무엇입니까?
React Hooks useEffect에서 oldValues와 newValues를 비교하는 방법은 무엇입니까? rate, sendAmount 및 receiveAmount의 세 가지 입력이 있다고 가정 해 보겠습니다. useEffect diffing params에 3 개의 입력을..
yoursource
react/ReactFiberHooks.new.js at a8c9cb18b7e5d9eb3817272a1260f9f6b79815a2 · facebook/react
A declarative, efficient, and flexible JavaScript library for building user interfaces. - react/ReactFiberHooks.new.js at a8c9cb18b7e5d9eb3817272a1260f9f6b79815a2 · facebook/react
GitHub
(번역) 리액트 훅(React Hooks)의 클로저 트랩(Closure Trap) 이해하기
원문: https&#x3A;//betterprogramming.pub/understanding-the-closure-trap-of-react-hooks-6c560c408cde좋은글 번역을 허락해주신 bytefish님께 감사드립니다.The Closure Trap of R
Understanding the Closure Trap of React Hooks
But in the development process, we often encounter some problems. The most classic problem is the closure trap of React Hooks. Some friends may have encountered similar problems, but they may not…
Medium
react/ReactHooks.js at 0da5ad09db7ac8c0f86142f7e5ff1f72e6d33810 · facebook/react
A declarative, efficient, and flexible JavaScript library for building user interfaces. - react/ReactHooks.js at 0da5ad09db7ac8c0f86142f7e5ff1f72e6d33810 · facebook/react
GitHub
https://youtube.com/shorts/rmCQ0Kas9tM?feature=share
2022년 7월 31일 일요일
2022년 7월 30일 토요일
테오의 스프린트 10기
즐겁고 성공한 협업을 경험해보자는 취지로 시작된 스프린트가 10번째를 맞이 하게 되었습니다. 회가 거듭하면서 점점 더 나은 프로세스가 만들어지고 프론트엔드 뿐만 아니라 백엔드, 디자이너, 비개발자, PM 지망생등 더 다양한 분야의 참가자들이 함께 해준 지난 5일간의 여
https://mo-re.netlify.app/
NaengPa
Web site created using create-react-app
https://discord.gg/ZCFTMTfGQj
ReactJS : Dynamically Rendering Out A List/Array
In this tutorial we are going to go over, how we can output a list/array out dynamically within ReactJS.
YouTube
How to build a table of contents in React
A table of contents lets your readers see a high-level summary of your page. In this tutorial, we’ll be building a table of contents with…
asdb-frontend-ui - HTML, CSS, JS Repl
Run HTML, CSS, JS code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.
replit
DateTimeValidation demo — MUI X (forked) - CodeSandbox
https://github.com/mui/mui-x/blob/v5.14.0/docs/data/date-pickers/date-time-picker/DateTimeValidation.tsx
CodeSandbox
Chrome Extensions · Issue #17 · JaeYeopHan/tip-archive
Chrome Extension for Rich GitHub Octodirect 자신의 저장소, Star를 누른 저장소 그리고 이전에 방문했던 저장소로 바로 이동할 수 있도록 도와주는 extension입니다. Octotree GitHub Repository 화면에서 소스 디렉토리 구조를 좌측에 보여준다. OctoLinker GitHub Repository : https://github.com/OctoLinker/OctoLi...
GitHub
다시 쓰는 함수형 프로그래밍
> 참 좋은데 어떻게 표현할 방법이 없네... 오랜 기간 개발을 공부하게 되면서 여러가지 패러다임의 변화를 겪었는데 그 중에서 인상깊었던 것중에 하나는 객체지향 패러다임에서 함수형 패러다임으로 넘어오는 것이었습니다. 함수형 패러다임이 알면 쉬운데 참 설명을 하기가 어렵
[닥터차🚙] 출근 3일 차
하루종일 코딩해봤다
https://www.sizplay.dev/TIL/image-lazy-load-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC/
HTMLImageElement.complete - Web APIs | MDN
The read-only HTMLImageElement interface's complete attribute is a Boolean value which indicates whether or not the image has completely loaded.
Hook의 개요 – React
A JavaScript library for building user interfaces
함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?
전혀 다른 '포켓몬'이라고 할 수 있다.
프리온보딩 프론트엔드 챌린지 1차 | 원티드
AI 채용, 연봉 정보, 이력서, 커리어 콘텐츠까지 커리어 성장에 필요한 모든 것, 원티드에서 만나보세요.
원티드
CSS Nesting 문법 선택에 투표해 주세요 | GeekNews
SCSS, Less, Stylus 등에서 사용되던 CSS 중첩 문법의 공식버전이 고려중3가지 중 하나@nest : 현재 CSS Nesting 1 문법에 지정된 것@nest restricted : 더 엄격한 대안Brackets : 추가적인 {} 를 쓰는 방식커뮤니티의 의견을 묻는 중. 원글 최하단 Take Survey 버튼을 눌러서 투표에 참여 가능
GeekNews
30 mental models that will make you more successful in life
Mental models are magical. Once you learn one, you start seeing it everywhere. It changes your thinking forever. They make you understand the...
reddit
element.scrollIntoView - Web API | MDN
Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.
2022년 7월 29일 금요일