[WEB] 웹 프론트엔드 기초 - 2. 개발 언어 및 도구, 커뮤니티 페이지 정리

---

HTML

• HTML Help Sheet

https://www.slideshare.net/zsk/html-help-sheet-02

 

CSS

• CSS Help Sheet

https://www.gosquared.com/blog/panic-over-css2-and-css3-help-sheets-are-here

 

프로젝트 개발 시 참고하기 좋은 사이트

• 주요 색상 추출  : the Color Picker
• 이미지 검색 : Google Images
• 폰트 선택 : Google Fonts

 

JavaScript

• js의 또 다른 이름은 ECMAScript - Wikipedia이다.
  • Ecma TC39 · GitHub
  • ECMAScript version history - Wikipedia

June 1997		First edition based on JavaScript 1.1 as implemented in Netscape Navigator 3.0.[1]	Guy L. Steele Jr.
June 1998		Editorial changes to keep the specification fully aligned with ISO/IEC 16262:1998.	Mike Cowlishaw
December 1999		Based on JavaScript 1.2 as implemented in Netscape Navigator 4.0.[2] Added regular expressions, better string handling, new control statements, try/catch exception handling, tighter definition of errors, formatting for numeric output, and other enhancements	Mike Cowlishaw
Abandoned (last draft 30 June 2003)	ECMAScript 4 (ES4)	Fourth Edition was abandoned, due to political differences concerning language complexity. Many features proposed for the Fourth Edition have been completely dropped; some were incorporated into the sixth edition.
December 2009		Adds "strict mode", a subset intended to provide more thorough error checking and avoid error-prone constructs. Clarifies many ambiguities in the 3rd edition specification, and accommodates behavior of real-world implementations that differed consistently from that specification. Adds some new features, such as getters and setters, library support for JSON, and more complete reflection on object properties.[3]	Pratap Lakshman, Allen Wirfs-Brock
June 2011		Changes to keep the specification fully aligned with ISO/IEC 16262:2011.	Pratap Lakshman, Allen Wirfs-Brock
June 2015[4]	ECMAScript 2015 (ES2015)	See 6th Edition – ECMAScript 2015	Allen Wirfs-Brock
June 2016[5]	ECMAScript 2016 (ES2016)	See 7th Edition – ECMAScript 2016	Brian Terlson
June 2017[6]	ECMAScript 2017 (ES2017)	See 8th Edition – ECMAScript 2017	Brian Terlson
June 2018[7]	ECMAScript 2018 (ES2018)	See 9th Edition – ECMAScript 2018	Brian Terlson
June 2019[8]	ECMAScript 2019 (ES2019)	See 10th Edition – ECMAScript 2019	Brian Terlson, Bradley Farias, Jordan Harband
June 2020[9]	ECMAScript 2020 (ES2020)	See 11th Edition – ECMAScript 2020	Jordan Harband, Kevin Smith
June 2021[10]	ECMAScript 2021 (ES2021)	See 12th Edition – ECMAScript 2021	Jordan Harband, Shu-yu Guo, Michael Ficarra, Kevin Gibbons
June 2022[11]	ECMAScript 2022 (ES2022)	See 13th Edition – ECMAScript 2022	Shu-yu Guo, Michael Ficarra, Kevin Gibbons
June 2023	ECMAScript 2023 (ES2023)	See 14th Edition – ECMAScript 2023	Shu-yu Guo, Michael Ficarra, Kevin Gibbons

 

 

node.js

* 데스크톱에서도 js를 실행할 수 있게 만든 sw -> node.js

개발환경에서 실행하고, 웹에서는 브라우저를 통해 실행할 수 있다.

 

JavaScript는 Node.js와 만나서 독립했다.

• node는 v8(브이팔) 엔진을 사용 중
  • v8은 8 기통 엔진에서 따왔다.
• 마이크로소프트에서 크롬 자바스크립트 엔진(v8)을 개발했고, 노드 개발자가 크롬에서  v8 만 가져다가 독립적으로 자바스크립트를 실행할 수 있는 환경을 구축하였다.
• https://www.geeksforgeeks.org/difference-between-node-js-and-javascript/?ref=gcse

자바스크립트는 웹사이트에서 스크립트를 작성하는 데 사용되는 프로그래밍 언어 입니다 .	NodeJS는 Javascript 런타임 환경 입니다 .
Javascript는 브라우저에서만 실행할 수 있습니다.	NodeJS의 도움으로 브라우저 외부에서 Javascript를 실행할 수 있습니다.
클라이언트 측에서 사용됩니다.	주로 서버측에서 사용됩니다.
Javascript는 HTML을 추가하고 DOM을 사용할 수 있을 만큼 충분히 가능합니다.	Nodejs에는 HTML 태그를 추가하는 기능이 없습니다.
Javascript는 Safari의 JS 코어 및 Firefox의 Spidermonkey와 같이 모든 브라우저 엔진에서 실행될 수 있습니다.	V8은 Javascript를 구문 분석하고 실행하는 node.js 내부의 Javascript 엔진입니다.
Javascript는 프론트 엔드 개발에 사용됩니다.	Nodejs는 서버 측 개발에 사용됩니다.
자바스크립트 프레임워크 중 일부는 RamdaJS, TypedJS 등입니다.	Nodejs 모듈 중 일부는 Lodash, express 등입니다. 이러한 모듈은 npm에서 가져옵니다.
C++로 작성된 Chrome의 V8 엔진을 사용하는 ECMA 스크립트의 업그레이드 버전입니다.	Nodejs는 C, C++ 및 Javascript로 작성되었습니다.

 

 

함수 재사용 - 요구사항을 어떻게 해결할 것인가?

// 2개의 숫자를 더하는 add() 함수를 사용하고 있는데 3개의 숫자를 더해야하는 경우가 생긴다면?
func add(n1, n2){
	retrun n1 +n2
}
add(10, 10)

// 1) 기존 사용하는 함수를 이건 기존에 사용하는 함수들의 파라미터를 다 확인해줘야한다.
func add(n1, n2, n3){
	retrun n1 +n2 + n3
}
add(10, 10, 0)
add(10, 10, 10)

// 2) 추후 더하는 숫자의 갯수가 변경된다면 추가 함수가 필요하다.
func add2(n1, n2, n3){
	retrun n1 +n2 + n3
}
add(10, 10)
add2(10, 10, 10)

// 3) 나는 파라미터를 배열로 받으면 된다고 생각했다.
// 하지만 이런 경우, 더 복잡한 로직이 있는경우 명확성과 반복문을 통한 성능이슈가 있다.
// 그리고 가장 중요한 차이는, 비용이 더 드는 일이라는 것이다..
func add(arr){
	let sum = 0;
	if(arr.length){
    	arr.map(v => sum += (v typeof number ? v : 0);
    }
	retrun sum
}
add([10, 10])
add([10, 10, 10])

// 4)
func add(n1, n2){
	retrun n1 +n2
}
add(10, 10)
add(add(10, 10), 10)

// 1,2,3)도 같은 결과를 얻지만
// 4)처럼 사용하면 기존 코드를 그대로 유지하며 가장 빠르게 같은 결과를 만들 수 있다.

 

브라우저가 지원하지 않은 문법도 개발환경에서 사용할 수 있다.
번들러(webpack, vite), 트랜스파일러(바벨)

 

728x90

 

 

프론트앤드 프로젝트

프로젝트 생성 방법

1. create react app

- bundler : webpack

- transfiler : babel

npx create-react-app my-app

Create React App (create-react-app.dev)

 

2. create vite app

- bundler  : vite

- transfiler : babel

npm create vite@latest my-vue-app -- --template vue

Getting Started | Vite (vitejs.dev)

 

TIP

• npx create-react-app 은 비권장!
• npx는 소프트웨어이다. npm 설치하면 같이 설치되는 유틸리티 파일이다.
• babel은 트랜스파일러의 표준으로 자리 잡았다.
  • Babel · The compiler for next generation JavaScript (babeljs.io)

 

 

웹 프론트 아키텍처

프론트 아키텍처는 프로덕트 관리에서 중요한 부분이다. 플로우차트, 다이어그램을 활용하여 아키텍처( AS-IS, TO-BE)를 정리한다면, 적절한 상황에 비즈니스 대응을 할 수 있다.

 

웹 프론트 아키텍처 설계 고려사항

• 컴포넌트 구조 (Atom → Molecule → Organism → Template(layout) → Page)
• MV* 구조 (MVC, MVP, MVVM, MVI)
• 웹 애플리케이션의 구조 (SPA, MPA)
• 렌더링 방식 (CSR, SSR)
• 상태관리 도구
• 폴더 및 파일 구조
• 서비스 인프라 구조

아키텍처를 그리는 도구

• https://app.diagrams.net/
• https://excalidraw.com/

 

 

Browsers

how browsers work

 

https://web.dev/articles/howbrowserswork?hl=ko

 

• 웹브라우저는 가장 널리 사용되는 소프트웨어입니다. 이 입문서에서는 AI가 보이지 않는 곳에서 어떻게 작동하는지 설명합니다. 브라우저 화면에 Google 페이지가 표시될 때까지 주소 표시줄에 google.com를 입력하면 어떤 일이 일어나는지 볼 수 있습니다.
• 오늘날 데스크톱에서 사용되는 주요 브라우저는 Chrome, Internet Explorer, Firefox, Safari 및 Opera입니다.
• Opera 브라우저를 제외한 모든 브라우저는 WebKit을 기반으로 합니다.

 

Browsers 대략적인 인프라

1. 사용자 인터페이스: 주소 표시줄, 뒤로-앞으로 버튼, 북마크 메뉴 등이 포함됩니다. 요청한 페이지가 표시되는 창을 제외한 브라우저의 모든 부분이 표시됩니다.
2. 브라우저 엔진: UI와 렌더링 엔진 간의 작업을 마샬링 합니다.
3. 렌더링 엔진: 요청된 콘텐츠를 표시합니다. 예를 들어 요청된 콘텐츠가 HTML이면 렌더링 엔진이 HTML 및 CSS를 파싱하고 파싱 된 콘텐츠를 화면에 표시합니다.
4. 네트워킹: HTTP 요청과 같은 네트워크 호출에 플랫폼 독립적 인터페이스 뒤에 있는 여러 플랫폼에 서로 다른 구현을 사용합니다.
5. UI 백엔드: 콤보 상자 및 창과 같은 기본 위젯을 그리는 데 사용됩니다. 이 백엔드는 플랫폼에 구애받지 않는 일반 인터페이스를 노출합니다. 그 아래에는 운영체제 사용자 인터페이스 메서드가 사용됩니다.
6. JavaScript 인터프리터. JavaScript 코드를 파싱하고 실행하는 데 사용됩니다.
7. 데이터 스토리지. 지속성 레이어입니다. 브라우저는 쿠키와 같은 모든 종류의 데이터를 로컬에 저장해야 합니다. 브라우저는 localStorage, IndexedDB, WebSQL, FileSystem과 같은 스토리지 메커니즘도 지원합니다.

 

 

'브라우저 엔진, 렌더링 엔진'의 자세한 내용은 아래 포스팅에서 확인하세요.
https://sillimmouse.tistory.com/2

'웹 크로스 브라우징 테스트 및 구현 방법'의 자세한 내용은 아래 포스팅에서 확인하세요.
https://sillimmouse.tistory.com/94

 

 

 

브라우저별로 지원하는 JavaScript 기능 확인 방법?

브라우저별로 원하는 기능이 지원하는 사양을 요약해서 보여주는 사이트를 활용면 됩니다.

사양을 확인하면 크로스브라우징과 모바일 기기 지원을 할 수 있습니다.

https://caniuse.com/

 

렌더링 범위를 확인하는 방법

• chrome : 개발자 도구 > 콘솔 > 설정 > Rendering > paint flashing
• Edge : 개발자 도구 > 콘솔 > 설정 > 렌더링 > 그림판 플래시

 

 

 

Terminal

• 개발자라면 기본적인 터미널 사용법을 알고 있는 것이 좋다.
• 터미널이란, 명령을 통하여 작동하는 소프트웨어를 말하며 운영체제, 에디터에 따라서 종류가 다르다.

// 현재 접속된 터미널 경로 확인 (print working directory)
$ pwd

// 현재 디렉토리에 있는 폴더 확인
    // linux
    $ ls 
    // window
    $ dir

// 해당 디렉토리로 이동 (change ddirectory)
$ cd [폴더명]

// 터미널 화면 초기화
$ clear

 

'리눅스 명령어'의 자세한 내용은 아래 포스팅에서 확인하세요.
https://sillimmouse.tistory.com/76

 

 

Git

• 목적
  • 코드 관리
  • 협업 개발
• 커맨드를 활용해서 사용하는 방법을 알아야, GUI 툴을 사용해도 원리를 이해할 수 있다.

// add
$ git add index.js
// commit
$ git commit -m "파일 추가"

// add + commit
$ git commit -am "파일 추가"

// clone
$ git clone [url]

// remote(origin) push
// git push

 

 

 

Git - GUI 툴 종류

1. visual stuido

 

2. source tree

https://www.sourcetreeapp.com/

 

코드 리뷰 정책이란?

개인이 push를 하게 되면, 코드 저장소에 코드 품질을 관리하기 어려워 진다. 이러한 상황을 방지하고, 코드 충돌을 예방 하기 위해 프로젝트별로 코드 리뷰 정책을 세우게 된다.

1. branch
2. fork

코드 리뷰 정책이란? 1, 2번의 방법으로 로컬 코드를 작업 한다음, PR(pull request)요청을 하고, 팀원 및 관리자가 확인 후 main 저장소에 merge 하는 프로세스를 말한다.