찾다

집 >웹 프론트엔드 >JS 튜토리얼 >백엔드 개발자를 위한 실용적인 프론트엔드 가이드

백엔드 개발자를 위한 실용적인 프론트엔드 가이드

Patricia Arquette
Patricia Arquette원래의
2025-01-03 11:42:40401검색
  • 소개
  • 절대적인 기본
  • 클라이언트측 vs. 서버측
  • 구성품
  • 프런트엔드 라이브러리
  • 결론

소개

저는 백엔드 개발자입니다... 보통... 수학은 잘하지만 미학에는 서툴러요. 내가 만든 모든 디자인 시도는 항상 지루해 보이는 일반적인 쓰레기로 귀결되었습니다. 수십 가지 도구를 사용해 보았지만 최종 결과는 항상 Microsoft FrontPage 2003

에서 작성된 것처럼 보였습니다.

저도 그걸 볼 정도로 자의식이 강해서 포기했어요. 나는 당신에게 문서를 작성해 주겠지만, 당신이 나에게 준비된 $LaTeX$ 스타일 파일을 제공하는 경우에만 가능합니다. 블로그를 쓰겠지만 마크다운으로만 작성하고 시각적 매력에 대해서는 다른 사람에게 맡기세요. DevFest 프레젠테이션을 준비하겠습니다. 단, 주최자가 PowerPoint 템플릿을 제공하는 경우에만 가능합니다. 저는 버튼이든 로그인 폼이든 어떤 것도 디자인하려고 하지 않습니다.

그래도 삭발하고 백엔드 JSON API 안식처로 돌아갈 수는 없습니다. --- 여전히 애완동물 프로젝트를 위한 프런트엔드를 작성하고 내부용 대시보드를 구축해야 합니다. 하지만 수십 개의 프레임워크, 라이브러리, 철학으로 인해 프런트엔드 세계에 진입하려는 시도는 엄청나게 고통스럽습니다. 나는 지난 8년 동안 React, Angular, Node라는 말을 들어왔지만 실제로 그것들을 이해하려고 노력하기에는 너무 무서웠습니다. C나 Leetcode를 배우는 것이 이보다 더 쉬웠습니다.

그럼에도 불구하고 나는 그것을 배워야 했고 이제는 프로메테우스(이 이름을 가진 JS 프레임워크가 아직 없는지는 잘 모르겠습니다)가 되어 이 지식을 백엔드 사람들에게 전달하고 싶습니다. 개발자.

보너스로 어떤 프런트엔드 프레임워크를 선택할지 최종 권장 사항을 포함했습니다. 나 자신도 아주 오랫동안 의사결정 마비를 겪었고, 이는 당신이 그것을 극복하고 지나치게 생각하지 않고 일을 시작하는 데 도움이 될 것입니다.

절대 기본

프레임워크에 대해 논의하기 전에 우리가 동일한 입장에 있는지 확인하기 위해 절대 기본부터 시작하겠습니다. 원한다면 이 섹션을 건너뛸 수 있습니다.

최소한의 웹페이지

최소 웹페이지는 확장자가 .html인 텍스트 파일과 콘텐츠 태그로 구성됩니다.

<html>
    <div>Hello World!</div>
</html>

형식을 추가하려면 스타일 속성을 추가하세요.

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

그러나 안전상의 이유로 브라우저 콘솔에는 파일 시스템에 액세스할 수 없으며 JS를 사용하여 최소한 Python이나 Ruby와 같은 다른 스크립팅 언어의 기능을 달성할 수 있는 일부 다른 기능이 부족합니다. 따라서 컴퓨터에서 JS 코드를 실행하는 두 번째 방법이 있습니다. 바로 Node.js를 설치하는 것입니다. 이는 본질적으로 파일 읽기 및 쓰기와 같은 작업을 수행할 수 있는 JS 인터프리터입니다.

//$ node
//Welcome to Node.js v23.3.0.
//Type ".help" for more information.
> console.log('Creating a new directory');
> fs.mkdirSync('new_dir'); // access filesystem using fs

Node.js를 사용하면 웹 브라우저를 설치하지 않고도 서버나 Docker 컨테이너에서 JS 코드를 실행할 수 있습니다. 이것이 매우 유용하다는 것을 아래에서 살펴보겠습니다.

클래식 스택

위 섹션을 결합하면 기존 HTML CSS JS 설정을 사용하여 웹페이지를 만들 수 있습니다.

콘텐츠 자체, 스타일, 스크립트의 세 가지 섹션이 있는 단일 .html 파일로 결합할 수 있습니다.

<html>
    <div>Hello World!</div>
</html>

scripts.js

<html>
    <div>



<p>or if you have a lot of formatting, add id to your content and refer to it from <style> tag. The style is formatted using CSS language which looks like an HTML element followed by JSON related to it:<br>


<pre class="brush:php;toolbar:false"><html>
    <div>



<p>This will create static pages that do not change and do not react to any events. To add some interactivity, like checking if you left a form field empty or entered a valid email, you will need JavaScript.</p>

<h3>
  
  
  Running JavaScript
</h3>

<p>Before using any programming language you must first install it on your computer. For C/C++ you need to install a compiler like GCC or Clang, for Python you need to install a CPython interpreter.</p>

<p>To run JavaScript you only need a web browser --- all modern web browsers can run JS code. It is as simple as opening a web browser and going to pressing F12. This will open a JS console:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173587576253989.jpg" alt="A no-nonsense guide to frontend for backend developers" /></p>

<p>You can also create a text file with extension .html  and put a <script> tag on it, open this file in browser, and the outcome will be displayed if you press F12:<br>


<pre class="brush:php;toolbar:false"><!-- myfile.html -->
<html>
    <script>
        // write a JS code here
        console.log('Hello World');
    </script>
</html>

이 설정의 가장 큰 문제는 HTML 요소(예: