공부하는 블로그

Vue 하다가 React 하는 개발자 이야기 6 오늘은 GraphQL의 이야기를 먼저 해보고자 합니다. 앞서 출시한 프로젝트가 안정화 되어가고, 코로나 사태 등으로 인해 대외적으로 사용자들에게 집중하기보다는, 내실을 다지는 기간으로 보내고 있습니다. 사실 API 쪽도 Apollo Federation 같은 기술을 이용해서 점진적인 코드 변경을 해가고자 했으나, 오래된 버젼의 라이브러리를 사용해오고, 코드가 너무 스파게티처럼 얽히고 설켜있어서 더 이상 유지보수가 어렵다고 판단되어 리팩토링이 아닌 code-first 방식으로 Re-writing 작업을 하고 있습니다. 주변에 같은 고민을 했던 사람들이 있나 싶어 찾아보아도 다들 Schema-first 에서 Code-first로 점진적인 Migration이 쉬운..

Vue 하다가 React 하는 개발자 이야기 5 오늘은 글을 두 개 씁니다. 제 친구가 리액트의 상태 관리에 대해 의견과, 아폴로 클라이언트 상태 관리에 대해 코드 공유를 해주었습니다. 짧게 공유해보고자 합니다. // local state 지정 const initialData: IsLoggedIn = { isLoggedIn: !!getToken(), } cache.writeData({ data: initialData }); // 불러오기 const { data } = useQuery(IS_LOGGED_IN) const isLoggedIn = !!data?.isLoggedIn // Query export const IS_LOGGED_IN = gql` query IsLoggedIn { isLoggedIn @..

Vue 하다가 React 하는 개발자 이야기 3 오늘은 동료 개발자분이 작업하던 도중에 SSR 관련 이슈를 만나셨다고 합니다. 현재 프로젝트가 Next.js 로 구성되어 있는데, 동적 라우팅이 되는 페이지에서 문제가 발생한다고 합니다. (문제가 정확히 기억이 안나네요) 개인적으로 관리자 페이지를 작성하는데 Next.js 를 쓰게 된 것이 이해가 되지는 않았습니다. SSR이 필요하지도 않고, 오히려 추가적인 관리 포인트가 더 늘어나기 때문입니다. 코드 레벨에서는 물론이고 인프라 레벨에서도 관리할 것들이 더 늘어납니다. 그래서 아직 프로젝트가 초기 단계이니, 일반 클라이언트 사이드 앱으로 전환 하는 것이 어떤지 제안했습니다. 프로젝트가 더 커지면 아마 그때는 CSR로 전환하기는 더 어려워질지도 모르기 때문입..

Vue 하다가 React 하는 개발자 이야기 2 어제 올렸던 내용에 대해서는 일단 apollo client의 상태 관리 시스템은 기각하고 redux를 쓰는 것으로 결정을 했습니다. 커뮤니티에서 자문을 구한 결과, 아직 아폴로 상태 관리 시스템은 프로덕션에 적용하기에는 무리라는 판단이 들었습니다. 전 회사에서도 node.js의 ORM을 선택할 때 star 수 활발하게 commit이 되고 있는가? 문서화가 잘 되어 있는가? 현재 프로젝트와 궁합이 잘 맞을까? 등을 고려해서 선택했던 것이 TypeORM 이었는데, 사용하다보니 부족한 점이 많았습니다. 또한 처음 접하는 이슈 등에 대해서는 이슈 트래킹이나 검색도 잘 안되어 고생하는 경우도 있었습니다. 이때 1) 스타 수로만 프로젝트를 판단하면 안 되겠구나. 2)..

Vue 하다가 React 하는 개발자 이야기 1 관리자 페이지를 새로 만들고 있습니다. React + Typescript + GraphQL 조합입니다. 그전 코드는 유지보수가 너무 힘들고 장황한 코드가 많아서 개발 시간보다 코드 리딩에 더 큰 시간이 들어 많은 개발자들이 고통받고 있었습니다. 새로 프로젝트 시작을 하게되어 기쁘게 생각합니다. Graphql + typescript + codegen을 이용하니까 엄청 간편하다고 느꼈습니다. 개발자가 할 게 없네요. 회원 목록을 구현했는데 몹시 빠르게 개발했습니다. use~ 시리즈를 찬찬히 살펴보고 있습니다. useEffect 는 Vue에서 watch와 비슷하다는 느낌을 받았습니다. 그러나 useEffect는 렌더링 직후에 실행이 된다고 하네요. 동료 개발자가..

console.log에 대해 알아보자자바스크립트를 자주 사용하는 경우, console.log()를 사용하여 정보를 출력해야 할 때가 많습니다.아래는 보통 오랫동안 많이 써온 방식입니다.(() => { console.log('Success!') })()에러 로그에 console.error () 사용로그를 좀 더 시각적으로 낫고 재미있는 방식으로 만들 수 있는 몇 가지 방법이 있습니다.(() => { console.error('헉, 뭔가 잘못되었네요!') })()경고 로그는 console.warn() 사용(() => { console.warn('경고!, 뭔가 잘못된 것 같습니다!') })()iterable 오브젝트에 console.table() 사용function Person(firstName, lastNa..

리액트와 뷰로 같은 앱을 만들어 보았다.(Part 2: Angular)리액트와 뷰로 같은 앱을 만들었는데, Angular가 안 낄수 없죠!Part 1을 아직 읽지 않았습니까? 여기에서 확인하세요.저는 Angular를 매일 직장에서 사용하지만, 자바스크립트 세계에서는 다른 모든 프레임 워크에 대한 정보는 얻을 수 없었습니다. 나는 같은 사과라도 이것저것 비교하는 것을 좋아합니다! 그래서 React vs Vue에 대한 Sunil Sandhu의 글에 숟가락을 얹게 되었습니다. 자, 여기 React vs Vue vs Angular의 비교입니다!앱의 외형은 어떨까요?[Player 3 이 게임에 입장하였습니다]Part 1과 마찬가지로 css는 다른 두 프레임워크의 위치와 거의 비슷합니다.이 Angular 애플리케이..

리액트와 뷰로 같은 앱을 만들어 보았다.이 글의 원문은 여기이며 원작자가 번역을 허가하여 글을 번역했습니다.번역을 다 하고 나니 이미 다른 한국어 번역이 있더군요. (링크)그러나 번역한 것이 아까워서 포스팅을 합니다. (ㅠ_ㅠ)저는 직장에서 Vue를 잘 사용해오고 있었습니다. 그러다가 저는 이 울타리의 다른쪽 뜰은 어떤지 궁금해졌습니다. 그 뜰은 바로 리액트입니다. 리액트 문서를 읽고 튜토리얼 동영상을 몇 편 보았습니다. 좋은 동영상이었지만 실제로 알고 싶은 것은 Vue와 리액트가 얼마나 다른지였습니다. "다르다"는 말은 가상 DOM을 가지고 있는지, 또는 렌더링 페이지를 어떻게 읽는지와 같은 것은 아닙니다. 누군가가 내게 시간을 들여가며 코드를 설명해주면서 무슨 일이 일어나는지 알려주면 좋겠다 싶었습니..