레이아웃 클론코딩 도전기_intro

html, css 수업을 열심히 듣고 있던 중에 두려운 단어를 듣게 되었으니,

강사님: "~까지 과제를 제출해주세요."
나: ?!

자유롭게 하는 방식이기는 하지만 과제라는 것은 매번 할 때마다 부담되는 것 같습니다... 첫 과제라서 더 그런것 같기도 하고요...

하지만, 중요한 것은 꺾이지 않는 마음이겠죠?
두려움이 있지만 마음을 다시 잡고 과제를 하면서 이 과정을 기록으로 남기면 나중에 저에게도 도움이 될 것 같아 작성해보려고 합니다.

과제

• 내용
  • 원하는 사이트(페이지)를 자유롭게 선택하고 해당 페이지의 레이아웃을 클론코딩
  • 평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택
• 필수 요구사항
  • 설명이 포함된 README.md 파일 제공
  • 결과와 비교할 수 있는 선택 사이트의 주소를 명시
  • 확인 가능한 HTML, CSS 파일 등이 모두 포함되어야 한다
  • 브라우저에서 정상적으로 출력되어야 한다
• 선택 요구사항
  • 시멘틱 태그를 최대한 활용
  • 최신의 CSS Flex 혹은 Grid 등을 활용
  • BEM 방법론 도입
  • JS는 자제, JS과제가 아니므로 구현해도 가볍게 구현
  • SCSS 등의 CSS 전처리 도구 도입
  • SCSS 컴파일에 Parcel과 같은 번들러를 활용

기술셋 선정

실제로 코드를 작성하기 이전에 설계를 먼저하고 작성하는 습관이 되면 좋을 것 같아서 기술셋을 먼저 선정해보려고 합니다.
시퀀스 다이어그램과 같은 것은 이 과제와는 어울리지 않는다고 생각되기 때문에 이후 기회가 될 경우 학습해보면서 적용해보고자 합니다.

html, css 중심의 레이아웃 과제이다보니 여러가지 기술들에 대해 비교해보고 선택하는 것은 무의미할 수 있겠지만 제 나름대로 생각해본 결과는 아래와 같습니다.

css 전처리: SCSS

비교항목	SASS	SCSS
가독성	△	○
호환성	X	○

• 가독성

  • SASS
    중첩이 들여쓰기로 구분되기 때문에 내용이 길어지지 않을 경우 깔끔하게 보여지기는 하지만, 내용이 길어질 경우에는 구분하기가 어려울 것 같습니다.
  • SCSS
    CSS처럼 { } (브라켓)을 사용하여 중첩이 구분되기 때문에 SASS보다는 내용을 보고 구분하기 쉬울 것 같습니다.

• 호환성
  CSS 전처리기이기 때문에, CSS와의 호환성을 기준으로 비교해보겠습니다.

  • SASS
    CSS문법으로 작성된 내용을 SASS에 사용할 경우, 들여쓰기로 구분되어지기 때문에 컴파일 되지 않습니다. 이런 이유로 CSS와의 호환성은 좋지 않다고 생각합니다.
  • SCSS
    CSS문법으로 작성된 내용을 SCSS에 사용해도 호환(typescript가 javascript의 superset인 것과 비슷하게 느껴지는 것 같습니다)이 되기 때문에 CSS와의 호환성은 좋다고 생각합니다.

• 결론
  CSS와 호환이 되는 SCSS를 사용하는 것이 좋을 것 같습니다.

번들러: Parcel

reference
https://velog.io/@subin1224/Parcel-vs-Rollup-vs-Webpack-%EB%B9%84%EA%B5%90

비교항목	Parcel	Rollup	Webpack
환경설정(configuration)	zero-config	entry, output, loaders, plugins 등을 설정하는 구성파일이 필요, 파일변환을 위해서는@svgr/rollup과 같은 라이브러리가 필요함	entry, output, loaders, plugins 등을 설정하는 구성파일이 필요, 파일변환을 위해서는 loader가 필요
devServer	devServer가 내장되있음	rollup-plugin-serve 제공, live-reload가 필요한 경우 rollup-plugin-livereload 필요함	webpack-dev-server 제공, live-reload 지원

• 환경설정

  • Parcel
    zero-configuration으로 별도의 환경설정없이 사용 가능
  • Rollup
    rollup.config.js 와 같이 별도의 환경설정이 필요하며, 경우에 따라 추가적으로 라이브러리를 활용하여 설정해줘야 함
  • Webpack
    rollup과 같이 별도의 환경설정 파일이 필요하며, polyfill을 지원하지 않기 때문에 필요한 경우 관련 설정이 필요합니다. 다양한 변환을 위해서는 css-loader, babel-loader와 같은 loader가 필요하고 관련 설정이 필요합니다.
    

  => Parcel > Rollup > Webpack

• devServer

  • Parcel
    devServer가 내장되어있고, 파일이 변경될 경우 다시 빌드합니다.
  • Rollup
    devServer가 필요할 경우 rollup-plugin-serve 라이브러리를 통해 사용가능하며, live-reload가 필요한 경우 rollup-plugin-livereload가 필요합니다.
  • Webpack
    webpack-dev-server를 제공하고, live-reload를 지원합니다.

  => Webpack > Parcel > Rollup

• 결론

  • 초기 환경설정과 학습비용(러닝커브)이 있지만 Webpack이 여러 부분에서 우수한 것 같습니다.
  • 안정적인 애플리케이션을 제공해야되는 실제 서비스 사이트 전체를 개발하는 것이라면 Weppack을 사용했을 것 같습니다.
  • 다만, 현재 과제(프로젝트)는 시간이 제한적이고 복잡한 설계가 필요한 것은 아니라고 생각되기 때문에 Parcel을 사용해서 빠르게 개발하는 것이 좋을 것 같습니다. Webpack이나 Rollup을 사용한다면 환경설정을 위해 별도의 시간을 소모해야 되기 때문입니다.

배포: netlify

• Vercel
  Vercel은 주로 Nextjs로 만든 사이트를 배포할 때 여러 이점을 얻을 수 있다고 생각합니다.

• Heroku
  Heroku의 경우 예전에는 무료여서 간단한 프로젝트에 많이 사용하는 추세인 것 같았지만, 최근에 유료 정책으로 변환되어서 이용하고 싶다는 생각이 들지 않는것 같습니다(AWS기반이고 Heroku자체 이익도 있어야 되기 때문에 AWS를 이용하는 것보다 비용이 더 비싼것 같습니다)

• Netlify
  비용을 지불하지 않더라도 간편하고 빠르게 사이트를 배포할 수 있는 것 같습니다.

• 결론
  현재 과제에서는 Vercel보다는 Netlify를 이용해 배포하는 것이 좋다고 생각합니다.

요약

Parcel을 사용해 SCSS를 컴파일하여 CSS를 생성하고, 다른 사람들이 확인 가능해야 되기 때문에 배포도 해야됩니다. 배포 사이트는 여러 사이트가 있지만, 레이아웃 위주의 클론코딩이기때문에 여러가지를 고려해야 될 필요가 없다고 생각이 됩니다. 그래서 배포는 netlify를 활용하여 진행해보려고 합니다.

클론코딩 사이트 선정

생각이 나는 사이트는 네이버, 슬랙, bugs 등의 여러가지가 있었지만 ... 저는 카카오 프렌즈의 캐릭터를 좋아하기 때문에(제 블로그 이름이 devrun_ryan 이네요?) 카카오 공식 홈페이지의 랜딩페이지를 클론코딩 해보려고 합니다. 그리고 카카오 공식 홈페이지에서는 position: sticky 를 사용하는 것 같아서 관련한 css도 학습이 될 것 같습니다.

앞으로 진행하면서 내용을 더 남길 수 있도록 노력하겠습니다.