Daily Log

타입스크립트 - 타입스크립트 자바스크립트 차이 - dynamically typed(JS, 파이썬) => 런타임에서 타입 결정 - Statically typed(TS) => 컴파일에서 타입 결정 컴파일러 - 바벨 이용해서 TS -> JS로 변환가능 1. Statically Typed - 엄격한 타입이 장정 - 반대로 동적타입은 사용자가 내 어플리케이션을 사용하면서 버그가 빵빵 터질 수 있음 2. OOP가 가능 - 유지보수성이 높음 - 생산성 높음 - class, interface, generics, types가능 타입스크립트 공부방법 - 어떤 타입을 정확하게 이해하는 것이 중요 셋업 - 타입스크립트는 컴파일로 툴이 함께 제공됨! - VSC에서 커맨드 쉼표 => strict null 체크 - node.js ..

시도한 해결 방법 1. public 폴더 하위에 _redirects파일 생성하여 아래 내용 입력 * /index.html 200 SPA로 개발했을 경우 경로를 못찾아서 설정해줘야 함 2. Build Command 설정 netlify Site Setting 페이지에서 Build & Deploy 카테고리로 이동하여 명령어를 아래와 같이 설정해준다. CI= npm run build yarn build 의 경우 작동이 안됐고, 그냥 npm run build만 했을 경우도 작동이 안할 수 있다고 한다. **netlify 자체 사이트에서 git을 연동해서 git repository를 가져와서 하는 경우 위의 방법으로 해결이 됐다. 그러나.... .env파일에 있는 api key를 읽어오지 못하는 문제가 생겼음(gi..

진행하는 프로젝트의 버튼을 공통컴포넌트로 사용하고 싶어 개발해보았다. 1. 우선 button 의 html 속성을 알아야한다. 속성을 확인한 후에 사용할 것만 외부에서 props로 주입해서 사용할 수 있게 만들어준다. disabled => 해당 버튼이 비활성화됨을 명시 class => css 스타일 onclick => 이벤트 함수 그 밖, 으로 감싸며 입력한 내용을 label로 정의할 예정 2. React로 Component로 변환 props로 받아오는 요소는 label => span 태그로 버튼 내부의 글을 나타냄 styleClass => 적용될 className disabled => true, false로 활성화 비활성화 조절 onClick => onClick이 일어날 시의 이벤트에 대응 import ..

fetch web APIs - 간단하게 네트워크 통신 가능함 - 긴 UI를 query params을 섞어서 해야했고, josn으로 변환처리를 해줘야 함 - 자바스크립트 내장라이브러리로 import하지않고 사용가능 - 지원하지 않는 브라우저가 있다. - return 값은 Promise 객체이다. Axios 라이브러리 - fetch 대용으로 사용할 수 있음 - json으로 변환해도 되지 않게 함 -> 라이브러리 자체에서 변환 해줌 - 브라우저 버전에 따라 XMLHttpRequest를 보내거나, fetch를 보내거나 해줌 - catch에 걸리면 .then을 실행하지 않고, console 창에 해당 에러 로그를 보여준다. - request aborting 요청취소가 가능하다! - 응답시간 초과를 설정하는 방법이..

Styled Components VS CSS Modules CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교 지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산 blueshw.github.io * next.js 로 프로젝트 뼈대 구성 -> next.js 9.3 버전부터 CSS Module을 기본으로 채택하고있다. BEM 규칙 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility naradesign.github.io 클래스..

Collection of React Hooks ready to install with NPM Hooks Library useTitle useInput . . 등등 위 hooks를 시도해볼 것임 npm 라이브러리에서 다운 받을 수 있는 Hooks들이 많다. npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of..

CSS 상속 p태그의 color프로퍼티값은 span태그에도 적용됨 h1 태그의 border프로퍼티 값은 span태그에 저굥ㅇ되지 않음 => p에만 적용한 프로퍼티가 span만 써도 자동으로 상속되어 적용이 된다는 점. 상속이 되는 property 상속이 안되는 property가 있는데 구분이 필요함 상속가능: text-align, line-height(상하), color, font, visibility, opacity 상숙불가: width, height, margin, padding, border, display, box-sizing, background 강제 상속이라는 것도 있음. 아래와 같이 가능 span { border: inherit; } CSS media query와 반응형 레이아웃 기존에는 부..

나 같은 경우 보통 Bitbucket에서 원격 브랜치를 생성한 후, 로컬로 가져와서 개발을 시작한다. 원래는 SourceTree를 사용해서 쉽게 git을 이용했었는데, 회사 내부망에서 소스트리가 잘 동작하지 않아 VSC에서 명령어로 직접 실행할 일이 많아졌다. 하다 보면 외워질 줄 알았는데 매번 헷갈려서 검색하게 되어 자주 쓰는 것은 아래에 따로 정리를 해보았다. 원격 브랜치 따오기 원격 저장소 목록 보기 git branch -r 원격 저장소 브랜치 가져오기(로컬에서 보기) git checkout --track [원하는 리모트 브랜치] 현재 브랜치 상태 확인 git branch 원격저장소에 올리기 상태 확인 git status 원격저장소 내용을 로컬에 동기화시키기(동기화 안돼 있으면 push시 거절됨) ..

Javascript ES6 const Arrow function(화살표 함수) Destructuring assignment(구조분해) 선언적 프로그래밍과 컴포넌트 추상화 Vanilla Javascript로 컴포넌트 개발하기 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io h..

yield select 를 통해서 Reducer에 있는 상태를 Redux-Saga에서 바로 가져와서 사용할 수 있다. 컨테이너에서 useSelector를 통해 const { customerInfo } = useSelector(state => state.registerReducer) 위 처럼 가져오는 것과 비슷함 function* createCustomer() { const { customerInfo } = yield select(state => state.registerReducer) const { status, data } = yield call(api.createCustomer, { payload: {...customerInfo, rsdn: customerInfo.rsdn1 + customerInfo..