익명의 개발노트

1. multi hover 아래 아이콘은 연필부분과 글씨가 나뉘어져 있다. 리뷰쓰기 태그 구성이 위와 같이 될 경우 어떻게 호버를 먹여야하는가. 하나의 클래스당 하나만 하면 따로따로 호버가 되버리는데.. 같이 호버를 하기 위해서는 둘을 감싸고 있는 부모태그에 호버를 걸고 자식 태그의 클래스 네임으로 각각 설정해주면 동시에 먹힌다. .wrap_review_recommend:hover .icon_review{ cursor: pointer; color: $homeColor; } .wrap_review_recommend:hover .detail_review_word{ cursor: pointer; color: $homeColor; } 2. pointer-events 컴포넌트에 마우스 효과를 부여했고, 그 컴포넌..

1. 지도 연동시 jsx내에서 삼항연산자를 여러개 써야하는 번거로움 발생 jsx내에서 if~else문을 사용할 수 없어 삼항연산자로 구현했으나, 가독성이 너무 떨어지고, 코드가 지져분 해지는 관계로, 리펙토링을 진행하였음. filter+map 메소드로 정리함. { this.props.storeNum === undefined && mapMakerList.filter(el=>this.props.storeInfo === undefined || this.props.storeInfo === el.food_type_id) .map((item, index) => { return ( ) //return end } ) } { //detail화면 props = this.props.storeNum가 undefined이 아니..

1. react-google-map 적용하기 1) 라이브러리를 설치 npm install --save google-map-react 2) 구글맵을 사용하려면 api키가 필요하다. *왜 오픈api에 키를 필요로 하는지 생각해 보면 좋을 듯. 3) 구글맵은 신용카드 번호를 등록해야 사용이 가능하다. 가입시 $300 크레딧주고 12개월 동안 사용할 수 있게 해줌. 기간 종료후에도 유료로 전환되지 않음 4) https://console.cloud.google.com/ Google Cloud Platform console.cloud.google.com 위 사이트 들어가서 "시작하기 " 누르고 계좌정보 입력해야한다. 안할 경우 지도 불러왔을때 "구글지도를 제대로 로드할 수 없습니다"의 알림을 보게된다. 5) 결제정..

1. flex 사용시 숫자, 글자 줄 안맞는 현상 align-item : baseline으로 해결 2. 레이아웃이 중복되는 경우, 내용물만 바뀌게 될 때, 예를 들면 메인페이지와 세부페이지가 헤더, 사이드바, 푸터가 같고, 내용물만 변경되는 경우, 공통되는 컴포넌트만 모아놓은 템플릿을 하나만들고 (안에 this.props.children, 메인페이지에서 템플릿 import하여 재사용한다.

1. this.props.children 헤더와 검색창을 나란히 놓고 z-index로 헤더위에 검색창을 구현했지만, 멘토님께서 이렇게 작성하지 말라고 하셨다. 그래서 아래와 같이 헤더 밑에 검색창 컴포넌트를 넣으니, 화면에서 헤더위에 검색창이 아예 사라졌다. 원인은 헤더 컴포넌트에 this.props.children을 넣지 않아서 발생한 문제였다. 평소에 this. props.children을 알기만 했지, 실제 언제 사용하는지는 궁금했었는데. 감을 잡았고. 해결했다. //헤더.js {text} {children} 2. 작업중 갑자기 파일이 안열리고 눈앞에서 사라지는 현상이 발생함. vscode에서 무슨알림이 떴는데.. 클릭하니 아래와 같은 페이지로 이동했음 https://code.visualstudio..

1. CSS flex 프로젝트에서 메인 페이지를 담당한다. 식당리스트를 2줄씩 뿌리고 싶었다. 위와 같이 뿌리는데 분명히 flex인데.. 구글링해도 답을 찾지 못했지만.. 집에와서 경건한 마음으로 구글링을 하니 바로 나왔다. 더미데이터 이긴하지만, 부모태그와 그 밑에 감싸는 태그에 플랙스 컬럼, 플랙스 로우값을 줬었는데.. (나는 똥멍..) 집에와서 보니. flex-wrap 으로 해결. flex-wrap은 부모태그의 넓이에서 자식 컴포넌트가 하나더 못들어올 경우 다음 줄로 미루도록 해준다. 2. git 1. 팀플젝간 팀별 repo 개설시, 파일이 아예없는 경우와 있는경우가 다르다. 파일이 있는 경우, 아래와 같은 순서로 최초 한명이 폴더구조를 만든 후 first 커밋을 함. git remote add /..

원래는 2주차 커리큘럼인데.. 몇명은 진도를 뛰어넘은 바람에 1주차때 미니트위터를 만들었고, 3주차때 리액트로 기존에 만든 미니터를 다시 만들었다. 4주차에는 장고로 api를 구현하는 것이지만, 나는 프론트엔드 과정을 선택했 기에 따로 노드를 이용해서 로그인과 회원가입api를 만들었다. 1. 회원가입의 중요한 요소, 비밀번호 암호화 Node.JS의 암호화 모듈로는 여러가지가 있는데, 안전상 내장모듈은 crypto모듈을 이용했으며, pbkdf2버전의 업그레이드판인 pbkdf2Sync를 사용했다. 적용하기 전에 암호화에 대해서 살짝 알아보고 적용을 시켰다. 왜 사용하는지 모르고 사용하면 안되니깐. app.post('/signup', (req,res)=>{ console.log('signup post ok!'..

Node JS에는 인증 관련 모듈인 Passport가 있다. 통상 passport, passport-local, express-session, flash 를 한 셋트로 사용한다. npm install passport passport-local express-session connect-flash --save 1. passport는 인증관련된 모듈을 처리 2. passport-local 은 페이스북이나 트위터 같은 소셜 로그인 말고 일반 로그인을 처리한다. 3. session은 session 관련된 부분 처리해준다. 4. flash는 에러 메세지를 Redirect하는 과정에서 쉽게 전달해주는 모듈이다. 동작원리는 passport를 이용해서 인증처리를 실행하는 LocalStrategy를 작성하고, 여기서 작..

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at ServerResponse.setHeader (_http_outgoing.js:470:11) The error "Error: Can't set headers after they are sent." means that you're already in the Body or Finished state, but some function tried to set a header or statusCode. When you see this error, try to look for anything that tries to send a header after some ..

Error: ER_TRUNCATED_WRONG_VALUE_FOR_FIELD: Incorrect string value: '\xEC\x9D\xB4\xEA\xB1\xB4...' for column 'user_profile' at row 1 1. user_profile이라는 컬럼에서 문자열 값이 올바르지 않다는 내용. 2. 원인 : DB 테이블 생성시 속성에 UTF8에 대해서는 주지 않았고, 회원가입 간 프로필 내용을 한글로 적어서 발생함. 3. 해결 : 영어로 바꿔서 해결함, 또는 UTF8 속성을 줘도 됨.