뚝딱뚝딱 코딩 기록_

[Typescript_ HTMLInputElement] ❓ 문제 리액트 + 타입스크립트로 작업하던 중 change event (event.target.checked)의 타입 오류가 발생했다. label 태그의 onChange 이벤트로 체크박스의 체크 여부를 확인하는 과정에서의 타입 선언이 잘못 된 것이었다. type을 any로 선언해 주어도 되지만 any는 지양해야 한다는 얘길 들었기 떄문에.. 다른 방법을 찾아보았다. ❗ 해결 알고보니 label이 아니라 input에서 onChange 이벤트를 추가해서 React.ChangeEvent 타입으로 선언해 주면 되는 것이었다...! event 타입 문제 때문에 타입스크립트를 사용하기 어려웠는데 이번 기회에 정확하게 타입 공부를 해야 할 것 같다. 내가 보려고..

[Javascrip_ new Date()] sns처럼 00분 전, 00시간 전 같이 표기하는 방법에 대해 알아보자 ❓ SNS처럼 시간 표기하기 - 위 사진과 같이 00분 전, 00시간 전으로 표기하기 위해서는 시간차를 계산해 주어야 한다. 1. 시간 나누기 💡 위처럼 시간을 split 하여 "연, 월, 일, 시, 분, 초"로 나눈다. 💡 오늘 날짜를 new Date()로 구한 뒤 게시글 생성 날짜와 오늘 날짜를 따로 정의해준다. 2. 시간 차 계산 💡 new Date() 안에 "0000-00-00 00:00:00"의 형태로 넣어준 뒤 뺀다. 💡 시간 계산 ❕ beforeHours / 1000 : 초 ❕ beforeHours / 1000 / 60 : 분 ❕ beforeHours / 1000 / 60 / 6..

[JS_URL.createObjectURL()] 로컬 객체 경로를 만들어 주는 URL.createObjectURL()을 img 태그 안에 직접 입력했을 때 반복적으로 객체를 생성하는 것과 그에 대한 해결 방법 대해 알아보자 ❓ URL.createObjectURL()을 이용하여 이미지 미리보기를 구현하던 중 text를 입력할 떄마다 계속해서 이미지 객체를 생성하는 현상을 발견했다. 이전 프로젝트와 같은 방법으로 구현했는데 이번에만 발생한 이슈라서 이유를 몰라 조금 헤맸다. 전역 스테이트 (useReducer, useContext 이용)로 관리하며 state를 복사해서 그런 것인 줄 알고 따로 빼서 분리하는 등 이것 저것 시도해 보았지만 똑같은 현상이 일어났다. 그런데 이유는 바로 img 태그 안에 바로 U..

[Java Script_let const var] 변수와 상수의 선언 방법에 대해 알아보자 ❔변수, 상수 - 변수 (var, let) : 데이터, 오브젝트, 함수 등을 담을 수 있음. - 상수 (const) : 변화하지 않는 값을 가지고 있는 변수. ❔var, let - 데이터 타입에 상관없이 변수 저장할 때 사용. ❓var과 let의 차이점 1. var var /*변수명*/ = /*할당값*/; - 코드 안에서 동일한 변수명 사용이 가능하다. - 호이스팅의 영향을 받는다. 👉 [자바스크립트] 함수 사용하기_function / 호이스팅? - 기존에 동일한 이름의 변수에 할당값이 사라져 오류가 발생할 수 있다. 2. let let /*변수명*/ = /*할당값*/; - 변수선언, 할당방식은 var과 동일 - ..

[Java Script_ setTime()] 타이머 함수에 대해 알아보자 ❔ setTimeout - 비동기 함수 setTimeout(() => { //실행 내용 }, /*time*/) - setTimeout 함수 안에 실행할 내용을 넣고 time 부분에 출력하고 싶은 시간을 입력한다. - time은 [1000 == 1초]로 정의 - 입력한 시간 뒤에 결과가 출력된다. ❓비동기 - 특정 코드가 실행되기 전 다음 코드가 먼저 실행되는 것. - 콜백 함수, promise 등도 비동기 방식이다. 🕙 예시 - 3초 뒤에 "ttugttag!"을 출력하게 해놓았다. setTimeout(() => { console.log("ttugttag!"); }, 3000); console.log("I"); console.log(..

[Java Script_ function] 함수 생성 방법에 대해 알아보자 1. 함수 선언식 function 함수이름() { //함수 내용 }; 2. 함수 표현식 const 함수이름 = function () { //함수 내용 }; let 함수이름 = function () { //함수 내용 }; ❔ 함수 선언식과 함수 표현식의 차이점_호이스팅 (Hoisting) - 함수 표현식은 호이스팅의 영향을 받지 않지만 함수 선언식은 호이스팅의 영향을 받는다! - 변수 선언 방식인 var도 호이스팅 영향을 받는다. ❓ 호이스팅 - 변수의 선언을 해당 변수 범위의 최상위로 끌어올리는 것 - 함수 호출 후 정의해도 사용 가능하다. emailjs.send('service_id', 'template_id', template..