MyTutorials MyTutorials

Web Dev/8. 메모

• Tailwind css로 초간단 Dropdown 메뉴 구성하기

  Web Dev/8. 메모 2021. 6. 2. 11:23

  const DropDown: FC = ({ children, title }) => { const [open, setOpen] = useState(false); return ( setOpen(!open)} > {title} // children으로 받은 것들에 적용할때 {cloneElement(children, { className: `transform ${ open ? `scale-y-100` : `scale-y-0` } transition duration-500 ease-in-out origin-top w-full bg-white absolute text-black text-center border-2`, onClick: () => setOpen(!open), })} // 바로 style 적용 setO..

  Read More
• 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..

  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
• JWT 란?

  Web Dev/8. 메모 2021. 3. 5. 23:22

  1. JWT는 Authorization을 위한 것이다. Authentication을 위한 것이 아니라. - Authenticate는 유저네임과 패스워드를 받아서 이게 맞는지 확인하는 것을 말하는 것이다. (로그인 하는 것을 생각) - Authorization은 지금 요청하는 사람이 어떤 리소스에 접근이 가능한지를 verify 하는 것이다. 2. 원래 Authorization을 위해서는 Session을 사용했다. 로그인할때(Authentication할때), response에 set-cookie헤더를 사용해서 Session id를 보내놓고, User가 요청할때, 무조건 session id쿠키를 같이 보내서, 이 쿠키값이 서버의 메모리든 뭐든에 저장되어있던 session 값과 일치하는지 확인하고, 이 user..

  Read More
• img Lazy loading: loading="lazy" 옵션을 사용하자

  Web Dev/8. 메모 2021. 2. 26. 13:42

  img lazy loading을 구현하기 위해서 별의별 기법을 다 써보곤 했는데, 브라우저 단에서 아주 잘 지원하고 있다. (크롬 기준) web.dev/browser-level-image-lazy-loading/ Browser-level image lazy-loading for the web This post covers the loading attribute and how it can be used to control the loading of images. web.dev

  Read More
• 정규표현식

  Web Dev/8. 메모 2021. 2. 24. 11:58

  www.youtube.com/watch?v=Gg0tlbrxJSc&ab_channel=MINIMILAB 정규표현식: 문자열에 특정한 규칙이 있는 경우, 이를 추출하기 위해 사용하는 것 - 직접 라우터를 만들어보는데 이때 parameter나, fragment를 추출할때 사용한다. - 이를 통하면 복잡한 처리가 줄어든다 - 쉽게 사용할 수 있는 곳: regexr.com/ RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com - developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Reg..

  Read More
• Client-side storage: 브라우저를 통해 웹사이트가 유저의 컴퓨터에 데이터를 저장하는 여러 방법

  Web Dev/8. 메모 2021. 2. 21. 18:06

  developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage Client-side storage - Learn web development | MDN Modern web browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, r deve..

  Read More