Web Dev
-
React 관련 싹훑기(13) Redux toolkit 문서 읽기Web Dev/3. React 관련 2021. 5. 31. 22:29
https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit Getting Started with Redux Toolkit redux-toolkit.js.org 이번에 Notion 프로젝트를 하면서 Redux를 통해서 상태관리를 "잘"하면 정말 원하는 정보를 웹에서 마음껏 띄울 수 있겠다는 생각이 들었다. 그러다 Redux toolkit을 알게 되어서 이부분을 좀더 공부를 해보려고 한다. 최종 목표는 Redux와 TypeScript의 이점을 모두 취하는 것인데, Redux toolkit과 TypeScript가 잘 붙는다는데 toolkit을 너무 몰라서 시작조차 하기 힘들어서 문서를 읽어보기로 했다. Red..
-
두시간 알고리즘 - 6일차, Sliding Window(1)Web Dev/2. JS 알고리즘 2021. 5. 31. 11:11
1. Grumpy BookStore Owner: 56m21s94 https://leetcode.com/problems/grumpy-bookstore-owner/ Grumpy Bookstore Owner - 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 삽질이 심했다. 월욜아침은 이런건가. 윈도우 크기를 고정하고, 해당 범위내에서 불만족하는 고객수를 계속 체크해서, 그게 maximum인곳을 찾은뒤에, 전체 만족하는 고객수에다가 합산을 해주면된다. /** * @pa..
-
Interactive Website - WebXR 을 지원하는 3D관련 프레임워크들Web Dev/6. Graphics 2021. 5. 30. 22:18
https://wonderlandengine.com/news/top-5-webxr-frameworks-comparison/ Top 5 WebXR Frameworks - Comparison Want to start WebXR development? Here is a comparison of the top 5 frameworks to get you started. wonderlandengine.com WebXR쪽을 심심할때 보고 있는데, 계속 Unity얘기가 나와서 예전에 한번 겨우 굴러가는 게임을 만들었던 추억이 떠올라서 대체 WebXR과 unity가 무슨 상관이 있나 해서 봤다. Unity3D Babylon.js Three.js PlayCanvas A-Frame 이거다 3D 만드는 도구다. Unity를 ..
-
Editable dom element에 focus를 할때 cursor로 끝으로 옮기는 법Web Dev/8. 메모 2021. 5. 30. 16:53
// ref: https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442 export const setEndOfContenteditable = (contentEditableElement) => { var range, selection; if (document.createRange) { //Firefox, Chrome, Opera, Safari, IE 9+ range = document.createRange(); //Create a range (a range is a like the selection but invisible) range.selectNodeConten..
-
React 관련 싹훑기(12) - React-ContentEditable관련 reference가업데이트가 안되는 문제 해결,Web Dev/3. React 관련 2021. 5. 30. 16:35
이번에 에러처리를 하면서 JavaScript를 좀더 알게된 느낌이다. React-ContentEditable의 알수없는 동작? // const orderedList = useSelector((state) => getBlockOrder(state, pageId)); // 블럭id마다의 subBlock을 가져옴 setBlockValue(e.target.value)} onKeyDown={(e) => { onKeyDownHandler(e, pageId, blockId, depth); }} onBlur={(e) => onBlurHandler(e)} className={`w-full p-2 rounded-md hover:bg-gray-200`} tabIndex="-1" /> 이런식으로 ContentEditable을..
-
React 관련 싹훑기(11) - Reordering blocks using react-beautiful-dndWeb Dev/3. React 관련 2021. 5. 30. 02:18
일단 블럭을 구조화해놓고 추가나 탭 같은건 되는데 실질적으로 블럭을 reordering 하는 것은 어떻게 하는지 고민을 해보았다. 아래는 현재의 화면이다. 우측에 있는 버튼을 눌렀을때 잡고 이동할 수 있도록 하려고 하는데, 어떻게 하는지 잘몰라서 찾아보았다. 삽질을 하다보니 아래와 같은 라이브러리를 찾을 수 있었다. https://github.com/atlassian/react-beautiful-dnd atlassian/react-beautiful-dnd Beautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dnd github.com 감사인사를 드리고 구현을 하면 될것같다... 정말 고마운 사람들. 중..
-
React 관련 싹훑기(10) - Enter, Tab, 블럭 에디팅 기능까지 리팩토링 완료!Web Dev/3. React 관련 2021. 5. 29. 17:32
이제 React랑 많이 친해진 느낌이다. 노션을 만들어보니까 React가 확실히 jQuery보다는 좋은 녀석이구나 깨달을 수 있었다. 상태처리하는 부분이랑 action부분을 많이 업데이트를 했다. 지금 되는 기능은 1. 한 큰 블럭을 기준으로 마지막 원소에서 엔터를 하면 새로운 블럭이 추가되는 기능 2. Tab을 했을때 상위 블럭의 하위로 이동하고 있다. 뿌듯하다. 큰산은 넘어서, 이제는 1. block을 이동하는 기능이랑, 2. 삭제하는 기능 3. 페이지별로 보이도록 4. 로컬스토리지에 저장해서 불러올 수 있도록 이렇게만 정리하면 된다~
-
Interactive Website - SVG란 무엇인지Web Dev/6. Graphics 2021. 5. 28. 17:09
이전회사에서 아주 SVG쪽은 회사전체에서 제일 많이 다뤘는데도 불구하고, 아직도 잘 모르는것같아서 이번에 웹에서 SVG를 사용해서 Interactive 하게 만드는 방법을 공부를 해보려고 한다. 특히 전에는 데이터 라벨링을 하기 위해서 좌표의 정보를 저장하는 용도로만 사용했는데, 이번 기회로 SVG를 제대로 이용해보고 싶다. 오늘한 결과물 1. 우선 Illustrator가 이제는 없어서, Figma https://www.figma.com/ Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. w..