기록/Today I learned

22.11.12 토 TIL

1. Done Reference 코딩일레븐 님의 몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편] 강의를 수강하고 학습 내용을 정리합니다. 개념 설명 mousemove DOM 이벤트로 마우스의 수평(X), 수직(Y) 좌표를 clientX , clientY 로 받을 수 있다. 이 값으로 css의 transform 속성을 사용해 translate 해줄 px 값으로 사용한다. 리액트 버젼 코드 강사님 코드 useState x축과 y축 값을 프로퍼티로 가진 객체를 초기값 0, 0으로 state 초기값 지정 useEffect clientX, Y 값으로 setState 함수를 변수화하고 mousemove 이벤트에 addEventListener 콜백함수로 사용. 리턴값으로 클린업하는 함수에 removeEventL..

22.11.11 금 TIL

1. 타입스크립트 1.1 TS 고유의 타입들 - unknown 타입 어떤 타입의 값이 들어올 지 모를 경우에(ex: api 호출의 결과) unknown 타입을 지정해줌으로써 어떤 작업을 하기 위해 unknown 타입을 지정한 변수의 값을 먼저 확인하도록 타입 프로텍션을 받을 수 있다. 예시코드 let a:unknown if(typeof a === 'number'){ let b = a + 1; a.concat('안될걸'); // Property 'concat' does not exist on type 'number'. } if(typeof a === 'string'){ let b = a.toUpperCase(); let c = a * 1; // The left-hand side of an arithmeti..

22.11.10 목 TIL

1. Done 1. 자바스크립트 원시타입, 참조타입, 원시 래퍼타입 원시타입 원시 타입은 있는 그대로 저장되는 데이터를 표현한다. 원시타입의 종류 boolean : true, false number: 1, 2, 0.134, NaN, ...etc string: '문자열인거' null undefined 원시타입의 특징 원시값을 변수에 할당하면 값이 복사되어 들어간다. 이 말은 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 된다는 것을 의미한다. 따라서 값을 할당한 변수의 값이 바뀌더라도 값을 할당받았던 변수의 값은 원시값이 할당된 변수는 자기 자신만의 고유한 값을 가지게 되므로 변하지 않는다. 예시 코드 let num1 = 1; let num2 = 2; num1 = num2; num1..

22.10.27 TIL - 포폴앱 타입스크립트 마이그레이션

1. Done 1.1 리액트 개인포폴앱 타입스크립트로 마이그레이션 하기 React.FC를 사용하지 않는 방법이 더 좋아보인다. 함수 컴포넌트는 화살표 함수보다 function 키워드를 사용하는게 요즘 트렌드라고 한다. 1.1.1 기존 프로젝트에 타입스크립트 추가하기 참고 git switch -c dev 또는 git branch -b dev 로 새 브랜치(dev) 생성 관련 패키지 설치 typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom ( *라우터 사용하는 경우에만 ) 프로젝트에 타입스크립트 추가 (npx tsc —init) tsconfig.json 환경설정 값 프로젝트에 맞게 변경 관련 패키지 설..

22.10.26 TIL

1. Done 1.1 포폴앱 성능최적화 계획잡기 별도 문서로 정리: https://handsome-parcel-51e.notion.site/1-1044e2798c5f49838dd87e39eb2640cc 2. 타입스크립트 - ref로 사용자 입력 받기 (state 양방향 바인딩 안 쓰는 경우) const todoOnSubmit = (e: React.FormEvent) => { e.preventDefault(); }; event 객체의 타입은 react.FormEvent 이다. useRef useRef 호출 ref 타입 할당 (HTMLInputElement) 초기값 null 할당 (useRef()가 jsx 리턴문보다 위에 있어 최초 렌더링 시 아직 jsx가 렌더링 되지 않았으므로) reference 값을 D..

22.10.25 TIL

1. Done 1.1 타입스크립트 타입스크립트는 코드에 에러가 있더라도 컴파일은 진행된다. function add(n1: number, n2: number) { return n1 + n2; } const num1 = '5'; // Argument of type 'string' is not assignable to parameter of type 'number' const num2 = 2.2; const result = add(num1, num2); console.log(result); // 매개변수에 지정한 타입과 전달인자의 타입이 일치하지 않음. // 하지만 에러가 나도 컴파일은 진행됨. 타입스크립트의 주요 원시 타입은 모두 소문자로 시작한다 number, string ,boolean, ….etc Re..

22.10.24 TIL

1. Done 1.1 복습 - 개인프로젝트 firebase admin 코드 분석 1. 인터페이스 /** 인터페이스: 기본 명세를 정의한다. */ interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } 2. 싱글톤 패턴 /** 싱글톤 패턴으로 FirebaseAdmin 인스턴스를 어디서든 불러올 수 있도록 export default. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; private init = false; public static getInstance(): FirebaseAdmin {..

22.10.21 TIL

Task 기술면접 질문 공부하고 답변 정리, 문서화 1. Done 1.1 기술면접 답변 정리 질문: 스코프에 대해 설명해주세요. 스코프란 식별자의 유효범위를 말합니다. 모든 식별자는 자신이 선언된 위치에 의해 자신을 참조할 수 있는 유효범위가 결정됩니다. 예를들어, 함수의 매개변수는 함수 몸체 내부에서만 참조가 가능하며 함수 몸체 외부에서는 참조가 불가능합니다. 이 경우 매개변수의 스코프, 즉 유효범위는 함수 몸체 내부가 됩니다. 스코프는 크게 전역 스코프(Global Scope), 지역 스코프(Local Scope) 두 종류로 나뉩니다. 변수를 기준으로 설명하자면 전역에서 선언된 변수는 전역이 유효범위인 전역 변수이며, 지역에서 선언된 변수는 지역 스코프의 지역 변수가 됩니다. 지역 스코프의 경우 세부..

TIL 220416

1. Input(학습) 자바스크립트 처음 시작할때 쉽지만 모를수 있는 객체 복사 방법! 2. Output(복습) 객체끼리 비교, 복사 3. Notes(정리) 객체를 deep copy 하는 2가지 방법( ❊객체 내 메소드에는 적용 불가 ) 전개연산자 사용하기 Object.assign 메소드 사용 1. 전개연산자를 사용하여 객체를 deep copy 하는 방법 const a = { num : 1, }; const b = {...a}; console.log(a.num); // 1 console.log(b.num); // 1 console.log(a === b); // false 2. Object.assign 메소드를 사용하여 객체를 deep copy 하는 방법 const a = { num : 1, }; cons..

TIL 220408

1. Input(학습) 바닐라 자바스크립트 투두앱으로 DOM 조작 학습(강의링크) css의 7가지 단위(링크) 2. Output(복습) 이벤트 핸들러 함수 웹게임 - 계산기 3. Notes(정리) 1. DOM 조작하기 1.1 이벤트 핸들러 함수 사용 이벤트 리스너의 콜백함수로 익명함수 또는 외부함수를 가져와서 사용할 수 있다. 다만 외부함수 사용시 () 사용할 경우 이벤트 발생과 상관없이 함수가 실행되기 때문에 () 생략하고 함수명만 넣는다. const $button = document.querySelector('button'); // 익명함수 사용시 $button.addEventListener('click', () => { 버튼 클릭시 동작할 내용 }); // 외부함수 사용..