우아한 테크러닝 2일차 자바스크립트 훑어보기 리덕스 간단하게 만들어보기 Javascript function js에서는 함수도 값으로 변수에 넣을 수 있다 -> 함수도 값이다 js의 함수는 반드시 값을 반환하게 되어 있음 => 명시적으로 return 쓸 때 / 리턴이 없으면 undefiend 리턴 new 연산자의 경우는 명시적으로 인스턴스 ({ }) 반환 // 함수 정의문 function foo() { return 0; } // 함수식 -> 이름 정해줘도 변수명을 함수 이름으로 하기 때문에 익명함수 사용가능 // 함수를 값으로 취급할 때만 함수 이름 생략가능 const bar = function () { return 2; } // 최초에 1번만 실행되어야 하는 코드들일 경우 // 즉시 실행 코드 => 익명..

우아한 테크러닝 1일차 이번에 우아한 테크러닝 교육을 듣게 되었다! 되면 좋고 안돼도 뭐… 하는 마음으로 지원했는데, 운좋게 선발되어서… 2주 프로젝트의 타입스크립트 & 리덕스 리팩토링을 진행하려고 하는 중이기도 해서 더 반가운 소식이었다. 사용한 도구 및 공식 문서들 https://www.typescriptlang.org/play https://codesandbox.io/index2 https://reactjs.org/ https://redux.js.org/ https://mobx.js.org/README.html https://redux-saga.js.org/ https://blueprintjs.com/ https://testing-library.com/ TypeScript type 명시하기 ts는 ..

디테일 페이지 라우팅을 하며 겪은 문제 프로젝트 상세 페이지는 params로 id값을 받고, 그 id값에 따라서 임시 데이터에서 정보를 가져온 뒤, 화면을 렌더링하는 형태이다. 하지만 프로젝트 상세 페이지에서 새로고침을 하면 아래와 같은 문제가 발생한다. 구글링을 통해서 아래와 같은 해결 방법을 발견했다. https://ui.dev/react-router-cannot-get-url-refresh/ 브라우저가 모든 라우팅 로직을 처리하기 위해서 클라이언트 측의 라우팅인 React-Router에만 의존하고 있기 때문에, 새로고침을 했을 때 프로젝트 상세 페이지인 /project/2 이라는 서버의 라우팅이 존재하지 않는다. 그래서 cannot/GET 오류가 나온다. 보통 webpack-dev-server을 사..

라우팅 설정하기 기본 라우팅 과정에서 브라우저 라우터를 처음에 사용했다가… 예전에 본 네비게이션 메뉴 효과가 멋있는 사이트가 있어서 그 사이트를 참고했다. 네비게이션 메뉴를 클릭하면, 해당 섹션으로 스크롤이 이동하는 효과를 주었는데 포트폴리오 사이트에 도입해보고 싶었다. 그래서 방법을 찾기 위해서 사이트를 뒤져 보다가, 네비게이션 메뉴를 클릭할 때마다 url에 해시라우터처럼 #이 붙는 것을 보게 되었다. 그래서 해시라우터로 작업하다가 보니, react router 라이브러리에는 이런 기능이 없어보였고, 직접 구현해야 하나? 하는 생각이 들었다. 그래서 구글링을 해보다가, 라이브러리를 찾았다! 내비게이션 메뉴를 클릭하면 해당 섹션으로 이동되게 하고싶었어요 react-router-hash-link 라이브러리..

React App에서 ESLint 설정하기 원래는 ESLint 설정을 하지 않을 생각이었는데, 린트 설정 없이 npm start를 하면 나오던 오류가 없으니… 조금 허전해서 이왕 할거 린트 설정까지 한번 제대로 해보기로 했다. 린트 설정을 한다면 바로 npm start 를 하더라도 적용은 되지 않고, husky 등을 통해서 따로 설정을 해 줘야 한다. 이번에는 그냥 린트만 적용시켜서, 아래와 같이 따로 린트 스크립트를 만들어서 실행시켜줬다. "lint": "eslint src/**/*.jsx" ESLint 설정에 사용한 패키지 eslint eslint-plugin-react eslint-plugin-react-hooks ESLint 설정 1. eslint를 설치하고, 아래의 스크립트를 터미널에 입력하면 ..

왜 CRA 를 사용하지 않으려고 했나? 최근 이머시브 과정을 수료하고, 본격적으로 취업 준비에 들어가기에 앞서서 개인 포트폴리오 사이트를 다시 만들기로 결정했다. 이전에 진행했던 4주 프로젝트를 진행하며 보일러플레이트 코드를 사용하지 않고 리액트 개발 환경을 셋팅해보고 싶다는 생각이 들었고, 추가적으로 webpack, babel에 대해서 조금 더 깊이 알아보고 싶었다. 그래서 가볍게 만질 수 있으면서, 예전부터 다시 한 번 만들어야겠다고 생각했던 개인 포트폴리오 사이트의 기초 셋팅을 밑바닥부터 구성해보게 되었다. 그래서 결정된 사항 Create React App을 사용하지 않는다. React, SASS에 대응하는 Webpack, Babel 설정을 직접 해 본다. ESLint 설정을 해 본다. 초기 셋팅에..