라쿤의 끄적끄적

TypeScript06 Class 클래스? ojbect를 만드는 blueprint (설계도) 클래스 이전에 object를 만드는 기본적인 방법은 function JS는 es6 부터 class를 사용 가능 (접근 제한 키워드가 부족함) OPP을 위한 초석 TypeScript 에서는 클래스도 사용자가 만드는 타입의 하나임 (JS보다 강력한 class 기능) class 선언과 사용 class 선언&사용 : 기본 방법 class 키워드 사용 class 이름은 대문자 new 키워드를 이용하여 class를 통해 object를 생성할 수 있음 기본 property에 값을 할당하여 class를 만들고 object를 생성하면 기본 property가 초기값으로 설정되어 object가 만들어짐 class Per { name..

TypeScript05 CompileOptions : strict 엄격하게 type check하는 옵션들을 전부다 킴 --noImplicitAny, --noImplicitThis, --strictNullChecks, --strictFunctionTypes, --strictPropertyInitialization, --strictBindCallApply, --alwaysStrict "strict": { "description": "Enable all strict type checking options.", "type": "boolean", "default": false, "markdownDescription": "Enable all strict type checking options. See more: h..

네이버 커넥트재단에서 운영하는 부스트 코스라는 사이트의 모두를 위한 컴퓨터 과학 (CS50) By David J. Malan이라는 하버드대에서 강의한 CS 강의이다. 해당 글은 강의를 듣고서 정리한 내용 및 img 자료 입니다. (무료 강의) CS50 : 컴퓨팅 사고 (Computational Thinking, Scratch) 컴퓨터 과학 : 단지 문제를 해결하는 것 (어떠한 입력이 있을 때 그로부터 어떠한 출력을, 그 문제에 대한 답을 찾는 과정) 기계는 입출력에 대한 동의가 필요함 (약속) -> 정보 자체의 표현 방법 2진법 우리는 10진법으로 0 ~ 9 까지의 숫자를 가졌지만 , 기계는 0, 1 단 두개의 숫자 뿐이 없다. 그럼에도 컴퓨터는 글, 이미지, 소리, 영상 등 많은 것을 저장하고 있다. ..

TypeScript04 tsconfig schema 각 option에 대한 설명 https://json.schemastore.org/tsconfig 최상위 프로퍼티 defintions을 기준으로 주로 사용하는 최상위 프로퍼티들 compileOnSave extends compileOptions : 어떤 식으로 컴파일 할 것인지에 대한 options files : 어떤 파일들을 컴파일 할 것인지에 대한 setting include exclude references compileOnSave file을 save하면 compile 하는 옵션(에디터에서 되는 설정이고 아무데서나 되는 것은 아님) true or false 값을 줄수 있고 default는 false 값 VS 2015 with ts 1.8.4 이상 또는..

TypeScript03 타입 시스템 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 컴파일러가 자동으로 타입을 추론하는 시스템 타입스크립트의 타입 시스템 타입을 명시적으로 지정가능하고 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 형태를 정해둔 함수의 사용자와 구현자 타입이란 해당 변수가 할수 있는 일을 결정함 함수의 인자가 할 수 있는 일은 함수 인자의 타입이 결정함 const f1 = (a) => { return a; }; 함수 사용법에 대한 오해를 야기하는 JS 사용법을 알기 위해서는 구현자에게 물어보거나 함수가 어떻게 이루어져 있는지 뜯어봐야 앎 const f2 = (a) => { return a * 38; }; console.log(f2(10)); // 380 consol..

TypeScript02 Object 일반적으로 실제 값을 갖는게 아닌 값을 가진 곳을 가르키는 정보를 가짐 TS에서 object는 다른 의미로 사용됨 object type는 primitive가 아닌 type이라고 함 즉, oject type primitive type object literal를 활용하여 만드는 경우 object가 아닌 object literal type임, 지정한 타입 그대로가 타입임 literal 모양으로 type을 표현 const person1 = { name: "Tom", age: 26 }; //person1 의 type은 object가 아님 // person1은 "{name: string, age: number}" 타입 임 Object 인 전역 내장 객체를 활용하여 만드는 경우 ..

TypeScript01 TypeScirpt는 타입을 추가시켜 JavaScript를 확장시킴 코드 실행전에 Error 잡거나, 수정하게 함으로써 시간을 줄여줌 어떤 실행 환경이든 간에 동작가능 (browser, nodejs 등) Programming 언어 이자 Compiled 언어(전통적인 complie과는 다름) 다른 언어와 다르게 Compile 이라는 용어를 TS(compiled 언어) -> 순수한 JS(interpreted 언어)로 변환시키는 것으로 사용 됨 (다른 말로는 Transpile 이라고도 함) 즉, TS를 editor에서 작성시켜서 바로 runtime할수 없기 때문에 compile 과정(TypeScript Compiler 가 변환)을 통해서 JS로 만들어서 Browser, Nodsjs에서 ..

submit 처리시 laoding modal 구현하기 submit을 보내는 경우 큰 이미지 파일을 올리거나 할때 처리 시간이 조금 걸리기 때문에 사용자에게 처리하고 있음을 알려줄 필요가 있다. 기존의 init load Component를 재활용 해서 사용하였다. 하지만 그전과 다르게 modal적인 요소를 넣어 현재 화면에 띄우는 형식으로 만들었다. component 넣기 기존 화면인 home route 또는 profile route 아래에 modal이 동작하는 것과 같이 추가하였다. 그리고 state를 변경하는 것은 글작성, profile update 하는 submit에 추가함으로서 보이거나 안보이게 할수 있도록 하였다. // Home component , profile component 하단에 추가 c..

proifle 반영 기능 개선 문제점 병렬처리를 하였지만 비효율적으로 사용하고 있음 (동시에 두가지 photo , display update시 모두 변경시 속도지연과 setUpdate함수 호출의 순서 때문에 rerender시에 반영이 안되게 보이는 것들이 있음) forEach의 경우 병렬 처리하여 안에서 await로 순서처리 시켜도 넘어가 버림 그래서 setUpdated를 너무 빨리 하는 문제가 생김 중복되는 코드가 많아짐 Rerendering 타이밍 문제, 병렬 효율적으로 사용하기 참고한 사이트 [번역] async/await 를 사용하기 전에 promise를 이해하기 by kiwanjung MDN : promise.all() 배열에 비동기 작업을 실시할 때 알아두면 좋은 이야기들 by hanameee ..

Img Error 처리 img를 가져오는 경우 보통 src로 img url 또는 server에 존재하는 경로를 연결하곤 한다. 이번 프로젝트의 경우에는, img를 Data URL 형식으로 가져오게 된다. 그러다 보니 URL이 옳지 못하거나, 더이상 web에 올려지지 않아 있는 경우 img를 로드 하지 못하고 흔히 말하는 엑박이 뜨게 되는 것이다. (alt 속성으로 지정한 이름이 뜸) 이 프로젝트의 경우 firebase의 storage에서 의도치 않게 img file이 지워져서 더이상 url을 load못하게되는 경우 어떻게 엑박을 안뜨게 하고 자연스럽게 user 화면을 표시할 것인가에 중점을 두고 있다. 방법 img 태그의 onError 속성 사용 HTML 에서는 onerror React(JSX)에서는 o..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 CSS : 반응형 웹 Navigation bar 반응형으로 만들기 justify-content: space-between 값을 적용시켜서 브라우저 크기가 작아져도 각 아이템은 좌우로 붙어 있는 상태를 유지하면서 작아지게 됨 글상자 img 비율 유지하는 반응형으로 만들기 width: 100%로 주고, heigth: fit-content으로 주어 img비율을 유지하게 함 그리고 min-width, max-width를 주어서 적당히 크고 작게 변화줄수 있게 해줌 CSS : Profile Update 버튼 형으로 만들기 설명 pro..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 Modal 기능 profile route에 적용하기 접근 profile의 경우에는 자신이 쓴글을 볼수 있다. 그러다 보니 똑같이 Home component에서 사용한 rweet이라는 글 박스 component를 공유하게 된다. 다만, 처음에 잘못 한것이 profile page에서 글 박스를 render 할 때, get방식으로 가져온다는 것이다. 그러다 보니 home에서는 onSnapshot 방식으로 가져오는 것 다르게 database가 update가 되면 바로 반영되서 바뀌는 것이 아니고 update 마다 새로 databas..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 CSS 작업 및 react code 수정 1. 일단 예전에 작성했던 문제점인 menu icon 밀림 현상을 해결하였다. "20210416 글에서" creator 이름 길어지면 margin으로 설정했기 때문에 menu 버튼이 밀림 (header position fixed 때문에 영향을 받아서 margin으로 했는데 다시 손봐야 함) -> stacking 문제인 듯 MDN: stacking_context 해당 작업의 경우에는 position fixed가 필요 없이 단순하게 position absoulte로 해결 하였음(왜 abs..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더 수업을 거의다 듣고 CSS 작업은 내가 하고 싶은 대로 하고 있음, 트위터 수업이지만 instagram으로 만들고 있음 CSS 작업 일단, 각 유저의 photoURL 업데이트에 따라 사용자의 모든 작성글에 creator의 displayName과 photoUrl을 같이 업데이트 하는 것은 더 생각해야될 문제 같아서 나중으로 해두고 먼저 전체적인 app css에 더 신경썼다. Auth 페이지 CSS 로그인 페이지를 instagram 처럼 CSS 했다. 확실히 instagram page를 참고해서 CSS를 하니 한결 더 편하게 할수 있었다. (디자인 창조는 힘든 일이다 ;) ) 오랜만에 CSS를 하다 보니 CSS를 처음 할때는 좀 버벅였는데 하다보..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. useEffect error Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup 참고한 사이트 : router 이동시 메모리 lack 에러 (by 기억보다 기록을) 참고한 사이트 : 리액트의 Hooks 완벽 정복하..

Nomadcoder 노마드코더 : 트위터 클론 수업 노마드코더님의 강의를 들으면서 공부한 내용을 정리하는 용도로 작성되었으며, 본내용이 틀릴 수 도 있습니다. Deleting Files Reference : delete() delete ( ) : Promise : 현재 reference 위치의 object를 제거함 (즉, 해당 reference를 제거할려면 reference location을 알아야함) 결국에는 document, collection 과 같이 video img와 같은 파일을 다루게 되어 정보를 저장하는 경우에는 reference location이 항상 필요하게 되고, 우리는 현재 storage에 저장되어 있는 파일의 url을 document에 가지고 있으므로 이를 활용하여 r..