# TID
9/10 TID : 기술스택 보여주는 섹션 만들기
뭐했나요 언제나와 같이 특별한 건 없습니다. 기존의 Skills페이지를 없애고 About 페이지에서 보여주기로 했고, 스킬을 카드 형태로 보여주는 컴포넌트와 볼 카드를 선택할 수 있는 리스트 컴포넌트를 만들었습니다. 어떻게 했나요 SkillCard 먼저 SkillCard 컴포넌트를 간단하게 만들었습니다. 모션을 활용할 것을 고려해서, 흰색 로고만 들어있는 png 이미지와 그 뒤에 깔릴 백그라운드를 만들어주고, 타이틀 띄워주고, 설명 띄워줍니다. 피그마로 각 스킬 로고, bg만들기 기술 스택 로고 svg 파일을 받아와서 로고 벡터만 떼어내고, 흰색으로 바꾸고, 복붙해서 레이어블러 먹여서 그림자 만들고 배치한다음 대표색 따놓고 바꾸고 싶은건 바꿨습니다. 기존의 색에서 밝기를 높이고
9/8 TID : MVP를 만들자, 애자일하게
MVP를 만들자! MVP란 Minimum Viable Product의 약자 => 쓸 수 있는 최소한의 기능을 갖춘 제품을 만들자는 소리입니다. 지금까지는 메인페이지 만들고... 헤더 만들고... Nav 만들고... 만들어놓은거에 애니메이션도 적용해보고... 생김새도 이쁘게 꾸며보고... 하느라 프로젝트가 전혀 진행되질 않았습니다. 덕분에 일찌감치 배포도 해놓고 도메인도 사서 연결해놓았는데도 어디 공개하지를 못했습니다. 아무 내용이 없으니까요! 지금까지의 방식은 따지고 보면 워터폴입니다. 그때그때 생각나는 걸 추가하고, 수정하면서 머릿속에 있는 완성된 제품을 그대로 만들어내려고 했던 것이죠! 이대로면 아마 Framer-motion이니 테일윈드니 하는 것들을 계속 공부하고, 그때그때 생각나는 기능
9/7 TID : Framer-motion, Astro 할것인가 말것인가
열심히 안하나요? 죄송합니다... 오늘 한 걸 읊어보시오 오늘은~ 지금 만들고 있는 걸 갈아엎고 Astro로 새로 시작할까 고민함 Astro 공식문서 읽기 Astro 관련 블로깅 찾아보기 Astro 활용 예제 찾아보기 Grid 학습 grid를 활용해 미디어 쿼리 없이 반응형 레이아웃 구현하기 Framer-motion Framer-motion으로 포트폴리오에 애니메이션 효과 추가하기 Nav와 Nav 아이템에 initial, exit 애니메이션 추가 열리면 x자로 변하는 햄버거 버튼 만들기 새로 만든 컴포넌트에 다크모드 적용하기 트러블슈팅... 한 게 별로 없군요!!! Astro Astro를 써보는 게 어떻냐는 의견을 받았습니다. Astro가 뭔데요? Astro란? Astro는 아일랜드 아키텍처를 활용한 멀티 프레임워크 정적 사이트 빌더(SSG)입니다. 대체 어떻게
9/2 TID : 파이어베이스 연동하기
뭐했나요? 포트폴리오 애플리케이션에 파이어베이스에서 제공하는 Firestore database와 Firebase Storage로 문서와 이미지파일을 저장하고 불러올 수 있있도록 연결했습니다. 왜 그랬나요? 지금까지는 애플리케이션을 그려내는 데 필요한 이미지 파일 등을 클라이언트에 다 쑤셔넣고 빌드해버렸는데, 실제로는 그렇게 하지 않을 것 같다는 생각을 했습니다. (클라이언트가 무거워지니까요!) 이전에 Peony 프로젝트에서 사용했던 Firestore database를 떠올리고, '여기에다 클라이언트에서 그려줘야 하는 데이터들을 넣어놓고 불러오는 식으로 하면 괜찮지 않을까?' 라고 생각했습니다. 어떻게 했나요? Firebase 초기화 우선 Firebase 프로젝트에 내 앱을 추가해주고 (놀랍게도 아직 안하고 있었음), Firebase SDK를 앱에 설치합니다. (npm i firebase) firebase/index.ts에 firebase 기본 config 설
8/30 TID: Redux-toolkit으로 다크모드 구현하기
오늘은 뭐 했나요? 다크모드를 만들었습니다! 왜 다크모드를 만들기로 했나요? 캠프에 있을 때, 프리프로젝트와 메인프로젝트에서 '상태관리를 합시다!'라고 해놓고 안한 적이 있습니다. 상태 관리 과제같은 걸 할 때는 전역 상태 관리가 필요한 부분이 (당연히) 여럿 있어서 뚝딱뚝딱 적용했는데, 막상 백엔드와 함께 애플리케이션을 구현하니 서버에서 다 해주니까 딱히 전역 상태 관리를 적용할 만한 부분이 없었던 겁니다. 전역으로 관리되어야 하는 정보들은 서버에 저장하는 게 당연히 합리적이니까요. 당시 멘토님께서는 > 전역 상태 관리 없이는 구현하기 힘들 거라 생각했다. UI적으로도 전역 상태 관리가 필요한 부분들이 많은데, 캐치를 못한 것 같다 라고 피드백을 주셨습니다. 제 개인적인 스승님께서는, > 상태 관리의 필요성을 못 느꼈으면 안 써도 된다. 필요할 때 쓰는 거다. 네가 생각한대로 전역에서 관리되어야 할 만큼 중요한 정보들은 당연히 어딘가에 저장되어야 하고, 그 역할을
8/28 TID : 흩날려라 천본이력서(예정) & grain 적용하기
오늘 뭘 하긴 했나요? 푸하하 10개 기업 지원과 중간 점검 이력서 멘토링 기간이 끝나고, 최종 과제로 10개 기업에 지원했습니다. 이력서는 원티드를 통해서 제출했구요. 가능하면 회사 홈페이지로 직접 지원하려고 했는데, 회사 홈페이지 지원 루트에서는 신입을 뽑지 않는다고 되어있거나, 회사 홈페이지에 지원공고가 없거나 등등 예외상황이 많았습니다. 그리고 어제 밤에 제출하고 오늘 아침에 4개 불합격이에요! 아마 나머지 6개도 내일, 모레 중으로 불합격 연락을 받아볼 수 있을 것 같습니다. 앞으로 한 5천번정도 떨어질 것 같은데 그 중에 첫 4번의 불합격이에요! 제가 지원한 기업들의 이름을 밝히기엔 아무래도 쪼끔 그렇고... 전체적인 기조만 적어두자면 React를 다룸 (Vue 등 제외...)
8/26 TID : 모의 기술면접... 나는 쭈굴렁이다
오늘은 뭐...했나요? 오늘은... 아침까지 포트폴리오 만들다가... (그와중에 또 들인 시간에 비해서 대단한 건 못했어요) 점심 때 멘토님과 모의 면접을 봤습니다. 첫 모의면접이라 낯설고 어렵기야 하겠지...라고 막연하게만 생각했는데 실제로 해보니까 더 낯설고 더 어려웠어요 알고 있다고 생각했던 것들도 막상 설명해보라 하니 헷갈리고 이게 맞나 싶고 엄청 버벅였습니다 어떻게든 아는 걸 짜내려고 하다가 별로 상관 없는 내용이나 틀린 내용을 말하게 되는 것 같아 점점 갈팡질팡하게 됐구요 그리고 이름만 들어봤고 설명은 아예 못하는 질문들도 많았습니다 이걸 취준생이라고 할 수 있을까 하고 낙담했는데 멘토님께서 첫 모의 면접이니 모르는 게 많을 수 밖에 없고, 대답 잘 못하는 게 당연한거라고
8/25 TID : 포트폴리오와 테일윈드 걸음마
오늘 뭐했나요? 아뢰옵기 황송하게도 오늘 뭘 했다고 할 만큼 열심히 한 게 없읍니다...이러면 안되는데... 어제 막 시작했던 포트폴리오 프로젝트에 Main, Contacts, Projects, About 등의 페이지를 아주아주 간단히 만들고, Nav 컴포넌트 정도만 만들었습니다. 아무래도 무얼 만들지 구상이 되어있지 않은 상태에서 어거지로 만드려 하니 뭘 하든 이게 맞나 싶고 갈팡질팡 하는 중입니다. 1분코딩에서 배운 반응형의 아주 기본적인 부분만 간단하게 적용해두었습니다. 테일윈드도 처음인데 반응형도 처음이라 많은 어려움을 겪고 있습니다 그리고... 
8/24 TID : 포트폴리오 프로젝트 초기 설정
오늘 뭐했나요? 오늘은 멘토님이 권유하셨던 포트폴리오 프로젝트를 (이제야!) 시작했습니다. 이걸로 이력서의 프로젝트 란에 쓸 수 있는 걸 하나라도 늘리고 싶어요... 오늘 한 건 다음과 같습니다. 프로젝트 초기 설정 README 간단 작성 README에 프로젝트 목표와 기술 스택 등을 정리해서 간단하게 작성해두었습니다. 프로젝트 목표는 아래와 같습니다. 단순히 취업을 위해 사용할 일회용 페이지가 아닌, 장기적으로 확장 가능한 개인 프로젝트 개념으로 접근합니다. 모든 내용을 한 페이지에 보여주는 대신, depth를 나누어 여러 페이지로 구현합니다. 사용 가능한 스택에 더하여 새로 공부한 스택, 라이브러리 등을 적용하며 학습하는 용도를 겸합니다. 애니메이션을 적극적으로 활용합니다. MVP를 목표로 구현한 이후에 여러 기능을 추가합니다. 커스텀 도메인을 구매하여 연결합니다. 다크 모드를 구현합니다. 배포 설정 Firebase 프로
[postgresql] Postgresql EXPLAIN 을 사용해보았다
쿼리를 날려보냈을때 가장 직관적으로 성능을 파악하는 방법을 시간을 재는것이다. 그러나, 테스트 단계 및 프로덕트 초기 단계에선 테이블 데이터가 별로 없어서 가시적인 차이가 나지 않기도 하고 각 테이블 로우 수의 차이에 따라서도 시간이 달라지기 때문에, 쿼리문의 성능을 예측할 수 있는 다른 방법이 필요하다. EXPLAIN문, 실행계획이라고도 불리는 쿼리 문법은 정통 SQL에서부터 사용되어져 왔으며, 특히 Postgres 는 Using EXPLAIN 문서를 두어 EXPLAIN문 사용법과 기본 원리는 정리, 제공한다. 사용 방법 자체는 간단하다. postgresql console에서 쿼리문 앞에 EXPLA
[TID][Lv 0] 코딩 테스트 연습_5
해당 스토리는 코드테스트 공부 중에 새롭게 배운 내용을 기록하고 자기 반성을 위해 기록해 둔다. 특정 문자 제거하기 문자열 mystring과 문자 letter이 매개변수로 주어집니다. mystring에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. 문제 풀이 간단하게 문자열로 전달받은 을 배열로 만들고, 로 특정 문자를 필터링한 다음 으로 합친 문자열을 반환하면 해결될 것 같다! 그렇다면 한 번 만들어보자! > 해결! 추가 이렇게 간단하게 해결한 문제를 왜 블로그 글로 쓰느냐! 그것은 위에서도 사용한 을 이용하여 더 간단하게 만드는 방법이 있기 때문이다. 먼저 에 관해서 알아보자. > split split(
Block? Inline?
과 은 무엇일까? 스타일 공부를 시작하면서 각 요소들을 배치하기 위해서 배우는 것이 display이다. 그 중 가장 기본이 되는 속성이 과 일 것이다. mdn문서를 보자. > 과 은 요소의 외부 디스플레이 유형을 설정하는 키워드... 말이 어렵지만, 자신과 다른 요소들과의 위치 관계를 설정하는 것이다. > 그렇다면 과 요소에는 어떤 것이 있는지 살펴보자. 
22.11.19 TID
Done list github readme 완성 이력서 완성 데이터 분석 프로세스 노션 완성 Todo list 이력서 피드백 요청 람다로 챔피언 이미지 s3 업데이트 자동화 공부하기
22.11.18 TID
Done list Carryduo 데이터 분석 프로세스 노션에 정리 완료 Todo list 데이터 분석 프로세스 노션 피드백 받고 수정하기 github readme 완성하기(트러블 슈팅 포함) 데이터 분석 프로세스 포함해서 이력서 완성하기
22.11.16 TID | 라이엇 데이터수집 스케줄러 유지보수
Done list 이력서 보완 및 캐리듀오 BE 아키택처 작성 완료 라이엇 매치데이터 수집량 확장 | summonerId 수집 로직에서 전역변수 활용하여, 스케줄별로 RIOT API에 데이터를 요청하는 key값의 범위를 확장시킴. Todo list 서비스DB로 분석한 데이터 이관하는 로직 스케줄 주기 변경하기 | 하루 1번으로. | 매 1시간마다 서비스 DB로 이관할 경우, 패치버전이 출시한 지 얼마 안된 시점에서 데이터 유의미성이 크게 낮아질 우려가 있음. 데이터분석 플로우 정리하기 | 서비스 DB 이관하는 로직 스케줄 주기 변경한 이유, 전역변수 활용한 페이지네이션 분석 등 주요 의사결정에 대해 사진 첨부 잘하기
22.11.14 TID
Done list 이력서 1차 정리 완료 데이터 수집 로직에서 개선 사항 파악 Todo list 데이터 수집 로직에서 summonerId 수집 표본 확장하기 | 전역변수로 수집 표본 기준 key 활용하기 프로젝트 BE 아키텍처 작성하기 프로젝트 데이터 분석 파이프라인 및 플로우 작성 및 정리하기 프로젝트 github readme 파일 작성하기 | 프로젝트 소개 | BE 아키텍처 | 주요 기술 | DB ERD | 주요 트러블슈팅 프로젝트 레포 개인 레포에 FORK해두기 이력서 피드백하고 개선하기 | 주요 활동내역 부연소개 bulletpoint 작성하기
22.11.13 TID
Done list 블로그 작성 | 캐싱 Todo list 데이터분석 시 matchId는 createdAt 최신순으로 할 수 있도록 변경하기 version = '', 'old'인 matchId 삭제하기 블로그 정리 | 데이터 수집, 분석, 관리에 대한 회고글 이력서 정리 차후 공부 계획 정리 이력서 정리 js oop 공부 기본적인 cs 공부 알고르즘(자료구조) 공부
22.11.11 TID
Done list nest 서비스에서 최근 version인 combination-stat만 serving하도록 하기 데이터분석 시 combinationStat 티어리스트 오류 필터링 로직 추가 Todo list version = '', 'old'인 matchId 삭제하기 블로그 정리 1) 캐싱 in nest 2) validation-pipe, dto 3) nest-swagger 4) 롤 데이터 수집/분석/처리 관련 회고 summoner, puuid도 outdated 혹은 wrong인 것은 처리하도록 하기
22.11.10 TID
Done list CD 대상 branch 변경 데이터분석 로직 체크 및 서버 배포 데이터 수집 로직 외에 outdated한 데이터 삭제시키는 로직 데이터 분석 로직으로 이관 | 동일 테이블에 서로 다른 서버에서 INSERT, DELETE문 요청하는 것에 따른 문제 사전 방지 데이터 수집 프로젝트에서 outdated한 데이터 삭제 시, nest 프로젝트 DB도 추가 챔피언 기본정보 수집 자동화 로직 데이터 분석 스케줄러에 삽입하도록 의사결정 Todo list nest 서비스에서 최근 version인 combination-stat만 serving하도록 하기 version = '', 'old'인 matchId 삭제하기 블로그 정리 1) 캐싱 in nest 2) validation-pipe, dto 3) nest-swagger 4) 롤 데이터 수집/분석/처리 관련 회고 summoner, puuid도 outdated 혹은 wrong인 것은 처리하도록
22.11.09 TID
Done list 블로그 정리 Todo list CD 시, github 브랜치 변경 챔피언 기본정보 업데이트 스케줄러 작업 확인