Web Dev/5. Projects
-
Jump to definition 기능 확장을 위한 vscode extension 개발Web Dev/5. Projects 2021. 8. 1. 17:37
Jump to definition 기능을 보완하는 Vscode extension 개발기 VScode extension을 개발한 이유 medium.com Medium에다가 글을 첨써봤다. 너무 뭔가 본격적인데 같아서 쓸때 달달 떨린다. 원했던 기능은 vscode에서 키워드에 마우스 올렸을때 definition으로 이동하는 기능을 확장하는거였다. css modules을 사용하는데, css-module을 사용하는 부분에서 jump to definition을 했을때, css 파일로 이동하는게 아니라, post-css가 뭔가 처리한 파일에다가 연결을 해줬다. 그래서 매번 css 파일을 열다가 이러다가 장수하긴 글른거같아, vs code extension을 만들어봤다. 생각보다 어려운건 아니었는데, 하는 사람들이 ..
-
첫번째 게임 prototype구성 - useReducer, useRef, transition/transform 사용Web Dev/5. Projects 2021. 5. 22. 23:26
요새 이런저런거 공부한다고 막상 개발을 못해서 좀 답답했는데, 토요일 10시에 일어났기 때문에 어쩐지 지금 딱 개발하기 딱 좋다. 1. 현재 메인 화면에서 client-side navigation되는 부분이 없어서 이부분을 해줄거다. 첫번째 게임에 대해서만. 2. Tap Tap 동작이 있고, react에서 css animation을 적용할 것. 밤에 만든것 Component 기본 구성 지금 현재 큰 흐름은 이런식이다. index페이지에서 puzzle 컴포넌트로 연결하고, puzzle 페이지는 useReducer를 통해서 상태를 관리한다. useReducer를 통한 상태 관리 // useReducer를 이용한 state 관리 const STATUS = { LOADING: 0, GAME_INTRO: 1, G..
-
[개인 블로그 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블로그로 갈아타려고 블로그를 개발한지 꽤 시간이 됬는데, 그거 개발하겠다고 일지를 쓰고 뭐 중간에 다른 프로젝트를 하다보니 티스토리에 정이 더 들어버려서 그냥 티스토리를 쓰겠다고 마음을 먹어버렸다. 여튼 이때까지 구현해온것은 아래와 같..
-
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를 사용할 수 있도록 지원한다..
-
Autism Project 시작하기Web Dev/5. Projects 2021. 5. 10. 13:53
예전부터 얘기는 조금씩 나누던 프로젝트인 Autism Project를 시작하려고 한다. 지금 미국에 사는 친구랑 얘기가 잘되어서 자폐 아동들을 위한 웹 기반 교육 프로그램을 개발해보려고 한다. 사용하는 기술스택은 Next.js 가 될 것 같고, 이 프로젝트에서는 animation, svg, canvas, touch event(mouse event) 등을 적극적으로 활용하면서 공부할 예정이다. 우선 Next.js와 Amplify를 통해서 프로젝트 기본 구성을 하고, 게임을 본격적으로 개발해서 붙이는 식으로 구성을 할 것 같다! 공부할 것들 Reference 1. Next.js nextjs.org/ Next.js by Vercel - The React Framework Production grade Reac..
-
[toy blog service] 1차 마무리Web Dev/5. Projects 2021. 4. 23. 18:07
이번에 하면서 페이지 이동할때 window.confirm 메시지 처리도해보고 웹팩 삽질도 해보고 배운게 많은 것 같다. 이번에 배운것들을 좀더 확장하고자 다음에는 내 블로그 사이트를 다시 리뉴얼할건데, 그걸 next.js로 하면서 지금까지 만든것들을 좀더 수정보완하려고 한다. 다음프로젝트는 react 심화를 하고, next.js도 다시 알아보는 시간을 가지려고 한다. 블로그 서비스를 따라하면서 이렇게 많은 것들을 배우게 될거라곤 생각을 못했는데,진짜 좋은 경험이었고, 계속 코드를 수정하면서 좋은 구조로 바꿔가야겠다!