전체 글

테오의 스프린트 15기 회고 2 - Mind Palace

이 글은 테오의 스프린트 회고 1에서 이어집니다. 첫번째 회고 보러 가기 : https://guuumi.tistory.com/134 테오의 스프린트 15기 회고 1 - Mind Palace 시작은 언제나 ‘Why’ 일단 왜 테오의 스프린트에 참여하게 되었는지, 그 이유부터 이야기를 시작해보자. 우리나라의 IT 스타트업에 근무하면 필히 익숙해지는 단어가 몇가지가 있다. 바로 애자 guuumi.tistory.com 그리고 개발 끝으로.. 다시 한번 강조하지만 우리는 결과물이 아니라 협업의 과정을 배우는 중이고 서비스 릴리즈가 아니라 아이디어를 검증하는 MVP 단계이기에 기능의 완벽한 구현보다는 협업경험을 중시하고 그럴싸한 완성도를 먼저 만들어내는 것이 훨씬 더 중요합니다. 그리고 이렇게 같은 노력으로 더 나..

테오의 스프린트 15기 회고 1 - Mind Palace

시작은 언제나 ‘Why’ 일단 왜 테오의 스프린트에 참여하게 되었는지, 그 이유부터 이야기를 시작해보자. 우리나라의 IT 스타트업에 근무하면 필히 익숙해지는 단어가 몇가지가 있다. 바로 애자일, 린, 스프린트. ‘함께 자라기(김창준 저)’는 대부분의 스타트업 프로덕트 팀의 필독서이며 내가 거쳐온 회사 역시 마찬가지였다. 하지만 애자일 방법론이라는 것이 현실 세계의 스타트업에서 적용 가능한가? 실효성이 있는가? 생각해보면 ‘네!!!!’라고 개운하게 대답하기 어려운 것도 사실이다. 애자일 소프트웨어 개발 선언에 따르면 애자일 방법론은 다음과 같은 가치에 우선순위를 둔다. 우리는 소프트웨어를 개발하고, 또 다른 사람의 개발을 도와주면서 소프트웨어 개발의 더 나은 방법들을 찾아가고 있다. 이 작업을 통해 우리는..

코딩 부트캠프에서 멘토로 근무한다는 것은

올해 4월부터 11월까지 짧다면 짧고 길다면 긴 코드캠프 멘토 생활이 끝났다. 퇴사 면담을 하고, 진행중이던 강의 촬영을 마무리하고, 하던 업무를 인수인계 하느라 한달이 정말 바쁘게 지나갔더랬다. 코드캠프에서 보낸 8개월은 나에게 참 많은 배움과 교훈을 안겨줬다. 후련하기도 하고 아쉽기도 하고. 2022년을 회고하며 부트캠프 멘토로 근무한다는 것이 어떠한 일인지, 나는 왜 그 일을 시작했고 그 경험을 통해 무엇을 얻었는지 한번 정리하고 내 삶의 다음 챕터로 넘어가보려 한다. "Why?"에 대한 이야기 Q. 왜 멘토 일을 시작했는가? 개발자 커리어를 본격 개발 직무가 아닌 개발 관련 교육 직무로 시작한다는 것은 다소 특이한 일이 아닐 수 없다. 이직 면접을 보러 다니며 이게 상당히 신기한(?) 일이라는 것..

[React, Next.js] Apollo Client Caching을 통해 살펴보는 Next.js와 React의 렌더링 차이

Apollo Client의 캐싱(Caching) 캐싱(Caching)이란 무엇일까? 캐싱은 캐시(Cache)라는 임시 저장소에 데이터를 저장해놓아, 동일한 데이터를 반복해서 요청할 경우 굳이 네트워크를 통하지 않고 데이터를 불러올 수 있게 하는 방법이다. 데이터의 양이 많아질수록 캐시를 어떻게 활용하느냐에 따라 서비스의 메모리 부하에 큰 차이가 생긴다. GraphQL 통신 라이브러리인 Apollo Client는 자체적으로 캐싱을 지원한다. 예를 들어서 "id가 5인 Book의 정보를 API 읽어와줘!" 라는 요청을 백엔드에 보낸다고 가정해보자. Apollo client는 먼저 InMemoryCache라는 캐시 저장공간 안에 id가 5인 Book의 정보가 있는지 찾는다. 그리고 캐시 안에 정보가 있을 경우..

[Javascript] JS로 간단하게 상단 이동 버튼 만들기 - scrollTo()

요즘 목록 페이지들은 대부분 무한 스크롤 형태로 구현되어 있다. 예전과 같은 페이지네이션 형태를 채택하는 서비스는 점점 줄어드는 중이다. 이런 무한 스크롤 리스트의 경우, 사용자의 경험을 위해 필히 상단으로 이동하는 버튼을 만들어야 한다. 아주 간단한 자바스크립트 메소드로 해결 가능! Window.scrollTo() Javascript는 Window.scrollTo()라는 메소드를 제공한다. 해당 메소드는 Window 내에서 원하는 위치로 스크롤을 이동시킬 수 있다. // 기본 형태 window.scrollTo(x-좌표, y-좌표) scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능하다. // behavior에는 auto와 smooth를 입력할 수 있다. (기본값은 auto) windo..

TIL - VuePress 블로그로 이동

VuePress를 이용해 TIL용 블로그를 따로 만들었다. 앞으로 매일 학습한 단순 내용은 새 블로그에 일지 형식으로 기록한다. TISTORY도 그대로 유지한다!! 주제를 가지고 있는 개발 관련 글, 작업 과정 등은 계속해서 여기에 올릴거임! Jooeun's TIL Blog 바로가기

입문자를 위한 CSS 온라인 강의 제작 회고 - 부제: 감히 내가?

회고를 쓰기에 앞서, 이 작업을 위해 얼마만큼의 시간을 투자했는지 일정을 돌이켜보았다. 처음 대표님께 '입문자를 위한 CSS 강의를 만들어보지 않겠냐'는 제안을 받은 것은 4월 9일이었고, 프론트엔드 멘토 팀원들과 이야기를 나눈 뒤 실질적인 일정을 계산하고 커리큘럼을 짜기 시작했던 게 4월 11일이다. 약 4개월이 지난 8월 5일, 촬영 및 편집까지 완료 된 강의 영상을 자료와 함께 서비스 페이지에 업로드했다. 처음에 강의 제안을 받고 가장 먼저 들었던 생각은 '내가 감히..?' 였다. 실무 경험이 있다고는 하나 개발을 처음 배우는 사람들에게 특정 언어에 대한 지식을 전달하기에는 내 배움이 너무 얕다고 생각했기 때문이다. 하지만 살면서 100% 내가 준비되었다고 느끼는 상황에서 기회를 맞이하는 경우가 어..

[Git] Commit message 여러 줄 입력하는 방법

요즘 개인 프로젝트를 진행하며 커밋 메시지에 상세하게 작업 내용을 기록하는 연습을 하고 있다. 처음에는 작업 일지를 프로젝트 내에 마크다운 문서로 작성해놓으려 했는데, 그러면 프로젝트 작업 기록을 위해 마크다운 문서를 따로 열어봐야 하는 번거로움이 있어서 커밋 메시지에 날짜와 함께 작업 일지를 남기는 방식으로 전환했다. 커밋 메시지를 여러 줄 작성하려면? git commit -m "커밋메시지 입력" 생각보다 방법은 매우 간단하다. 커밋 메시지를 기록할 때에는 일반적으로 위와 같은 명령어를 사용한다. 이 때, 첫 줄의 커밋메시지를 입력한 다음 따옴표를 닫지 않고 엔터를 치면 다음과 같이 개행되는 것을 볼 수 있다. 따옴표를 닫지 않은 상태에서 원하는 만큼의 커밋 메시지를 입력하면 된다. 커밋 메시지를 끝내..

TIL - 2022.07.29 금요일

오늘 배운 것 1. 입문용 CSS 강의 촬영 완료 강의 촬영을 전부 마치고 수업 자료 제작에 들어갔다. 강의용 자료와 레퍼런스 코드를 제작하는 단계, 실제 촬영을 진행하는 단계, 수업과 함께 실제 수강생들이 보게 될 수업 자료를 제작하는 단계에서 각각 고려해야 할 것이 너무도 달라 내 마인드셋을 변경하는데에 시간이 좀 걸리는 중. 2. Apollo-client의 fromPromise와 flatMap 회사 개발팀 쪽에서 로그인 인증 관련하여 치명적인 오류가 발생했다는 소식을 들었다. 자세한 사항은 보안상 설명할 수 없지만, 해당 이슈에 대한 리포트를 들으며 Apollo-client에서 fromPromise와 flatMap이라는 메서드를 제공한다는 사실을 알게 되었다. 그리고 이 부분에 대해 공부를 충분히 ..

TIL - 2022.07.20 수요일

오늘 배운 것 1. Webpack과 Babel Webpack과 Babel이 보통 함께 언급되기 때문에 지금까지 두 모듈의 역할을 헷갈리고 있었는데, 그 차이점을 확실하게 이해하게 되었다. 먼저 Webpack은 모던 자바스크립트 웹 서비스 & 웹 어플리케이션을 위한 번들러(Bundler)이다. MPA 웹 실무를 뛸 때부터, 괜찮은 웹사이트를 보면 소스코드를 뜯어보는 습관이 있었다. 기존의 jQuery 웹페이지의 경우에는 대부분 개발자 도구로 웹페이지를 열어보면 분리된 html/css/js 파일을 확인할 수 있다. php나 asp 등으로 작업을 진행하더라도 웹 브라우저에 그릴 때에는 html/css/js 파일로 렌더링되기 때문인데, 이상하게 최근 핫한 웹 서비스 페이지의 경우에는 html/css/js가 용도..