전체 글
-
useEffect vs useLayoutEffectWeb Dev/3. React 관련 2021. 5. 19. 16:56
https://daveceddia.com/useeffect-vs-uselayouteffect/ When to useLayoutEffect Instead of useEffect (example) How is useEffect different from useLayoutEffect, and when do you use useLayoutEffect? Most of the time, you want useEffect. Read on for why. daveceddia.com 이글이 좋았다. useEffect야 일반적인 99프로의 경우에 사용하면 되는데, 특히 component rerender가 발생하고 실제로 브라우저에 변경사항을 반영하기 그 사이에 뭔가를 처리해야하면 useLayoutEffect를 사용할 수 ..
-
useEffect 내에서 state를 변화하고, 내부에서 함수를 호출했을때, 왜 변화한 state가 보이지 않는가?Web Dev/3. React 관련 2021. 5. 19. 16:06
https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval State not updating when using React state hook within setInterval I'm trying out the new React Hooks and have a Clock component with a counter which is supposed to increase every second. However, the value does not increase beyond one. function Clock() { ... stackoverflow.com Intermedia..
-
React관련 싹 훑기(1) - Complete Intro to React v6Web Dev/3. React 관련 2021. 5. 17. 19:53
https://frontendmasters.com/courses/complete-react-v6/ Learn React in this Complete Introduction to React Course – Use React Hooks to Build Real-World Applications with Brian Holt Much more than an intro, you’ll build with the latest features in React, including hooks, effects, context, and portals. Learn to build real-world apps from the ground up using the latest tools in the React ecosystem, ..
-
[개인 블로그 renewal] Next.js와 client-side navigation, 상태관리(작성중)Web Dev/5. Projects 2021. 5. 15. 22:52
이 주제를 공부하는 이유 Single Page App에서 상태 관리라는 것은 좀 직관적으로 이해가 되었다. 모든 것들이 브라우저 상에서 일어나고 있으니 대충 상태도 브라우저에서만 관리되면 되고.. 하지만 Next.js를 하다보니 도대체 여러페이지로 구성됬다는데, 어떻게 _app.js 내에서 context나 redux store가 있으면 모든 페이지에서 공유가 되는건지 이해가 되지 않아서 상태 및 Next.js자체에 대해서 좀 더 자세히 알아보는 시간을 가졌다. 우선 상태란? 우선 이 글을 읽어보았다. How State Management works? Dead simple SM in Vanilla JavaScript How State Management works? Dead simple SM in Vani..
-
[개인 블로그 renewal] Aws Amplify, App Sync 관련 설정하기Web Dev/5. Projects 2021. 5. 14. 22:39
AWS를 아직 잘 아는 것은 아니지만 요근래에 Amplify를 좀 자주 다루게 되어서 이번 프로젝트에서 간단하게 graphql API를 만들어서 쓰고 싶어서 Amplify docs를 잘 따라서 설정을 했다. Amplify란? Amplify 는 AWS에서 풀스택 앱을 개발하는데 도움을 주려고 만든 그런거다. https://aws.amazon.com/ko/amplify/ 모바일 및 웹 앱을 빠르게 구축 | AWS Amplify | Amazon Web Services 개발 제공 관리 aws.amazon.com 첨에 뭔가 싶어서 헷갈렸는데, 일단 얘는 들이박아서 쓰면서 파악을 하는게 쉬운 것 같다. Aws가 Next.js 관련해서 점점 지원이 많아지는데, amplify docs에서 Next.js 관련해서 사용하..
-
[개인 블로그 renewal] 프로젝트 노선 변경 + custom notionWeb Dev/5. Projects 2021. 5. 14. 20:35
https://github.com/hayoung0Lee/hayoung0Lee.github.io hayoung0Lee/hayoung0Lee.github.io My Github Blog, Next.js / still under development. Contribute to hayoung0Lee/hayoung0Lee.github.io development by creating an account on GitHub. github.com 현재까지의 진행사항 티스토리에서 github블로그로 갈아타려고 블로그를 개발한지 꽤 시간이 됬는데, 그거 개발하겠다고 일지를 쓰고 뭐 중간에 다른 프로젝트를 하다보니 티스토리에 정이 더 들어버려서 그냥 티스토리를 쓰겠다고 마음을 먹어버렸다. 여튼 이때까지 구현해온것은 아래와 같..
-
[자바스크립트로하는 자료구조와 알고리즘] 1- 5장Web Dev/2. JS 알고리즘 2021. 5. 14. 16:19
책이 매우 좋다. 자바스크립트로 이래저래 삽질하고 해왔던 사람이라면 이책으로 내용을 다 한번 정리하면 효과가 좋을 것 같다. // O(n) function exampleLinear(n){ for(let i = 0; i < n; i++){ console.log(i); } } // O(n*n) function exampleLinear2(n){ for(let i = 0; i < n; i++){ for(let j = 0; j < n; j++){ console.log(j); } } } // O(n*n*n) function exampleLinear3(n){ for(let i = 0; i < n; i++){ for(let j = 0; j < n; j++){ for(let k = 0; k < n; k++){ conso..
-
Next.js - Amplify - Tailwind CSS 세팅하기Web Dev/5. Projects 2021. 5. 13. 14:32
Next.js - Next.js를 선정한 이유 SSR 및 static build 등 다양한 렌더링 방식을 가장 쉽게 구현할 수 있었기 때문에 이번에도 Next.js를 사용하기로 했다. - 프로젝트 시작하기 next.js는 아래 명령어로 쉽게 시작할 수 있다. npx create-next-app - src 폴더 생성하기 프로젝트를 생성하고 나면 대략 아래와 같이 구성이 생긴다. 위의 기본 구조에서 나는 pages와 styles 는 src로 옮겨서 좀더 눈에 잘 띄게해서 사용하는 편이다. [공식 문서] 에서도 pages 폴더가 루트에 없다면 src내에 있는 pages폴더를 default로 접근해준다. - TypeScript 설정하기 Next.js는 아주 손쉽게 TypeScript를 사용할 수 있도록 지원한다..