1. 프론트 용어
- HTML, CSS, JavaScript
- HTML : HTML은 Hyper Text Markup Language의 줄임말로 웹을 구성하는 가장 기초적인 토대가 되는 것. 꺽쇠 괄호로 둘러싸인 태그로 구성되어 있으며, javascript, css 같은 스크립트를 불러와서 함께 쓸 수 있음.
- CSS : Cascading Style Sheets의 줄임말로 HTML로 전체적으로 구조를 잡은 후, 그 스타일을 꾸며주는 역할을 함.
- 반응형 웹 : 디바이스의 사이즈에 따라 자동적으로 레이아웃의 재배치 또는 크기가 변하여 최적화화된 화면을 제공하는 웹사이트로 타블렛, 모바일 각각의 웹사이트의 별도 제작이 필요하지 않아 비용을 절감할 수 있음.
- 퍼블리싱 : HTML, CSS 부분만 작업하는 것, "퍼블리싱 한다"고 표현
- 마크업 : HTML, CSS 부분만 작업하는 것, "마크업 한다"고 표현
- 퍼블리셔 : 퍼블리싱만 직업적으로 하는 사람들
- JavaScript : 정적인 HTML 페이지를 사용자와 상호작용하는 동적 웹페이지로 만드는 언어(기술)
- ECMAScript : 여러 브라우저에서 사용 되는 자바스크립트의 표준화를 위해 ECMA국제 기구에서 설립한 자바스크립트 표준(ECMAScript Standard).
줄여서 ES라고 하는데 ES6는 ECMA 국제기구에서 2015년에 채택한 자바스크립트 표준이다. - 이벤트 : 웹 브라우저 위에서 일어나는 일들을 사건, 영어로 이벤트.
브라우저에서 일어나는 이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다. - 콘솔 : 자바스크립트 코드를 즉석에서 실행할 수 있게 해주는 개발자 도구 기능. 콘솔에서 실행하는 자바스크립트 코드는 현재 웹페이지 안에 삽입돼 있는 자바스크립트인 것처ㅓ동작하기 때문에 여러가지 테스트를 실행할 수 있다.
- 데이터 타입 : 어떤 형태의 데이터인네 대한 정의.
ES2015 기준으로 자바스크립트에는 7개의 데이터 타입(Boolean, Null, Undefined, Number, String, Symbol, Object)이 있다. - 변수 : 바뀔 수 있는 데이터를 담는 값.
var, let const 키워드를 사용하여 데이터를 변수에 담는다. - 상수 : 바뀌지 않는 데이터를 담는 값.
const 키워드를 사용하여 데이터를 변수에 담는다. - 대입 연산자 : 변수 선언 시 let name = "wecode"라고 했을 때 = 에 해당하는 것. 오른 쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할을 한다.
- 조건문 : 하나의 프로그램이 하나의 흐름대로 가는 것이 아니라 조건에 따라 다른 순서의 기능들이 실행되게 하는 코드.
- 비교 연산자 : === 연산자. 왼쪽에 있는 값과 오른쪽에 있는 값이 같은지를 판단하여 true 또는 false 를 return 한다.
- Boolean(불리언) : true 또는 false의 값을 갖는 데이터 타입. 비교 연산자를 통해 만들어 진다.
- Refactoring(리팩토링) : 정상적으로 작동하는 코드를 더욱 효율적으로 만들어서 그 코드의 가독성을 높이고, 유지보수를 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업.
- 반복문 : 위에서부터 아래로 순서대로 실행되는 코드를 제어하여 반복적으로 실행돼야 하는 명령을 여러번 반복시키는 코드.
- 배열 : 데이터 중에서 서로 연관된 데이터를 순서대로 정리 정돈해서 담아두는 일종의 수납 상자.
대괄호로 시작해서 대괄호로 끝나며 값과 값 사이는 콤마,로 구분한다. - 함수 : 특별한 목적의 작업, 즉 특정 기능을 구현하는 명령어를 묶어 설계된 코드 블록.
- 인자(argument) : 함수의 입력값으로 실제 전달되는 값.
f(x) = x+2, f(3) = 5 라고 했을 때 인자는 실제 함수에 전달된 3. - 매개변수(parameter) : 인자로 전달된 값을 받아서 함수 안으로 매개하는 변수.
f(x) = x+2, f(3) = 5 라고 했을 때 매개변수는 실제 함수에 전달된 3을 받는 x. - 객체 : 서로 연관된 변수와 함수를 그룹으로 묶어 정리 정돈하기 위한 데이터 타입.
배열과 다르게 순서 없이 정보를 저장한다. - 객체 접근 연산자 : 점
.말그대로 객체에 접근하는 연산자이다. 객체는 key-value 쌍으로 이루어져 있는데 특정 key값의 value를 구하기 위해서는 객체의 해당 key에 "접근"해야 한다. - 객체 프로퍼티 : 객체에 소속된 변수. key와 value 쌍으로 이루어져 있다.
- 메소드 : 객체에 소속된 함수. 객체에 속한 함수는 함수라 하지 않고 메소드 라고 부른다.
- React
- SPA (single Page Application) : 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션.
페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않음. - React : 웹 개발을 할 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기 위해서 여러 라이브러리와 프레임워크가 탄생했는데 그 중 하나. 대표적으로 React, Angular, Vue 가 있다.
React는 Facebook에서 개발한 유저 인터페이스 라이브러리로 개발자로 하여금 재사용 가능한 UI를 생성 할 수 있도록 도와준다. - Virtual DOM : 가상의 DOM. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, JavaScript로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳만 업데이트 함.
- JSX : JSX는 자바스크립트의 확장 문법. 문자열도 HTML도 아니다. JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있다.
https://ko.reactjs.org/docs/introducing-jsx.html - Element(엘리먼트) : React Element는 React 어플리케이션을 구성하는 블록.
Element는 화면에 보이는 것들을 기술하며, React Element는 변경되지 않는다. - Componet(컴포넌트) : 페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각. 가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 JavaScript 함수다. 컴포넌트는 기능별로 나눈 수 있으며 다른 컴포넌트 안에서 사용할 수 있다.
- Rendering(렌더링) : React에서 Rendering은 data를 html로 변환해서 renderer에게 전달하는 일관 작업을 뜻한다.
- Props : 컴포넌트의 입력값. Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터다. Props는 읽기 전용이라는 것에 주의해야한다. Props는 어떤 방식으로든 수정해서는 안된다.
- State : 컴포넌트의 상태값. 컴포넌트와 관련된 일부 데이터가 시간에 따라 변경될 경우 state가 필요하다. state와 props의 가장 중요한 차이점은 props는 부모 컴포넌트로부터 전달받지만, state는 컴포넌트에서 관리된다는 것이다. 컴포넌트는 props를 변경할 수 없지만, state는 변경할 수 있다.
- Lifecycle Methods(생명주기 메서드) : 생명주기 메서드(Lifecycle Methods)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능이다. 컴포넌트가 만들어지고 DOM에 삽입될 때(mounting), 컴포넌트가 업데이트될 때 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounted) 혹은 제거될 때 사용할 수 있는 기능을 제공한다.
- key : key는 엘리먼트의 배열을 만들 때 포함해야 하는 특별한 문자열이다. key는 React가 어떤 항목을 변경, 추가 혹은 삭제할지 식별하는 것을 돕는다. 엘리먼트들을 안정적으로 식별할 수 있도록 배열 내의 엘리먼트에 key를 제공해야 한다. key는 같은 배열에 포함된 다른 요소 사이에서만 고유값을 가져야 한다.
- Hooks : Hooks는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.
2. 백 용어
노래하는 개발자입니다.