Today I Learn & To Do List (Daily Update)

TIR (Today I Learn)

19.12.30

• 함수형 프로그래밍 강의 하나를 시작했다
• https://github.com/ksy8230/javascript-functional/commits/master
• map, filter, each, curry, reduce 함수를 재사용성이 높은 순수 함수로 다시 짜는 식

TIR (Today I Learn)

19.12.31

• 횟집 사이트 CRA 사용하지 않고 웹팩부터 다시 빌드해봤다.
• BrowserRouter와 HashRouter의 차이(검색엔진, 새로고침시 유지), Route로 가상 경로 설정하고 Link 태그로 이동 할 수 있다는 걸 알았다.
• 라우터가 아닌 컴포넌트에서 라우터에서 사용하는 객체(loacation, match, history)를 사용하려면 withRouter로 한 번 감싸줘야 한다. 나의 경우 loacation 값을 가져와 현재 메뉴에 활성 css를 추가하는 작업 때 사용했다.
• css 전처리기인 scss를 연결하고 해당 파일을 build시 css로 변환해 연결해봤다.
• react-id-swiper 라는 슬라이드 라이브러리를 이용해봤다. 해당 인덱스 값에 따른 텍스트를 보여주는 구현에서 많이 헤맸는데 검색만 좀 더 정확하게 했어도 시간을 아꼈을 것 같다.

TIR (Today I Learn)

19.01.01
@ 함수형 프로그래밍 강의 듣기

• map+filter+reduce 중첩사용, go, pipe, curry로 조합하여 함수 만들기

TIR (Today I Learn)

19.01.02
@ 함수형 프로그래밍 강의 듣기

• map+filter+reduce 복습, go, pipe, curry 복습, 장바구니 예제 만들기
• 직접 짜보면서 체득할 필요가 있겠다

TIR (Today I Learn)

19.01.03
@ 함수형 프로그래밍 강의 듣기

• 제너레이터형 함수와 일반 함수 속도 차이 (map, filter, take를 사용한 예제들)
• 제너레이터형 함수는 일반 map 함수처럼 한번에 배열을 불러오는 것이 아닌, 각각의 개별 value 값을 호출할 수 있다는 차이가 있고 이 차이로 인해 filter와 같은 조건이 들어간 함수의 경우 전체 배열을 돌 필요 없이 yield를 통해 값을 순회하면서 next를 통해 하나씩 전달한다. (= 이터러블배열 전체를 순환할 필요x)

TIR (Today I Learn)

19.01.04
@ 횟집 사이트

• 리액트 훅으로 팝업 연결 & 메뉴별 팝업 분기 & 사이트 내부 내용 채우기 & 카카오 지도 연결

TIR (Today I Learn)

19.01.05
@ 횟집 사이트

• aws s3 정적 호스팅 사용해보기 (http://drleesf.co.kr.s3-website.ap-northeast-2.amazonaws.com)
• 로딩창 만들기 : container(논리담당)-presenter(ui담당) 디자인패턴을 사용해 HomePresenter 컴포넌트의 렌더링 시점을 container에서 넘겨준 loading의 true, false 값에 따라 읽히도록 구현했다.
• 추후에 사용할 api 컨텐츠 불러오기 작업을 위해 async 함수도 작성해봤는데 async 비동기 함수를 사용하기 위해선 babel-pollyfill을 설치 후 웹팩에 추가해야 하는 걸 알았다. (인스타그램 api 서비스가 올해 중지된다는 공지를 확인해 다른 api를 선택해야될 것 같다...)

https://github.com/ksy8230/drleesf/commit/24ab4e0c0e5f674e9be717e8d8d212c70926875e

TIR (Today I Learn)

19.01.06
@ 함수형 프로그래밍 강의

• map, filter를 제너레이터 성질 추가하여 사용해보기
• flatten : 배열을 전부 펼쳐주는 함수
• callback, promise
• 값으로의 promise (프라미스 인자로 들어오는 경우 처리하기)

TIR (Today I Learn)

19.01.07
@ 자바스크립트 es6 초급 강의

• {} 블락 스코프 : if문 for문 switch문 등 문 자체가 하나의 블락 스코프이고, 결과를 리턴하지 않는다. 실행하고 끝.
• TDZ (temporal dead zone 임시 사각지대):
• this :

TIR (Today I Learn)

19.01.08
@ 횟집 사이트

• 반응형에 맞게 화면이 모바일 사이즈 되었을 때 열리는 메뉴 분기 및 css 작성
• 사족 : 기존에 html로 만들어두었던 사이트를 리액트화시키는 것이 주 목적이라 초기에 작성한 css를 그대로 붙이다보니(정리가 안 된 css...) 공통으로 적용되는 부분, 개별로 적용되는 부분에 대한 분리가 상당히 어려웠다.
  ! css를 작성하기 전에 전체 페이지에서 통일되는 부분을 우선 정리하는 것은 이후에 유지보수하는 나에게 상당히 도움이 되는 일이구나

TIR (Today I Learn)

19.01.09
@ 자바스크립트 es6 초급 강의

• 간결한 메서드 : 축약형은 생성자 함수를 만들 수 없고, 오로지 함수 본연의 기능만 가능하다.
  https://github.com/ksy8230/javascript-es6/commit/aa6822ea3d2fb6efb049436ae30c60c5398a3e1c
• 계산된 프로퍼티명 : 객체를 선언하는 순간에도 대괄호 표기법이 가능해졌다.
  https://github.com/ksy8230/javascript-es6/commit/4da0875edad0a307bdf7daf2a3101dd0883448cd
• 고정된 프로퍼티열거순서 : 숫자가 먼저 오고, 작은수에서 큰수의 순서로 찍한다
  https://github.com/ksy8230/javascript-es6/commit/a16dd460c203138711c5d228d48741f6513ef0c9

TIR (Today I Learn)

19.01.10
@ 횟집 사이트

• 홈 화면에 스크롤에 따른 효과를 추가했다.
• 메인 화면에서 새로고침시 offsetTop값이 처음 렌더링될 때의 offsetTop값과 다르게 나왔는데 그 이유를 찾지 못했다. (질문글 : https://okky.kr/article/668863)
• 전페이지 scrollTo(0,0) 추가.
• 그 외 자잘하게 틀어지는 css 수정 작업.

@ 리덕스 vs 몹엑스 강의

• 리듀서, 이니셜스테이트, 액션, 디스패치의 간략한 구조를 복습하는 시간이었다.

TIR (Today I Learn)

19.01.11

@ 리덕스 vs 몹엑스 강의 듣기

TIR (Today I Learn)

19.01.12

@ 리덕스 vs 몹엑스 강의 듣기

• 몹엑스 (observable, autorun, reaction, runInAction 함수 이용 방법)

TIR (Today I Learn)

19.01.13

@ 리덕스 vs 몹엑스 강의 듣기
@ 냉장고 프로젝트 파일 세팅 및 레이아웃 잡기

• next로 라우트 잡기 (_app.js)
• GlobalStyles.js 로 css 초기화
• eslintrc 사용하기 (근데 연결 안 된 것 같다. 빨간줄 하나도 안 보이는데... 확인하기)
• 가입하기 페이지 input 핸들러를 커스텀훅으로 공통된 부분 묶어보기
• prop-types를 쓰는 습관을 들이면 내가 사용하는 태그들의 값이 올바르게 들어가는지 안정적으로 체크하며 코딩할 수 있다

TIR (Today I Learn)

19.01.14
@ 자바스크립트 es6 초급 강의

• 화살표 함수에서의 this

@ 티스토리 게시글 부분 폰트와 사이트 통일시키기

@ 냉장고 프로젝트

• scss 연결
• 더미데이터로 화면 그려보기
• 메뉴 누르면 나오는 gnb ui 구현
• 리듀서 작성, composeWithDevTools 연결
• 리액트 리덕스 훅스 : useDispatch, useSelector 사용하여 프론트단에서 state 변경 테스트
• 리액트 state 와 리덕스 state를 혼용하는 이유 : 폼에서 값을 전달하는 부분의 경우 e.target.value를 setState로 바꾸는 동작은 리액트 state로 하는 것이 편하고 그 값들을 전부 모아서 한번에 전달하는 액션을 리덕스 state로 하는 것이 효율적이기 때문이다.

TIR (Today I Learn)

19.01.15

@ 냉장고 프로젝트

• 리덕스 사가 사용 이유 : 비동기적인 부분의 재사용성을 위해 사용된다. ex) login 기능의 서버 요청 -> 성공(실패) -> 로그인 실행
• 더미 데이터를 이용해 로그인, 회원가입, 게시글 작성 사이클 작성 :
  -> 1. 로그인, 회원가입, 게시글 작성 버튼을 누르면 해당 _request 액션을 디스패치한다.
  -> 2. 리덕스 사가에서 _request 액션을 받고 비동기로 _success 액션을 실행(put)한다.
  -> 3. 리덕스 리듀서에서 _success 액션에 해당하는 작업을 진행한다.
  -> 4. state 변경 완료
• 상세페이지 화면단 그리기 : 넥스트 라우터를 통해 쿼리로 id 값을 상세페이지로 전달 받고 상세페이지에서 useSelector를 이용해 리덕스에 있는 데이터를 불러온 후 데이터 id 값들 중 상세페이지의 id와 일치하는 아이템을 찾는 방식으로 구현.

TIR (Today I Learn)

19.01.16

@ 냉장고 프로젝트

• 더미 데이터를 이용해 개별 상세페이지에서 댓글 추가
• 백엔드 서버 구동에 필요한 모듈 설치
• 데이터베이스 테이블 작성
• 백엔드 api 서버를 이용한 실제 회원가입

TIR (Today I Learn)

19.01.17

@ 냉장고 프로젝트

• 백엔드 api 서버를 이용한 실제 로그인
• crendentials 설정값을 넣어줘서 로그인한 정보를 쿠키에 담기 (프론트/백엔드 각각 설정해야함)
• 사용자 정보 가져오기 (새로고침해도 정보 유지) & 로그아웃
• 백엔드 api 서버를 이용한 실제 게시글 작성

TIR (Today I Learn)

19.01.18

• Meister Task 일정관리 툴 사용해보기

@ 냉장고 프로젝트

• 메인, 메인 메뉴창 css 입히기
• 음식 분류 카테고리 db에 추가
• next에 public 폴더 생성(public/images/...) : public이 루트 폴더가 됨으로 src="/images/..." 로 기재하면 next 내부에서 이미지 경로를 사용할 수 있다.
  https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md

TIR (Today I Learn)

19.01.19

@ 냉장고 프로젝트

• 전체 음식 배열의 음식카테고리 태그들에서 중복되는 태그 삭제

tagsArray.filter((v,i) => {
 if ( tagsArray.indexOf(v) == i ){
  return v
  }
})

=> 필터 함수로 값 하나씩 배회하면서 indexOf로 부여한 최초의 인덱스와 i 값이 일치하는 값만 리턴하는 식.

Array.from(new Set(tagsArray))

=> Set 은 ES6 에서 등장한 새로운 data object로 Set은 unique 값만 저장할 수 있도록 하기 때문에 array에 넣게 되면, 중복되는 값이 사라짐.

• next에 express 연결하기
• getInitialProps : 리액트 라이프 사이클이고 넥스트가 추가를 함. componentDidMount 보다도 먼저 실행이 돼서 가장 최초에 실행을 한다. (서버사이드렌더링을 할 때 중요!) 서버 쪽의 데이터를 먼저 가져와서 렌더링 할 수 있게 해준다.

TIR (Today I Learn)

19.01.20

@ 냉장고 프로젝트

• getInitialProps로 상세페이지, 태그관련포스트페이지 동적 라우터 생성
• 미들웨어로 중복 줄이기
• multer로 이미지 업로드하기

TIR (Today I Learn)

19.01.21 ~ 22

@ 냉장고 프로젝트

• FormData로 게시글 올리기
• 상세페이지 db 불러오는 부분에서 계속 에러가 나서 삽질아닌 삽질을 했다. 해결을 하긴 했는데(작동함을 기준) 어떤 것이 문제였는지 정확하진 않다. 메인 포스트들은 배열 안에 담겨서 렌더링되는데 상세페이지로 db를 가져올때 배열이 빠진 것이 문제였고, 리덕스 사가에서 배열을 추가 후 상세페이지에서 map함수를 사용해 db들을 가져오니 해결이 됐다.
  [db] -> {db} -> [db] 이런식으로 홈->상세->홈 페이지를 이동하니 불변성을 지키지 못해 생긴 에러였을까?
• react-slick 상세페이지 이미지들에게 적용
• 상세페이지 댓글 글쓴이 추가
• 닉네임 수정 : 시퀄라이즈 부분 수정하는 메서드 patch

TIR (Today I Learn)

19.01.23

@ 냉장고 프로젝트

• 태그 기준으로 포스트 정렬시 내림차순(최신순)은 백엔드 라우터에서 order : [['createdAt', 'DESC']], 기재 필요
• 서버사이드렌더링으로 페이지, 컴포넌트 불러오기 & 쿠키 직접 넣기 & 내 정보가 null 일 때 처리하는 법
• 포스트 삭제 & 확인 팝업
• 댓글 시퀄라이즈 테이블의 PostId 싱크 맞추기 (데이터값이 올바르게 안 들어가고 있었음)

TIR (Today I Learn)

19.01.24

@ 냉장고 프로젝트

• 댓글 삭제 : router.delete('/:id/comment/:CommentId' 와 같이 해당 포스트 id, 삭제할 댓글id를 쿼리스트링으로 받아서 해결

20.01.24 ~ 20.01.27 제주도 여행

TIR (Today I Learn)

20.01.28

@ 냉장고 프로젝트

• 개별 포스트 정보 수정 (명칭 수정) 완료
• immer를 사용하여 리듀서 가독성 높여보기

TIR (Today I Learn)

19.01.29

@ 냉장고 프로젝트

• immer로 리듀서 수정 후 생긴 댓글 삭제 오류 해결
• 개별 포스트(음식 상세 페이지)는 singlePost 라는 state를 만들어서 해당 데이터만 불러오기
  ++ 꽤 오래 애먹은 에러 : cannot read property
  https://www.inflearn.com/questions/22971
  singlePost의 불변성을 지켜주기 위해 post 리듀서에 singlePost 초기값을 설정하니 해결되었다

    singlePost : {
        id : null,
        content : null,
        categoryNumber : null,
        date : null,
        categoryFood : null,
        UserId : null,
        User : {
            id : null,
            nickname : null,
        },
        Comments : [],
        Images : [],
    },

• 태그 홈 화면과 상세페이지 화면 분기작업 _document.js 파일에서 react-helmet을 이용해 진행
• 태그 안에 넥스트에서 추출한 css ( )삽입 후 css 모듈화 작업 진행 ++ scss 를 사용하려면 정말 이 방법 밖에 없는 걸까? css 모듈 참고한 링크 : https://react.vlpt.us/styling/02-css-module.html

TIR (Today I Learn)

20.01.30

@ 냉장고 프로젝트

• 검색 기능 구현하기
  검색 기능 키워드 : indexOf()는 값을 찾고 그 결과로 숫자를 반환하는데 없는 경우 -1을 반환.
  리덕스&리덕스사가를 사용할 때 / 사용하지 않고 내부에서 getInitialProps로 query를 받고 페이지를 보여줄 때의 차이점 (tag page vs search page)
• 회원가입 후 자동 로그인 추가 수정
• 콘솔에 뜨는 에러들 처리
  1) RgProject.propTypes의 pageProps이 항상 isRequired이지만 getInitialProps가 없는 페이지도 있으니 pageProps 에 빈값도 넣어주기

if (Component.getInitialProps) {
        pageProps = await context.Component.getInitialProps(ctx) || {}; 
    }

2) <invalid prop 'post.createdAt' of type 'string supplied to PostCard> 에러는 propTypes에 기재한 createdAt의 올바른 type이 string 이라는 의미
3) <Warning: Each child in a list should have a unique "key" prop> 에러는 foreach문이나 map함수로 생성한 리스트 태그들은 각각이 고유한 값을 가져야 한다는 의미로 id 값을 key 값으로 부여한다

• 댓글 추가시 시간차 효과 넣기
• 페이지 전환시 로딩 효과 넣기

TIR (Today I Learn)

20.01.31
@ 냉장고 프로젝트

• styles component 분리하여 사용하는 법
  : imagesZoom 컴포넌트가 있을 때 imagesZoom 폴더를 만든 후 해당 컴포넌트 파일은 index.js로 만들고 관련한 styles component들은 imagesZoomStyle.js와 같은 파일로 만든 후 export 시켜서 index 파일에 연결
  /imagesZoom
  index.js
  imagesZoomStyle.js
  나의 경우 css를 js 파일에 넣으면 기재하는 것도 불편하고 분리가 안 된 느낌이 들어 아예 scss 파일을 모아둔 폴더로 구성하는 게 좋다
• components 들 사이에서도 화면만 그려주는 파일과 dispatch가 포함된 파일로 나누는 게 좋다 (smart component / dump component)
• favicon 추가
  : _app.js 안에 추가

rel : 'shortcut icon', href: '/images/favicon.ico',

• prefetch 추가
  : prefetch 를 링크에 추가하면 사용자가 자주 다니는 페이지를 미리 불러오기 때문에 해당 페이지로 접근시 빠르게 로드를 할 수 있다 (이미 불러왔기 때문에)

<button onClick={onMenuClick}><Link href="/profile" prefetch><a>정보수정</a></Link></button>

• next-bundle-analyzer 패키지로 용량 체크해보기
  https://velog.io/@mollang/2020.01.31-next.configwebpack-%EC%84%A4%EC%A0%95%EA%B3%BC-next-bundle-analyzer-omk61oi0or#next-bundle-analyzer
• 날짜 라이브러리 moment사용하여 댓글 작성 시간부터 00분 전 표기하기

TIR (Today I Learn)

20.02.01
@ 냉장고 프로젝트

• 최적화 작업을 할 때 어떤 값 때문에 리렌더링 되고 있는지 확인하는 유용한 방법 : useRef를 이용해서 값을 저장하되 리렌더링은 시키고 싶지 않을 때 사용

const postMemory = useRef(post);
console.log('log', post)
useEffect(() => {
  console.log('useEffect', post, postMemory.current, post===postMemory.current)
}, [post])

useRef로 기억한 postMemory 즉, 처음 포스트랑 달라진 post 값을 비교를 해볼수 있다.

• 최적화 작업 시 고려해야 할 것
  (1) 컴포넌트를 분리
  (2) memo 함수를 추가
  (3) useSelector 에 객체가 있는지 확인 (수많은 데이터를 품고 있는 객체 me 같은 것)

TIR (Today I Learn)

20.02.02
@ 냉장고 프로젝트

• ec2 생성
• front/back 아마존 서버 연결
• 각 서버 구동하기 (+ pm2 사용하여 백그라운드 서버 실행하여 서버가 죽지 않도록 유지)
  https://velog.io/@mollang/20.02.01-ec2-%EC%83%9D%EC%84%B1-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B8%B0-dnk63jml4k
• aws에서 도메인 연결하기 (dothome에서 도메인을 사서 aws Route53 호스팅 영역에서 얻은 네임서버를 기재 후 각 서버에 ip 연결)
  https://velog.io/@mollang/20.02.02-aws%EC%97%90%EC%84%9C-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-rnk64qxhlj

TIR (Today I Learn)

20.02.03
@ 냉장고 프로젝트

• 프론트, 백엔드 쿠키 통일 & 배포용으로 cors 수정
• lambda로 이미지 리사이징한 이미지 경로로 배포해보기

TIR (Today I Learn)

20.02.04
@ 스타벅스 클론 협업 프로젝트

• 깃 협력자 등록, 깃 커밋 푸시 체크

HTML 코딩본 받을 때까지 시간이 남을 것 같아 node 공부 병행하기로 계획 잡았다.

@ 노드 교과서 강의 복습

• 노드 & 이벤트루프 & 논플로킹 개념 잡기
  https://velog.io/@mollang/20.02.04-yhk67wnxl7

TIR (Today I Learn)

20.02.05 ~ 20.02.06
@ 노드 교과서 강의 복습

• #4.http모듈로 웹서버 만들기
• 티스토리 자동 토큰 갱신 시도 (실패)

@ 내 블로그 만들기

• 레이아웃 잡기
• draft-js 편집기 연결
• react-redux 연결하는 법 복습
  https://velog.io/@mollang/19.12.18-u4k4alzqph

TIR (Today I Learn)

20.02.07 - 02.09

@ 내 블로그 만들기
[v] draft-js 편집기 데이터 html로 렌더링 해보기
[v] draft-js 편집기 데이터 json 데이터로 렌더링 해보기
[v] localstorage에 있는 draft-js 편집기 내용을 다른 페이지에 포스트 렌더링 해보기
[v] 더미로 포스트 렌더링 해보기
[v] 리덕스 & 사가를 이용해 더미 포스트를 draft-js 편집기로 포스트 추가해보기
[v] 서버를 이용해 편집기로 포스트 렌더링 해보기
[v] 제목, 해시태그 추가하여 포스트 추가하기
[v] 서버를 이용해 회원가입, 로그인, 로그아웃하기
[v] 카카오톡 간편 로그인

@ 로그인 로직 복습하기
https://velog.io/@mollang/19.12.20-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%82%AC%EC%9D%B4%ED%81%B4

TIR (Today I Learn)

20.02.10 - 02.11

@ 내 블로그 만들기
[v] 서버를 이용해 포스트 상세페이지 불러오기
[v] 서버를 이용해 태그 클릭시 해당 페이지들 불러오기
[v] 포스트 상세페이지에서 h태그를 사이드 목록형으로 만들기(+링커 이동)
[v] 서버를 이용해 포스트 수정하기
[v] 서버를 이용해 포스트 삭제하기

@ NEXT에 SCSS 연결하는 법
https://this-programmer.com/entry/nextjs%EC%97%90%EC%84%9C-sass%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

TIR (Today I Learn)

20.02.12 - 02.13

@ 내 블로그 만들기

• 프론트단 디자인과 효과 추가 및 포토샵 작업 & react-stack-grid 레이아웃 입히기
• 포스트들 요약 텍스트 추출
• 포스트 상세 우측에 h 태그 링커 만들기
• api 를 이용해 이미지 폴더에 추가하고 draft-js 편집기로 이미지 업로드 기능 만들기
• 각 포스트들 썸네일용 이미지 api 추가 및 업로드 기능 만들기

@ 알고리즘 강의 시작
1 ~ 5 번 : https://moollang.tistory.com/74

20.02.14 - 20.02.15

@ 내 블로그 만들기

• multer로 포스트 썸네일 업로드
• 포스트 상세 화면 링커관련 스크롤 에러 수정
• 포스트 수정 화면 스타일링
• 포스트들 인피니트 스크롤링 추가

20.02.16 - 20.02.17

@ 내 블로그 만들기

• 프로필 컨텐츠 제작 및 추가
• 프로젝트 컨텐츠 제작 및 추가
  이 날들은 대부분 디자인과 여태 작업했던 것들을 정리하는 시간을 가졌다.
  기획이 초기에 잡히지 않은 디자인을 바로 입히려니 막막했고 루즈해지는 상황이 왔다.

@ 알고리즘 강의 10 ~ 23 번
배열에서 원소의 순서를 바꿔주는 함수 str.reverse();
배열에서 원소를 붙여서 문자열로 반환하는 함수 str.join();
주어진 값보다 이하의 가장 큰 정수 반환 : Math.floor()
a의 b승 값 구하는 법 : Math.pow(a,b)

set : 중복되지 않는 데이터를 저장하는 데이터 구조

const list = [1,2,2,3,4,5,5,6];
let setVal = new Set(list);
console.log(setVal) // [1,2,3,4,5,6]

has : 값이 있는지 없는지 불린으로 결과내는 함수

console.log(setVal.has(10)) // false

TIR (Today I Learn)

20.02.18 - 02.19

@ 내 블로그 만들기

• 프로젝트 컨텐츠 추가, 태그 검색 기능 추가, 게시판 태그 에러 수정
• 마이페이지 추가, 닉네임 수정 기능 추가, 로그인/회원가입 후 팝업창 정리
• toast ui 달력 추가, DB 연동하여 CRUD 기능 추가

@ 타입스크립트 공부할 강의 찾기

TIR (Today I Learn)

20.02.20

@ 내 블로그 만들기

• 시리즈 기능 추가하기
• 검색 엔진 노출을 위한 작업하기 (react-helmet 추가 및 ssr)
  @ 알고리즘 강의 28 ~ 35 번
  toUpperCase(), indexOf, reverse(), sort(), join()

TIR (Today I Learn)

20.02.21 - 20.02.22

@ 내 블로그 만들기

• dynamic 함수 사용하여 윈도우 객체 로딩 에러 잡기
• bundleAnalyzer 사용 후 tree shaking 해보기
• draft & tui calendar ssr시 윈도우 객체 로딩 에러 재수정
• 배포를 위한 준비 (AWS EC2 우분투 서버 설치)

20.02.23

@ 내 블로그 만들기

• 배포를 위한 준비 (AWS router 53 설정, S3 서버 생성)
• 상세페이지 오류 수정
• 백엔드/프론트 쿠키 통일

@ 웹게임 만들며 배우는 타입스크립트 강의 시작

TDL (To Do List)

20.02.24

@ 몰로그

• 블로그 태그, 카테고리 없는 케이스 보완 수정
• next.js 에서 css 파일 서버에서 랜더링 (https://blog.woolta.com/categories/1/posts/185)
• 상세페이지, 편집 페이지 css 수정
• 전체 페이지 반응형 작업을 위한 css 작업
• ie 11 호환 작업
  • ie의 경우 scrollTop이 지원이 안 되니 window.pageYOffset 값을 넣어줄 것
• 프로필, 프로젝트 내용 보완

TDL (To Do List)

20.02.25

@ 웹게임 만들며 배우는 타입스크립트

• 가위바위보 (인터페이스)
• 자스스톤 (Class, 제네릭, 타입가드)

@ 몰로그

• gitbash에서 db 조회 및 리셋하는 법 알기 (https://www.npmjs.com/package/sequelize-cli)
  • sequelize db:drop
• 타입스크립트 공부한 것 정리해서 포스팅하기

TDL (To Do List)

20.02.26

@ 몰로그

• 프로젝트 내용 보강 (시간을 너무 많이 쓰지 말기)
• 몰로그 에러 사항들 수정하기
• 노드js 교과서 1장, 3장 정리해서 포스팅하기
• 이력서 PDF 파일로 만들기

TDL (To Do List)

20.02.27

@ 몰로그

• 함수형 컴포넌트들 따로 정리하기
  • state 관련 아닌 첫 화면부터 로딩되기만하면 되는 함수는 따로 useEffect 함수 안에 담아두는 게 깔끔하겠다.
• memo를 이용한 최적화 작업 추가
• 상세페이지 링커 클릭시 위치되는 상단값 조정 -> 링커 클래스 유무 상태값에 따라 헤더 조정
  • 불필요한 useCallback 삭제
• 상세페이지 클릭시 트랜지션효과 추가
  • https://nextjs.org/docs/old (Imperatively)
  • routeChangeStart : https://stackoverflow.com/questions/55624695/loading-screen-on-next-js-page-transition
  • NProgress
• 댓글 추가 작업하기
• 시리즈 페이지 ssr 추가하기

TDL (To Do List)

20.02.28

@ 몰로그

• 시리즈 페이지 ssr 추가하기
• 댓글 쓰니만 수정 삭제하기
• 회사 프로젝트 내용 보완

@ 노드 공부하기

• 노드js 교과서 4장 공부 후 중요개념 포스팅
  • 쿠키와 세션

TDL (To Do List)

20.02.29 - 20.03.01
@ 몰로그

• aws 비용측정 api 가져와보기
  -> ap-northeast 지원 안 하는 것으로 판단해 시간당 서버비용 알아내서 한달치 계산 후 자바스크리트로 화면단에 넣음
• 관리자 메인단 컨텐츠 기획 & 도메인 기간, 서버 기간, (chartjs 사용 하기), 오늘 일정 관리자 메인단에 보여주기 (일정관리 데이터 가져오기)
  @ 노드 공부하기
• RESTAPI 개념 설명 포스팅하기
• 노드js 교과서 6장 express로 웹서버 만들기 공부하기
• 함수형 프로그래밍에 대하여
• OOP이 뭐지?
• AJAX 설명하기
  • https://devyj.tistory.com/1
• Promise와 Callback의 차이점은 무엇이며 각각의 장단점은?

TDL (To Do List)

20.03.02
@ 코딩 테스트 문제 풀기 3개

@ 몰로그

• axios, 리덕스 사가의 메서드 call 포스트

@ 노드 공부하기 (api 서버 만들기)

• 책 먼저 읽고 이해 안 가는 부분 강의

@ 냉장고 프로젝트 에러사항 개선하기

TDL (To Do List)

20.03.03
@ 코딩 테스트 문제 풀기 3개

@몰로그

• REDUX 상태값 IMMER로 바꾸기 (x => 프리윌린 과제 준비를 위해 리액트 썽크, 리덕스 사가, 몹엑스 공부로 변경)

TID (Today I Did)

20.03.04

• 프리윌린 과제 진행

TDI (To Do List)

20.03.05

• CORS 에러에 대하여
• 몹엑스로 비동기해보기

@ 장바구니 만들기

• [v] 상품 목록 페이지 기능 구현 및 디자인

TDI (To Do List)

20.03.06
@ 장바구니 만들기

• [v] 장바구니 페이지 기능 구현 및 디자인

20.03.07

• [v] 상품 목록, 장바구니 페이지 검수 중 에러 수정

• [v] useCallback 정리해서 포스팅

• TDD 방법 알아보기

• 테스트가 주도하는 개발 방식 (개발 -> 테스트가 아닌 테스트 -> 개발)
  https://velog.io/@velopert/react-testing-library
  (nextjs + jest) https://github.com/zeit/next.js/tree/canary/examples/with-jest

• 리액트 사이클 정리해 포스팅하기

• 참고 : https://medium.com/@krpeppermint100/js-useeffect%EB%A5%BC-%ED%86%B5%ED%95%9C-react-hooks%EC%9D%98-lifecycle-%EA%B4%80%EB%A6%AC-3a65844bcaf8

• 도대체 oop가 뭔가

TDI (To Do List)

20.03.07
@ 장바구니 만들기

[v] 장바구니 페이지 스타일링 및 프로젝트 에러 검수
[v] 리액트 테스팅 라이브러리 알아보기

TDI (To Do List)

20.03.08
@ 장바구니 만들기

[v] react-test-library 연결, 상품목록 액션, 리듀서 유닛 테스트

20.03.09
@ 장바구니 만들기

[v] 폴더구조 정리 (페이지 기준으로 컴포넌트 묶기)
[v] ssr 연결 (상세페이지로 가는 동적 라우터, 상품목록 데이터 서버에서 불러오기)
[v] memo를 이용한 최적화 작업

@ 상태관리도구 mobx

[v] 프리윌린 과제 mobx로도 적용해보기 (리덕스보다 코드가 훨씬 간결하다)

20.03.10
[v] 몹엑스 비동기 글 정리
@ 장바구니 만들기

@ 리액트-타입스크립트 알아보기

20.03.10 ~ 04.03
지원한 회사 공부
지원한 회사 과제 면접 준비
면접 준비
인사이드 자바스크립 서적 공부 진행
스터디 준비

20.04.04

TD (To Do)

@ pull request 테스트
@ 미션 1-1 마무리 후 PR
더 추가한 것
1. 포스트 후 input 창 비우기 - creatRef이용

20.04.05

TDL (To Do List)

@ 미션 1-2 작업 (라우터 연결까지만)
@ 인사이드 자바스크립트 다시 진행하자

20.04.06

TDL (To Do List)

@ 인사이드 자바스크립트 - 객체지향 프로그래밍 (클래스, 상속)
@ 스터디 리뷰 받은 것 해석