egg.dev.log

🐾들어가며요즘 한참 공부중인 Matter.js에 대해 정리해보려고 합니다. 아직 제대로 사용하진 못 하지만, GPT랑 놀면서 배우고 있어서 삼각함수만 머리를 싸매면 되기에... 기본적인 내용부터 정리를 시작합니다ㅎㅎ  정리하다보니 욕심이 생겨서 지금 만들고 있던 인형뽑기 집게까지 같이 첨부합니다!Matter.js 공식 문서 바로가기 > https://brm.io/matter-js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library✨본격적으로✅CDN으로 시작해보자CDN.js라는 사이트에서 Matter.js에 대한 CDN을 잘 제공해주어 해당 CDN을 사용하였습니다.✅공식문서의 상태가...React의 주 라이브러리들의 공식문서만 보다가 M..

🐾들어가며요즘 아침에 프로그래머스 2문제를 풀기로 했는데, 어제 2문제 중 한 문제에서 막혀 달성하지 못했습니다. 오늘 바로 다시 시도하고 있는데, 아무리 반례를 찾아서 넣어봐도 통과가 되는 것입니다... 분명 70점이 나오고 있는데 말이죠ㅎㅎ 그러다가 설마하고 고치지 않고 있던 부분을 바꿔보았는데, 드디어! 통과가 되어 뿌듯함에 글로 남깁니다.✨본격적으로문제오늘 날짜를 의미하는 문자열 today : YYYY.MM.DD약관의 유효기간을 담은 1차원 문자열 배열 terms : 약관종류(A ~ Z) 유효기간 ( 1 ~ 100)수집된 개인정보의 정보를 담은 1차원 문자열 배열 privacies : 날짜(YYYY.MM.DD) 약관종류파기해야 할 개인정보의 번호를 오름차순으로 1차원 정수 배열에 담아 retur..

🐾들어가며- 프로그래머스 코딩테스트 > 2024 KAKAO WINTER INTERNSHIP > 가장 많이 받은 선물문제: 이번 달의 선물 기록을 바탕으로 다음 달에 선물을 누가 많이 받을지 예측하기더보기조건두 사람이 선물을 주고받은 기록이 있다면, 이번 달까지 두 사람 사이에 더 많은 선물을 준 사람이 다음 달에 선물을 하나 받습니다.두 사람이 선물을 주고받은 기록이 하나도 없거나 주고받은 수가 같다면, 선물 지수가 더 큰 사람이 선물 지수가 더 작은 사람에게 선물을 하나 받습니다.선물 지수는 이번 달까지 자신이 친구들에게 준 선물의 수에서 받은 선물의 수를 뺀 값입니다.만약 두 사람의 선물 지수도 같다면 다음 달에 선물을 주고받지 않습니다.입력친구들의 이름을 담은 1차원 문자열 배열 friends이번..

🐾들어가며반응형 텍스트박스란?사용자의 입력에 따라서 크기가 자동 조절되는 텍스트 박스. 엑셀의 셀 하나를 생각해보면 된다.화면의 크기에 따라서 비율이 자동 조절되는 텍스트 박스.보통 위의 두 가지를 모두 해결할 수 있는 방법이 바로 스타일로 조절하는 방법입니다.그러나 여기에서 궁금증이 생겼습니다.textarea의 기본 속성 중 rows와 cols가 있는데, 보통 이것으로 크기를 조절할 수도 있습니다.스타일로 조절할 경우 최초 선언한 rows와 cols가 바뀌지 않습니다.그렇다면 cols와 rows로 반응형을 하지 않는 것일까?궁금해서 직접 구현해보았습니다!!✨본격적으로✅cols = 1 이 의미하는 것cols는 가로의 크기를 결정합니다.cols는 숫자를 값으로 받습니다.그렇다면 cols=1이 의미하는 것..

🐾들어가며이전에 쓴 코드를 돌아보면서 리팩토링을 해보았는데, 정말 과거의 저에게 안타까운 시선이 갑니다.리팩토링하면서 어떤 행동으로 어떻게 변화했는지 정리해보려고 합니다.코드의 전문은 다음 링크에 올려두었습니다: 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..

🐾들어가며리액트 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년이 다 되어 가서 가물가물했습니다. 그래서 이번에 다시 설정한 김에 제대로 정리해보려고 합니다. 글을 써가면서 코드에 변화가 많습니다. 최종 코드가 필요하다면(?) 가장 아래 부분으로 내려서 확인해주세요! 📁작업 과정 👉피그마 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을 사용하는 것이 좋다고 생각했습니다. 또한, 그 외의 사항들 그룹은 여러 개를 중복 선택할 수 있으므로 체크박스..