클로리셔 작은 공간

🚀 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 ..

REACT에서 module화 된 className 적용방법 그냥 기본적인 scss를 작성할때는 className 적용할 때 별 문제없었는데, module화 된 scss를 작업하다보면 갑자기 문법이 헷갈리면서 scss파일이랑 연동이 안돼서 오류가 뜬다. 1. scss 모듈일 때, 조건을 걸어서 class에 2개의 module.scss를 적용시킬 때, - isOpen일때의 조건이 걸릴 때, .hamburger와 .isOpen의 클래스를 같이 넣고싶을 때 적용 방식이다. 2. 컴포넌트 파라미터 값을 모듈 scss로 class 적용할 때, const test = ({type}) => { return ( ) }; - 파라미터로 받은 { type } 값을 className 내에 모듈화로 삽입하고 싶을 땐 style..