MyTutorials MyTutorials

전체 글

• 두시간 알고리즘 - 5일차, two pointer(2)

  Web Dev/2. JS 알고리즘 2021. 5. 28. 11:11

  https://leetcode.com/tag/two-pointers/ 더 풀어야징 1. 3Sum: 29m02s95 https://leetcode.com/problems/3sum/ /** * @param {number[]} nums * @return {number[][]} */ var threeSum = function(nums) { nums.sort((a, b) => a - b); const answer = []; const checker = new Set(); for(let k = 0; k < nums.length - 2; k++){ if(checker.has(nums[k])){ continue; } checker.add(nums[k]); const target = 0 - nums[k]; let lef..

  Read More
• React 관련 싹훑기(9) - 중첩되게 block이 들어갈 수 있도록 구성하기 + Tab기능(아직은 two depth) + focusing

  Web Dev/3. React 관련 2021. 5. 28. 00:07

  저녁에 한일은 중첩되게 block을 구성하는 것이었다. Recursive Component 내가 만든 EditableBlock컴포넌트는 내부에서 또 하위 컴포넌트를 불러와야한다. 그래서 react 컴포넌트도 recursive하게 호출이 되나 봤더니, 역시 함수이기때문에 가능하다. https://dev.to/knowit-development/recursive-components-in-react-37ka 아주 엉망진창이지만 아래는 내 코드이다. import ContentEditable from "react-contenteditable"; import { useRef, useState, useEffect } from "react"; import { useSelector, useDispatch } from "r..

  Read More
• React 관련 싹훑기(8) - 간단하게 Notion처럼 Editing이 가능한 블럭 구성하기

  Web Dev/3. React 관련 2021. 5. 27. 16:22

  오늘 대략 nested block 구조를 잡긴했고, 현재 모양상으로는 1depth기준으로만 블럭이 추가되도록 되어있다. Enter를 치면 새로운 블럭이 추가되거나 다음 블럭으로 focus를 이동하고 있다. redux를 잘몰랐을때 notion을 만들어보려고 했었을때는 머리가 정말 뽀개지는줄알았는데, redux를 쓰니까 확실히 편하다. redux를 통해서 앱을 설계할때 디비 설계하는 것처럼 섬세하게 설계한다음 해야하는거구나 알 수 있었던 시간이다. 신기했던 것은 https://mytutorials.tistory.com/406?category=917383 React컴포넌트에서 HTMLElement contentEditable 속성 사용하기 const EditableBlock = ({ block }) => { ..

  Read More
• React컴포넌트에서 HTMLElement contentEditable 속성 사용하기

  Web Dev/3. React 관련 2021. 5. 27. 14:31

  const EditableBlock = ({ block }) => { return ( {block.contents} ); }; export default EditableBlock; React에서 위와 같이 사용하면 난리를 친다. 그래서 react-contenteditable 라이브러리를 활용할 수 있다. https://www.npmjs.com/package/react-contenteditable react-contenteditable React component representing an element with editable contents www.npmjs.com yarn add react-contenteditable 아래와 같이 사용할 수 있다. import ContentEditable from ..

  Read More
• HTMLElement에 contentEditable 속성을 줘서, 편집가능하도록 만들기

  Web Dev/8. 메모 2021. 5. 27. 13:53

  https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable HTMLElement.contentEditable - Web APIs | MDN The contentEditable property of the HTMLElement interface specifies whether or not the element is editable. developer.mozilla.org contentEditable이라는게 있다는것에 충격을 받은 하루다. input을 써서 어떻게 해야하나 머리아팟는데 정말 대충격이다.... I am editable by the user 이렇게 하면 이렇게 내용을 고칠수가 있게 된다.

  Read More
• Appending parameter to URL without refresh

  Web Dev/8. 메모 2021. 5. 27. 12:52

  https://stackoverflow.com/questions/32828160/appending-parameter-to-url-without-refresh Appending parameter to URL without refresh I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on stackoverflow.com 앱에서 refresh없이 url만 바꿔야하는 일이 있어서 찾아봤더니 위의 글이 좋았다. - Hi..

  Read More
• 두시간 알고리즘 - 4일차, two pointer(1)

  Web Dev/2. JS 알고리즘 2021. 5. 27. 10:49

  4일차.. https://leetcode.com/tag/two-pointers/ Two Pointers - 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 - 기법 설명: https://velog.io/@adorno10/%ED%88%AC-%ED%8F%AC%EC%9D%B8%ED%84%B0-Two-Pointer 투 포인터 (Two Pointer) 정렬된 리스트를 두 개의 포인터를 이용해 순차적으로 접근하면서 두 포인터 구간의 값이 타겟 값과 같을 때 까지 포인터를 조..

  Read More
• React 관련 싹훑기(7) - Redux 앱 구상 및 간단한 상태설계

  Web Dev/3. React 관련 2021. 5. 26. 22:42

  Notion처럼 페이지별로 블럭을 구성하는 앱을 만들어보려고 한다. 상태 설계하기 아무래도 나중에 바꾸겠지만, 우선 page와, page별 블럭을 구성하는 상태를 구성하기로 했다. react-redux 튜토리얼을 참고했을때 notion처럼 좌측에는 페이지가 추가되고, 내부에는 여러개의 block데이터들이 중첩될때는 위처럼 해보면 어떨까 싶다. reducer는 pagesReducer와 blocksReducer를 두개를 구성하고, pages를 생성할때 pageIdes를 추가하고, pageById에는 해당 page의 메타 정보를 저장할려고 한다. 그리고 blocks는 특히 root에 있는 block들의 id를 추가하려고한다. blocks는 본격적으로 id에 대해서 block의 정보를 가지고 있게 하려고 한다...

  Read More