본문 바로가기

Programming/Frontend6

[React] useEffect에서 async 사용하기(typescript 예시) React useEffect hook에서 비동기 함수를 지원하지 않기 때문에 다음과 같이 구현해야 한다.useEffect((): void => { const fetchData = async (): Promise => { const data = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`) if (data.ok) { const json = await data.json() as string console.log(json) } } void fetchData()}, [id])그냥 Promise 체이닝을 사용하는 방법도 있다.useEffect(() => { fetch(`https://jsonplacehol.. 2024. 5. 8.
[pnpm] windows pnpm 업데이트 pnpm add -g pnpm pnpm을 업데이트하는데 자꾸 아래와 같은 에러가 발생했다. EPERM: operation not permitted, unlink 'C:\Users\UserName\AppData\Local\pnpm\pnpm.EXE' 아래 명령어를 사용했더니 해결됐다. pnpm.cmd add -g pnpm @pnpm/exe https://github.com/pnpm/pnpm/issues/5700#issuecomment-1664294702 Can't upgrade pnpm version: EPERM: operation not permitted, unlink `AppData\Local\pnpm\pnpm.EXE` · Issue #5700 · pnpm/pnpm pnpm version: 7.16.1 .. 2024. 4. 11.
[npm] windows npm 업데이트 하기 가장 마음 편한 방법은 Node.js를 다시 설치하는 것이다. https://nodejs.org/ Node.js — Run JavaScript Everywhere Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org npm 업데이트만 하고 싶다면 아래 방법을 이용하자. Node.js v16 이상 npm install -g npm Node.js v14 이하 Powershell 관리자 모드로 실행 후 Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force npm install -g npm-windows-upgrade npm-windows-upgrade 2024. 4. 11.
[css] 모달을 항상 가운데로 정렬하기 outer div는 modal의 background layer다. jsfiddle에서 잘 보이도록 1000px로 고정시켜놨고 실제로는 100%를 사용한다. inner div에는 modal의 내용이 들어간다. 요즘 잘 듣고있는 악뮤의 낙하 뮤직비디오를 넣었다. 아래 fiddle에서 직접 확인할 수 있다. HTML CSS .outer { position: absolute; top: 0; left: 0; height: 1000px; /*100%*/ width: 1000px; /*100%*/ background-color: gray; } .inner { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 500px; height.. 2021. 8. 15.
offsetWidth, scrollWidth, clientWidth 차이 맨날 검색을 해도해도 헷갈리는 offsetWidth, scrollWidth, clientWidth offsetWidth: border를 포함한 width scrollWidth: scroll할 수 있는 숨겨진 영역을 합한 width clientWidth: width(border, scroll bar 포함하지 않음) jsfiddle에서 한 눈에 볼 수 있다. http://jsfiddle.net/y8Y32/25/ 2021. 6. 8.
[css] 티스토리 스킨 적용 시 소스코드 가운데 정렬되는 문제 우연히 구글링 하다가 제 블로그 글을 보게 되었습니다. 하지만.. 얼마 전에 스킨을 바꿨더니 소스코드가 모두 가운데 정렬이 되어버렸습니다 ㅠㅠ 개발자답게 f12를 눌러봅시다. style.css에 entry-content 클래스의 하위 table에 text-align: center로 설정되어있군요. 확인해보니 entry-content는 글 내용 전체를 감싸는 div였습니다. 티스토리 - 블로그 관리 > 꾸미기 > 스킨 편집으로 진입해서 html 편집을 클릭합니다. 문제가 되는 부분을 찾아서 고쳐줍니다. 혹시나 가운데 정렬이 되는 table에는 centered라는 클래스를 주기로 미래의 저와 약속하기로 했습니다. 2020. 8. 3.