스터디

프론트엔드 기술에 대한 특징, 사용법을 정리하고 전체가 발전할 수 있는 개발 생태계를 구성하기 위해서 꾸준히 공유하고 있습니다.

1. 기술블로그https://seungahhong.github.io/
2. 노션https://material-debt-c1c.notion.site/daa60481e37840ea9e1b7e1b12269942
3. FrontendPlaywright, Jest, MSW, CSS-in-JS...

NodeJS 기반의 Express 특징, 사용법을 익히기 위해서 간단한 블로그용 서버를 구축한 스터디 내용입니다. 기술스택으로는 Server: Express, Log: winston/morgan, Markdown: remark, DB: MongoDB, ODM: Mongoose, Cloud DBaas: Atlas를 사용하였습니다.

1. Githubhttps://github.com/seungahhong/express-blog-server
2. 특징https://www.notion.so/express-b41a66c8ea9b4245bd8859c899ffbeaf
3. Backendexpress, typescript, mongodb, remark, morgin, winston

캔버스에 특징, 사용법을 익히기 위해서 만든 웹사이트이며, 렌더링 형태로는 사각형, 삼각형, 원, 라인, 텍스트, 이미지 타입이 있습니다.

1. Githubhttps://github.com/seungahhong/canvas-paint
2. URLhttps://canvas-paint-nine.vercel.app/
3. 특징https://seungahhong.github.io/blog/2022/03/2022-03-29-canvas/
4. Frontendreact, typescript, jotai, mui
5. DeployVercel

리액트에서 사용하는 상태관리에 대한 특징, 사용법을 익히기 위해서 동일한 로직을 여러 상태관리로 구현할 경우에 대해서 정리한 웹사이트 입니다.

1. Githubhttps://github.com/seungahhong/states-todos
2. URLhttps://seungahhong.github.io/states-todos
3. 특징https://material-debt-c1c.notion.site/state-management-0bbd0e51f3784ee1b477515dd19d608b
4. Frontendreact, typescript, @reduxjs/toolkit, redux, mobx, recoil, react-query, swr, jotai, zustand
5. Deploygh-pages

라우팅 방식에 대한 특징, 사용법을 익히기 위해서 동일한 로직을 전통적 링크, AJAX, Hash, PJAX 방식으로 구현한 웹사이트입니다.

1. Githubhttps://github.com/seungahhong/router-tutorial
2. 특징https://www.notion.so/pure-router-f3126bda56e74cd8bce7a04f04bb6edd
3. Frontendreact, react-router, scss

폼 상태,유효성에 대한 특징, 사용법을 VanilaJS, React, React-hook-form 3가지의 방식으로 구현한 웹사이트입니다.

1. Githubhttps://github.com/seungahhong/form-tutorial
2. 특징https://seungahhong.github.io/blog/2022/05/2022-05-30-form/
3. FrontendvanillaJS, react, react-hook-form, scss, mui