2020-06-23 TIL

# CSS 

 

현 직장의 프로젝트가 점점 커지면서, 기존 CSS 규칙이 모호한 게 문제가 되기 시작했다. 

방법론이 정해져있지 않고, 네이밍 규칙은 단순히 하이픈 2개 이상 사용하지 않는 것으로 되어있다. 

 

입사 후에는 신입인지라, 이게 문제가 될 것이라 생각을 하지 못 했는데, 

CSS를 같이 계속 다루다 보니, 파일 용량도 커지고, 파일 수는 늘어나고, 규칙은 엄격하지 못하니

중복되는 네이밍도 생기고, 무엇보다 가독성이 굉장히 떨어졌다. 

 

그래서 CSS 규칙 및 구조 개편 의견을 제안했는데, 회사에서 해당 내용에 공감해주고 일정까지 

따로 마련해주셔서 이번에 작업할 수 있게 되었다. 

 

CSS 방법론은 BEM 을 사용하려고 하고, 그 외 다른 규칙은

같이 근무하는 퍼블리셔 분과 상의하여 맞추려고 하고 있다. 

 

현재 CSS 구조는 header-pc-title 이런 식으로 되어 있는데, BEM 방법론과 비슷하면서, 

기존 코드를 많이 바꾸지 않고 가독성까지 향상 시킬 수 있어 선택한 방법론이다. 

 

명칭은 Block Element Modifier 로, Block__Element--modifier 형식으로 사용한다. 

평소에 CSS 방법론은 잘 몰랐는데, 구조 개편을 하려고 많이 찾아보니 개인적으로 가독성이 

좋은 것을 선호하다 보니 BEM 방법론이 가장 마음에 들었다. 

 

#Node.JS 

 

Facebook 연동을 구현했다. 

 

https://developers.facebook.com/?no_redirect=1

 

페이스북 개발자 페이지에서 먼저 app을 생성해주고, env 파일에 id와 secret을 저장한다. 

 

import facebookStrategy from "passport-facebook";

passport.use(
  new facebookStrategy(
    {
      clientID: process.env.FB_ID,
      clientSecret: process.env.FB_SECRET,
      callbackURL: `http://localhost:4000${routes.facebookCallback}`,
      profileFields: ["id", "displayName", "photos", "email"],
      scope: ["public_profile", "email"]      
    },
    facebookLoginCallback
  )
);

export const facebookLoginCallback = (
  accessToken,
  refreshToken,
  profile,
  cb
) => {
  console.log(accessToken, refreshToken, profile, cb);
};

http://www.passportjs.org/packages/passport-facebook/

 

강의와 문서를 참고하였고, 오늘은 정보를 console.log로 찍어보는 것까지 구현했다.