egg.dev.log

🐾들어가며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을 사용하는 것이 좋다고 생각했습니다. 또한, 그 외의 사항들 그룹은 여러 개를 중복 선택할 수 있으므로 체크박스..

심심해서 정리하는 옵시디언 개요 노트 정리 방법 PARA 옵시디언 정리 전 옵시디언 정리 후 노트 정리 방법 PARA 세컨드 브레인을 읽고 예전에 정리한 내용입니다. PARA와 CODE로 제 2의 뇌를 만들자 - Tiago Forte PARA Project 마감과 기한이 정해져 있는 목표 목표와 시간이 정해져 있다는 것!! Area 일생동안 지속적으로 유지해야 하는 활동 기한이나 마감이 정해져 있지 않다는 것!! 건강, 재산, 여행, 공부, 취미 등 Resource 지속적인 관심을 갖는 어떤 주제나 분야 내가 관심을 가지고 있는 모든 것!! 맛집, 아티스트, 노래, 영화, 도서 등 Archive 위의 내용에서 완료된 주제나 관심에서 멀어진 주제의 내용 지금 당장은 필요없지만 다시 꺼낼 수 있는 정보나 자..

🐾들어가며 운 좋게 소규모 스타트업에서 한 달 인턴을 진행하였습니다. 한 달 이후 피드백을 받았습니다. 해당 피드백을 정리하면서 정말 많은 것을 배웠고, 앞으로 어떻게 커리어를 잡아가면 좋을 지에 대해서도 고민했습니다. 피드백을 인정하고 최대한 객관적으로 스스로를 돌아보려고 합니다. ✨본격적으로 ✅ 온보딩 3시간 - 프로젝트에 대한 설명 첫 날, 온보딩 3시간 후 프로젝트를 받았습니다. 출구와 입구가 없는 미로에 출구와 입구를 만들라는 미션처럼 느껴졌습니다. 코드에서 무엇을 읽어야 하는지, 어떤 생각으로 접근해야 하는지 막막했습니다. 열심히 코드를 읽다가 이해가 안 되는 부분을 나름 사소한 것까지 정리해서 질문했습니다. 이상한 곳에서 헤매고 있다보니 프로젝트를 진행했을 때의 상황, 프로젝트에 사용한 패턴..

🐾들어가며 Docs for Developers 의 chapter 7 문서 배포하기를 읽고 예시를 찾아보면서 같이 정리했습니다. 이번 챕터에서는 문서를 배포하기 위한 프로세스를 만드는 것을 목표로 합니다. ✨본격적으로 ✅문서 배포 문서 배포: 사용자가 콘텐츠를 읽고 따라할 수 있도록 하는 것을 의미하며, 소프트웨어가 릴리스되었음을 알리는 것과 유사하다. 완벽한 문서는 거의 없다. 문서 배포에 대한 두려움을 다루는 가장 좋은 방법은 배포 후에 피드백을 기반으로 그동안 했던 과정을 반복하는 것이다. 해당 챕터는 다음과 같은 내용으로 구성되어 있으나, 프로세스 구축과 타임라인 만들기를 위주로 내용을 정리하였습니다. 콘텐츠 릴리스 프로세스 구축하기 배포 타임라인 만들기 배포 확정 및 승인하기 독자에게 콘텐츠 알리..

🐾들어가며 설이 끝나고, 인턴을 하고 있습니다. 아르바이트가 끝나고 바로 인턴을 시작했고, 일주일이 좀 넘었습니다. 그래서 최근에 쉬지 못하고 있다고 느꼈고, 시간을 내어 회고를 하면서 체력을 충전하려고 합니다. ✨본격적으로 이번 회고의 주된 내용은 1월의 Try에 대한 구체화와 커리어에 대해서 입니다. 2월의 전체적인 일정입니다. 8일 면접 13일까지 아르바이트 9시 ~ 6시 14일부터 인턴 출근 17일 강아지 장례식… 윤달이어도 짧은 2월 중순 설을 끼고 많은 일들이 일어났습니다. 취업 준비를 잠시 멈춘다고 했는데, 이런 식으로 멈출 수 있을 줄 몰랐습니다. 달에 한 번씩 객관적인 지표를 위해 이력서를 작성하던 것이 빠르게 지원할 수 있었고, 꾸준히 블로그를 작성하던 것이 강점이 되었습니다. 추정 나..