Today I Learn

GraphQL에서 같은 resolver의 같은 Query 에서 데이터를 공유할 수 있다. -A Guide to Common Resolver Patterns- https://www.prisma.io/tutorials/a-guide-to-common-resolver-patterns-ct08

passport-jwt의 사용방법을 익혔다. 처음에 강의를 보고만 해서 동작방법을 제대로 익히지 못했었다. 다시 보면서 코드 하나의 의미가 무엇인지 파악하면서 알아냈다. authenticateJwt가 실행이 되면 passport가 'jwt' 전략 사용한다. passport는 'jwt' 전략에서 jwtOptions로 token에 있는 정보를 추출한다. 추출...

강의를 통해서 nodemailer와 sendgrid를 알게됐다. 사용했던 방법은 로그인 과정에서 사용자에게 주어지는 loginSecret 문자가 있다. 이 문자가 DB에서 생성이 되고, 생성되는 함수에서 사용자 메일로 loginSecret 문자를 보낸다. 두개가 일치하면 JWT를 발급해 주는 방식이다. 이 방법 외에 다른 방식을 통해서 email를 보내는 ...

nodemon를 추가하고 nodemon.json 파일을 생성 후에 파일 안에서 "ext"에 확장자를 추가하면 추가된 파일이 생성되거나 수정되면 다시 서버가 다시 동작한다. .js 확장자, .graphql 확장자를 가진 파일이 생성 되거나 수정될 때 서버가 다시 nodemon이 동작한다. graphql-yoga 모듈에서 사용하는 GraphQLServer에...

GraphQL을 공부했다. GraphQL에서는 Query와 Resolver의 관계가 중요하다. Query에서 원하는 값을 정의하고 Resolver에서 원하는 값을 얻는다. resolver에서 api로 접근할 수 있고, DB에도 접근이 가능하다. overfetching과 underfetching도 알게 됐다. overfetching은 필요한 데이터만 가져와야...

TypeScript를 알게됐다. TypeScript를 기초부터 공부했는데 type을 정해주고, object의 타입들을 정해서 그걸로 매개변수의 타입으로 정한 후 사용한다. interface가 그 기능이다. 왠지 interface의 타입을 중복해서 써야하는 상황이 올거 같다. 그러면 헷갈리지 않을까라는 생각이 든다. 중첩해서 사용하게 된다면 함수형 프로그래밍...

React Native를 했다. React 와 다른 점이 있다. JSX 문법을 사용한다는 건 공통점이지만 Tag의 이름이 다르다. html의 div는 JSX에서는 그래도 div 고, React Native에선 View의 이름을 가진 component를 사용한다. html의 span은 yJSX에선 span이고, React Native에서는 Text compo...

grid align-content, justify-content : flex와 비슷하게 동작한다. place-content : align-content와 justify-content를 동시에 사용할 수 있다. 값을 하나만 적으면 "start"는 default 값과 같다. "end"는 오른쪽 바닥으로 이동한다. "center"는 가운데로 이동한다. alig...

grid-auto 정해진 row와 column을 제외하고 더 많은 태그들이 있을 시 사용한다.(같은 부모를 가진 태그들에서) grid-auto는 default가 row다. 내용이 많을 경우 밑으로 주로 내리지 자주 옆으로 보진 않기 때문이다. grid-auto-column으로 바꾸면 row로 동작하지 않고 옆으로 column 방향으로 많은 태그들에 적용된다...

functional programming 순수함수로 함수를 작성해야한다. 순수함수란 함수의 결과값이 항상 같게 나와야하는 함수다. 매개변수로 사용하는 변수는 함수의 결과와 상관없이 변하지 않게 해야한다. 함수 안에서 매개변수로 들어온 변수를 새로 정의해야한다.

Web server(WEB)와 Web Application Server(WAS)를 알았다. web은 정적 콘텐츠를 제공할 때 주로 사용한다. WAS는 동적 콘텐츠를 제공할 때 사용한다. WAS에서도 정적 콘텐츠를 제공할 수 있다. 하지만 WAS에서 정적 콘텐츠와 동적 콘텐츠를 동시에 제공하면 부하가 걸리기 때문에 web 을 WAS 앞에 두고 클라이언트의 요...

freeCodeCamp에서 OOP를 공부했다. 정리를 해보자면 JavaScript에서는 prototype을 이용해서 대표가 되는 객체를 만든다. 대표 객체를 가지고 닮은 객체를 작성할 수 있다. 닮은 객체를 대표 객체로도 만들 수 있다.

App에서 Player를 떼어내다. 전에 만들었던 Music Player를 다른 개발자에게 보여줬다. 클라이언트 쪽을 보자고 했다. 보여줬더니 App에서 Player 기능이 같이 있어서 정확히 App이 어떤 역할을 하는지 구분이 가지 않는다고 했다. 핵심은 기능이 하나의 기능을 가지고 있어야지 여러개를 가지고 있으면 안된다는거~! 이 기능을 어떻게 정의 하...

9.0 Getting User Media 녹화하는 이벤트를 만들었다. 무슨 방법으로 컴퓨터 카메라에 접근을 해서 녹화를 할 수 있는지 궁금했다. 이벤트 발생시키는건 8 시리즈 강의해서 한 것과 같이 하면 된다. video 태그를 이용한다. 카메라에 접근을 하는 함수가 있다. media device navigator mdn 으로 검색을 한다. 지금 연결된 장...

8.0 ~ 8.6 Video tag event video tag에 play, pause, volume, 확장, 줄이기, 시간 까지 다 있다. 태그에 다 있는데...... 따로 한 이유는 event 처리 방법을 배우는게 목적인거 같다. 처음 구현한 건 비디오를 재생 시키는거다. video tag를 찾아서 클릭을 하면 재생이 되게 하는 방법이다. 이게 butt...

7.1 Edit User Password Profile의 모습을 보기 좋게 바꿨다. Profile에 edit profile과 change password 버튼이 있다. 이 버튼들은 나 말고는 다른 사람이 보면 안된다. 이전 강의에서 userController에서 getMe를 추가 했었다. 추가한 이유는 url에서 db에 저장되어 있는 아이디가 보이는게 싫다...

sass문법으로 css를 적용했다. sass문법은 내가 작성한 html 구조와 비슷하게 작성할 수 있다. 부모 태그안에 자식 태그가 있는 형태를 sass문법을 사용해서 적용할 수 있다. css는 복잡하다. 익숙하지 않아서 그렇다. 익숙해지려면 계속 연습해야 한다. 하겠다.

webpack 강의를 들었다. webpack은 작성했던 코드들을 하나의 파일에 모아준다. 모아 주면서, 여러 브라우저던 사용가능하게 코드를 변환해준다. 변환 설정 할 때 "webpack.config.js"를 생성하고 "webpack.config.js"에서 한다. 자바스크립트 문법을 기존의 코드로 변환하고 내가 지정해 놓은 파일에 저장한다. 생성된 파일을 보...

MongoDB 설치하고, 권한설정 했는데, 권한설정을 어떻게 풀지 모르겠고, stack overflow 찾아서 해결하고...... 결론은 stack overflow가 최고다. Multer를 사용해서 req.file에 있는 path를 이용해서 이미지를 불러오는게 알게됐다. 이걸 이용해서 AWS에서도 쓸 수 있는 것인가? 궁금하다. file을 어떻게 처리하는지...

공부 방식을 바꿨다. 이전에는 강의 듣고 넘어 갔는데 그렇게 하지 않고, 어제 배운거 오늘 아침에 안보고 쳐보고, 모르면 찾아서 보고로 바꿨다. 누적 복습이다. 이게 엄청 느리게 공부하는게 맞을 거다. 정말 느리다. 하지만 확실히 생각하면서 할 수 있어서 좋을 것 같다. 머리에 input만 하고 output은 제대로 하지 않았는데 형의 제안으로 한번 해보기...

pug에 내장되어 있는 mixin을 사용해봤다. 함수와 꽤 비슷한 형태였다. 차이점은 함수는 {} 가 있고, mixin은 바로 아래 pug 문법으로 html을 사용한다는 것이다. 잘 익혀둬서 다시 혼자서 해봐야겠다. 이걸 하면서 생각해둔 프로젝트가 있다. 프로젝트를 준비하면서 다른 웹사이트들은 어떻게 화면을 구성하고 있는지 궁금해서 첫번째로 인기있는 웹...

노마드 코더 wetube 강의를 다시 듣고 있다. 서버는 node를 사용하고, express 프레임 워크를 사용한다. MVC 패턴 중에서 Controller 부분을 임시로 생성했다. 지금은 router 방법을 이용해서 해당 url에 접근했을 때 각각 동작하는 곳을 나누었다. 나누고 보니 필요한 부분만 작업하기에 좋게 보였다. 수정할 부분도 쉽게 찾을 수 있...

Nomad Code - React 2 주 완성 6번째 과제 완료 제출 Header에 PRICES, EXCHANGES, COINS 메뉴가 있다. 각각의 메뉴가 선택 될 때 마다, 해당 메뉴가 표시된다. 6번째 과제를 하면서 COINS 화면에 MARKETS와 EXCAHGES 화면을 같이 출력해야했다. 구현은 했는데 COINS 메뉴의 표시됨이 MARKETS와 E...

오늘은 React Hooks에 대한 과제를 해결 했다. useDeviceOrientation useFavicon useGeolocation useKeyPress useLocalStorage useMousePosition useOnline useLockScroll 오늘 안에 할 수 있을까? 생각하며 하나하나 해나갔다. 간단하게 해결할 수 있을 거 같은거 먼저...

React Hooks를 알게됐다. 보통 React에서 함수형 컴포넌트는 state를 가지지 못한다. React Hooks 를 사용하게 되면 함수형 컴포넌트에서도 state를 관리할 수 있다. React Hooks를 알고 난 후에 지금까지 했던 프로젝트나 React로 했던 다른 것들을 다시 리펙토링을 하면서 Hooks를 익히면 좋을 것 같다는 생각이 들었다....

react에서 props의 타입을 정할 수 있다. Typescript하고 prop-types module이다. Typescript(prop-types보다 더 엄격하게 타입을 정할 수 있고, props 뿐만이 아니라 state, function, 변수, 등등... 에도 타입을 지정할 수 있다.)는 아직 사용을 해보지 않았고 prop-types를 사용했다. n...

오늘 Nomad Coder에서 React 강의를 봤다. 보면서 영화 정보 웹을 clone coding했다. axios를 이용해서 영화 정보를 가지고 있는 api에 get 요청을 보내서 응답으로 영화 리스트를 받았다. 영화 리스트에서 id, genre, title, summary, rating, year 정보를 가져왔다. 처음에 조건없이 정보를 가져왔는데, ...

오늘 webpack과 babel를 이용해서 react 환경을 구축했다. 하면서 느낀건 webpack의 rules 설정과 plugin 설정을 잘해야한다는 거다. 그렇지 않으면 계속 오류난다. docs에 친절하게 잘 나와 있다. docs를 보면서 공부하면 좋을 거 같다. webpack을 왜 하는지 알게 됐다. mode를 변경해서 local server에서 동작...

오늘은 비동기에 대해서 블로그를 썼다. 비동기와 동기에 대한 차이를 적고, 비동기의 동작방식을 적었다. 비동기의 동작방식을 자세히 적고 싶다. 좀 더 공부한 뒤에 적어야겠다.비동기를 공부하면서 서버에 요청을 보내서 처리할 때 비동기가 쓰이는데 순서를 잘 처리해야겠다고 생각됐다. 잘못 처리했다고 에러가 나면 사용자는 당황할 것이고, 내 앱에 대한 신뢰도가 떨...

일모님의 리뷰를 받았다. 개인 프로젝트의 폴더구조가 보기가 좋지 않았고, 가독성이 떨어졌었다. 중복으로 쓴게 많았다. 나도 하면서 느꼈었던 거였고, 정리하는 것도 알고 있었는데 일모님 도움으로 한번 더 알게 되었다. 고쳤다. 좀더 가독성 있게, 효율적으로 나누어서, 어디가 어딘지 알아볼 수 있게 폴더 구조를 분리했다. 고쳤던 부분은 서버쪽 폴더 구조였다. ...

javascript - Hoisting 변수선언이 먼저 이루어져야한다. 함수 레벨 스코프(var), 블록 레벨 스코프(let, const)에 따라 변수선언이 다르게 동작한다. 함수선언식과 함수표현식은 Hoisting이 다르다. javascript - This this는 함수를 호출 했을 때 결정된다. 화살표함수에서의 this는 상...

개인 프로젝트 CSS 완료 화살표 함수 블로그 작성(미완성... 좀 더 보강해야한다. 내용이 좀 부실한 감이 있다.)

개인프로젝트 CSS 적용하기 90% 완료 prototype 블로그 작성

오늘 한 일 개인 프로젝트 signup페이지 css 작업 MDN에서 prototype 공부

오늘 한 일 개인 프로젝트에 scss를 이용해서 css 입힘. 클로저 블로그 작성.

Nomad Coder - wetube clone coding 완료 let과 var, const 블로그 작성