클로리셔 작은 공간

작업을 하다보니 년 / 월 / 일자별로 값을 불러오도록 작성해야하는 일들이 빈번하게 있다.이번기회에 React에서 사용할 typescript 버전으로 select 옵션에 value값이 들어가도록 작성해보자. 1. 년도 selectbox 만들기export const calendarYear = () => { const [year, setYear] = useState('') //년도 const startYear = 1990 const endYear = new Date().getFullYear() + 15 // 현재년도 + 15 const years: number[] = Array.from({ length: +endYear - startYear + 1 }, (_, i) => startYear + i..

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": "상체 조지기", "..

어느날 운영하는 홈페이지에 매달 판매 이력정보를 업데이트하는 아카이빙 페이지를 제작했다. 이 페이지는 어떤 기준의 데이터로 분기처리가 되는 방식인데.. 매월 그 달에 맞는 데이터를 불러와서 페이지에 담기도록 작업을 진행하게 되었다. 퍼블 작업 후에 다른 회사 프론트로 앞단 영역을 넘겼는데 나중에 데이터를 확인해보니 매달 달라지는 데이터를 복잡하게 만들어서 업데이트 할때마다 번거로움의 이슈가 발생... 이건 유지보수적으로 개노답이라는걸 파악하게 됨... [노답 데이터 리스트] 아니 매달 변경되는 정보를 넣어야 하는데 이렇게 복잡하게 적용한다는게 말도 안된다고 생각했다. 2-3달은 그렇다 치지만.. 이 페이지가 1년 운영할지 10년 운영할지 모르는데 그때마다 저렇게 하나씩 삼항연산자로 늘어간다니... 이건 ..

노마드 Next JS 강의 듣다가 API KEY 비공개 처리 방식 부분을 듣고있었는데, Redirect 세팅 방법에 대해 배게 되면서 메모해놓기로 마음 먹었다. Redirect VS Rewrite - Redirect는 세팅한 경로에 맞게 변경되고 도메인에 표시되어 클라이언트가 확인 가능 - Rewrite는 세팅한 경로에 맞게 변경되지만 도메인에 표시가 되어있지않아 클라이언트가 확인 불가능 1. Redirect 1_ next.config.js next.config.js 파일을 오픈한다. 2_ Redifrect 설정 - next.config.js //1) test1 경로 들어가면 네이버로 이동 async redirects() { return [ { source: "/test1", destination: "h..

작업을 하다보면 push한 commit을 되돌려야하는 상황이 온다.그럴때마다 매번 어떻게 했는지 기억이 안나서 빡쳐서 메모해두기로..    Reset 사용하여 깃 커밋 되돌리기!!! 1. commit 리스트 확인우선 commit 리스트 확인은git log     2. commit 취소하기가장 최근 커밋(commit)한것을 취소하고 싶을땐git reset HEAD^  여러개의 커밋을 취소하고 싶을땐?git reset HEAD~n * n에는 개수만큼 입력하면 된다.2개 = git reset HEAD~23개 = git reset HEAD~3  reset 옵션명령설명--soft HEAD^- 커밋취소- 커밋 취소된 파일 스테이징에 복구- 파일 수정사항 유지--mixed HEAD^(기본옵션)최근 커밋 & 스테이징을..