Coder Social home page Coder Social logo

line-website-clone's Introduction

๐Ÿ“Œ 8์ฃผ์ฐจ ๊ณผ์ œ[Mission8]

ํ•„์ˆ˜ ๊ณผ์ œ

  • ๊ณผ์ œ ๊ธฐํ•œ
    • ๊ณผ์ œ ์ˆ˜ํ–‰ ๊ธฐ๊ฐ„ : 2023๋…„ 7์›” 17์ผ(์›”) ~ 2023๋…„ 7์›” 20์ผ(๋ชฉ)
    • ๋ฉ˜ํ‹ฐ ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„ : 2023๋…„ 7์›” 21์ผ(๊ธˆ) ~ 2023๋…„ 7์›” 24์ผ(์›”)
    • ๋ฉ˜ํ†  ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„ : 2023๋…„ 7์›” 21์ผ(๊ธˆ) ~ 2023๋…„ 7์›” 26์ผ(์ˆ˜)
    • ์ฝ”๋“œ ๋ฆฌ๋ทฐ ๋ฐ˜์˜ ๊ธฐ๊ฐ„ : 2023๋…„ 7์›” 27์ผ(๋ชฉ) ~ 2023๋…„ 7์›” 28์ผ(๊ธˆ)
  • ๋‚ด์šฉ (2๊ฐœ ์ค‘ ์„ ํƒ)
  1. ๋„ค์ด๋ฒ„ ๋ชจ๋ฐ”์ผ or ์œ ํŠœ๋ธŒ ๋ฉ”์ธ ํŽ˜์ด์ง€ ์ค‘ ํ•˜๋‚˜๋ฅผ ์„ ํƒํ•ด ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”.
  2. ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ ํƒํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”.
  • ๋ชจ๋“  CSS ๊ณผ์ œ๋Š” ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ๊ธ์–ด์˜ค์ง€ ์•Š๊ณ  ๋ณธ์ธ์ด ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ด…๋‹ˆ๋‹ค.

๐Ÿ’ก ๋„ค์ด๋ฒ„ ๋ชจ๋ฐ”์ผ or ์œ ํŠœ๋ธŒ ๋ฉ”์ธ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ํด๋ก 

๊ธฐ๋ณธ ์š”๊ตฌ์‚ฌํ•ญ

  • SCSS๋กœ ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•˜์„ธ์š”.
  • ์ž‘์„ฑ๋œ SCSS๋ฅผ CSS๋กœ ์ปดํŒŒ์ผํ•˜์„ธ์š”.
  • ์ œ์ถœ ํ”„๋กœ์ ํŠธ์— ํ™•์ธ ๊ฐ€๋Šฅํ•œ HTML, CSS, SCSS ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • @media๋ฅผ ํ™œ์šฉํ•ด ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์œผ๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ

  • JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ์ƒ๋žตํ•˜๊ณ  ์ด์œ ๋ฅผ ๋ช…์‹œํ•ด ๋ณด์„ธ์š”.(CSS๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ์ง€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ์–ด์š”)
  • JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ๊ตฌํ˜„ํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ๊ตฌํ˜„ํ•ด ๋ณด์„ธ์š”.
  • ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ CSS Flex์™€ Grid๋ฅผ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • SCSS ์ปดํŒŒ์ผ์„ ์œ„ํ•œ Webpack์ด๋‚˜ Parcel ๊ฐ™์€ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • BEM ๋ฐฉ๋ฒ•๋ก ์„ ๋„์ž…ํ•ด ๋ณด์„ธ์š”.

๐Ÿ’ก ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€) ๋ ˆ์ด์•„์›ƒ ํด๋ก 

  • ๋‚ด์šฉ
    • ํ‰์†Œ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ž์‹ ์˜ ์ˆ˜์ค€์— ๋งž๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์„ ํƒํ•˜์„ธ์š”.

๊ธฐ๋ณธ ์š”๊ตฌ์‚ฌํ•ญ

  • ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋„๋ก ์„ ํƒํ•œ ํด๋ก  ์‚ฌ์ดํŠธ์˜ URL ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”.
  • SCSS๋กœ ์Šคํƒ€์ผ์„ ์ž‘์„ฑํ•˜์„ธ์š”.
  • ์ž‘์„ฑ๋œ SCSS๋ฅผ CSS๋กœ ์ปดํŒŒ์ผํ•˜์„ธ์š”.
  • ์ œ์ถœ ํ”„๋กœ์ ํŠธ์— ํ™•์ธ ๊ฐ€๋Šฅํ•œ HTML, CSS, SCSS ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ

  • JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ์ƒ๋žตํ•˜๊ณ  ์ด์œ ๋ฅผ ๋ช…์‹œํ•ด ๋ณด์„ธ์š”.(CSS๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ์ง€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ์–ด์š”)
  • JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ๊ตฌํ˜„ํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ๊ตฌํ˜„ํ•ด ๋ณด์„ธ์š”.
  • ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ CSS Flex์™€ Grid๋ฅผ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • SCSS ์ปดํŒŒ์ผ์— Webpack์ด๋‚˜ Parcel ๊ฐ™์€ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ํ™œ์šฉํ•ด ๋ณด์„ธ์š”.
  • BEM ๋ฐฉ๋ฒ•๋ก ์„ ๋„์ž…ํ•ด ๋ณด์„ธ์š”.

์ด๋ฏธ์ง€ ์ถ”์ถœ ๋ฐฉ๋ฒ•

์‚ฌ์ดํŠธ ํด๋ก ์— ํ•„์š”ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•ด์„œ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ธ Image Downloader๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.

  1. ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ์ ‘์†
  2. Image Downloader ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰
  3. ๋‹ค์šด๋กœ๋“œ ์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ์„ ํƒ
  4. ์„œ๋ธŒ ํด๋” ์ด๋ฆ„(Save to subfolder) ๋ช…์‹œ
  5. ๋‹ค์šด๋กœ๋“œ!

line-website-clone's People

Contributors

hyeonjun-l avatar learn-programmers avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.