9월 2022
간헐적으로 nginx 다운되는 이슈
업무중 간헐적으로 nginx 가 다운되는 이슈가 있었다. 미국에 위치한 고객사라 시차가 완전 반대인데… 꼭 새벽에만 이런 문제가 발생한다. /etc/nginx/nginx.conf 도 확인해봤지만 별다른 특이사항은 없었고, /var/log/nginx 에 에러로그를 봐도 별다른 문제가 없었다....
Continue reading...리액트 기본 개념 정리 (2) – JSX / Props
JSX 정리 (HTML 차이점 정리) 처음에 리액트가 나왔을때는 위 이미지와 같이 사용하는 JSX가 없었다. 그래서 아래 이미지와 같이 사용했다. 이처럼 jsx 가 등장하고 나서, 코드가 훨씬 직관적이고 디자이너와의 협업이 쉬워졌다. 대신...
Continue reading...리액트 기본 개념 정리 (1)
리액트에 컴포넌트를 만드는 방법은 두가지가 있다. Class를 상속받아 만들기 Function 을 이용하기 컴포넌트가 state가 있고, 그 상태에 따라 컴포넌트가 주기적으로 업데이트되어야한다면 Class 컴포넌트를 쓰면 되고, 컴포넌트에 상태가 없고 정적으로 데이터가 표기된다면...
Continue reading...React 개발시 유용한 개발툴 / 익스텐션 / 라이브러리
VScode extensions Reactjs code snippets Auto import Chrome extensions React Developer Tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) jsx 또는 js 파일, postCSS에서 emmet을 사용하려면 VScode settings.json에 아래를 추가하자. 익스텐션이 설치되었다면, vsode에서 rcc를 입력해보자! 리액트 Component...
Continue reading...React 내부적으로 사용되는 툴
yarn 혹은 npm 으로 create-react-app 을 한 후, eject 해보면 여러 사용된 라이브러리를 확인할 수 있다. (eject 는 되도록 하지말자.. 다시 패키징할 수 있는 방법이 없음) 그럼 리액트 내부적으론 어떤 라이브러리들이...
Continue reading...React 기초
React 란 ? React란, 유저 인터페이스를 만들 수 있는 라이브러리이다. 즉, web UI를 만들 수 있는 라이브러리로 볼 수 있다. React를 한 단어로 정의하자면, 컴포넌트들로 이뤄진 라이브러리이다! ✏️ 첫번째 중요한 컨셉...
Continue reading...배포하기 :>
무료 호스팅에 배포 (Netlify) 일반적으로는 호스팅 (유료)에 배포하지만, 무료로 제공되는 netlify에도 한번 해봤다. react 의 경우 빌드를 먼저 한 후, 바로 배포하면 된다. 그런 다음, netlify 를 설치한 후, netlify deploy...
Continue reading...배포 전 체크리스트 ✅
아래는 호스팅한 서버에 배포하기전에 최소한으로 체크해야하는 리스트 🙂 코드 안에 중요한 내용이 포함되어있지 않은지 환경 변수는 분리되어 있는지 너무 많은 불필요한 데이터 혹은 민감한 정보를 로깅하고 있지는 않은지 서버의 response에 사용자의...
Continue reading...