Web Dev
-
React관련 싹 훑기(6) - react-redux hooks 부분 문서 읽고 실습Web Dev/3. React 관련 2021. 5. 26. 14:14
Hooks 파트 문서 읽기 https://react-redux.js.org/api/hooks Hooks | React Redux Hooks react-redux.js.org 공식문서 예시를 내가 주로 쓰는 함수형과 hooks만쓰도록 한번 만들어 보려고 한다. 1. create-react-app 실행 후에 redux, react-redux 설치 - redux installation guide: https://redux.js.org/introduction/installation - react-redux installation guide: https://react-redux.js.org/introduction/getting-started yarn add redux react-redux yarn add -D r..
-
React관련 싹 훑기(5) - you might not need redux, normalizrWeb Dev/3. React 관련 2021. 5. 25. 21:43
Redux를 보다가 찾은 내용 간략하게 메모 Dan Abramov의 "you might not need redux" https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 You Might Not Need Redux People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux… medium.com 위글을 간략하게 요약을 해보았다. redux는 아래의 세가지를 하도록 강제한다. - 앱의 상태를 plain object, arrays로 표현한다 - 앱의 ..
-
React관련 싹 훑기(4) - Redux Subscriber는 어떻게 동작하는가Web Dev/3. React 관련 2021. 5. 25. 19:58
State를 관리할때 가장 헷갈렸던 부분은 어떻게 state는 한 오브젝트로 관리되면서, 특정부분의 변화만을 listening한다음에 컴포넌트에 렌더링할 수 있는가였다. Redux자체의 subscriber https://redux.js.org/api/store#subscribelistener Store | Redux Store redux.js.org // 공식문서: https://redux.js.org/api/store#subscribelistener function select(state) { return state.some.deep.property } let currentValue function handleChange() { let previousValue = currentValue currentV..
-
두시간 알고리즘 - 3일차, StackWeb Dev/2. JS 알고리즘 2021. 5. 25. 12:05
Stack이 정말 활용도가 높다는 사실을 새삼깨닫고, 오늘은 stack을 심화해서 응용하는 문제들을 풀어보려고 한다. 2시간을 정해두고 알고리즘을 한지 3일이 되었는데, 이제 내일까지만하면 작심삼일은 깨는거다. 1. Maximum Subarray Min-Product: 1h28m53s55 https://leetcode.com/problems/maximum-subarray-min-product/ Maximum Subarray Min-Product - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next inter..
-
두시간 알고리즘 - 2일차, 오늘은 LeetCode Weekly Context 240 푼다Web Dev/2. JS 알고리즘 2021. 5. 25. 12:03
오늘도... https://leetcode.com/contest/weekly-contest-240 Contest - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제 풀이 1. 인구수 구하기 10m https://leetcode.com/problems/maximum-population-year/ Maximum Population Year - LeetCode Level up your coding skills and quickly land a job. This i..
-
Interactive Website - 3D websiteWeb Dev/6. Graphics 2021. 5. 24. 13:01
Three.js를 사용해서 웹사이트를 만드는 튜토리얼을 해보았다. React app에서 어떻게 하면 mouse 이벤트를 활용해서 3d 애니메이션을 적용하는지 파악할 수 있었다. 동작 화면 큰 흐름 canvas만 처리하는 컴포넌트를 빼고, 그위에 layer를 해주는 부분을 따로 뺀다. canvas는 screen-size에 꽉차도록 구성하고, main은 일반적으로 구성을 하되, absolute 설정을 해서 위에 떠있도록 한다. canvas 컴포넌트에서 mouse scroll 이벤트가 동작하면 카메라 위치를 옮기거나, 물체를 rotate하거나 position을 업데이트해주는 동작을 추가하면 유저의 인터렉션에 따라서 3d 이벤트가 동작하도록 제어가 가능하다. 내 코드 https://github.com/hayou..
-
Interactive Website - 내 프로젝트 템플릿Web Dev/6. Graphics 2021. 5. 24. 12:46
Create-React-App, TypeScript, TailwindCSS를 설정한 템플릿을 가지고 많이 연습하려고 만들었다. https://github.com/hayoung0Lee/Interactive-Website/tree/main/template hayoung0Lee/Interactive-Website Contribute to hayoung0Lee/Interactive-Website development by creating an account on GitHub. github.com 진짜 기본만 나오도록 구성했다. 앞으로 하면서 이 템플릿을 조금씩 업데이트해서 관련한 작업을 할때 필요한 것들을 좀 세팅을 하는 용도로 사용하려고 한다.
-
두시간 알고리즘 - 1일차, 오늘은 LeetCode Weekly Context 241 푼다Web Dev/2. JS 알고리즘 2021. 5. 24. 11:57
오늘은... 오늘은 문제푼다. https://leetcode.com/contest/weekly-contest-241 Contest - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 1. 부분집합을 구하는 문제: 34m30s29 https://leetcode.com/problems/sum-of-all-subset-xor-totals/ Sum of All Subset XOR Totals - LeetCode Level up your coding skills and q..