Glitch 에 json-server 배포한 과정

배경 이전에 작업해두었던 프로젝트를 시연하기위해서 서버가 필요했습니다. 같이 협업한 백엔드분들에게 서버를 켜달라고 부탁드리는 것은 다들 바쁘시기도 하고 분명히 에러가 날것이기때문에 귀한 시간을 잡아먹을 것이 뻔했습니다. 따라서 혼자서 해결할 수 있는 방법을 찾아보았습니다. 개발환경에서는 msw 나 json-server, promise 와 setTimeout 을 사용해 fakeAPI 를 구현하는 방법이 있지만, 현재 저는 github page 를 사용하여 웹을 배포할 생각이기 때문에 개발환경에서 api 요청을 하는 방식으로는 문제를 해결할 수 없었습니다. 해결할 수 있는 방법은 다음과 같았습니다. (더 많을 것으로 판단됩니다.) json-server 를 heroku에 배포하기 json-server 를 gl..

setState에 대해 고민했던 하루

사건의 발단 채팅방의 한분께서 위와 같은 질문을 해주셨다. 여러가지 답변이 오갔고 내가 똥답변을 해버렸다. 이때 까지만해도 setState 안의 함수를 넣는 형태인 함수형 업데이트를 사용하면 batching 이 발생하지 않고 setState 마다 리렌더가 발생할 것이라고 생각했었다. 하지만 아래의 코드를 돌려본 결과. 내 생각이 잘못되었다는 것을 알게되었다. import { useState } from "react"; import "./styles.css"; export default function App() { const [count, setCount] = useState(0); console.log("render"); return ( { setCount((c) => c + 1); setCount((..

[React Query] staleTime vs cacheTime

React Query 의 staleTime 과 cacheTime 에 대한 차이를 알려주는 좋은 글을 봤다. 하지만 글로만 읽으니 제대로 이해한 것이 맞는지 의심이 들어 직접 라이브러리를 만져가면서 익혀보기로 했다. 우선 참고자료에서 알려주신 내용은 다음과 같다. React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 됨 네트워크에서 데이터를 fetch 하고 A라는 query key로 캐싱함. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨 A 쿼리 인스턴스가 unmount 됨 캐쉬는 cacheTime (기본값 5min) 만큼 유지되다가 GC에 의해 삭제됨 만일 cacheTime 이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount 되면, fetch..

[우아한 테크코스 프리코스] 1차 탈락

탈락했다. 올해 나름 열심히 했다고 생각했는데, 아직까지는 누적된 공부량이 부족한가보다. 어디서 판별이 되었을까? 생각해보았을때 아마 자소서 부분에서 갈리지 않았나 싶다. 냉정하게 내 자소서를 다시보았을때 1년간 몰입했던 경험이 내가 생각하기에도 그리 매력적이지 않았던 것 같다. 마침 같이 공부하시는분들과 함께 결과를 확인하였고 내가 떨어져버려서 그분들께 축하한다고 제대로 말씀을 못드린 것 같아 아쉽다. 공부하면서 아직 노력에 대한 보상을 받아본적이 없어 최종코테만이라도 꼭 가고 싶었는데 그것도 허락이 되지않아 많이 속상했다. 할 수 없다! 더 열심히 하는 수 밖에, 나보다 잘하는 사람이 이렇게 많다는 것을 다시한번 느끼게 된다. 앞으로 탈락할 일이 얼마나 많은데 여기서 징징대고 있을 시간이 없다. 그러..

[우아한 테크코스 프리코스] 4주차

4주차를 시작하기 전에 3주차 공통 피드백을 공부하고 넘어가려고 한다. 피드백에 어떤 의도가 숨어있을지 나름대로 생각해보자. 함수(메서드) 라인에 대한 기준 3주차 과제에는 라인제한이 15줄이였는데 이번 4주차 과제는 라인제한이 10줄이었다. 함수 또는 메소드로 쪼개는 것을 더 엄격하게 보려는 것으로 파악된다. 아래 코드는 프리코스를 진행하시는 분의 코드를 발췌한 것이다. 나는 이 코드가 좋다고 생각했다. 위에서 아래로 코드를 막히는 부분없이 읽을 수 있었고, 관련 메소드 끼리 붙어있어 코드를 파악하기 편했다. 컨트롤러 부분은 이렇게 흐름을 쉽게 파악 할 수 있게 작성할 생각이다. 비즈니스 로직과 UI 로직을 분리한다. 비즈니스 로직과 UI 로직을 분리하게되면 관심사가 분리되어 유지보수에 용이하다. 예를..

[우아한 테크코스 프리코스] 3주차

3주차에 들어가기에 앞서서 이번주는 어떤 목표를 가지고 풀어나가야할지 고민하는 시간을 가졌다. 클래스(객체)를 분리하는 연습 숫자야구 과제를 구현할때에는 모듈화를 하였지만 객체 분리를 하지는 않았었다. 이번 기회를 통해 객체지향 프로그래밍을 조금이나마 다뤄볼 수 있을 것 같다. 그리고 MVC 패턴을 적용해 볼 생각이다. 이전에 MVC 패턴에 대해 궁금해서 검색했던 기억이 나는데 그 당시에 잘 이해가 가지않아서 다음으로 미뤘었다. 이번에는 적용해보면서 한번 더 공부를 해봐야겠다. 도메인 로직에 대한 단위 테스트를 작성하는 연습 Jest 라는 테스팅 프레임워크를 배웠고, 바로 적용을 할 수 있었다. 저번주의 테스트는 단위 테스트 보다는 통합 테스트에 가깝게 구현을 했었다. 이번에는 요구사항대로 클래스로 나누..

[우아한 테크코스 프리코스] 2주차

이글은 딱딱체로 쓰여져있습니다. 참고해주시면 감사하겠습니다! 2주차에 들어가기 앞서서 먼저 새로운 과제를 진행하기전에 어떤점을 보완을 해야할까 생각을 해봤다. 왜 이러한 과제를 냈는지 파악해보자. 지난 1주차 과제에서는 소감문을 작성할때에 왜 코치분들이 이 과제를 내셨을까라는 생각을 했었다. 문제를 풀기전에 이런 고민을 해봤어야했는데 순서가 바뀐 공부를 했던 것 같다. 또한 질문에 대한 의미를 제대로 파악하지 못하고 과제에 임하는 것은 학습효과가 떨어져 나에게 손해가 될 것이기 때문에 이번 2주차에는 이런 과제를 왜 냈는지에 생각을 해보고 들어가려고 한다. 가독성에 너무 집중했다. 변수명, 함수명 그리고 읽기 편한 코드를 만들겠다는 생각에 빠져버려 정작 중요한 기능확인을 제대로 하지 못한 것 같다. 슬랙..

html dataset 을 사용한 css switch case

현재 블로그를 조금 커스텀을 했는데, 다크 모드일때 코드블럭의 글자가 보이지 않는 상황이 발생했다. 코드 블럭의 태그는 다음과 같다. 처음에는 간단하게 querySelector 를 사용해서 해당 태그의 css 를 만져 글자 색 바꿔주면 되겠네 생각을 했다. 근데 이상하게 해당 태그에 대한 DOM 을 얻을 수가 없었다. html 이 생성되기전에 js 가 실행되서 그런가 싶었다. 따라서 html이 다 그려지고 나서 js 를 실행하려 onload를 사용해봤지만 그래도 안되더라. 흠.. 알수없었다. 그래서 우회방법을 찾았다. 현재 html 의 dataset 인 theme 은 라이트모드 일때는 'light' , 다크모드 일때는 'dark' 가 할당되고 있다. 그래서 dataset에 따라 css 를 변경하기로 했다..

[타입스크립트] Utility Types

Partial Partial 유틸리티 타입의 사용용도는 다음과 같다. interface 를 전부 옵셔널로 만들어주게 된다. interface Profile { name: string; age: number; married: boolean; } // Partial 적용시 // interface Profile { // name?: string; // age?: number; // married?: boolean; // } const zerocho: Profile = { name: "zerocho", age: 29, married: false, }; const newZeroCho: Partial = { name: "zerocho", age: 29, }; 그럼 Partial 타입을 직접 만들어보자. type P..

[타입스크립트] keyof , in keyof

partial 과 pick 에 대해서 내가 직접 타이핑을 하다 생긴 궁금증이다. partial 을 타이핑을 할때는 다음처럼 in keyof 를 사용했다. 다음처럼 말이다. interface Profile { name: string; age: number; married: boolean; } type P = { [Key in keyof T]?: T[Key]; }; const newZeroCho: P = { name: "zero", age: 29, ; 그런데 Pick 을 타이핑 할때에는 in 만 사용한다. 머리가 어지러웠다. interface Profile { name: string; age: number; married: boolean; } type P = { [Key in S]: T[Key]; }; co..