[Project] myPage - BEM 적용 및 리팩토링

➕ BEM 적용 및 리팩토링 (21.1.13)

myPage 프로젝트에 BEM을 적용하고 리팩토링하는 과정을 기록한다.

✔ Change 1: BEM 적용

문제점

제멋대로인 class와 id 값들때문에 코드의 가독성이 현저하게 떨어졌다.

해결방안

CSS를 직관적으로 네이밍해주는 BEM을 적용하여 코드의 가독성을 높였다.

<div class="container">
  <div class="top">
  <div class="left">
    <a class="left__menu">
    <a class="left__menu">
    ...
  <div class="middle">
    <a class="middle__a">
    <a class="middle__a">
    ...
  <div class="right">
    <img class="right__icon--instagram">
    <img class="right__icon--velog">
    ...
  <div class="bottom">

문제점 2

• a 태그 속에 있는 값을 가져오기 위한 방법이 필요했다.
• 시도 1: text() 이용
  JQuery를 이용하면 text()라는 메소드로 a 태그 속 문자열을 가져오는 것이 가능했다. 하지만 나는 아직 JQuery를 사용하여 구현한 것이 아니므로 해당 메소드는 사용이 불가능했다.

해결방안 2

• innerText라는 값을 통해 불러올 수 있었다.

while(i < left__menus.length){
  left__menus[i].innerText
  ...

문제점 3

• <input type="file>"을 꾸며줄 수 있는 방법이 필요했다.

해결방안 3

• <label> 태그로 감싸주고, <input>을 display: none으로 설정. <label>을 꾸밈으로써 해결
• 하지만 어떤 파일이 올라갔는지 볼 수 없는 단점이 존재 -> JQuery 스크립트로 구현 가능하지만 여기서는 구현 X

//html
<label class="middle__file">file
  <input type="file" name="file" accept="image/*">
</label>
//css
.middle__file:hover{
  font-weight: 700;
  //hover시 커서를 pointer로 변경
  cursor: pointer;
}

✔ Change 2: 리팩토링

문제점

• main.js에 너무 많은 코드들로 가독성이 현저히 떨어졌다

해결방안

• main.js의 코드들을 각각 db.js, theme.js, topic.js로 분리함으로써 main.js의 가독성을 높였다. 그 과정에서 기존에 중복되던 코드를 제거하고 반복문을 통해 재사용성 또한 높였다.

//main.js
if(pathname === '/'){
    if(folder === undefined){
      topic.home(request, response);
    } else{
      topic.page(request, response);
    }
  } else if(pathname === '/style'){
    topic.style(request, response);
  } else if(pathname === '/create'){
    topic.create(request, response);
  } else if(pathname === '/create_process'){
    topic.create_process(request, response);
  } else if(pathname === '/update'){
    topic.update(request, response);
  } else if(pathname === '/update_process'){
    topic.update_process(request, response);
  } else if(pathname === '/delete_process'){
    topic.delete_process(request, response);
  } else{
    response.writeHead(404);
    response.end('Not Found');
  }
...
//db.js
let mysql = require('mysql');
let db = mysql.createConnection({
  host    : '',
  user    : '',
  password: '',
  database: '',
  charset : ''
});
db.connect();
module.exports = db;
//theme.js
function theme(){
  let theme = $(".middle__theme").getAttribute("value");
  if(theme == 'wave'){
    let newTheme = 'normal'
    createTheme(newTheme, '#d9d9d9', 'black');
  } else{
    let newTheme = 'wave'
    createTheme(newTheme, '#3b5998', '#d9d9d9');
  }
}
...
//topic.js
exports.home = function(request, response){
  let _url = request.url;
  let queryData = url.parse(_url, true).query;
  let theme = queryData.theme;
  db.query('select * from list', function (err, tempMenus){
    if(err){throw err;}
    let menus = template.getMenus(tempMenus, theme);
    html = template.home(menus, theme);
    response.writeHead(200);
    response.end(html);
  });
}
...

✔ 최종 변경사항

• HTML BEM 사용하여 정리
• JS 파일 분할을 통한 리팩토링

✔ 추가할 기능

• 페이지 구현
• 로그인 구현
• 반응형 웹페이지 디벨롭
• JQuery 사용방법

✔ Finished (21.1.13)

현재까지 작업한 myPage의 구성을 깔끔하게 정리했다. 아직 부족함이 많겠지만 깔끔해진 코드를 보니 내 마음도 깔끔해지는 것 같다. 이제 웹페이지 기능구현 및 디자인 쪽으로 더 공부를 해보아야겠다. JQuery 사용법도 배워보고, 도중에 필요하다고 생각될 때 페이지와 로그인 또한 구현해보려고 한다.