공부 기록일지📚

다형성이란 다른 모양의 코드를 가질 수 있게 해주는 것이다. 타입스크립트에서 다형성을 이룰 수 있는 방법은, 제네릭을 사용하는 것! 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. concrete 타입 (X) placeholder 타입(O) , TS가 placeholder타입을 나중에 concrete 타입으로 바꿔준다. 즉, 같은 코드에 다른 타입을 부여할 수 있게 된다. // 브라우저 API인 로컬스토리지를 클래스와 제네릭으로 구현 // 글로벌 scope에서 interface Storage는 이미 구현된 Web Storage API라는 것을 알 수 있다. // 여기에 값을 추가하게 되면 기존 API에 새 프로퍼티를 추가하게 된다. // 그것을 방지하기 위해 SStorage 로 명명한다. /..

최대 공약수(Greatest Common Divisor) & 최소 공배수(Largest Common Multiple) 최대 공약수(GCD) 정수인 두 수의 공약수 중 가장 큰 수 즉, 두 수를 동시에 나눌 수 있는 수 중에 가장 큰 수 Math.min(a,b)를 활용해 둘 중에 작은 수의 범위를 넘어가지 않게하여 불필요한 연산 제거 최소 공배수(LCM) 정수인 두 수의 공배수 중 가장 작은 수 즉, 두 수를 곱한 값을 최대 공약수로 나눈 수 (a * b / a와b의 최대 공약수) 두 수의 최대 공약수만 알아도 최소 공배수를 구할 수 있다. 최적화 하는 알고리즘: 유클리드 호제법 {관련 내용 정리 요망} 내 풀이 { function solution(n, m) { let gcd = 1; let lcm; //..

프론트엔드로서 백엔드와 처음 협업할 때 가장 무서워했던 게 바로 CORS 에러였다. 뭔진 모르겠지만 우선 빨간색에 API요청이 안되는 게 혼란 그 자체였는데 MERN 프로젝트를 진행하면서 백엔드의 cors 라이브러리를 사용해보게 됐다. CORS는 Cross-Origin Resurece Sharing의 약자로, 자신이 속하지 않은 다른 도메인/ 프로토콜/ 포트에 있는 리소스를 요청하는 cross-origin HTTP 요청방식이다. 중요한 점은 서버는 기본적으로 CORS 방식을 제한해둔다. 왜냐하면 특정 서버 리소스에 다른 임의의 웹 사이트들이 request를 보낼 수 있다면 악의적으로 특정 서버의 세션을 탈취하거나 서버에 무리가 가는 행위를 일으킬 수 있기 때문이다. 그렇다면 서버가 직접 특정 도메인들만 ..

date-fns 는 많은 JS 날짜 관련 라이브러리 중 tree shaking을 지원하고 fucntional pattern으로 동작하는 라이브러리이다. yarn add date-fns 위의 명령어를 통해 내 프로젝트에 date-fns를 설치해준다. date-fns도 moment.js나 day.js처럼 date-fns 모듈 객체를 불러와서 사용이 가능하다. 위의 두 가지 라이브러리와 다르게 tree shaking 지원, functional하게 사용 가능하다는 장점이 있다. 장점을 살려 사용에 필요한 함수를 import하여 사용하는 것이 불필요한 함수에 용량을 사용하지 않을 수 있다. //logger.js const { format } = require("date-fns"); //159.7k // v4를 u..

🐱‍👤Express는 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크이다. 웹 및 모바일 어플리케이션을 지원 API : 자유롭게 활용할 수 있는 수많은 http 유틸리티 메서드 및 미들웨어 제공 성능: 웹 어플리케이션 기능으로 구성된 얇은 계층을 제공하여, Node.js 기능을 모호하게 만들지 않음 Framworks: 많은 유명한 프레임워크들이 Express를 기반으로 하고있다. 🐱‍👤Express와 Node란? Node는 오픈소스, 크로스 플랫폼이며, 개발자가 모든 종류의 서버 사이드 도구들과 어플리케이션을 JS로 만들수 있또록 해주는 런타임환경이다. 런타임은 브라우저 영역 밖에서도 사용할 수 있도록 의도했다.(e.g. 서버 OS 또는 컴퓨터에서 직접적으로 실행되는 어플리케이션) 이와 같이,..

이전에도 최상단의 태그에(body) width값을 100vw로 주고 하위 태그들에는 100%값을 주는데 자꾸 가로 스크롤이 생겨서 해결했던 적이 있다. 오랜만에 다시 만들어보니 똑같은 이슈를 겪었고 이에 대한 해결 방법에 대해서 간단히 기록해놓고자 한다. 가로 세로 스크롤이 생기는 이유는 해당 요소의 크기가 부모 요소나 뷰포트(viewport)를 벗어나기 때문이다. 1. 전역 CSS 설정 시, 요소들의 box-sizing이 border-box인지 확인한다. 2. overflow: hidden을 설정한다. (가장 간단한 방법이지만 컨텐츠가 잘릴 수 있다.) => 가로 스크롤이니까 특정적으로는 overflow-x: hidden 3. 최상위 태그에 width 가 아니라 max-width나 max-height ..

반응형 모바일 뷰 기준은 아이폰 5로 하자 크롬에서 F12 혹은 ctrl + shift + i 단축키를 누르면 개발자 도구를 열 수 있는데, 우리가 흔히 말하는 반응형 웹뷰를 확인해볼 수 있다. 여러 디바이스크기를 제공하는데 이 중에서 폰 사이즈를 확인할 때, 아이폰5를 기준으로 모바일 뷰를 확인해보는 게 좋은데 그 이유는 모바일 뷰 중에 가장 작은 디바이스 사이즈이기 때문이다. 디바이스가 목록에 없다면 추가해주면 된다. 참고로 아이폰 5의 가로 사이즈는 320px인데 갤럭시 폴드의 경우 260px까지 간다니..확인요망 => min-width가 320px로 잡혀야 한다. 브라우저에서 제공하는 default css를 없애주고 기본 세팅하기 margin이나 padding 혹은 기본 스타일링이 브라우저마다 제..

바로 직전에 MUI라는 CSS 프레임워크를 갖다 쓰는 것에 대해 비판적인 의견을 나타내는 글을 썼었는데.. 사실 MUI는 개발자들이 좋아하는 CSS 프레임워크이고 많은 사람들이 여러 가지 이유로 잘 사용하는 CSS 프레임워크이다. 많은 기능을 제공하고(built in API) 잘만 쓰면 아주 편리하기 때문인데 ..처음 MUI를 갖다 쓰면서 간단한 조각을 빌려 쓴 것이 아니라 바로 커스텀을 해야하던 상황이라 그런지 첫인상이 매우 좋지 않았다. CSS도 익숙하지 않은 사람이 만들어진 컴포넌트를 갖다 쓴다는 게 생각처럼 쉽지 않았을 것이고 결국 많은 시간을 소요하는 결과를 낳았다. 현업에서 MUI를 좋아하는 개발자들이 많다는 글을 봐서 그런지 다시 한 번 제대로 사용해보고자 한다. MUI로 구성된 프로젝트를 ..