egg.dev.log

🐾들어가며발단: 친구와의 수다로 5월 목표가 희미하다는 걸 깨달음계기: 아침에 일어나 아티클을 읽을 때 다음의 글을 읽게 됨ref: https://maily.so/mind/posts/fcac9dfe친구의 과제 후기를 들으면서 앞으로의 일에 대해서도 말하는 시간을 가지게 되었습니다. 그러다가 5월 목표에 대해서 대화를 해보니, 스스로 목표 설정이 희미하다는 것을 알았습니다. 어쩐지 요새 목표 설정을 안해서 시간이 금방 가는 것처럼 느껴진 것 같습니다.폰을 보면 구글 디스커버를 보는 습관이 있습니다. 아침에 그렇게 보는데, 메일리의 글을 보고 목표 설정을 하는 것에 두려움이 약간 덜어낼 수 있었고, 체크리스트가 있길래 한 번 사용해보기로 합니다.✨4월 회고✅KEEP기술 블로그 작성요즘 블로그에 회고 글이 ..

🐾들어가며이전에 쓴 코드를 돌아보면서 리팩토링을 해보았는데, 정말 과거의 저에게 안타까운 시선이 갑니다.리팩토링하면서 어떤 행동으로 어떻게 변화했는지 정리해보려고 합니다.코드의 전문은 다음 링크에 올려두었습니다: https://gist.github.com/Sleepingoff/8c9494d244374292446f3f1784169c12✨본격적으로✅어떤 일을 하고 있을까?먼저 해당 컴포넌트에서 어떤 기능들이 있는지 알아보았습니다.user를 기준으로 시간을 초기화하고 현재 시간에 맞춰서 day 상태를 업데이트holiday라는 공휴일 데이터를 토대로 공휴일이라면 한 번 더 day 상태를 체크해서 업데이트새로고침, 날짜변경, 지하철방향 변경에 따라서 값 초기화rowInfo: 지하철 정보count: 요청 횟수지하..

🐾들어가며상황:라이브러리를 만들면서 컴포넌트를 사용할 때 개발자가 어떻게 쓰면 좋을지 먼저 생각했습니다. 그래서 실제로 사용할 때의 예시를 먼저 작성하곤 합니다.✨본격적으로이번에 TipBox를 만들면서 다음과 같은 코드를 생각했습니다.tooltips과 popover tips를 합쳐서 TipBox라고 부르기로 했습니다.//popver 속성을 넘기면 dialog 형태의 툴팁이 나온다. feature {/* popover 속성이 있는 Hint 내부에서 show와 hide 각각을 가진 두개의 Trigger를 사용해야 한다. */} {/* Content는 툴팁이 뜨는 위치를 prop으로 받는다. */} Lorem, ipsum dolor sit amet consectetur..

🐾들어가며CSS 관련해서 여러 가지를 사용해보는데, 어떤 차이가 있는지 간단하게 구분해보려고 글을 씁니다.✨본격적으로✅CSS, module, SCSS, CSS in JS...CSS: 웹 문서의 디자인을 씌울 수 있게 만드는 스타일 시트.-> 대규모 프로젝트에서 전역적으로 적용되는 CSS는 관리의 어려움이 있다.selecorA { /*...css...*/} selectorB.class { /*...css...*/}CSS-module: style.module.css 처럼 CSS를 module화하여 사용-> 중복되는 클래스명이어도 고유한 hash 값이 클래스명에 붙기 때문에 다른 스타일로 작성할 수 있다.selecor { /*...css...*/} selector.class { /*....

🐾들어가며HTML을 공부하기 시작하면서 시맨틱 태그를 사용하는 것에 욕심이 있습니다. 그래서 어떤 태그를 쓸 지 고민하면서 MDN을 보면서 확인하는데, 요즘 다른 내용들이 더 눈에 보이기 시작했습니다. 초반에 MDN을 보면서 이 부분을 봤으면 더 좋았을 텐데 하면서도 지금이니까 보이는 부분이라고 생각이 듭니다.필수적으로 보는 MDN HTML 태그 정보들HTML 태그의 종류 // Content CategoriesTechnical summary브라우저 호환성 // Browser compatibility✨본격적으로✅HTML 태그의 종류시맨틱하게 사용한다는 것은 해당 태그의 특성을 알고, 어떤 정보를 표현하는 지 알고 사용한다는 것입니다. 이를 좀 더 쉽게 알 수 있는 방법이 있습니다.가장 먼저 태그를 사용하..

🐾들어가며리액트 UI 스터디를 하는 목적은 UI를 구현할 때 라이브러리 의존을 낮추고 직접 구현해보는 연습을 하는 것이며, 이렇게 구현한 UI를 라이브러리(패키지)로 배포하여 다른 프로젝트에 사용하기 위함입니다.이를 위해 알고 있는 내용에 대해 정리합니다.패키지란 무엇인가?package.json패키지 매니저패키지 사용하기패키지 배포하기✨본격적으로✅패키지란 무엇인가?npm init을 하면 만들어지는 파일 package.json 파일.일종의 문서로 npm에 패키지를 배포하거나 의존 패키지를 관리하기 위해 사용하는 일종의 문서입니다.여기에서 말하는 패키지는 쉬운 사용을 위해 일부 코드를 모듈화한 것으로, 특정 패키지를 사용하여 프로젝트를 만들 때 해당 패키지에 의존하고 있다고 표현합니다. 그래서 packag..

프로젝트 세팅에 있어서 ESlint, Prettier, Stylelint 까지 유명한 linter, formatter들이 있습니다. ESlint 바로가기 > https://eslint.org/ Prettier 바로가기 > https://prettier.io/ Stylelint 바로가기 > https://stylelint.io/ 개발환경 React, TS, Scss, Storybook yarn 스터디로 진행하고 있는 프로젝트에 넣을까 말까 고민을 했습니다. 그다지 규모가 크지도 않고, 협업을 하는 것도 아니기 때문입니다. 고민 끝에 한참 다른 기능을 개발 중에 넣기로 했습니다. 초기 세팅이 아닌 초기 세팅입니다ㅎㅎ 적용하려는 이유는 다음과 같습니다. 1. import order : import가 멋대로 들..

다음 질문에 대한 답변을 작성하고 링크를 공유하기 위해 쓴 글입니다. '나'는 어떤 성격을 가진 사람인가요? 어떤 것들에 동기 부여가 되나요? 언제 몰입되나요? 무엇을 좋아하고 싫어하나요? 아무도 시키지 않았지만 계속해서 해왔던 일이 있나요? 이뤄내고 싶은 것이 있나요? 정말 해결해보고 싶은 하나의 문제가 있다면 그것은 무엇인가요? 1. 나는 어떤 성격을 가진 사람인가요? MBTI로 말한다면, ENTJ. 활발할 땐 엄청 활발한데, 조용할 땐 또 엄청 조용합니다. 혼잣말을 많이 하면서 스스로에 대한 칭찬을 하려고 노력합니다. 딱히 바쁜 건 아닌데 사람들 만나고 공부하고 그러면 한 달이 지나가 있습니다. 다들 저보고 그게 바쁜 거라고 말하는데 잘 모르겠습니다. 혼자 하는 것보단 사람들과 같이 할 때 더 좋은..

예전에도 했었지만 벌써 설정한지 1년이 다 되어 가서 가물가물했습니다. 그래서 이번에 다시 설정한 김에 제대로 정리해보려고 합니다. 글을 써가면서 코드에 변화가 많습니다. 최종 코드가 필요하다면(?) 가장 아래 부분으로 내려서 확인해주세요! 📁작업 과정 👉피그마 variables 추가하기 요즘엔 figma도 좋아져서 variables로 등록해놓고 플러그인들을 활용하여 작업 속도를 높일 수 있어 좋습니다. 간단하게 Typography, colors 설정만 연결하려고 합니다. 스터디용이라서 간단하게 만들었습니다. 👉피그마 플러그인 : token-studio 피그마의 local varibales와 local styles에 등록해두었습니다. 아쉽게도 무료버전은 typo를 variables로 등록할 방법을 찾지 ..

인턴에서 vue를 배웠습니다. 인턴은 끝났지만 vue를 배운 걸 유지하고 싶어서 스터디에 참여했습니다. 스터디 과제에서 커밋한 내용을 토대로 블로그 글을 작성하였습니다. 6. Computed Properties/book/src/components/Filter.vue 구현 전체 선택이 있는 체크박스 그룹의 UI는 다음과 같습니다. 버튼처럼 보이도록 스타일을 조정했고, 기본적으로 전체 선택으로 되어있습니다. 체크박스와 라디오를 이용해서 전체 선택이 있는 체크박스들을 만들고 있습니다. 전체 선택과 그 외의 선택 사항들을 두 그룹으로 보았을 때 라디오 처럼 동작하기 때문에, 라디오 input type을 사용하는 것이 좋다고 생각했습니다. 또한, 그 외의 사항들 그룹은 여러 개를 중복 선택할 수 있으므로 체크박스..