클로리셔 작은 공간

1. Material Theme     VS code 테마를 설정할 수 있다.내 눈에 적합한 테마로 피로감을 줄 일 수 있는 익스텐션        나는 다크한 배경에 눈에 띄는 텍스트로선택해서 사용중이다.       2. Material Icon Theme     작업을 하다보면 다양한 파일과 폴더들을 생성하게 된다.아이콘 테마가 없으면 ui가 똑같아서파일 구분에서 불편함이 느껴진다.        icon theme을 설치하면내가 만드는 파일에 맞게 아이콘이 꾸며줘서파일 구분이 쉽게 되어 편리하다.        3. CSS Peek / CSS Navigation    html 파일에서 class 명을 클릭하면그 class 명에 맞는 css 파일로 이동된다. 그러나 React에서는 className으로 설..

🚀 mounted 란?- 컴포넌트가 화면 DOM에 완전 추가된 후 실행하는 함수. 컴포넌트 생성 ▶️ 가상 DOM에 렌더링 ▶️ 브라우저에 화면 그려짐 ▶️ mounted 실행 ✨ HTML이 화면에  그려진 후, 실행되는 함수.보통 데이터를 불러오거나 DOM을 직접 조작해야할 때 사용.     예시 1 ) 화면에 표시된 후 API에서 데이터 가져오기 {{ message }}data() { return { message: "로딩 중...", // 처음엔 data의 message는 "로딩 중..."라고 적용 됨. }; }, mounted() { setTimeout(() => { this.message = "데이터 불러옴!"; }, 2000); // 2초..

예전에 쿠키를 이용해서 이 기능이 적용된 팝업을 레거시로 만들었었는데 이번에 Vue에서 사용하는 팝업창을 만들게 되었다. 라이프사이클을 사용해서 하다보니 만들면서 기억할 겸 정리 한다.    [ Vue에서 HTML 팝업창 만들기 적용 ] 오늘 하루 열지않는 팝업창 만들기 닫기 오늘 하루 열지 않기     v-model을 이용하여 데이터 바인딩을 적용. checkbox가 클릭되면,data에 doNotShowToday = ture  checkbox가 해지하면,doNotShowToday = false     [ Vue에서 오늘 열지않기 기능 Script 적용 ] export default { data..

gitHub에서 작업내역을 remote 적용하는 과정에서 main(default)과 master(branch)가 따로 분리되어버리는 현상이 나타났다.이렇게되면 master 브랜치에서 작업을 진행했을 때 main에 머지도 안되고 나중에 렌더링 돌려서 서버로 볼 때 이슈가 생겼다.따로 된 것을 하나로 합치는 방법이 없는지 찾던 중 master를 강제로 main에 병합하는 방법을 찾았다!!   ⛏️ master 브랜치를 main에 강제 병합!git checkout mastergit branch main master -fgit checkout maingit push origin main -f ❌주의사항 ❌ - master의 브랜치 작업을 main에 덮어쓰는 방법이다.그러므로 main에 작업한게 있으면 다 사라질..

회사에서 과제로 To-do 리스트 만드는걸 내줬다.      체크박스의 토글에 따라 일정 완료기능을 넣었는데매번 체크박스를 업데이트 할 때, 스크립트 구조를 어떻게 잡아야할지어떻게 useState로 업데이트하여 리랜더링 해야하는지매번 만들때마다 구조가 늘 꼬여 이번에 정리하며 메모하려 한다.    db.json[ { "id": 0, "type": "To-Do", "title": "맛있는거 만들어먹기", "process": true }, { "id": 1, "type": "약속", "title": "친구랑 맛집가기", "process": false }, { "id": 2, "type": "취미", "title": "상체 조지기", "..

포스트맨으로 GET으로 데이터 불러오는건 많이 해봤는데 POST 보내는건 안해봐서 매번 헷갈려서 정리한 포스팅. POST 사용하여 데이터 넘겨보기 1. POST로 설정 2. 하위 탭에서 'Body' 클릭 3. 그 하위 라디오버튼 리스트에서 'raw' 선택 4. 그럼 아래에 데이터 적을 수 있는 영역에 입력 5. 'send' 눌러서 데이터 보내기 ※ 데이터 넘길때 필수로 들어가야하는 key 값인지 체크해보기 GET에서 데이터 들어갔는지 확인해보기!

🚀 Js 없이 CSS로만 롤링 스크롤 배너 만들기 - Infinite Scroll Banner Animation -    이번에 작업하면서 배너가 무한 자동 스크롤 되는 작업이 들어왔다.CSS로 keyframes로 animation 만들면 되겠지 싶어서 뚝딱 뚝딱 만들었다.      예시로 보기 쉽도록 무지개 색상별로 박스 상자 만들어 무한 자동 스크롤 되도록 만들어보았다.     [ HTML ] - 상자 뼈대 만들기 red orange yellow green blue navy violet   [ SCSS ] - 상자 별 색 꾸미기.container{ position: relative; display: flex; align-items: center; m..

yarn 커맨드로 작동시킬 때 계속 에러가 났다.. 대체 왜..!! 뭐가 문젠데..!!! 하고 차분히 찾아봄... Error 메세지는 error: Command failed with exit code 1. 이번에 해결하면서 yarn이 업데이트가 적용이 안돼서 동기화가 안먹힌거같은데... 여튼 방법은 2가지가 있다고한다. 1. yarn 관련 모든것 지우기 1-1. yarn 으로 생성된 node_modules & yarn.lock 지우기 rm -rf node_modules rm -rf yarn.lock 1-2. yarn 공유 캐시 파일 지우기 yarn cache clean 1-3. yarn 재설치 yarn install 1-4. yarn으로 시작해보기 yarn start 2. yarn 업데이트 후, 다시 시..

1. commit 메세지 구조 - 기본 적인 커밋 메시지 구조는 제목,본문,꼬리말 세가지 파트로 나누고, 각 파트는 빈줄을 두어 구분한다. type : subject body footer 2. Commit Type Rule - 타입은 태그와 제목으로 구성되고, 태그는 영어로 쓰되 첫 문자는 대문자로 한다. 태그 제목 Feat : 새로운 기능 추가 Fix : 버그 수정 Docs : 문서 수정 Style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 Refactor : 코드 리펙토링 Test : 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) Chore : 위에 걸리지 않는 기타 변경사항 (빌드 스크립트 수정, assets image, 패키지 매니저 등) Design ..