분류 전체보기
-
React 디자인패턴React 2022. 10. 7. 15:30
1. Data 관점1. MVC제작시기 : 1979.12.10제작회사 : XEROX PARC제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.특징ModelViewController로 구성됩니다.Model : 순수 데이터 모음입니다.View : 시각적 요소로 Model에 데이터를 요청합니다.Controller : 사용자와의 상호작용을 담당합니다.2. MVVM제작시기 : 2005.10.08제작회사 : Microsoft제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.특징ModelViewViewModel로 구성됩니다.Model, View : MVC에서와 동일합니다.ViewModel : Controller에서 좀 더 UI 측면으로..
-
개발자를 위한 Mac 추천 프로그램 7가지Etc Tip 2022. 10. 5. 16:53
1. Homebrew(https://brew.sh/index_ko) 윈도우를 사용하는 경우에는 주로 사이트에 방문해 exe 등의 설치 파일을 다운로드하여 설치하는 게 보통이지만 homebrew를 설치하면 간단한 커멘드로 쉽게 패키지들을 다운로드하고 실행할 수 있습니다. 윈도우를 오래 사용한 사람이라면 처음에는 이런 방식이 불편할 수도 있겠지만 익숙해진다면 다시 돌아가고 싶지 않을 정도의 만족감을 주는 프로그램입니다. 또 아예 설치 자체를 command-line으로만 지원하는 패키지들도 있기 때문에 개발을 위해 Mac을 사용한다면 언제라도 꼭 설치할 때가 오는 프로그램입니다. 2. iTerm2(https://iterm2.com/) iTerm2는 맥의 기본 터미널도 bash에서 zsh로 변경되었기 때문에 새..
-
Mac 추천 프로그램 6가지Etc Tip 2022. 9. 26. 17:31
1. Spectacle(https://www.spectacleapp.com) 윈도우를 사용한 사람이라면 깔끔하게 분할화면으로 사용하던 것이 익숙합니다. 스펙타클은 Mac에서 단축키를 이용해 화면 분할을 이용할 수 있도록 지원해 주는 프로그램입니다. 이와 비슷하게 마그넷 애플리케이션이 있는데 2000원대에 할인할 때 구매하는 건 괜찮지만 개인적으로 9900원에 구매하기에는 아쉬운 애플리케이션이라고 생각합니다. 2. Alfred(https://www.alfredapp.com/) 맥을 사용하는 사람이라면 cmd + space를 누르면 나오는 Spotlight가 있기에 비슷한 기능인 알프레드는 더 빠른 검색 속도는 물론이고 그 이외에도 다양한 기능들을 무료로 사용할 수 있습니다. Powerpack이라는 유료 플..
-
Git 원격 브랜치 삭제하기( Delete Remote Branch)Git 2022. 9. 13. 16:34
1. Git Branch 확인하기 // Local git branch // Remote git branch -r 2. Github, GitLab 등의 Branch와 동기화가 안 되었을 때 // 방법 1 git fetch --all --prune // 방법 2 git remote prune origin 3. Git Remote Branch 삭제하기 // 방법 1 git push origin --delete branchName // 방법 2 // local branch 삭제 git branch -d branchName // remote branch 적용 git push origin branchName
-
window init 느리거나 useEffect 인식 안 되는 라이브러리 사용 팁Tip 2022. 9. 2. 15:14
외부 라이브러리(특히 window에 생성되는)를 이용할 때 useEffect로 가지고 올 수 없는 경우가 존재한다. 이 경우 많은 사람들이 setTimeout 등을 이용해 타이밍을 맞춰주고는 한다. 하지만 이렇게 할 경우 단점이 존재한다. 네트워크가 느린 환경들을 고려해 타임을 여유롭게 잡거나 느린 환경을 고려하지 않아 에러가 발생하는 문제다. 이 문제 해결을 위해 처음 생각한 방법은 반복문을 활용해 retry를 거는 방법이었는데, 이 경우 다른 호출 스택을 반복문이 잡고 있어 다른 호출들이 먹통이 되는 문제가 발생했다. 그래서 내가 선택한 방법은 setInterval을 이용하는 방법이다. setInterval은 setTimeout과 마찬가지로 작업 큐에 작업을 저장하는 방식이기 때문에 다른 호출 스택이..
-
react-query useInfiniteQuery 데이터 편하게 사용하기Tip 2022. 8. 31. 17:45
(이 글은 react-query@3.19.1을 바탕으로 작성되었습니다) react-query를 사용할 때 useQuery만큼이나 많이 사용하는 것이 useInfiniteQuery이다. 특정 웹 사이트의 경우 useQuery보다 많이 사용한다. 사용 방법 자체도 무척 간편하게 되어 있어서 문서를 확인하고 사용하는데 별다른 제약이 없다. 그런데 데이터가 오는 방식이 특이하다. 만약 데이터를 axios로 받아왔을 때의 형식은 아래와 같다. { data: { posts: [...] } } 이런 데이터 형태는 추가로 받아올 때 역시 동일하다. 나의 경우 react-query를 사용하기 전 redux-toolkit을 사용할 때는 아래와 같은 방법을 사용했다. // lodash 미사용 state.posts = [....
-
NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)Next.js 2022. 8. 29. 16:43
1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..
-
NextJS API 활용하기 (feat. Prisma, Planetscale)Next.js 2022. 8. 23. 16:35
(해당 글은 next@12.2.2, prisma@4.1.1, pscale@0.112.0을 기반으로 작성되었습니다.) 1. NextJS Api Router nextJS의 9 버전은 여러 의미로 큰 변화가 있던 버전이라고 생각한다. 단순히 React의 프레임워크를 뛰어넘어 내부에서 server를 사용할 수 있게 된 버전이기 때문이다. 그 방법 역시 무척 간단한데 pages 폴더 내부에 api폴더를 만들고 사용하려는 api의 이름으로 js(ts) 파일을 만들어 사용하기만 하면 되는 방식이었다. 이것으로 이제 간단한 Serverless 환경의 개발이 가능하게 변경되었다. 그리고 이제 nextJS가 12 버전까지 오르며 ISR이나 edge runtime 등의 기능이 추가되며 Next 역시 앞으로의 발전 방향에 A..