매일 공부한거 기록하기

디자인 후다닥 넣어서 완성 ~ .. today로 가는 버튼은 클릭시 setCurrentMonth를 현재 month로 set 해줬고, setSelected를 현재 날짜로 set해줬당 화면은 currentMonth가 바뀔때마다 렌더링되므로 화면도 당연히 이동된당 현재 날짜 선택은 렌더링된 현재 날짜를 setSelected에 set해줬다. 삼항연산자를 이용해 className에 selected ? "selected" : "" 를 추가해줘서 css를 변경할 수 있게 했답~~~~~~~~

처음엔 단순하게 1일부터 마지막날짜까지 for문을 돌려 배열에 넣어줬었다. 근데 오늘날짜 표시를 하기 위해선 단순하게 증가한 i가 아니라 object타입으로 받아 today를 비교하게 해야했음.. dayjs()에 isToday()가 있으므로ㅎㅎ //해당월 날짜 배열 for (let i = 1; i ( {item.isToday() ? ( {item.format(dayFormat)} ) : ( item.format(dayFormat) )} 그리고 배열을 map으로 돌려서 item.isToday() 삼항연산자를 사용해 오늘일 경우 Today컴포넌트를 렌더링 하게 해줬다 평일과 주말 컬러 구분도 해줬다. for문을 돌려 date배열에 요일들을 넣어준다. 그리고 date배열을 map으로 돌려 index별로 구분해..

첫번째 시도는 해당 월의 날짜들만 받아왔었고 이번에는 이전 달, 다음 달의 날짜들도 받아오려고 한다. 저번달의 날짜 배열을 만들었다 현재 달의 요일을 숫자로 받아와 일곱칸중에 몇번째 칸까지 for문을 반복할지 정해준다. 그리고 이전달의 마지막 숫자에서 하나씩 빼준다. 이때 배열은 거꾸로 넣어줘야하므로 unshift해준다. 왜냐면 lastDayofPrev는 31-0, 31-1, 31-2..이런식으로 들어가기때문 31,30,29 배열을 unshift해주는것 해당월은 첫번째 달력에서 만든것과 같다 다음달역시 1부터 시작해 마지막 요일을 일곱칸중에서 빼준다 그럼 일주일중에 몇칸이 비어있는지 알 수 있으니까 1부터 증가시켜 넣어준다 그리고서 map으로 해당 배열들을 컴포넌트로 리턴시켜준다 //저번달 날짜 배열 i..

내가 생각한 방법은... 해당 월의 시작요일을 찾고 해당 월의 마지막 날짜를 찾아서 배열에 push를 해주는것 이었다! 0부터 시작요일까지는 "" 빈값을 넣어주고 시작부터 마지막까지는 for문을 돌려 날짜를 넣어준다 그리고 마지막날짜부터 달력의 마지막 칸까지 또 ""빈값을 넣어주는 그런 방법이였다 const getDays = () => { const startDate = currentMonth.startOf("month").format("d"); const endDate = currentMonth.endOf("month").format("D"); const endDateIndex = currentMonth.endOf("month").format("d"); const dateRow = []; for (le..

달력을 만들어 보자 :) ~ dayjs 공식홈페이지 ~ https://day.js.org/en/ 달력을 구현하기 위한 로직을 정리하자 ~ :) 1. 이번달의 시작 요일을 알아야 한다. 1-1 . dayjs 에서 startOf는 지정 시간 단위의 시작을 알려준다. 1-2 . dayjs().startOf("month")는 object를 리턴한다. 1-3. dayjs().startOf("month").format("d") 를 이용해 필요한 포맷으로 리턴받으면 된다. 1-4. format("d")는 요일이 0-6까지로 표현된다. (일요일이 0으로 시작함) 2. 이번달의 마지막 날짜 2-1.마찬가지로 이번달의 마지막은 dayjs().endOf("month")를 사용해 Object를 리턴받는다. 2-2 .dayjs..

신기하다 ㅋㅋㅋㅋ v-model을 쓴다면 양방향 데이터 바인딩이 가능하다 ! 데이터컨트롤하기 생각보다 더 쉬운것같다 이래서 vue를 좋아하는 것인가 .. 크크크

React 처럼 import해주면 바로 사용할 수 있을 줄 알았다... :( (원래 부딪히면서 배우는거 아니겠냐고요) 1. 단순하게 import해서 사용하는 방법 Before 처음에 이렇게 import만 해주려고 했다. After 이렇게 import를 우선해온 상태에서 export default {} 안에 import해온 component를 선언해주면 사용할 수 있다! 2. 전역에서 사용해야하는 컴포넌트는 어떻게 등록할까? main.js에 import한 후에 등록해주면된다 Vue.component('컴포넌트이름','옵션') 컴포넌트 이름은 당연히~ 컴포넌트를 사용할때 쓸 이름이고 옵션은 렌더링시 필요한 옵션들을 작성하면 된다! import GlobalTest from "./components/Global..

바쁜 벌꿀은 슬퍼할 시간도 업ㄸㅏ vue를 아라보자 1. 아래 명령어를 iterm에 입력 npm init vue@2 vue 2.7기준 , vite기준 으로 설치함 2. 프로젝트 이름은 vue-test 잘 모르겠으니까 일단 NOooo...만 입력해준다 나중에 필요하면 추가해보자 설치완료 3. cd vue-test npm install npm run dev 입력해주면 local에서 띄울수있다 :)

target: "es6", //브라우저 호환성에 맞게 설정 module: "ES2015" outDir: "./dist", rootDir: "./src", removeComments:true //배포할때는 코멘트를 다 삭제함 noEmitOnError :ture // 컴파일 에러가 발생하면 더이상 컴파일 하지 않는다 strict: true //항상 strict모드로 설정한다 /*Additional Checks*/ noUnusedLocal: true, noUnsuedParameters: true, //local에서 사용하지 않는 변수들이 있을때 경고를 받는다 noImplicitReturns: true, noFallthroughCaseInSwitch:true, noUncheckedIndexedAccess:true,

백엔드 개발자 칭구가 프로토타입을 물어봤는데 뭔가 느낌으로 설명하기 어려워서.. 정리를 해보려고 한당 :) https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개발 학습하기 | MDN Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 developer.mozilla.org javaScript는 프로토 타입 기반 언어이다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체 prototype object를 가진다는..