본문 바로가기

모카 스터디

Redux [생활코딩] 자바 스크립트 어플을 위한 예측 가능하게 하는 도구 ! 단 하나의 state(객체)를 가진다 ! 데이터를 수정할 때 함부로 못하고 특정한 함수를 통해서 데이터를 수정할 수 있다. 원본을 바로 수정하는게 아닌 복제복을 수정한뒤 그것을 원본으로 바꾸는 과정을 통해 undo와 redo가 쉽고 효율적이다. 현재의 상태와 과저의 상태까지 확인을 할 수 있어 디버깅을 쉽게 할 수 있다. Redux의 여행 지도 state라는 실제 정보에는 직접 수정할 수 없고 recduer(직접 코드작성)를 사용해야한다. render는 UI를 만들어주는 내가 짠 코드이다. dispactch, subscribe, getSate와 같은 은행에서의 직원과 같은 걸 거쳐야 reducer를 사용해 state를 수정할 수 있다. render.. 더보기
JavaScript [생활코딩] HTML과 Javascript의 만남 HTML은 정적이지만 동적인 웹페이지를 원해 JavaScript가 등장하게 되었다. body를 선택하여 스타일 속성으로 배경색을 white로 한다. html의 style속성에는 css 문법이 와야한다. html의 코드로 이제부터 javascipt가 시작됩니다~ html의 onclick이라는 속성에는 JS 문법이 와야한다. 웹브라우저 상에서 일어나는 사건, 행동은 이벤트 라고 한다. 태그를 선택한 후 스타일을 입힌다. 데이터 타입, 변수, 웹브라우저 변수를 문자열 내에 삽이할 경우 " + +" 사이에 넣으면 된다. 프로그램, 프로그래밍, 프로그래머 순서 순서를 만든다. 순서를 만드는 사람 순서를 반복되고 특정한 상황에서만 그 순서를 실행하게 하는것!! 조건문 객체 서로.. 더보기
Git 초기 세팅 맥북을 구매한 지 어언 4일경 immserion프로젝트 진행 중 댓글 좋아요 기능을 구현을 끝내고 push를 마친후 git log를 확인하니 나의 깃 이름이 정자로 '최영철' 로 되있는걸 발견 했다. 그간 log를 확인하며 나의 깃허브 아이디가 softmoca여서. git log에 softmoca로 이름이 나오는 줄 알았는데 알고보니 깃 초기 세팅시의 이름이었다. 그래서 깃 초기 이름과 이메일을 추가 하였다. config list가 아주 깔끔한 상태이다. 이전 엘리어스로 등록해준 git log 말곤 아무것도 없다 허허 앞으론 설정을 하기 앞서 그것이 무엇인지 인지하고 설정과 설치를 할 계획이다. alias.hist=log --graph --all --pretty=format:'%C(yellow)[%ad].. 더보기
CSS [생활코딩] CSS 등장 이전과 이후 2만개의 태그의 폰트를 바꿔야 한다고 생각하면 HTML만으로 웹개발 하기에는 끔찍하다. style이라는 태그는 html의 문법으로 해석이 되지만 태그 내의 문장은 css의 문법에 맞게 처리. 즉, CSS를 통해서 중복을 해결할 수 있다. CSS문법 class를 사용 id를 사용 id값이 class보다 더 우선 순위가 높은 소유권을 가진다. 박스 모델 h1태그는 한줄을 다 사용하지만 a태그는 한줄을 통으로 사용하지 않는다. 한줄을 다 사용하는 것을 block level element 한줄을 다 사용하지 않는것을 inline element ==>display라는 속성을 사용해서 inline과 block성질을 변경 할 수 있다. none을 주면 사라진다. span은 inline. di.. 더보기
HTTP [생활코딩] HTTP는 크게 Reques와 Response를 위한 메세지로 구분 되어 있다. HTTP Request HTTP Response 더보기
slack_nest_study_zerocho Slack 클론 코딩 [백엔드 with NestJS + TypeORM] 에러질문법 Express와의 비교 mysql2는 node와 mysql을 연결시켜주는 드라이버이지 그 자체가 데이터베이스가인다. nest는 알아서 해주는 마법이 많다. NestJS 세팅하기 express보다 fastiy가 더 빠르지만 nest와 express를 사용하면 그 속도가 약간 극복되니 큰 문제가 없다. 핫 리로딩 설정 nodemon 과 같은 기능을 하는 핫리로딩, 파일의 이름수정 또는 생성 삭제시에는 다시 켜는것을 추 Controller 기본 서비스를 분리하는 이유, 컨트롤러 장점 서비스는 요청과 응답에 대해서 모르게 구성하는게 좋다. 테스트가 편해진다. nest에서는 인터셉터만 만들면 저런 응답 함수나 로직을 따로 구성하지 .. 더보기
GraphQL로 영화 API 만들기 #1 [2022 UPDATE] INTRODUCTION #1.0 Welcome (01:20) 이번 수업에서는, GraphQL이 뭔지 배워볼거야. GraphQL이 왜 이렇게 멋진지 알아볼거고, GraphQL이 어떻게 동작하는지 알아볼거야. 그리고 우리는 GraphQL api를 어떻게 직접 만들 수 있는지 알아볼거야. 그리고 우리는 GraphQL의 어떤점이 특별한지를 이해해볼거야. 예를 들면, 깃헙 같은 기업들은 그들의 api를 만드는데 rest보다 GraphQL을 왜 선택했는지. 이 수업이 끝날 때 쯤엔, 우리는 GraphQL위에 구축된 혁신을 보게 될 거야. 우리는 예를들면 PostGraphile 같은 것들을 보게 될거야. 이건 아주아주 멋진 아이야. 얘는 GraphQL api를 얻을 수 있어. postg.. 더보기
GraphQL로 영화 웹 앱 만들기+React #1 [2022 UPDATE] INTRODUCTION #0.0 Welcome 안녕 모두들, 노마드의 graphql react 시작하기 수업에 온걸 환영해! 우리는 reactjs, graphql에서 어떻게 apollo client를 사용하는지 배울거야. apollo client는, 상태관리 라이브러리야. graphql api에서 데이터를 fetch해오는 것을 가능하게 해주고, 어플리케이션에서 로컬로 상태를 관리할 수 있게도 해주지. 같은 라이브러리로 우리는 두 가지 일을 할 수 있어. 서버에 있는 데이터를 가지고 오는 것과, 로컬에 있는 데이터를 관리하는 것. apollo client로 할 수 있는 가장 좋은 점은, 이 두 종류의 데이터를 동기화할 수 있어. 너가 로컬에 있는 상태를 관리하는데에 라이브러리.. 더보기

티스토리툴바