익명의 개발노트

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-..

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!'..

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 ..