firebase으로 배포 이후, 뽑아져나온 url로 모바일과 PC(크롬/엣지)에서 디버깅을 위한 테스트를 해보았다. 메인에서만 16건의 이슈를 발견했고 5시간 동안 8건을 디버깅했다. :( 기업의 홈페이지를 리버스 엔지니어링해보며 무엇보다도 CSS에 관해 배운점이 참 많았다. 가장 유용하리라 생각하는 지식은 반응형에 최적화된 CSS의 단위이다. 반응형의 CSS 단위는 50px, 500px, 1000px 이렇게 정해진 값이 아니라 다른 개체와의 상대적인 퍼센트 값으로 사용해야하는데, 이것을 고려한다하더라도 모든 케이스에 대응하는 것이 쉽지 않다. 또 한번 배움이 있었고 현업에 계신 분들에게 존경심이 들었다. 자주 등장하거나 유용하게 썼던 단위는 아래의 4가지이다. 1) vh & vw 뷰포트 기준으로 정할 ..

리액트의 컴포넌트가 가질 수 있는 데이터로는 State와 Props가 있다. State는 컴포넌트 내부에서 값이 지정되고, Props는 자식 컴포넌트가 외부의 부모 컴포넌트에게 전달받는 값이다. State 작성 방법 (생성자 작성 방법), State 변경 방법 constructor(props) { super(props); this.state = { value:0 }; } State는 컴포넌트 안의 생성자 부분에서 초기값을 지정하는 방식으로 작성한다. props는 굳이 생성자에 작성해주지 않아도 this.props.propsName으로 부모가 전달해준 값을 받을 수 있기 때문에 생성자에서 props 정의 부분은 생략하고 랜더 함수 위에 간단히 this.state = { } 혹은 state = { }로 작성..

React란 컴포넌트 기반 UI 라이브러리이다. 컴포넌트란 일종의 UI 조각이며, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록의 단위이다. (리액트 앱의 최소 단위) 리액트 개발 시에는 컴포넌트를 파일 단위로 작성한 후 필요한 위치에 import하여 사용한다. 각 컴포넌트는 독립적이고 재사용이 가능하다. = cohesive(응집적) 컴포넌트를 만드는 방법에는 리액트에서 제공하는 컴포넌트라는 디폴트 클래스를 extends한 클래스를 선언하여 제작하는 방법이 있고, 간단하게 함수로 만드는 방법이 있다. 상태에 따라 컴포넌트가 주기적으로 업데이트되야한다면 클래스 컴포넌트를 쓰면 되고, 항상 정적으로 데이터가 표기가 된다면 함수 컴포넌트로 작성한다. 클래스 컴포넌트 (rcc라는 ..

구현 페이지를 url로 만들어 공유하고 싶었다. Firebase를 이용하였는데, https://firebase.google.com/ 에서 프로젝트를 추가한 뒤 작업 폴더로 들어가 터미널에서 Firebase CLI을 설치한 뒤 터미널 창에서 로그인해주는 것이 기본 세팅이다. 1) 전역에 firebase-tools 설치 npm install -g firebase-tools 2) firebase 로그인 firebase login 3) firebase init firebase init 4) space키로 feature 선택하고 enter 5) option으로 Use an existing project 선택한 후 enter 6) 해당 디렉토리를 위한 Firebase 프로젝트 선택 (https://firebase...

화면에 비동기 통신으로 데이터를 뿌리기 위해서 웹에서 로그인 유저의 세션 정보를 인지하여 DB에 셀렉문을 날리고, 관련 데이터를 JSON으로 리턴하는 api를 만들어보았다. // root의 index.js server.get("/user-info-api", function (request, response) { var title = null; async.waterfall([ function(callback) { title = mysql.escape(request.body.title); callback(); }, function(callback) { if(title !== undefined) { const uid = request.session.uid; console.log(uid); var param =..

개발자는 기능을 구현하는 사람일수도 있지만, 조금 더 자신감있는 개발자가 되기 위해서는 테스트를 잘 작성하고 리팩토링을 하는 것도 중요하다. 제품이나 서비스의 품질을 확인하고 소프트웨어의 버그를 찾아 제품이 예상대로 동작하는지 확인해야한다. (함수, 특정 기능, ui, 성능, api 스펙) 더보기 * 일반적인 테스트 방법 1) 비즈니스 로직을 가진 소스 코드를 작성 2) 1에 해당하는 테스트 코드를 작성 3-1) 모든 test가 pass이면 퇴근한다. 3-2) test가 실패한다면, 모든 test가 pass가 될 때까지 어떤 부분이 잘못되었는지 확인하고 수정한다. TDD라는 것은 일종의 개발 방법론인데, Test-driven development의 줄임말로 '테스트 주도 개발'이라고 한다. 개발하기 전에..