DogGae

www.youtube.com/watch?v=1d38YZKCM88&list=PLuHgQVnccGMDF6rHsY9qMuJMd295Yk4sa 이 글은 생활코딩님의 '관계형 데이터 모델링' 유튜브 재생목록 영상들을 바탕으로 작성되었습니다. 모델링이란 어떤 목적을 가지고 진짜를 모방하는 것 두개의 세계는 서로 다르기 때문에, 끊임없이 얼마나 큰 차이가 날지를 확인해야 한다. 데이터를 표에 담기만 하면, 이용할 수 있다. 그러나 하나의 표에 그 데이터를 담는 것은 비효율적일 뿐만 아니라, 엄청나게 어렵다. 그렇기 때문에 모델이 필요하다. 모델링의 과정 업무파악 -> 개념적 데이터 모델링(ERD 그림) -> 논리적 데이터 모델링(ERD 표) -> 물리적 데이터 모델링(코드 작성) 업무를 제대로 이해하고, 설명할 수 ..

REST API 란? REST : Representational State Transfer API : Application Programming Interface REST API Routung 클라이언트와 서버는 어떻게 REST API를 이용해서 통신할까? 전통적인 방법으로는 링크 태그를 이용하거나, 폼 태그를 이용하였다. HTTP 메서드와 경로를 같이 보냈다. Ajax나 fetch API를 써서 비동기로 이러한 요청을 보냈다. 이를 API Endpoint라고 한다. API Endpoint란 Http 메서드(Post, Get…)와 상대경로의 조합을 말한다. 여기서 Http 메서드들 중 GET과 POST 만이 HTML 태그를 이용해서 사용할 수 있고, 나머지는 브라우저 상의 자바스크립트를 통해서만 사용될 ..

기존의 function () {} 과는 달리, 화살표 이름에는 함수 이름, this, arguments 가 없습니다. 함수 이름이 없다는 것은 화살표 함수는 익명 함수로만 동작한다는 뜻일 뿐입니다. 기존의 함수에서는 this라는 변수 이름으로 함수 스코프 안에서 자기 자신에 접근할 수 있는 방법이 제공되었습니다. 하지만 화살표 함수에서는 이게 없기 때문에, 스코프의 원칙 상, 상위 스코프에서 this 라는 변수명을 찾아보게 되고, 그러면 결국 상위 함수의 this나 전역 객체인 window 를 화살표 함수 안에서 불러오게 되는 것입니다. bind를 써도, apply, call을 써도 this를 주입할 수가 없습니다. 따라서 화살표 함수로는 new 키워드를 쓸 수 없습니다. 또한 기존의 function 에..

대부분의 경우, this 의 값은 함수를 호출하는 방법에 의해 결정된다. 자바스크립트에서는 선언할 때 결정되는 것이 있고, 호출할 때 결정되는 것이 있는데, 선언할 때 결정되는 것은 '클로저'이고, 호출할 때 결정되는 것이 이 'this'이다. 이렇게 this가 맥락에 따라 달라질 수 있으므로, 호출되는 방법과 무관하게 this의 값을 정해버릴 수가 있는 것이 bind 메서드이다. (예제 코드) 결국 '어디서' 해당 this를 호출하는 함수를 실행했느냐가 중요해진다. whoAmI 메서드는 someone에서 실행하였고, myWhoAmI 는 전역에서 실행하였다. 그리고, 자바스크립트에서, 전역은 결국 window 객체 안이기에, 여기서 실행되는 함수들은 window 객체의 속성으로서, 간주된다. 따라서 so..

호출되는 변수나 함수명을 찾을 때, 들여다보는 영역이 바로 스코프이다. 자바스크립트는 함수 단위로 스코프가 생겨난다고 보면 된다. (물론 스코프만 따로 생성 할 수 있지만 그럴 이유는 없다) 즉, 함수가 2개 있으면 스코프도 2개 생기는 것이다. 스코프는 간단하게 변수 혹은 상수 명과 담긴 것이 짝지어진 표가 있다고 생각하면 된다. 함수는 호출되었을 때 가장 먼저 자신의 스코프 안에서 활용할 변수 혹은 상수들을 찾는다. 그리고 그 중 스코프 안에 없는 변수 혹은 상수가 있다면 상위 스코프에서 한번 더 찾고, 이를 찾을 때까지 상위로 옮겨가며 반복한다. 스코프끼리 상위, 하위 관계로 연결되어 있는 것이 스코프 체인이다. 스코프에서는 원칙이 있는데, 하위 스코프에서는 상위 스코프의 변수 혹은 상수에 접근할 ..

www.youtube.com/watch?v=5fLW5Q5ODiE 이 글은 위의 영상을 기반으로 작성되었습니다. Lighthouse(audits) 사용하기 되도록이면 시크릿 모드에서 성능 측정을 수행하십시오. 그렇지 않으면 확장 프로그램의 간섭을 받을 수도 있습니다. 페이지 로딩을 개선하기 위한 작업에 착수할 때, 항상 'audit(심사)' 부터 시작하십시오. 지금은 lighthouse 로 이름이 바뀌었습니다. 스로틀링(throttling) : 영어 단어에서 유래한 말로, 원어는 목을 조르는 행위를 말한다. 즉, 인간의 목을 조르는 것도 스로틀링이다. 이 점에서 유래하여 무언가의 출력을 조절하는 뜻도 가지고 있는데, 기계장치에 연결된 액체나 기체가 흐르는 관에 달린 밸브를 조절하는 광경을 생각해보면 적절한..

NPM 에 본인 패키지 등록 패키지는 다른 패키지에 대한 부품으로 사용되거나, 아예 그 패키지 자체가 완제품인 경우가 있습니다. 어떤 타입의 패키지이든, 다른 사람들에게 편리하게 해당 패키지를 사용할 수 있게 하려면 npm registry 에 등록해야 합니다. main 을 지정하면 해당 파일의 내용이 npm 패키지로 담길 것입니다. 이제 npm 패키지를 발행하려면 npm publish —access public (private은 유료)를 입력합니다. 한번 public 으로 지정 후엔 npm publish 만 하면 됩니다. 패키지를 업데이트한 후 다시 발행하려면 버전을 어느 정도이던간에 높여야 합니다. 기타 : NPM 을 활용한 명령행 프로그램 만들기 js 파일 내에서 process.argv 를 이용해서 ..

여러 파일들을 한데 모아놓은, 빌드의 타겟이 되는 경로의 파일을 '엔트리' 파일이라고 한다. 엔트리 파일을 통해 만들어낸 번들링 결과물이 저장되는 경로의 파일을 '아웃풋'이라고 한다. webpack.config.js 에 웹팩 번들링에 필요한 명령어의 설정들을 담을 수 있다. 여기 담으면 npx webpack 명령어 만으로 번들링을 진행할 수 있다. Webpack 모드 개발자 모드 배포 모드 아무것도 설정하지 않은 모드(기본값) 당연하지만, 웹팩의 설정들은 너무 많아서, 개발자가 일일히 모두를 설정하기에는 어려움이 많습니다. 그래서 웹팩은 '설정 모음'의 차원에서 모드를 지원합니다. 모드를 설정해주면 자동으로 그 모드에 해당되는 설정들이 적용되어 번들링이 처리됩니다. 설정 파일 자체를 webpack.con..

웹 컴포넌트를 제작하는데 사용하는 프레임워크이다. 스텐실을 사용하면 타입스크립트와 자바스크립트를 쓸 수 있으며 자동적인 폴리필 추가가 가능하다. 컴포넌트를 lazy 하게 로드할 수 있기 때문에 번들 사이즈를 줄여준다. DOM 의 리렌더링 효율을 극대화한다.

리덕스에서 상태의 변경은 모두 동기적으로 일어납니다. 따라서 미들웨어를 통해 스토어 상태 변경 프로세스 중간에 비동기 로직을 끼워 넣어야만 API 요청에 따른 상태변경을 수행할 수 있습니다. 그러한 미들웨어가 redux-thunk 나 redux-saga 같은 리덕스 생태계 패키지입니다. 리덕스 사가가 제공하는 createSagaMiddleware() 함수를 실행시켜 반환된 객체를 미들웨어로 등록시키고, run 메서드를 실행하면 리덕스에 사가를 적용할 수 있습니다. 리덕스 사가로 할 수 있는 일 리덕스 사가는 단순히 비동기 처리를 위해 만들어진 패키지가 아닙니다. 그건 그냥 미들웨어로도 충분히 가능합니다. 리덕스 사가는 사이드 이펙트를 더 쉽게 관리하고 더 효과적으로 실행하며 더 쉽게 테스트하고 더 나은 ..