[waffle] 아이셔팀 중간정리 - FrontEnd

FrontEnd 개발과정 회고

개발 구성

개발시에 js 문법 뿐만 아니라 react, typescript 를 혼합한 tsx 로 구성했습니다.

React 만을 사용하거나 JS를 사용해서 개발해도 되겠지만 이유가 있기 때문에 tsx 로 개발하였습니다.

🥥 JavaScript

 

우선 자바스크립트는 객체 지향 프로그래밍으로  브라우저 내에서 주로 사용되며, 프론트에서 주로 사용됩니다.

또한 Node.js라는 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다.

자바스크립트 기반으로 된 언어들도 많습니다. 대표적으로 뽑자면 가장 핫한 React를 뽑을 수 있습니다.

React에 가장 장점인 유지보수가 가능한 개발이 가장 좋은점입니다. 이런것과 JS와 합친것이 가장 큰 장점입니다.

대표적으로 이 3가지 Angular, VueJs, React가 가장 핫한 언어들입니다.

 

🥥 JavaScript 를 사용하는 이유

 

1. 웹에서 사용하기 적합: 모든 웹 브라우저에서 지원되며, 웹 페이지를 동적으로 만들 수 있어 편리합니다.
2. 사용자와의 상호작용 용이: 사용자와의 상호작용에 따라 웹 페이지를 실시간으로 업데이트할 수 있습니다.
3. 비동기 프로그래밍: 여러 작업을 동시에 처리하거나 기다릴 필요 없이 비동기 작업을 효과적으로 다룰 수 있습니다.
4. 다양한 라이브러리와 프레임워크: 많은 개발자들이 사용하는 도구들이 있어 개발이 빠르고 편리합니다.
5. 크로스 플랫폼 지원: 모바일 앱 개발에도 널리 사용되어, 하나의 코드로 여러 플랫폼에서 앱을 만들 수 있습니다.
6. 동적 타입 시스템: 변수의 타입을 미리 선언하지 않아도 되어 코드 작성이 유연하고 빠릅니다.

자바스크립트는 많은 장점이 있지만, 몇 가지 단점도 존재합니다.

1. 브라우저 호환성: 모든 브라우저에서 동일한 방식으로 동작하지 않을 수 있습니다.
2. 특히, 구 버전의 인터넷 익스플로러와 같은 브라우저에서는 호환성 문제가 발생할 수 있습니다.
3. 보안 취약성: 클라이언트 측에서 실행되기 때문에, 악의적인 사용자가 코드를 분석하고 조작할 수 있습니다.
4. 이로 인해 보안 취약성이 발생할 수 있습니다.

🥥 결국 TSX 를 사용한 이유

• JSX는 JavaScript의 확장 문법으로, 주로 React 라이브러리에서 사용되는데,
• 이를 TypeScript와 함께 사용할 때는 TSX(또는 TypeScript JSX)라는 확장자를 사용합니다.

1. 타입 안정성(Type Safety): TypeScript는 정적 타입 언어로, 변수, 함수, 객체 등의 타입을 미리 선언하고 체크할 수 있습니다. TSX를 사용하면 JSX 코드에 대한 타입 정보를 추가하여 개발자가 코드를 작성할 때 런타임 에러를 사전에 방지할 수 있습니다.
2. 코드 가독성 및 유지 보수 용이성: TypeScript는 코드에 타입 정보를 명시적으로 제공하므로, 코드를 읽고 이해하기 쉽습니다. 또한, 코드 에디터
3. 풍부한 에러 체킹 기능: TypeScript는 코드를 빌드하기 전에 타입 체크를 수행하므로, 런타임에 발생할 수 있는 에러를 사전에 잡아낼 수 있습니다. 이는 버그를 줄이고 안정성을 높이는 데 도움이 됩니다.

🥥 개발하면서 복잡했던 부분

 

 

(RegExp)은 문자열을 검색하거나 편집하는 데 사용되는 강력한 도구로, 특정 패턴을 정의하여 문자열에서 일치하는 부분을 찾거나 변경할 수 있습니다.

회원가입 페이지를 구성하면서 아이디, 패스워드를 원하는 조합으로 만들기 위해서는 RegExp 의 힘이 필요했습니다.

 

처음에는 RegExp 를 쓰지 않고 개발하려 하니 코드가 너무 복잡해 져서

1시간을 공들여 결국 깔끔한 코드를 만들었다는 TMI...

 

밑에 사진처럼 정말 기초적인 부분을 만들때가 제일 행복한 개발자입니다.