아 그거 뭐였지

원래는 ubuntu에 mysql을 직접 설치해서 사용하고있었는데 수석님께서 도커로 설치하면 편하다고 하셔서 한번 사용해봤다. 사용하기전에는 docker를 쓰는것자체가 부담이였는데 막상 사용해보니 간단하고, 환경설정을 따로 안해줘도 돼서 굉장히 편리했다. docker mysql 이미지로 간편하게 mysql을 설치해보도록하자. 먼저 mysql 서비스가 돌아가고있으면 port가 충돌날수도있으니 종료해주자. sudo service stop mysql mysql 이미지 파일을 가져온다. sudo docker pull mysql docker imgae 명령어로 이미지 파일을 확인해봤을때 mysql 있으면 잘 가져온것이다. sudo docker images docker run 명령어를 사용해서 mysql 이미지로 컨..

저번시간에 구획과 네트워크 설정까지 끝마쳤다. 만들어진 구획을 가지고 VM 인스턴스를 생성 해보도록 하겠다. 인스턴스 생성 먼저 계정에 로그인을 한다음 설정창에서 컴퓨트>인스턴스를 클릭한다. 좌측 메뉴에보면 구획을 선택할수있다. 만들어놨던 구획을 선택하고 인스턴스 생성버튼을 눌러준다. 만들고자하는 인스턴스의 이름을 적어주고 위에서 구획을 선택했기때문에 문제는 없을테지만 혹시나 구획을 한번 확인해준다. 오라클 클라우드의 기본 OS는 Oracle Linux로 설치되어있다. 본인은 우분투를 사용할것이기때문에 이미지 변경을 해주었다. 사용하고자 하는 OS를 선택한뒤 이미지선택 버튼을 눌러준다. SSH키로 로그인 하기위해 윈도우라면 자동으로 키 쌍 생성을 클릭한뒤 전용키와 공용키를 저장한다. 맥에서는 공용 키 붙..

토이프로젝트를 진행하면서 로컬에서만 서버를 돌리다가 이제 다른 개발자들과 협업을 하기위해 클라우드에 서버를 배포하기로하였다. 여러 무료클라우드들이 존재하지만 그중에서 오라클 클라우드를 택했고 초기 세팅부터 서비스 배포까지의 과정을 담아보기로한다. 오라클 클라우드를 선택한 이유는 다른 포스팅에서 다뤄보도록 하겠다. 한번 해보면 쉽지만 처음할때 많이 어려움을겪었어서 그과정을 기록해본다. 이번 포스팅에서는 VM 인스턴스를 생성하기에 앞서 준비작업인 VCN생성과 포트포워딩을 설정하기위해 구획을 생성하도록 하겠다. 오라클 클라우드를 이용하기위해 오라클 홈페이지에 접속해서 회원가입 및 로그인을 진행하자. https://www.oracle.com/kr/cloud/ 차세대 클라우드 플랫폼을 만나다 Oracle Clou..

NestJs에서 TypeOrm으로 데이터베이스 연결하던도중 SyntaxError: Cannot use import statement outside a module 에러가 떴다. typeorm 라이브러리도 잘 설치했고 오타도 없는것같은데 계속 에러가났다. 삽질을 열심히 하던도중 스택오버플로우에 검색해보니 typeorm초기설정시 경로를 잘못지정해줘서 생긴 오류라고한다. 수정하기전 코드에서는 entities에 모든경로에있는 entity.ts들을 가져올수있게했는데 이것이 오류가난것같다. TypeOrmModule.forRoot({ type: 'mysql', host: env.DATABASE_HOST, port: 3306, username: env.DATABASE_ID, password: env.DATABASE_P..

서버 레거시 코드를 인계받고 작업하던 도중 알수없는 에러가 났다. 검색을해봐도 확실하게 해결한 사람은 없었고 에러코드도 전부 달랐다. 너무 많은 요청을 하면 발생할수있다고 하는데 코드에서 요청한것이라곤 select문 한번이였다. 코드를 살펴보고 내가 생각했던 문제점들과 해결방법들을 적어보겠다. 문제점 오랜시간동안 connection유지 별별 방법을 시도해봤는데 결론은 connection을 반납하지 않아서 생긴 문제같았다. 그리고 기존의 코드는 클라이언트 요청이 있을때마다 connection을 하고 다시 요청하면 새롭게 connection을 하는 방식이였다. 또한, connection을 하고나서는 해당 연결을 끊거나 반납하지 않았다. 웹 크롤링을 하기때문에 코드특성상 오랜시간이 걸린다. 중복 체크를 위해 ..

처음에는 React-Material-Ui-Carousel 라이브러리를 사용해서 만들었다가 수정이 불편해서 Swiper라이브러리로 바꾸었다. 갓와이퍼;; 짱짱편하다. 해당 공식문서 예제를 보면서 참고했다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 사용하기위해 Swiper를 설치하자. npm i swiper Carousel 캐로셀? 이 정식명칭이라고 하는데 슬라이드가 입에 붙어서 슬라이드로 설명하겠다. 슬라이드를 하기위한 영역을..

styled-component로 정의해둔 input태그의 type을 password로 바꾸려하자 오류가났다. 원인은 styled-component를 정의할때 props의 타입에 input태그의 type을 적지 않았기 때문이다. 해당 PasswordInput컴포넌트는 Input컴포넌트를 styled-component로 만들어서 사용중이였다. import Input from "../../presentational/Input"; import styled from "styled-components"; const PasswordInput = styled(Input)``; Input컴포넌트를 정의한 곳에 가보면 InputProps 타입에 type이 없어서 추가해주었다. type InputProps = { width..

회원가입 페이지처럼 input 창이 여러개인 페이지에서 사용할수있는 방법이다. 기존에 많이 사용하는방법인 객체로 만들어서 input태그에 name값이나 해당 input이 무엇인지 판별한 값을 준다음 useState로 값을 변경하는 방식을 많이 사용하는듯 하다. 이러한 방식은 코드 관리차원에서는 깔끔하고 좋아보이나 각 input값들이 변경될때마다 재 렌더링 된다는 단점이있다. 해당 방식에서 영감을 얻어서 이를 useRef로 바꿔보도록하자. function Regist() { const [inputs,serInputs] = useState({ userId: "", password: "", email: "", phone: "" });; const {userId, password, email, phone} = ..