찾다
웹 프론트엔드JS 튜토리얼나만의 유형: JavaScript 및 TypeScript에서 오른쪽으로 스와이프

Just Your Type: Swiping Right On JavaScript and TypeScript

목차:

  • 소개
  • 스케치
    • 유형 검사
    • 기능
    • 팀워크
  • 배운 교훈
  • 다음 단계
  • 리소스

소개

웹 개발은 때로는 코딩 세계의 황량한 서부처럼 느껴질 수 있습니다. 작업할 수 있는 프레임워크와 라이브러리가 너무 많아서 종종 부담스러울 수 있습니다. 만약 당신이 그렇게 느낀다면, 나는 당신이 혼자가 아니라는 것을 말하려고 왔습니다. 견습 과정을 시작했을 때 기술 스택에 어떤 기술을 추가하고 싶은지 막막했습니다. 나는 프론트 엔드 개발을 좋아한다는 것을 알았지만 이 분야에서 내 기술을 연마하기 위해 어떤 길을 택해야 할지 몰랐습니다. 그래서 저는 뭔가 확신이 없을 때 할 수 있는 최선의 방법을 선택했습니다. 경험이 더 많은 사람에게 물어보는 것입니다. 저는 멘토와 상담했고 그는 TypeScript가 많은 회사의 개발 팀에서 빠르게 귀중한 자산이 되었다고 말했습니다. 좀 더 조사해본 결과 TypeScript가 매우 매력적이라는 것을 알았습니다. 저는 세부적인 사람이고 TypeScript의 세분성은 재미있고 새로운 코딩 방법을 제공했습니다.
초기의 불확실성은 제가 작은 스케치를 쓰도록 영감을 주었습니다. 나의 딜레마는 늦은 밤에 아무 생각 없이 시청했을 수도 있고 아닐 수도 있는 데이트 쇼를 떠올리게 했고, 나는 그것을 스케치의 배경으로 사용하기로 결정했습니다. 더 이상 고민하지 말고 다음 소식을 전해드리겠습니다.

풀스택 유혹

[FUNKY INTRO MUSIC PLAYS]

LUKE L. HOST: "풀 스택 플러팅"에 다시 오신 것을 환영합니다! Luke L. 자신의 진정한 사랑을 찾고 있는 다른 개발자와 함께 다시 돌아왔습니다. 우리 스타가 제작에 마음을 쏟을 수 있을까요? 아니면 싱글로 롤백되나요? 우리 프로그래머를 알아보고 만나보겠습니다.

[프로그래머 입장]

NICOLE: 안녕하세요 Luke, 여기 와서 반가워요.

HOST: 만나서 반가워요! 자, 당신의 이름은 무엇이며, 이곳의 적은 생산량에서 무엇을 얻고자 하시나요?

NICOLE: 저는 Nicole입니다. 영구 기술 스택 순환에 어떤 언어를 추가해야 할지 고민 중입니다. 오늘은 구혼자 두 명을 데려왔습니다. 나의 오랜 불꽃인 JavaScript와 나의 갑작스런 구혼자인 TypeScript.

HOST: 매울 것 같아요! 이제 우리 두 언어를 만나보는 건 어떨까요?

[언어 입력]

JAVASCRIPT: 안녕하세요. 저는 자바스크립트입니다.

TYPESCRIPT: 저는 TypeScript입니다.

HOST: 두 분 만나서 반가워요! 좋아요, Nicole, 바로 시작하겠습니다. JavaScript, 당신은 한동안 주변에 있었습니다. Nicole의 기술 스택에 있어 귀하가 최선의 선택이 된 이유는 무엇입니까?

JAVASCRIPT: 음, Luke, 저는 수십 년 동안 웹의 중추 역할을 해왔습니다. 저는 믿을만하고 유연하며 제 구문은 익히기가 매우 쉽습니다. 게다가 저는 거대한 커뮤니티를 갖고 있습니다. Stack Overflow는 제게 있어서 가장 좋은 친구가 될 것입니다.

HOST: 인상적이군요. 그런데 짐이 좀… 있다고 들었습니다. 아마도 레거시 품종일까요?

JAVASCRIPT: 안녕하세요, 저는 현대화 중입니다! ES6가 출시되어 그 어느 때보다 더 발전했습니다.

호스트: 참고했습니다. 자, TypeScript가 당신을 구혼자로 돋보이게 하는 이유는 무엇인가요?

TYPESCRIPT: Luke, 저는 JavaScript의 장점을 모두 활용하고 약간의 구조를 추가했습니다. 나는 JavaScript와 비슷하지만… 나는 오류를 방지하고 디버깅을 쉽게 만드는 데 도움을 줍니다. Nicole과 같은 개발자는 더욱 안전하고 안정적인 서비스를 받을 자격이 있습니다. 나같은 놈.

HOST: 안전하고 안정적입니다. 프로그래머의 귀에 음악이 들려옵니다. 하지만 일부 사람들은 당신이 약간… 유지 관리 수준이 높다고 말합니다.

TYPESCRIPT: 전혀 그렇지 않습니다, Luke. 저를 알게 되시면 저는 굉장히 접근하기 쉬운 사람이에요. Nicole이 JavaScript를 알고 있다면 나에게로 전환하는 것은 매우 쉬운 일이 될 것입니다.

HOST: Nicole, 당신은 결정을 내려야 합니다. JavaScript는 향수와 단순성을 제공하지만 TypeScript는 우리 모두가 사랑과 코드에서 갈망하는 안전망을 제공합니다. 커밋할 준비가 되셨습니까, 아니면 몇 가지 기능 데모가 더 필요하십니까?

니콜: 몇 가지 테스트를 더 해봐야 할 것 같아요…

HOST: 자, 코드 호환성에 대해 자세히 알아보겠습니다! JavaScript, TypeScript, Nicole의 관심을 끌었지만 이제 최고의 기능을 보여줄 시간입니다. 자바스크립트, 시작해 보는 건 어떨까요?

JAVASCRIPT: 반갑습니다! 내 경우에는 단순하게 유지하는 것을 좋아합니다. 변수를 선언하는 방법은 다음과 같습니다.

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

유형도 없고 장식도 없습니다. 필터링되지 않은 순수 코드입니다. 캐주얼하고 간편합니다.

HOST: 수월하지만 누군가는 조금… 너무 캐주얼하다고 말할 수도 있습니다. TypeScript, 당신은 어떻습니까?

TYPESCRIPT: Luke, 저는 인간관계가 좀 명확한 걸 좋아해요. 시청하세요:

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

보셨나요? Nicole이 어떤 종류의 데이터를 사용하는지에 대해 혼동이 없는지 확인합니다. 강력한 의사소통이 핵심입니다.

NICOLE: 흠, 저는 명확성을 정말 좋아하는데... JavaScript, 이렇게 하려고 하면 어떻게 될까요?

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

JAVASCRIPT: 보세요, 저는 유연해요! favoriteFood는 숫자가 될 수 없다고 누가 말했습니까? 나는 흐름에 따라가는 것에 전념합니다.

TYPESCRIPT: 그게 제가 하는 일이에요, Nicole. 코드를 실행하기도 전에 그 실수를 발견했을 것입니다.

// Error: Type 'number' is not assignable to type 'string'.

보셨나요? 언제나 여러분의 편이 되어 드립니다.

HOST: 자, 이제 기능에 대해 이야기해 보겠습니다. 자바스크립트, 어떻게 처리하나요?

JAVASCRIPT: 저는 일을 끝없이 진행하는 것을 좋아합니다. Nicole이 두 숫자를 더하는 함수를 작성하려고 한다고 가정해 보겠습니다.

let favoriteFood = "sushi"; 
console.log(favoriteFood); // sushi

니콜이 거기에 끈을 넣어도 별 문제 없습니다. 제가 해드리겠습니다!

TYPESCRIPT: 제대로 작동하게 하시겠습니까? 그것은 정확히 지속 가능한 기반이 아닙니다. Nicole, 저는 기대치를 미리 설정하는 것이 중요하다고 믿습니다.

let favoriteFood: string = "sushi";  
console.log(favoriteFood); // sushi

저는 추측할 필요가 없습니다. 입력과 출력이 매우 명확합니다.

NICOLE: 와, 두 분 접근 방식이 정말 다르시네요. JavaScript, 당신은 적응력이 뛰어납니다… 하지만 TypeScript, 당신은 나에게 필요한지 몰랐던 안전망과 같습니다!

HOST: 우리 사랑하는 개발자가 고려해야 할 것이 많은 것 같네요! 마지막 질문으로 넘어가겠습니다. 팀워크에 대한 귀하의 접근 방식은 무엇입니까? 풀스택 앱처럼 크고 복잡한 관계에서는 어떻게 작업하나요?

JAVASCRIPT: 팀워크? 나는 협력의 혼란 속에서도 성장합니다. 나는 어디에서나 누구와도 통합할 수 있습니다. 비동기 작업을 처리하기 위해 Promise를 사용하는 방법은 다음과 같습니다.

favoriteFood = 42;
console.log(favoriteFood); // 42... wait, what?

저는 솔직하고 적응력이 좋습니다.

TYPESCRIPT: 물론이죠. 하지만 솔직히 말해서 JavaScript는 큰 팀에서는 약간 엉성해질 수 있습니다. 나는 관계에 구조와 책임을 부여합니다:

// Error: Type 'number' is not assignable to type 'string'.

보셨나요? 나는 모든 사람이 무엇을 기대해야 할지 정확히 알 수 있도록 보장합니다. 놀랄 것도 없고 불필요한 드라마도 없습니다.

HOST: 니콜, 이 두 가지로 손이 꽉 찼네요. JavaScript의 모험 정신을 원하십니까, 아니면 TypeScript의 신뢰할 수 있는 구조를 원하십니까? 결정은 여러분에게 맡기겠습니다. 다음번 Full Stack Flirting 시간까지!

[FUNKY OUTRO MUSIC PLAYS]


탐구를 통해 저는 다른 사람들의 학습을 촉진하는 데 도움이 될 수 있는 TypeScript에 대한 몇 가지 주요 교훈을 배웠습니다.

  • JavaScript 기초부터 시작: JavaScript를 먼저 이해하면 TypeScript로 훨씬 쉽게 전환할 수 있습니다.
  • TypeScript는 대체가 아닌 JavaScript에 추가됩니다. TypeScript를 웹 개발 도구 상자의 또 다른 도구로 생각하세요.
  • 확장성을 염두에 두세요: 대규모 프로젝트나 팀으로 작업할 때 TypeScript의 구조는 작은 문제를 방지함으로써 빛을 발합니다. 큰 문제가 되지 않도록.

이 스케치의 끝에서 알 수 있듯이 저는 여전히 TypeScript를 사용할지, 아니면 JavaScript를 기본 코딩 언어로 사용할지 확신하지 못합니다. 둘 다 장점과 단점을 제공합니다. TypeScript를 접하는 것이 흥미로웠다고 말하고 싶습니다. TypeScript의 고유한 기능을 적용하는 데 익숙해지기 위해 소규모 프로젝트를 구축하면서 계속해서 TypeScript를 학습하겠습니다. 이 프로젝트를 만들면서 Vite나 React와 같이 이미 익숙한 기술을 구현해 보겠습니다. 또한 Next.js 문서에 대해 더 자세히 알아보고 이를 최대한 활용하는 방법을 배울 계획입니다.

TypeScript를 직접 사용하고 싶다면 다음 리소스를 참조하세요.

  • FreeCodeCamp에서 TypeScript 가이드 알아보기
  • Mosh로 프로그래밍하여 초보자를 위한 TypeScript
  • Next.js 문서
  • Lee Robinson의 Next.js 마스터하기

위 내용은 나만의 유형: JavaScript 및 TypeScript에서 오른쪽으로 스와이프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript의 기원 : 구현 언어 탐색JavaScript의 기원 : 구현 언어 탐색Apr 29, 2025 am 12:51 AM

JavaScript는 1995 년에 시작하여 Brandon Ike에 의해 만들어졌으며 언어를 C로 실현했습니다. 1.C Language는 JavaScript의 고성능 및 시스템 수준 프로그래밍 기능을 제공합니다. 2. JavaScript의 메모리 관리 및 성능 최적화는 C 언어에 의존합니다. 3. C 언어의 크로스 플랫폼 기능은 자바 스크립트가 다른 운영 체제에서 효율적으로 실행하는 데 도움이됩니다.

무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?무대 뒤에서 : 어떤 언어의 힘이 자바 스크립트입니까?Apr 28, 2025 am 12:01 AM

JavaScript는 브라우저 및 Node.js 환경에서 실행되며 JavaScript 엔진을 사용하여 코드를 구문 분석하고 실행합니다. 1) 구문 분석 단계에서 초록 구문 트리 (AST)를 생성합니다. 2) 컴파일 단계에서 AST를 바이트 코드 또는 기계 코드로 변환합니다. 3) 실행 단계에서 컴파일 된 코드를 실행하십시오.

파이썬과 자바 스크립트의 미래 : 트렌드와 예측파이썬과 자바 스크립트의 미래 : 트렌드와 예측Apr 27, 2025 am 12:21 AM

Python 및 JavaScript의 미래 추세에는 다음이 포함됩니다. 1. Python은 과학 컴퓨팅 분야에서의 위치를 ​​통합하고 AI, 2. JavaScript는 웹 기술의 개발을 촉진하고, 3. 교차 플랫폼 개발이 핫한 주제가되고 4. 성능 최적화가 중점을 둘 것입니다. 둘 다 해당 분야에서 응용 프로그램 시나리오를 계속 확장하고 성능이 더 많은 혁신을 일으킬 것입니다.

Python vs. JavaScript : 개발 환경 및 도구Python vs. JavaScript : 개발 환경 및 도구Apr 26, 2025 am 12:09 AM

개발 환경에서 Python과 JavaScript의 선택이 모두 중요합니다. 1) Python의 개발 환경에는 Pycharm, Jupyternotebook 및 Anaconda가 포함되어 있으며 데이터 과학 및 빠른 프로토 타이핑에 적합합니다. 2) JavaScript의 개발 환경에는 Node.js, VScode 및 Webpack이 포함되어 있으며 프론트 엔드 및 백엔드 개발에 적합합니다. 프로젝트 요구에 따라 올바른 도구를 선택하면 개발 효율성과 프로젝트 성공률이 향상 될 수 있습니다.

JavaScript가 C로 작성 되었습니까? 증거를 검토합니다JavaScript가 C로 작성 되었습니까? 증거를 검토합니다Apr 25, 2025 am 12:15 AM

예, JavaScript의 엔진 코어는 C로 작성되었습니다. 1) C 언어는 효율적인 성능과 기본 제어를 제공하며, 이는 JavaScript 엔진 개발에 적합합니다. 2) V8 엔진을 예를 들어, 핵심은 C로 작성되며 C의 효율성 및 객체 지향적 특성을 결합하여 C로 작성됩니다.

JavaScript의 역할 : 웹 대화식 및 역동적 인 웹JavaScript의 역할 : 웹 대화식 및 역동적 인 웹Apr 24, 2025 am 12:12 AM

JavaScript는 웹 페이지의 상호 작용과 역학을 향상시키기 때문에 현대 웹 사이트의 핵심입니다. 1) 페이지를 새로 고치지 않고 콘텐츠를 변경할 수 있습니다. 2) Domapi를 통해 웹 페이지 조작, 3) 애니메이션 및 드래그 앤 드롭과 같은 복잡한 대화식 효과를 지원합니다. 4) 성능 및 모범 사례를 최적화하여 사용자 경험을 향상시킵니다.

C 및 JavaScript : 연결이 설명되었습니다C 및 JavaScript : 연결이 설명되었습니다Apr 23, 2025 am 12:07 AM

C 및 JavaScript는 WebAssembly를 통한 상호 운용성을 달성합니다. 1) C 코드는 WebAssembly 모듈로 컴파일되어 컴퓨팅 전력을 향상시키기 위해 JavaScript 환경에 도입됩니다. 2) 게임 개발에서 C는 물리 엔진 및 그래픽 렌더링을 처리하며 JavaScript는 게임 로직 및 사용자 인터페이스를 담당합니다.

웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션웹 사이트에서 앱으로 : 다양한 JavaScript 애플리케이션Apr 22, 2025 am 12:02 AM

JavaScript는 웹 사이트, 모바일 응용 프로그램, 데스크탑 응용 프로그램 및 서버 측 프로그래밍에서 널리 사용됩니다. 1) 웹 사이트 개발에서 JavaScript는 HTML 및 CSS와 함께 DOM을 운영하여 동적 효과를 달성하고 jQuery 및 React와 같은 프레임 워크를 지원합니다. 2) 반응 및 이온 성을 통해 JavaScript는 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 사용됩니다. 3) 전자 프레임 워크를 사용하면 JavaScript가 데스크탑 애플리케이션을 구축 할 수 있습니다. 4) node.js는 JavaScript가 서버 측에서 실행되도록하고 동시 요청이 높은 높은 요청을 지원합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는