Enjoy Programming

https://developer.mozilla.org/ko/docs/Web/CSS/color_value - CSS: Cascading Style Sheets | MDN CSS 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다. developer.mozilla.org react연습을 하던중 잘 사용하지 않던 transparent 키워드를 사용했는데 이게 무엇인지 찾아보았다. 기본적으로 transparent라는 말은 투명도이다. color 속성에서 사용되며 기존에 필자는 거의 opacity를 사용했다. 또는 rgba(r,g,b,a)로 사용했는데 color에 transparent라는 키워드를 ..

앞서 글로벌 css작성도 했고 약간의 헤더 수정도 진행했다. 이제 header가 어떤 route에 있는지 확인 하는 방법을 강구해보자. 무슨말이냐~ 그냥 네비게이션에서 마우스 커서가 올라가면 어떤 곳에 올라가있고 어떤 곳을 클릭하게 될지 그냥 보여주는거다 이런식으로~ 아래쪽에 줄 것이기 때문에 border-bottom을 5px solid로 주고~ 색상을 주는데 li의 stylecomponent인 Item에 current={true}로 flag를 설정해주고 border-bottom의 색상값을 주는 곳에 함수를 작성해주는데 props.current가 true이면 지정한 색을주고 아니면 transparent로 투명하게 해준다 그리고 이를 하기 위해 react-router-dom에서 withRouter를 imp..

앞서 사용한 css방법은 local한 방법이다. 이번에는 해당 사이트의 전역 설정을 하는 global한 css를 해본다. 라이브러리 한개를 설치하는데 styled-reset이다 styled-reset은 style-component를 이용해서 css를 초기화해 0의 상태에서 시작하게 해준다. 먼저 npm install styled-reset으로 설치해주고 component폴더에 GlobalStyles.js를 만들어 줬다. 파일안에 createGlobalStyle function을 styled-components로부터 임포트 해주고 reset도 import해줬다ㅓ. 그리고 globalStyles라는 이름의 globalstyle 컴포넌트를 만들어주는데 위와 같이 createGlobalStyle함수 와 리터럴을..

간단하게 Cookie의 property에서 중요한 정보를 좀 짚고 넘어가자 그보다 먼저 express-session에 secret prop에 대해 알아본다. secret은 쿠키에 sign할때 사용하는 string이다. 쿠키에 sign? 이 말은 backend가 쿠키를 발행했다는 것을 보여주는 것이다. 나의 쿠키를 누군가 해킹해 나인척 하는 session hijack에서 보호하기 위해 secret string이 필요하다 이 string은 매우 길고 무작위이며 강력해야 한다. 이 강력한 string으로 쿠키를 sign하고 나의 backend가 만든 것임을 증명한다. . Domain . Domain은 해당 쿠키를 만든 backend가 누구인지 나타낸다. 그리고 쿠키는 해당 Domain에 있는 backend로만..

session을 이용해 데이터베이스에 session data를 저장하는 코드이다. resave, saveUninitialized가 있는데 이에 대해 좀 더 알아보자. 먼저 브라우저에서 쿠키값을 지워가며 refresh해주면 위 코드로는 지속적으로 mongoStore에 저장된다. 만약 로그인 할 유저가 아닌 bot이라던지 의미 없는 사용자가 거쳐가는 것만으로도 저장이 된다면 매우 불필요한 작업일 것이다. 그리고 브라우저에 접근한 사람이 많을 수록 비용도 거대해 질 것이다. 이를 해결하기 위해 모든 방문자에 대해 쿠키를 생성하지 않는 방법을 접근해보자. 모든 유저에게 주지 않고 로그인한 사용자에게만 쿠키를 생성한다. 먼저 resave와 saveUninitialize를 false로 바꿔주자. 그리고 db의 se..

기존 클론코딩시 password의 암호화시 hash와 salt기능을 passport-local-mongoose를 사용했다. 이번에는 블로피시 암호에 기반을둔 암호해시 함수인 bycript를 사용해 진행을 해보았는데. bycript에 대해 잠시 짚고 넘어가본다. bcrypt는 비밀번호 해시 함수로서 Blowfish라는 암호에 기반한다. bcrypt는 조정할 수 있는 해시 알고리즘을 써서 패스워드를 저장한다. bcrypt는 패스워드를 해싱할 때 내부적으로 랜덤한 salt를 생성하기 때문에 같은 문자열에 대해서 다른 인코드된 결과를 반환한다. but 공통된 점은 매번 길이가 60인 string을 만든다. bcrypt는 단반향 암호화를 위해 만들어진 해시 함수이다. sha256같은 기존 해시 함수들의 문제는 ..