본문 바로가기

프로그래밍 개발/프론트엔드 개발자 기본 지식21

프론트엔드 로드맵 2023 | Front End Road Map 2023 GitHub - Han-Kyeol/developer-roadmap-kr-: 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh 2020년, 웹개발자가 되기 위한 로드맵 https://roadmap.sh. Contribute to Han-Kyeol/developer-roadmap-kr- development by creating an account on GitHub. github.com 2023. 8. 17.

React Hooks React Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리입니다. 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있으며 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 서로의 장점을 전부다 가지고 있습니다. Hooks 간단 소개 1. useState: 컴포넌트의 state(상태)를 관리 할 수 있습니다, 2. useEffect: 어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있습니다. 3. useContext: 여러개의 컴포넌트에서 사용할 수 있는, 변수 or 함수를 만들 수 있습니다. ( 전역으로 관리 ) 4. useReducer: state(상태) 업데이트 로.. 2022. 5. 16.

REST API( Representational State Transfer) REST API( Representational State Transfer) REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었습니다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했습니다. HTTP 프로토콜을 정확히 의도에 맞게 활용하여 디자인하게 유도하고 있기 때문에 디자인 기준이 명확해지며, 의미적인 범용성을 지니므로 중간 계층의 컴포넌트들이 서비스를 최적화하는 데 도움이 됩니다. REST의 기본 원칙을 성실히 지킨 서비.. 2022. 5. 10.

MVC 패턴 MVC MVC 패턴은 'Model, View, Controller' 를 뜻하는데 프로젝트 구성요소를 나누는 일종의 패턴입니다. MVC 패턴의 기본 구성 위의 사진은 MVC 패턴의 가장 기본적인 구조를 설명하고 있습니다. 각각의 패턴들이 하는 역할은 다음과 같습니다. - Model : Controller에게 받은 요청에 따라 데이터를 관리합니다. 해당 데이터는 다시 Controller에게 전송합니다. - Controller : Client로부터 요청을 받아 데이터를 가져와야 한다면 Model에게 해당 데이터를 요청합니다. Controller는 Client, Model, View에 모두 접근할 수 있습니다. Controller는 Model로 부터 받은 데이터를 조건에 맞게 View로 .. 2022. 5. 8.

Test-Driven Development(TDD) TDD Test-Driven Development(TDD)는 매우 짧은 개발 사이클의 반복에 의존하는 소프트웨어 개발 프로세스입니다. 우선 개발자는 요구되는 새로운 기능에 대한 자동화된 테스트케이스를 작성하고 해당 테스트를 통과하는 가장 간단한 코드를 작성하고 일단 테스트 통과하는 코드를 작성하고 상황에 맞게 리팩토링하는 과정을 거치는 것입니다. 말 그대로 테스트가 코드 작성을 주도하는 개발방식입니다. TDD의 종류 - Add a test 테스트 주도형 개발에선, 새로운 기능을 추가하기 전 테스트를 먼저 작성한다. 테스트를 작성하기 위해서, 개발자는 해당 기능의 요구사항과 명세를 분명히 이해하고 있어야 합니다. 이는 사용자 케이스와 사용자 스토리 등으로 이해할 수 있으며, 이는 개발자가 코드를 작성하기 .. 2022. 5. 8.

JS ES5 핵심 개념(JS ES5 Core Concept) JS ES5 핵심 개념(JS ES5 Core Concept) 1. 데이터 타입(Data Type) 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말합니다. - 기본형(Primitive Type): 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 합니다. 즉 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있습니다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 .. 2022. 5. 5.

함수형 프로그래밍과 객체지향 프로그래밍 객체지향 프로그래밍 객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법입니다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 “객체(Object)"들의 모임으로 파악하고자 하는 프로그래밍의 패러다임 중에 하나입니다. 각 “객체(Object)" 들은 서로 메시지를 주고 받을 수 있으며 데이터를 처리할 수 있습니다. 객체지향 프로그래밍의 장단점 - 장점 1. 코드 재사용이 용이 남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있습니다. 2. 유지보수가 쉬움 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는.. 2022. 4. 28.

서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) 클라이언트 사이드 랜더링(CSR) 클라이언트 사이드 랜더링(CSR)는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미합니다. 클라이언트 사이드 랜더링(CSR)은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있습니다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행할 수 있습니다. 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공합니다. - 장점 트래픽감소.. 2022. 4. 23.

CSS 방법론 CSS 방법론 대표적인 CSS 방법론은 OOCSS, BEM, SMACSS로 정의할 수 있습니다. CSS 설계의 중요성 - CSS 개발의 문제점 CSS를 작성하는 것이 쉽지만 한 번 확장하고 관리하기는 어렵습니다. CSS의 전역환경 일관적이지 않은 코드 구조, 각자 다른 사고 방식 스타일 정의 지나치게 복잡한 선택자 동일 요소에 대한 중복 설정, 불필요한 CSS의 증가 CSS 셀렉터 우선순위 or !important 사용 CSS (표현), JS (동작), HTML (내용) 간 명확한 분리가 안됨 (높은 결합도) - 사이트 규모가 커질수록 문제가 발생합니다. 유지 보수가 불가능한 코드 -> 중복, 코드분석 시간 -> 새로운 기능의 개발 속도 저하 - CSS 작성 방법 적절한 의미 사용 (시맨틱) 중첩 선택자.. 2022. 4. 23.

브라우저 작동 원리 브라우저의 작동 원리 Browser 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이며. 흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램입니다. 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 합니다. 웹 브라우저와 웹 서버 url을 주소창에 치고 나면 페이지가 이동하고 웹브라우저가 이동한 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 합니다. 그리고 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(Client) 에게 보여주고 HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web.. 2022. 4. 21.

웹접근성(Web Accessibility) 웹접근성(Web Accessibility) 웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것이라고 말할 수 있습니다. 법적 관점에서의 웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것입니다. 여기서 신체적 조건이란, 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하며, 환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등) 또는 저사양 및 저속회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경 등을 의미합니다. 예를 들어 일반인들에게 기본적으로 제공해야하는 정보들을 읽을 수.. 2022. 4. 17.

CORS(크로스 도메인) CORS(크로스 도메인) CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이때 요청을 할때는 cross-origin HTTP 에 의해 요청됩니다. 하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다. 동일 출처 정책(same-origin policy)는 불러온문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이것은 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는데 도움이 됩니다. 예를 들자면 로컬에서 개.. 2022. 4. 17.

AJAX (Asynchronous Javascript And XML) AJAX (Asynchronous Javascript And XML) Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. 비동기 방식의 장점 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 됩니다. 하지만 비동기식 방식을 이용할 경우 필.. 2022. 4. 17.

HTML/CSS HTML HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중 ()로 감싸 엘리먼트를 문단으로 명시할 수 있습니다. My Code is Good 특징 .. 2022. 4. 12.

Babel 바벨 Babel 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다. 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 .. 2022. 4. 12.

Webpack 웹팩 Webpack 웹팩 공식문서에서는 웹팩을 자바스크립트 애플리케이션을 위한 정적 모듈 번들러라고 소개하고 있습니다. 여기서 번들러란 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구라고 말할 수 있습니다. 특징 한번에 많은 요청을 하지 않아도 됩니다. 예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해본다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있습니다. (물론 10개의 파일 정도로 병목현상이 발생하지는 않고 단순한 예시이다.) 모듈 단위로 개발하여 유지보수성을 높일 수 있습니다. 하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우.. 2022. 4. 12.

Npm Npm N은 Node는 Node.js를 의미하며 P는 package로 만들어진 것들을 의미합니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고M의 Manager는 관리자를 의미합니다. 즉 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 의미를 가지고 있다는 것을 알 수 있습니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있고 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라서 이런 저런 모양으로 쌓아서 활용을 할 수 있다고 하는데 필요한 기능을 적절하게 활용.. 2022. 4. 12.

ECMAScript2015(ES6) ECMAScript2015(ES6) ECMAScript 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 넷스케이프는 자신이 밀고 있던 javascript의 핵심 개발 언어를 ECMA 인터내셔널에 제출하고 표준화를 시도 하였고 1996년에 ECMA-262(ES1)으로 명명된 표준 스크립트 기술 규격이 발표되었습니다. 이때부터 ES3 -> ES5 -> ES6(ES2015) -> ES7(ES.. 2022. 4. 10.

DOM API (Web API) and Concept DOM API (Web API) and Concept DOM API DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성되며, 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTML.. 2022. 4. 10.

JavaScript의 동작 원리 JavaScript의 동작 원리 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다. JavaScript 엔진 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다. 자바스크립트를 사용하다 보면 setTimeOut() 같은 수.. 2022. 4. 10.

Git과 GitHub Git 형상 관리 도구(Configuration Management Tool) 중 하나이며 형상 관리 도구는 버전 관리 시스템이라고도 한다. 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개소프트웨어라고 불린다. 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하며, 즉 브랜치를 통해 개발한 뒤, 본 프로그램에 합치는 방식(Merge)으로 개발을 진행할 수 있습니다. 분산 버전관리이기 때문에 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 저장소가 날라가버려도 다시 원상복구할 수 있고 팀 프로젝트가 아닌, 개인 프로젝트일지라도 GIT을 통해 버전 관리를 하면 체계적인 개발이 가능해지고, 프로그램이나 .. 2022. 4. 10.

이전 1 다음

티스토리툴바