🐬 긴호흡

라우팅 트랜지션을 적용하면서 공식문서도 찾아보고 여러 글들을 참고했는데, 무언가 실무에 쓸 수 있을 정도로 시원하게 해법을 제시한 곳이 없었다. 덕분에 고민을 많이 하게 되었던 경험이었다. 그래서 이번 포스팅을 할땐 react-transition-group을 도입하려는 사람의 궁금증을 제대로 해소해줄 수 있도록 평소보다 조금 더 친절하게 적어나갔다. 이 글을 읽은 누구라도 내 고민에 공감하고 해결방안을 찾아갈 수 있는 글이 되기를!! [뱅키즈] 6. React-transition-group 라우팅 트랜지션 (1) - 도입하기 에서 공유하고 있는 내용 react-transition-group을 이용해 라우트간 애니메이션 넣기 뒤로가기 버튼 지원 (양방향 슬라이드) 연결된 다른 페이지로 이동할 때에는 오른쪽..

이전에 쓴 포스팅들을 보면 알겠지만 유튜브나 블로그들에서 리액트 쿼리에 대한 컨텐츠들을 접했고 고스락 프로젝트에 도입을 했었다. 서버에서 받아온 데이터를 캐싱하거나, 에러 핸들링이 편하게 된다는 점이 너무너무 좋았다. My구독의 React Query 전환기 React Query와 상태관리 카카오와 우아한에서 일하시는 분들의 기록이다. 둘 다 비슷한 문제를 겪고 고민했던 내용을 담고 있다. 리덕스에서 비동기 통신을 하고 서버 상태를 관리하기 시작하면서 관리하기 힘들어지고 소스도 비대해지는 문제였다. 정말 신기한건, 뱅키즈에서도 이와 똑같은 문제를 느꼈다. 1. 리액트 쿼리로 전환한 이유 처음 Redux Toolkit을 도입했을땐 정말 신선하게 느꼈다. 고스락 프로젝트에서 좋다고 사용했던 순수 리덕스와 th..

특별할건 없는 단순 구현이지만 많이 고민하고 노력한게 아까워서 적는 포스팅. 앱의 가장 핵심인 돈길을 생성하는 과정을 '돈길 계약하기'라는 워딩을 통해 아이들도 재미있게 느낄 수 있도록 했다. 총 다섯개의 단계를 밟아 정보를 입력하고, 마지막에 사인을 하고 제출하면 계약 영수증이 보여지는 형식이다. 기획과 디자인팀의 노고가 느껴진다. 그리고 저걸 구현한 나도... 기능 하나하나에 많은 공을 들였어서 그런지 특히 애정이 있는 뷰들이다. 팀원과 기술블로그에 대한 이야기을 나눈 적이 있다. 프로젝트 경험을 기록할 때 어렵게 공부하며 사용했던 기술을 정리할 수 도 있고, 어려운 화면을 구현하며 머리 싸맸던 고민을 기록할 수 도 있다. 난 블로그 포스팅에 시간을 꽤 많이 쓰는 편이라, 이 모든것들을 기록으로 남기..

안녕하세요, FE 코어멤버 한규진입니다. 오늘은 GDSC에서 진행하는 첫번째 대면 스터디입니다!! 리액트를 처음 시작해 봅시다. 리액트 시작하기 리액트를 한번도 안써보신 분은 없는걸로 알고 있으니, 굳이 자세히 적어놓지 않아도 되겠죠. 자세한건 다른 블로그나 책에 나와있으니 보시면 되겠습니다. 간단하게는 이렇습니다. Mac 기준으로 작성합니다. 1. Homebrew 설치 /usr/bin/ruby -e "$(curl -fsSL )" 2. node, npm 설치 brew update brew install node node를 설치하면 npm도 함께 설치됩니다. 나중에 다시 자세히 살펴볼게요. node -v npm -v 제대로 설치되었는지 버전을 확인해봅시다. brew install yarn --ignore-..

스터디 첫주차는 리액트가 아닌 바닐라 자바스크립트를 이용해 간단한 투두리스트를 만드는 과제였습니다. 배포되어 있는 제 바닐라 투두 페이지에 들어갔을 때 개발자도구의 네트워크 탭입니다. IP..DNS.. 어쩌구 저쩌구 해서 웹사이트를 보여주기 위한 파일을 받아옵니다. 브라우저는 이런 자료들을 요청하기 위해서 HTTP (Hyper Text Transfer Protocol)라는 프로토콜을 사용합니다. 어머어머. HTML은 Hyper Text Markup Language의 약자랍니다. 그렇다면 브라우저는 HTTP를 통해 서버에서 html과 같은 것들을 전송받아 우리에게 보여주는거군요. 브라우저 렌더링 html 문서는 메모장으로도 만들 수 있는, 그냥 문서에 불과합니다. 어떻게 위와같이 이쁜 모습으로 화면에 렌더..

왜 기록할까요? Vision : 모두가 주인이 되는 지식 공유 커뮤니티를 향해 Vision : lead가 리쿠르팅 공고에 쓴 내용이다. 너무너무 맘에 드는 글!! 각자의 삶이 다르듯이, 각자가 가진 지식과 경험 역시 달라요. 그렇기에 모든 경험은 가치있지만, 기억은 언젠가 휘발되기 마련이죠. 경험은 기록되고 공유될 때 없어지지 않고, 더 큰 의미를 만들어낼 수 있습니다. 하지만 대부분의 사람들의 자신의 지적 자산을 기록하고 공유하기를 꺼려해요. 자신의 경험을 어떻게 표현해야 할지 어색해하기도 하고, 큰 가치가 없는 것으로 치부하기도 합니다. 그래서 GDSC는 사소함을 공유하는 것부터 시작하려고 해요. 우리의 일상부터 어딘가의 개발 정보, 그리고 전문적인 기술 아티클까지- GDSC는 모두가 주인이 되는 지..

불과 바로 직전에 썼던 1년 회고 글에서 안할거라고 했는데, 어쩌다보니까 하고있음. 이렇게 이번학기는 편히 다닐거라는 다짐은 무참히 박살났다. GDSC 홍익 1기로서 기반을 다지고 시스템을 만들어가고 싶다는 욕심이 생겨서 Lead분께 커피챗 요청을 드렸고, 다음 날에 만나서 꽤 재밌는 대화를 나누고 왔다. 사실 지원기간엔 뱅키 출시 준비하느라 지원서 쓰기 싫어서 지원을 안했던건데, 그래도 지원서는 써야된다고(...) 해서 지원서를 결국 끝까지 썼다. 다른 개발학회에서 주로 물어보는 질문들과는 성향이 다른게 조금 있었다. 개발 자체보다는 지식 공유와 커뮤니티 활성화에 조금 더 비중을 두고 있기 때문인것 같다. 덕분에 평소에 뭉뚱그려 하던 생각들을 글로 정리하는 시간을 가질 수 있었다. 몇개만 적어보겠음. ..

벌서 고스락 티켓 회고 마지막 시리즈입니다. 분명히 '이건 적어놔야지' 했다가 까먹은게 있을텐데. (점점 기술 블로그가 일기장처럼 쓰이는것 같지만) 아주 멋진 프로젝트에 걸맞는 아주아주 멋진 공연이었습니다. 아직도 여운이 가시지 않는군요. 히. 그럼 시작해보겠습니다. 랜딩페이지 바로가기 한번이 어렵지, 두번은 그래도 할만하다. 3월공연이라는 아주 적합한 레퍼런스가 있었기 때문에. 이전과 페이지 구성에서 큰 차이는 없다. 대신 전체적으로 다크모드를 싹 걷어냈음. 검정 배경을 쓰니까 다른 색들을 사용하기가 너무 어렵다!! 디자인이 제일 힘들어. 다른 어느 페이지보다 제일 완성도가 중요한 부분이기 때문에 디테일 하나하나 챙기는게 꽤 스트레스였다. 덕분에 결과는 훨씬 이쁘게 나온 것 같아 좋다. 특히 반응형이 ..