안녕하세요!
~
오늘은 프론트엔드 개발자로서 지원서, 면접 준비 과정, 1차 면접 평가를 녹음했습니다.
이 블로그를 미리 정리한다면,
1. 프론트엔드 개발자로 성장하는 과정
2. Argular, React, Vue 프레임워크의 특징과 차이점
3. NEXT JS를 축하합니다.
왜 사용해야 할까요?
4. Typescript 축하, 기능, 장단점
프론트엔드 취업을 준비하면서 대학 3학년 때 진행한 팀 프로젝트로 첫 발을 내디뎠습니다.
우리 팀은 인터넷 속도를 높이고 보안을 강화하는 VPN 서비스를 개발했으며 백엔드는 PHP와 DB MySQL을 사용했습니다.
간단한 HTML, CSS 및 JS를 사용하여 UI 프런트엔드를 개인적으로 개발했습니다.
프런트엔드 트렌드는 항상 변화하지만 React는 종종 프록시로 사용됩니다.
커뮤니티가 많고 MERN Stack(MongoDB, Express, React, Node.js)은 웹 서비스를 쉽고 빠르게 개발할 수 있다는 장점이 있지만 SPA(A Single Page Application) 경험이 없는 초보자에게는 어려운 일이 될 수 있습니다.
.
그래서 ReactJS를 배우기 전에 먼저 동일한 JavaScript 프레임워크인 VueJS를 배우기 시작했습니다.
React, Argular, Vue 중 VueJ를 선택한 이유는 생각보다 간단합니다.
나는 AngularJs가 매우 크고 일반적으로 Typescript를 사용해야 하고 React가 기존 JavaScript와 잘 어울려야 하고 많은 JS 구문을 사용하고 더 깨끗한 Vue를 선택해야 한다는 것을 알게 되었습니다.
내 개인적인 경험을 바탕으로 React는 map, forEach, for in, for of 등과 같은 많은 반복을 사용할 수 있습니다.
Vue는 정답이 있지만 HTML div 요소에 v-for를 넣습니다.
깔끔하고 심플하고 빠르긴 한데 아직 React만큼 커뮤니티가 많지 않아서 공식 문서나 오타를 풀기에는 Vue보다 React가 훨씬 많다는 느낌을 받았습니다.
그러다가 개인 포트폴리오로 프로젝트와 개인 블로그를 개발하면서 Vuejs 루프, 조건문, 컴포넌트, 라우터, URL 매개변수, 데이터 렌더링, props 등 다양한 VueJS 문법을 배웠습니다.
평소에는 Vuejs나 Spring Boot나 PHP Laravel 백엔드를 자주 사용하지만 개인적으로 서버 개발 경험이 없어서 등록과 로그인(사용자 인증)이 더 쉬운 Firebase와 Firestore CRUD(Create Read Update Delete)를 사용합니다.
) 블로그 업로드 및 로딩 등 실제 회사에서 사용하는 기술 B. 오고, 쉽지만, 나는 그들을 경험했습니다.
면접을 준비하면서 알게 된 점을 정리해 보았습니다.
Argular , React , Vue 프레임워크 기능, 차이점( 참조 문서 )
정사각형다음과 같은 필요한 모든 기능을 갖춘 프레임워크입니다.
B. 프로젝트 생성과 동시에 강력한 명령줄 도구, 잘 구성된 폴더 구조 및 다양한 환경. 특별한 점은 사용자 인터페이스가 컴포넌트 형태로 정의되어 있고 컴포넌트에는 JavaScript 파일뿐만 아니라 템플릿 역할을 하는 HTML 파일이나 스타일 시트가 포함된 CSS 파일이 포함되어 있다는 것입니다.
이러한 파일은 각 구성 요소에 대해 자동으로 생성됩니다.
개인적으로 해보지는 않았지만 구글에서 개발한 Angular는 “데코레이터”를 잘 활용하는 선언적 코딩 스타일을 사용합니다.
태그 이름, 템플릿 파일 및 CSS 파일에 대한 정보는 데코레이터 구문을 통해 전달됩니다.
반응하다사용자 인터페이스가 사용자 조작에 따라 동적으로 변경되는 웹 애플리케이션 개발을 가능하게 하는 프론트엔드 라이브러리입니다.
React도 컴포넌트 기반인데, React는 JavaScript에 XML 형식의 템플릿을 직접 내장하는 형태로 JSX 기술을 사용하는 것을 주로 권장합니다.
이 때문에 다른 프레임워크에 비해 자바스크립트 중심의 컴포넌트가 더 많이 등장한다.
한마디로 Argular와 Vue 대신 React를 사용하려면 JavaScript보다 더 많이 사용한다는 느낌이 들었습니다.
React의 특별한 기능은 데이터 바인딩 방법입니다.
밝혀진 바와 같이 기본적으로 데이터 바인딩에는 단방향과 양방향의 두 가지 구현이 있으며 모델 뷰 업데이트가 처리되는 방식이 다릅니다.
양방향 데이터 바인딩은 뷰가 변경되면 모델이 변경되고 모델이 변경되면 뷰도 변경된다는 사실을 처리하는 방법입니다.
양방향 데이터 바인딩은 뷰가 변경되면 모델이 변경되고 모델이 변경되면 뷰도 변경된다는 사실을 처리하는 방법입니다.
React는 단방향 데이터 바인딩을 사용합니다.
단방향 데이터 바인딩은 일반적으로 더 예측 가능하고 따라서 더 안정적이지만 양방향 바인딩보다 코드를 작성하는 데 더 많은 시간이 필요합니다.
FYI, Angular 및 Vue.js는 단방향 및 양방향 데이터 바인딩을 모두 지원합니다.
React와 마찬가지로 Vue.js는 구성 요소 기반 개발에 중점을 둡니다.
Vue.js의 고유한 판매 포인트는 구성 요소의 JavaScript 집중도가 낮다는 것입니다.
구성 요소 구조 및 구성 요소를 만들 때 HTML 마크업 기반의 템플릿 구문이 사용됩니다.
다른 프레임워크와 마찬가지로 Vue.js는 CLI(Command Line Interface) 도구를 제공합니다.
또한 React와 같이 애플리케이션 개발에 필요한 다른 모듈을 사용자가 책임지게 하는 대신 가이드를 통해 특정 모듈을 추천합니다.
Angular와 같은 내장 모듈로 설정되지는 않았지만 React와 같은 자유방임에 가깝지 않으면서 둘 사이의 절충안으로 볼 수 있습니다.
NEXT JS를 축하합니다.
왜 사용해야 할까요?
Next.js는 React 라이브러리용 프레임워크입니다.
아 근데 왜 복잡한 리액트가 Next를 쓰는지 궁금해서 찾아보니 Next.js를 쓰는 주된 이유는 SEO(검색엔진최적화)를 위한 서버사이드렌더링(SSR)이 가능하기 때문이라는 것을 알게 되었습니다.
알고 보니 React는 기본적으로 CSR(Client Side Rendering)을 실행하고 웹사이트 요청 시 빈 HTML을 로드하여 스크립트를 로드하기 때문에 처음 로드하는 데 시간이 오래 걸리고 검색 엔진 최적화(SEO)에 취약합니다.
. 다음 .js를 사용하면 미리 렌더링된 데이터로 페이지를 미리 다시 로드할 수 있으므로 더 나은 사용자 경험과 검색 엔진에서의 입지를 높이는 SEO 이점을 얻을 수 있습니다.
next.js는 페이지 기반 라우팅 시스템과 사전 렌더링을 제공하며, 프로젝트의 가장 바깥쪽 폴더인 /pages 폴더에서 컴포넌트를 내보내면 폴더 이름이 페이지 경로가 되며 동적 경로도 지원합니다.
NEXT 컴포넌트를 통해서도 가능합니다.
< Link /> 빠르고 원활하게 페이지 간 전환이 가능하며, 일반 HTML의 a 태그와 달리 페이지를 새로고침하지 않고도 페이지 간 전환이 가능하며, 링크 컴포넌트가 뷰포트에 표시되면 연결된 페이지를 미리 배경으로 가져옵니다.
사용자가 링크를 클릭하면 해당 페이지로 매우 빠르게 이동할 수 있습니다.
개인적으로 NEXT를 써보지는 못했는데 앞으로 React 기반의 프로젝트를 하게 된다면 같이 써보고 싶다는 생각이 듭니다.
대부분의 사용자는 웹 페이지가 로드되는 데 3초 이상 걸리는 경우 느린 것으로 간주하며 NEXT 코드를 분할하고 가장 필요한 부분만 먼저 전송하여 애플리케이션 로드 시간을 줄이는 것이 핵심입니다.
프레임워크와 라이브러리의 차이점
액자골격(Skeleton) 또는 인프라(Infrastructure)의 약자로 제어 역전(Reversal of Control) 개념이 적용된 대표적인 기술이다.
소프트웨어의 프레임워크는 “소프트웨어의 특정 문제를 해결하기 위해 함께 작동하는 일련의 클래스 및 인터페이스”로 설명할 수 있으며 작업을 완료하는 것은 완성된 애플리케이션이 아니라 프로그래머에게 달려 있습니다.
프레임워크는 앱/서버 운영, 메모리 관리, 이벤트 루프 등과 같은 공통 부분을 관리하며 개발자는 각 서비스에 대해 다른 부분만 구현하면 됩니다.
B. “프레임워크에 의해 지시된” 클래스 및 메소드.
프레임의 속성
1) 특정 개념의 추상화를 제공하는 여러 클래스 또는 구성 요소로 구성됩니다.
2) 문제를 해결하기 위해 추상 개념이 함께 작동하는 방식을 정의합니다.
3) 구성 요소는 재사용이 가능합니다.
4) 높은 수준에서 패턴을 조작할 수 있습니다.
몇 가지 잘 알려진 프레임워크
1) Spring은 Java 서버 개발에 사용됩니다.
2) Python 서버 개발을 위한 Django, Flask
3) Android는 Android 앱 개발에 사용됩니다.
4) iPhone 앱 개발에 Cocoa Touch 사용
5) 웹 개발에 사용되는 Angular, Vue.js 등
( IsReact ? Library : Framework )여기서 흥미로운 점은 “개발자의 98%가 React를 라이브러리가 아닌 프레임워크로 사용한다”는 것입니다.
React는 라이브러리이지만 98%의 개발자가 이를 프레임워크처럼 사용한다고 합니다.
반응하다 공식 홈페이지EZ에 들어가보면 “React, 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리”라고 적혀있는데, 프레임워크가 아니라 라이브러리인데, 각종 블로그나 글을 찾아보면 “리액트.js 프레임워크는 오픈소스 자바스크립트 프레임워크이자 개발된 라이브러리다.
페이스북으로.” 의 내용을 보실 수 있습니다.
도서관간단히 말해서 사용하기 쉬운 도구 세트를 말합니다.
즉, 개발자가 생성한 클래스를 호출하여 사용하고 클래스를 나열하여 필요한 클래스를 호출하여 사용하는 방식을 취한다.
사전적 의미로는 “소프트웨어 개발에서 컴퓨터 프로그램이 사용하는 비휘발성 자원의 집합”으로 정의됩니다.
라이브러리 = 라이브러리의 개념과 마찬가지로 소프트웨어를 개발할 때 자주 생성하고 사용해야 하는 반복적인 코드나 메서드, 변수 등을 담는 것으로 정의할 수 있으며, “비휘발성”으로 사용하기 쉬운 호출 .
간단히 말해서 도서관은 톱, 망치, 삽과 같은 도구. 사람들은 그것을 집어 들고, 자르고, 변형하고, 때리고, 다시 변형하고, 파냅니다.
도구를 사용하는 경우 급하면 망치로 잘라야 할 부분을 칠 수 있습니다.
땅을 파야 한다면 톱으로 바닥을 긁어낼 수 있습니다.
인간은 도구를 선택하는 존재이기 때문에 어떤 도구를 사용하든 원하는 것을 만들 수 있으면 됩니다.
프레임 자동차, 비행기 및 선박과 같은 차량. 사람이 타서 엔진 시동을 걸고, 기어를 넣고, 핸들을 돌리고, 운전하거나 조종해야 합니다.
반면에 마운트는 특정 위치로만 이동할 수 있습니다.
자동차로 날고 배로 착륙할 수는 없습니다.
이를 위해 만들어졌으니 규칙대로 엔진과 기어, 핸들을 잘 돌리기만 하면 된다.
4. 타자기
요즘 IT 기업의 채용공고를 보면 많은 기업들이 TypeScript를 원하거나 선호하는 것을 알 수 있습니다.
인터뷰를 준비하면서 Typescript가 무엇인지, 사람들이 왜 사용하는지 정리해보았습니다.
타자기JavaScript 유형을 제공하는 언어입니다.
JavaScript의 확장으로 볼 수 있습니다.
클라이언트 측 및 서버 측 개발 모두에 사용할 수 있으며 TypeScript는 JavaScript 엔진을 사용하여 대규모 애플리케이션을 개발하도록 설계된 언어입니다.
TypeScript에서 원하는 유형을 정의하고 코딩하면 JavaScript로 컴파일 및 실행 가능 TypeScript는 오픈 소스이며 모든 운영 체제, 모든 브라우저 및 모든 호스트에서 사용할 수 있습니다.
타이프스크립트 혜택
1. 오류 방지
TypeScript는 타입을 할당하기 때문에 코드 작성 시 부적절한 타입을 입력하거나 타입이 포함되지 않은 경우 미리 경고를 표시합니다.
간단한 예와 비교
JavaScript는 언제든지 a를 문자열, 수정자 또는 조건부 값으로 재설정할 수 있으며 예고 없이 결과가 정상적으로 표시되는 것을 볼 수 있습니다.
index.js
let a = "Hello";
a = 10;
console.log(a);
결과: 10
처음에 a이란 변수는 String으로 저장했으며 다음 값이 Number으로 바꿨습니다.
이제 TypeScript에서 동일한 코드를 작성하고 실제 결과가 무엇인지 봅시다.
index.ts
let a:string = "Hello";
a = 10;
console.log(a);먼저 a를 문자열로 선언합니다.
a의 값을 제곱으로 변경하면 다음 오류가 발생합니다.
따라서 TypeScript는 컴파일 단계에서 오류를 포착할 수 있는 이점이 있는 정적 타이핑을 지원합니다.
TSError: ⨯ Unable to compile TypeScript:
src/snippet1.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.
2 a = 10;
2. 실행 속도
자바스크립트를 이용하여 실행시 타입이 결정되어 적용된다고 하는데, 이것은 컴퓨터가 오류가 있는지 없는지를 확인하게 하는 것과 같기 때문에 실행속도가 오래 걸릴 수 있음은 물론이다.
대신 TypeScript는 “인간”이 코드를 작성할 때 오류를 확인하고 유형을 미리 결정하여 기계가 수행해야 하는 작업의 양을 줄이기 때문에 실행 속도가 매우 빠르다는 이점이 있습니다.
3. 객체 지향 언어 스타일로 코드 작성
Typescript를 사용하면 객체 지향 언어 스타일로 코드를 작성할 수 있습니다.
JavaScript가 처음 나왔을 때 객체 지향 클래스는 없었습니다.
그러나 객체 지향 언어에서와 마찬가지로 객체를 만들고 사용할 수 있습니다.
다행스럽게도 Class는 ES Next에 의해 도입되어 완전한 객체지향 언어의 형태를 갖추게 되었으며, 이때 TypeScript는 객체지향 개발 등 객체지향 언어에서 사용되는 구문을 추가로 지원하는 방식으로 구성되어 있습니다.
해.
지금까지 살펴본 바로는 TypeScript는 JavaScript보다 훨씬 매력적인 언어입니다.
그러나 typescript를 사용하는 데는 단점이 있습니다.
타자기 단계가리키다
삼. 더 많은 시간
개발 규모가 커짐에 따라 TypeScript는 별도의 유형 설정이 필요하고 시간이 오래 걸릴 수 있는 문제에 부딪힐 수 있습니다.
유형 스크립트는 유형 변환을 위해 코드에서 유형을 지정해야 합니다.
유형 유추를 사용하여 유형을 자동으로 감지할 수 있지만 배열, 객체 및 함수를 사용하려면 유형을 먼저 선언하고 제한해야 합니다.
이 프로세스는 JavaScript로 개발할 때보다 더 오래 걸릴 수 있습니다.
2. 더 많은 코드
두 번째 단점은 코드의 가독성이 떨어질 수 있다는 것입니다.
TypeScript는 각 객체에 대한 유형을 지정해야 하며 유형이 지정되지 않은 경우 유형을 유추해야 하며 선언도 해야 작동합니다.
문제는 이렇게 코드를 작성할 때 코드가 매우 길어지는 문제가 있습니다.
.