익명의 개발노트

1. chart.js는 그래프 라이브러리 중 하나이다. highchart.js, d3.js 등 여러 종류의 라이브러리가 있다. 기본적으로 canvas에 그리며, 반응형을 사용하고자 할때는 부모태그로 감싸주면 된다. 자세한 내용은 공식문서에 있지만, 아래내용이 전부다. 다만 옵션부분은 공식문서 참고해서 기본값으로 되어있는 부분은 설정을 바꿔주면서 사용하면 된다. import React, {Component} from 'react'; import Chart from 'chart.js'; import './App.css'; class App extends Component { componentDidMount(){ var ctx = document.getElementsByClassName("ts_canvas")..

1. 깃 플로우 1) 마스터 브랜치는 최종 배포에 사용한다. 실제관리는 아키텍트나 PM들이 관리한다. 2) 통상 개발자는 develop 브랜치에서 feature브랜치를 따서 작성 후 develop 브랜치에 push한다. 3) 마스터 브랜치에서 릴리즈 브랜치로 푸시하는 경우는 실제 배포할 상태가 된 경우에 생성하는 브랜치이다. 마스터 브랜치에서 배포가 이루어 지므로, 릴리즈 브랜치를 마스터 브랜치로 merge한다. 나중에 이 배포버전을 찾기 쉽도록 태그를 만들어 현재 병합되는 커밋이 뭔지 마킹해놓는다. 이 때 배포된 기능에 반영 될 수 있도록 develop 브랜치에도 함께 merge한다. 4) hot-fix 브랜치는 배포 후 운영 버전에 버그 발생시 긴급하게 버그를 수정해야할 경우에 만든다. 마스터 브랜치..

1. window.location.reload() 페이지 새로고침할 때 사용하는 함수이다. 댓글 버튼 누른 후 반영될때 사용하면 유용하다. 나는 리다이렉트로 처리하려고 했지만, 리로드 방법을 권유하셨다. 2. 리액트에서 map함수 사용시 key값 설정하는데, 설정해도 에러가 있다면? 프레그먼트가 불필요하게 있는지 확인해볼 것. 3. get방식으로 데이터 요청할때는 쿼리스트링이나, url 파싱을통해서 데이터를 전달 할 수 있다. 4. 엔드포인트는 명사로 설정한다. 5. componentDidUpdate의 삽질. 부모태그에서 자식태그에게 props를(store_id) 주었는데, 자식태그의 componentDidMount안에서 console.log(this.props.store_id) 프롭스가 undefind..

덤프는 다른 디비에 잇는 내용을 다른 곳으로 옮기는 작업이다. 파일로 옮길 수 도 있고, sql 로도 옮길 수있다. 프로젝트하다가 한명이 서버인데, 없을때도 돌리고 싶을때.. 근데 디비는 통상 로컬에 있으니깐. 백엔드 소스만 가지고 실행할 수 없다. 이럴 때 유용하다. 1. 디비내용을 처음에 sql 파일로 만든다. mysql -u root -p "database you want to backup" < "temporary sql" ex) mysql -u root -p 백업하고자하는 디비이름 < 저장할 파일이름.sql 2. AWS mysql로 이동해서 데이터 베이스 생성한다. mysql -h "your aws mysql url" -u root -p //저장하고자하는 디비 위치(aws면 엔드포인트)를 적는다...

데이터 베이스를 설치하는 방법은 2가지다. 1. EC2에 까는 방법 2. RDS사용하는 방법 RDS 설정방법 1. 서비스에서 RDS 검색 후 클릭하면 좌측에 아래 그림과 같은 메뉴들이 보인다. Parameter groups를 클릭하자. 2. 우측상단에 파라미터 그룹 생성버튼 클릭. 3. 파라미터 그룹 설정하기 1) 데이터 베이스 선택하고, 그룹이름, 설명적어주면된다. 생성하면 해당 DB를 선택 한 후 crate parameter group 버튼 옆에 Parameter group actions 셀렉박스를 클릭 후 Edit을 클릭한다. 4. 설정할 파라미터는 아래와 같이 설정해준다. 1) character_set_client 의 value 값을 utf8mb4로 변경 2) character_set_connec..

EC2 서버는 인스턴스라고 부른다. 1. 지역을 먼저 설정한다. (기본값이 아마 미국으로 되어있을 것임) 2. 위 그림에서 파란버튼(lunch instance) 클릭. 3. 클릭후 원하는 OS 선택한다. 4. OS 를 선택한 후에 사양을 결정하게 된다. 사양이 좋을 수록 비싸다. 5. 하단 부의 버튼 중 next로 표기 된 것을 선택하자. 가운데 버튼은 디폴트값으로 지정하는 거고, NEXT 버튼은 세부설정 버튼이다. 6. 세부설정 네트워크는 하나밖에 없고, 서브넷은 No preference로 지정한다. (백엔드 개발자는 알아둬야한다.) auto-assign public IP는 자동 퍼블릭 ip설정 할 것인지 설정하는 것이며, 원래는 퍼블릭을 disable해야한다. 왜? 서버는 원래 외부에서 아무나 접근하..

AWS는 Amazon Web Service의 줄임말 입니다. AWS는 소위 클라우드 서비스라고도 합니다. 클라우드 서비스는 서버 등의 인프라스트럭쳐를 필요한대로 on demand로 사용할 수 있는 서비스 입니다. 즉, 유저가 직접 서버를 구입하고 설치할 필요 없이 AWS상에서 클릭 몇번으로 서버를 구축하고 사용할 수 있습니다. * 추가로 알면 좋은 내용 : IDC 1. 웹 서비스 배포에 필요한 필수개념 1) EC2 2) Security Group 3) RDS 4) Load Balancer(ALB) 5) Route 53 6) S3 2. EC2 1) Elastic Compute Cloud 2) AWS 상에서 사용하는 Server이며, EC2 서버에 API를 배포한다. 3) 다양한 옵션이 존재하며, 사양이 좋..

1. mysql 실행후 status를 입력한다. 그러면 위 그림처럼 정보가 나오는데, 여기서 characterset 부분이 latin1으로 되어있을 것이다. 2. vim 명령어로 설정을 해주어야 한다. sudo vim /etc/mysql/my.cnf my.cnf 파일이 읽기 전용이어서 반드시 sudo(관리자 권한)으로 편집해야한다. 3. vim으로 2번의 파일을 실행시키면 아래와 같이 나타날것이다. 버전이 5.5이상이면 아래 내용을 22번 이후에 다가 입력해준다(입력 후 :wq!) [mysqld] collation-server = utf8_unicode_ci character-set-server = utf8 skip-character-set-client-handshake 4. 그 후 mysql을 재시작한..

1. 몇일째 css 작업을 하느라, 진이 다 빠졌다. 프로젝트 막바지여서 그런지.. 구현해야할 기능이 몇개 남았는데.... 토욜까지 완성할 수있을 듯 싶다. 반응형으로 맞추다 보니, 틀어지는 일이 다반사... 리스트화면 반응형으로 구현간 호버가 역으로 먹히는 현상이 발생했다. 원인은 기존의 DB에서 불러온 이미지 형태를 background:cover 로 설정하다보니, 꽉찬상태에서 반응형으로 줄이다보니, 리스트가 한줄로 나타나면서 깨지는현상이 발생했다. 해결은 background-size : auto 200%; 로 원래 기능을 구현했다. 2. 컴포넌트 분리 메인화면 리스트 컴포넌트(음식사진, 식당이름, 음식종류)를 디테일화면에서 사용하고, 크기, 위치만 변동했는데, 이미지가 자꾸 깨지고 컨트롤하기 어려운 ..

1. css의 적용방식은 계단식이기 때문에 위에서 아래로 적용하면서 내려온다. 동일 태그에 다른 조건을 부여할 경우 맨 마지막에 있는 조건이 적용된다. 미디어 쿼리를 쓸때도 그렇다. 가독성때문에 미디어 쿼리를 맨위로 올렸는데, 미디어 쿼리가 적용되지 않음을 이상하게 생각한 나머지 css의 작동방식을 떠올리며, 코드를 수정했다. 맨위에 올릴꺼면 !important를 선언해줘야 css가 작동한다. 2. 단계별 media쿼리 적용 #one { border : 1px solid red; width : 1500px; height : 300px; background-color : yellow; } //화면너비 1500이상에서 초록색 @media (max-width : 1500px){ #one{ background-..