[프로그래머스] 웹 VSCode 사용해보기 - 404 머쓱 참여, CSS 안먹는 것 고치기.

오늘은 개발자의 일상을 포스팅해 보도록 하겠습니다.

평소에 프로그래머스를 이용하여 공부하고 있는데 재밌는 서비스와 챌린지가 있어 소개해드리겠습니다.

 

1. 웹 VSCode와 404 머쓱 챌린지!

 

평소에 집에서 공부할 때 VSCode를 사용합니다. 이 VSCode를 웹에서 사용할 수 있는 기능을 프로그래머스에서 오픈했다고 하여 웹 VSCode를 경험해볼 겸 챌린지에 참여했습니다.

 

챌린지 이름은 404 머쓱; Not Found Chanllenge입니다.

 

우선 프로그래머스에 접속해서 챌린지에 참여하니 웹 VSCode를 만나볼 수 있었습니다.

 

웹 VSCode라고 하는데 윈도우에서 보는 VSCode와 너무 똑같았습니다. 

 

과제는 머쓱이를 이용해서 404 Not Found 페이지를 꾸미는 일이었습니다.

머쓱이가 누구냐 하면 프로그래머스의 마스코트입니다.

 

마스코트가 약간은 단순하다는 생각이 드는데... 그래도 이용해서 한번 404 페이지를 만들어 보겠습니다.

2. 챌린지 참여!! - 404 페이지 꾸미기

상단에 실행 버튼이 있는데 해당 버튼을 실행하면 서버가 실행되겠지 했는데 안되더라고요.

왜 안되는지 README.md를 읽어보니 먼저 수행해주어야 하는 명령어들이 있었습니다.

 

- /build : `Heroku buildpack`을 이용해 코드를 Build
- /migrate : `Procfile`의 migrate 프로세스 유형 실행
- /seed : `Procfile`의 seed 프로세스 유형 실행
- /runserver : `Procfile`의 web 프로세스 유형 실행
- /start : 위 4 단계 모두를 순차적으로 실행

순차적으로 수행하니 정상적으로 서버 실행이 되더라고요.

상단에 실행 버튼을 누르면 페이지가 표시됩니다.

 

위 페이지가 뜨게 되는데.. 흠 이 페이지를 꾸며야 하나 봅니다.

그렇다면 폴더 구조를 보고 어떤 부분을 수정해야 할지 보겠습니다.

 

폴더 구조를 보니 기본 Express의 폴더 구조였습니다.

Express의 pug를 사용하여 페이지를 표시 한걸 볼 수 있네요.

 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'programmers 과제 테스트 템플릿 - Node.js' });
});

module.exports = router;

router를 확인하니 index.pug를 view 페이지로 사용하고 있네요.

과제는 index.pug 파일을 수정하면 되겠죠..

 

자 이제 시작..

 

pug 파일에 태그도 넣고 css 파일도 로딩하고.. 이것저것 하고 수행했는데..

계속 css 파일이 안 먹는 것 같은 거예요..

 

뭐지 하고 개발자 도구로 이것저것 봤는데...

404 Not Found 라뇨..

몬가 이상해서 봤더니... URL paht이 잘못되었네요..

그래서 layout.pug를 아래와 같이 수정합니다.

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='web/stylesheets/style.css')
    link(rel='stylesheet', href='web/stylesheets/index.css')
  body
    block content

변경하고 실행하니... 이제 되겠지 했는데

이번엔 자동으로 뒤에 web으로 붙네요?? 뭐지... 하고 다시 똑같이 변경해줍니다.

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='stylesheets/style.css')
    link(rel='stylesheet', href='stylesheets/index.css')
  body
    block content

그리고 재시작! 이제 되겠지? 했는데 되네요.. 흠.. 뭐가 문제였을까.. 미궁 속에 빠집니다.. ㅠㅠ

 

자 다시 꾸미기 시작..

요렇게 페이지를 간단히 고치고 최종 제출!!

VSCode를 웹으로 한다는 생각을 해보지 않았는데 간단한 프로젝트를 진행할 때는 상당히 좋을 것 같네요.

공부용으로도 딱이고요.

 

github와 연동도 되니 좋은 것 같습니다.

 

오늘의 공부는 여기까지!

 

혹시 참여해보고 싶으신분은 아래 링크를 통해 참여해보세요

https://programmers.co.kr/events/vs_code?utm_campaign=vs_code&utm_medium=share_vs_code&utm_source=programmers

웹 과제 테스트 신규 기능 오픈 베타 이벤트 | 프로그래머스