날씬함은 너의 인터넷 개발 능력을 연마하는 좋은 방법이다

어이!
많은 사이트들이 디자인을 따르는 동시에 건축 현장을 실천하는 데 도움을 주고 서로 다른 방법을 찾아 발생하는 흔한 문제를 해결하는데 몇 가지 옵션을 선택할 수 있다.
많은 프런트엔드 개발이나 스택 개발에 들어간 사람들은 HTML, CSS를 배우는 일반적인 노선에 들어서서 자바스크립트를 배우기 시작한다.
그러나 실천 과정에서 생산급 프로젝트나 고객을 위해 일할 때 이런 도구를 사용하는 사람은 드물다.
대부분의 경우 프로젝트는 전단 프레임워크 중 하나(즉 React, Vue, Angular)를 사용하여 구축된 것이다. 이런 상황에서 이러한 기초 지식을 이해하는 것은 프로젝트가 필요로 하는 어떤 방식으로든 효율을 높일 수 있도록 하는 것이 좋다.
따라서 만약에 누군가가 웹 개발 기술을 연습하고 UI를 더욱 잘 구축하고 호응성 디자인을 익히고 있다면 성숙한 프레임워크를 사용하는 것은 이익보다 폐단이 크다.
HTML 및 CSS를 사용하여 설계 및 실행하는 방법에 대해 자세히 알아보는 것이 목표입니다.오직 완성된 후에만 상호작용이 발생할 수 있다.
Vue나 React를 사용하는 사람이 있으면 순수 HTML은 영원히 그대로 사용되지 않을 뿐만 아니라 대부분의 경우에도 순수 CSS를 사용하지 않을 것이다.Angular의 예에서 너는 이 두 가지를 가질 수 있지만, 그에 따른 것은 타자 스크립트이다. 이것은 별도의 학습이 필요하다.
특정 프레임워크의 모든 부분이 어떻게 조합되는지 이해하면 웹 개발(즉 실제 사이트 구축)에 필요한 실제 작업을 더 잘 완성할 수 없을 뿐이다.
그럼에도 불구하고 극단을 걷고 싶지 않다. 어떤 틀도 사용하지 않거나 기초 작업 원리를 모르는 상황에서 틀에 뛰어들고 싶지 않다.사용 편의성과 실제 사용 사이에서 중간점을 찾으려고 할 수도 있습니다.
어떤 것들은 웹 개발자의 필요한 기능을 연습하는 데 방해가 되지 않을 뿐만 아니라, 제품 코드의 외관도 유지한다.
그렇다면 당신의 웹 개발 기술을 연습하고 개발자의 생태계를 접하며 더 많은'진실한 세계'코드에 들어가 주방과 물탱크 구조의 디테일에 빠지지 않도록 하는 좋은 방법은 무엇일까요?

슬림하게 들어갔어요.

Svelte는 간단한 JS, CSS, Enhanced HTML을 제공합니다.물론, 만약 당신이 원한다면, 당신은 프로세서를 사용할 수 있다. (일단 그것을 어떻게 사용하는지 알게 되면)
다음 명령을 실행하면 날씬한 새 항목을 빠르게 시작할 수 있습니다.

npx degit sveltejs/template example-project

그리고 cd 프로젝트에 들어가서 모든 물건을 설치하고 프로젝트를 실행합니다.

cd example-project
npm install
npm run dev

현재, 항목이localhost에서 실행되는 것을 볼 수 있으며, 서버를 새로 고칠 필요가 없이 원본 코드를 편집하여 변경 사항을 볼 수 있습니다.
멋있죠?
더 좋은 것은 아이디어를 테스트하고 있거나 어떤 것이 어떤 모습일지 보고 싶을 뿐, 온라인 리플을 사용해서 로컬에서 어떤 것을 설정할 필요가 없다면, 템플릿을 신속하게 만들 수 있다는 것이다.
날씬한지 확인 this (much more interesting) "hello world"
그것은 마치 코드 펜처럼 당신이 하고 있는 일의 결과를 보여 주지만, 모든 가벼운 기능이 작동하고 있다.
잠시 후, 모든 코드를 하나의 항목으로 다운로드하고 로컬에서 실행할 수 있습니다.
그래, 지금 너는 아마도 생각할 것이다. "이것은 매우 멋있지만, 나는 이것이 내가 UI를 더욱 잘 구축하는 데 도움이 될 것이라고 생각하지 않는다."
이것은 공평한 관점이지만, 단지 시작일 뿐이다.
일반적인 사이트를 만들 때 일반적인 HTML과 CSS를 사용해서 이런 것처럼 보이는 것을 만들 수 있습니다.

하지만 너도 같은 코드를 작은 프로그램에 넣고 result would be the same...
다른 점은'날씬함'을 사용하면 몇 줄의 코드로 멋진 기능을 추가할 수 있다는 것이다.
예: this improved version of the site
일단 더 많은 기능을 당신의 사이트에 통합시키기 시작하면 정적 로그인 페이지에서 인터랙티브 사이트로 가는 것이 더욱 쉽고, 다른 프레임워크를 사용해서 너무 많은 작업을 할 필요가 없다.
이것은 단순히 '쿨 애니메이션' 을 늘리기 위한 것이 아니다.너는 사이트에 동적 햄버거 메뉴, 동적 영웅, 입력 검증 등 유용한 기능을 추가할 수 있다.
the Svelte site의 "예"를 살펴보고 이 분야에 대한 생각을 더 많이 알 수 있습니다.

결론

앞에서 말한 바와 같이learning Svelte는 다른 가장 유행하는 전단 프레임이 가지고 있는 가파른 학습 곡선이 없다.HTML, CSS, vanilla JS를 알고 있다면, Svelte를 개발할 때 큰 변화를 느끼지 않아도 된다.
그것에 대해 더 익숙해진 후에 Svelte가 중복된 내용을 간소화하는 방식과 다른 구조(즉 상태, 반응성, 저장...)에서 파악하기 어려운 개념을 처리하는 방식을 더욱 깊이 이해할 수 있다.
이것은 웹 개발에 처음 종사하는 사람들에게 특히 유용하다. 제목에서 언급한 바와 같이 그들은 단순성과'진실한 세계'코드의 결합을 통해'자신의 기술을 연마하고 싶다'는 것이다. 이런 코드는 앞으로 생산에 사용할 수 있는 코드가 될 수 있기를 바란다.
그것이 어떻게 진행되는지 볼 기회를 주어라.날씬한 것만 배우고 다른 틀은 소홀히 해야 한다는 것은 아니다.다른 사람이 문제를 처리하는 방식 중에는 항상 새로운 것들을 배워야 한다.
여느 때와 마찬가지로 본문을 읽어 주셔서 감사합니다.당신의 시간과 관심에 감사 드립니다.우리는 다음 문장에서 다시 볼 것이다.안녕히 계세요!
사진 작성자Ferenc Almasi가 Unsplash