전체 글
-
[알고리즘] Union-FindWeb Dev/2. JS 알고리즘 2021. 5. 12. 18:52
// 그래프 관련 처리 // 대표적인 그래프 관련 알고리즘 Union-Find(합집합 찾기) // 부모노드를 찾는 함수 function getParent(parentArr, x){ if(parentArr[x] === x){ return x; } parentArr[x] = getParent(parentArr, parentArr[x]); return parentArr[x]; } // 두 부모노드를 합치는 함수 function unionParent(parentArr, a, b){ a = getParent(parentArr, a); b = getParent(parentArr, b); if(a < b) parentArr[b] = a; else parentArr[a] = b; // 항상 더 작은 값으로 } // 같..
-
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..
-
Flux, Virtual Dom 간단 메모Web Dev/3. React 관련 2021. 4. 26. 23:46
Flux facebook.github.io/flux/docs/in-depth-overview In-Depth Overview | Flux Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can facebook.github.io 작년에는 이글이 이해가 안되었는데, 어쩌면 올해는 이해되리라는 마음으로 다시 읽어..
-
[toy blog service] 1차 마무리Web Dev/5. Projects 2021. 4. 23. 18:07
이번에 하면서 페이지 이동할때 window.confirm 메시지 처리도해보고 웹팩 삽질도 해보고 배운게 많은 것 같다. 이번에 배운것들을 좀더 확장하고자 다음에는 내 블로그 사이트를 다시 리뉴얼할건데, 그걸 next.js로 하면서 지금까지 만든것들을 좀더 수정보완하려고 한다. 다음프로젝트는 react 심화를 하고, next.js도 다시 알아보는 시간을 가지려고 한다. 블로그 서비스를 따라하면서 이렇게 많은 것들을 배우게 될거라곤 생각을 못했는데,진짜 좋은 경험이었고, 계속 코드를 수정하면서 좋은 구조로 바꿔가야겠다!
-
[toy blog service] Next.js의 API와 jsonWeb Dev/5. Projects 2021. 4. 19. 22:06
Next.js에서는 API 관련 기능을 제공한다. 여기를 보면 이런식으로 구성을 해서 /api/* 로 매핑이 된다. 얘들은 서버사이드에서만 번들링이 된다. 나는 여기서 공부를 위해서 여러 endpoint를 만들어봤는데, 아래는 /api/[username]/index 를 처리하는 파일은 아래와 같이 작성했다. // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import type { NextApiRequest, NextApiResponse } from "next"; import { selectData, insertData } from "../../../../utils/common"; // http://localhost..
-
[toy blog service] getServerSideProps 이용하기Web Dev/5. Projects 2021. 4. 18. 23:13
data fetching 중 getStaticProps, getStaticPaths(static build in dynamic route), getServerSideProps 중 마지막 것을 사용해보았다. 이건 간단하게 write 페이지에서 글을 업데이트 중일때는 getServerSideProps를 통해서 serverSide에서 data를 fetching했다. 이건 nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering여기서 확인할 수 있다. Basic Features: Data Fetching | Next.js Next.js has 2 pre-rendering modes: Static Generation ..
-
[toy blog service] React Component를 Package화 하기(hayoung-markdown)Web Dev/5. Projects 2021. 4. 16. 23:10
이걸 한 이유 이걸 왜했을까...를 하다보니 webpack설정과 npm link 관련 문제로 나도 너무 괴로워서 고민을 했는데, React 컴포넌트자체를 패키지화해서 내 개인 블로그(gatsby 기반)와 이번 toy blog service에서 계속 사용하고 싶었기 때문이다. React Component를 Package화 하는 전반적인 흐름은 webpack을 설정하고(typescript설정까지) react/react-dom 설치하고 설정하고 library화를 하기위한 설정 types관련 설정(Typescript를 사용하는 패키지를 위한 설정) 스타일관련 설정하는 것 next.js에서 client-side-rendering만하기 React 컴포넌트를 패키지화한게 처음이라(프로젝트 내에서 공통적으로 사용하기 ..
-
[toy blog service] Webpack, TypeScript와 React(Babel은 천천히!)Web Dev/5. Projects 2021. 4. 14. 18:58
Webpack이란? [core concepts] Webpack은 "Static Module Bundler for modern javascript applications" 이다. 웹팩이 앱을 처리할때 내부적으로 dependency graph를 그린다. 버전 4부터는 configuration 파일이 꼭필요한것은 아니지만, 원하면 configuration파일을 통해서 customizing할 수 있다. 핵심적인 컨셉은 아래와 같다. Entry Entry point는 웹팩이 어디서부터 dependency graph를 그릴지 알려주는 것이다. 웹팩은 여기서부터, 이 entry파일이 어떤 파일들에 의존하고 있는지 파악한다. (default는 src/index.js) Output 번들파일을 어디로 나오게 하면되는지 저..