egg.dev.log

기존 토큰 스튜디오라는 플러그인을 사용 중, 다음과 같은 문제가 발생했습니다.1. 디자인 토큰이 렉 걸려서 날아간다...2. 플러그인이 너무 무겁다. 필요한 기능 대비 많은 기능이 있어서 오히려 복잡하다.3. 깃허브 연동할 때 브랜치를 별도로 계속 파줘야 한다. design 브랜치가 오래되면 기존 브랜치와 머지할 때 충돌이 자주 발생한다...그래서, 가벼운 기능에 위 문제들을 해결할 수 있는 플러그인을 제작했습니다.사실 저는 거의 지적만 하고 지피티와 코덱스만 열일했지만요ㅎㅎ그래서 만든 토큰 싱크는 다음과 같은 기능을 중점으로 둡니다.1. 기본적으로 깃허브 연동.2. 알아서 브랜치 분기처리.3. json으로 토큰 정리. 사용방법은 간단합니다.1. 깃허브 토큰 입력2. 레포 입력3. 토큰을 올릴 브랜치 입..

깃허브 코드를 정리하고 싶다. 방법 깃허브 레포 링크를 gpt한테 준다. 해당 레포에 대한 기본 문서화를 진행한다. 각 파일에 대한 문서화를 진행한다. 리드미를 작성한다. 추가적으로 원하는 기능 또는 리팩토링 방향을 문서화한다. gpt한테 해당 기능에 대한 문서를 넘긴다. 소요시간 및 리소스에 대해 분석한다. 과거의 코드... 과거의 나야 어떻게 했니..?제 깃허브를 보면 요즘 리액트로만 대부분의 프로젝트를, 아니 모든 프로젝트를 진행하고 있습니다.리액트가 정말 정말 많이 쓰이는 것도 사실이나, 리액트는 결국 자바스크립트를 편하게 쓰기 위한 프레임워크에 불가하다고 생각합니다. 그래서 바닐라 자바스크립트(ECMA JS)를 사용해서 직접 DOM을 조작하고, 이벤트를 관리해보는 연습을 하고 싶..

🐾들어가며요즘 한참 공부중인 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가 멋대로 들..