FE Study

잊어버리기 전에 간단하게라도 정리하는 도커 관련 글 어느정도 퍼블리싱은 마무리가 되는 중에 새로 해야할 일이 생겼다"백에서도 프론트를 확인해야하니 도커파일을 작성해라" 문제가 발생했다도커도, 도커파일도 개념을 모르는 건 아니었는데 도커파일을 작성하는 방법은 모른다도커파일 그거 어떻게 만드는건데...? 뭘 작성하는건데? 오늘 들은 설명을 잊어버리기 전에 기억나는대로 정리해보자📌 도커를 사용하는 이유도커는 개발 환경을 이미지화 시키고 해당 이미지를 이용해서 개발이나 배포환경을 컨테이너화 시킨다그러면 세부적인 환경설정 없이도 다른 환경에서 프로젝트를 실행시킬 수 있게된다📌 도커 이미지란?도커 이미지는 프로그램, 라이브러리, 설정 파일 등을 포함한 실행 가능한 패키지쉽게 말하면 하나의 프로그램을 실행하는 데..

Cache컴퓨터 운영체제에서 캐시란 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간 없이 데이터에 접근 가능데이터 접근 속도가 훨씬 빨라지는 효과 임시 저장소에 자주 사용하는 데이터를 적재해놓고 빠르게 엑세스 함을 통해 처리 성능을 높힌다는 개념 자체는 인터넷에도 적용 가능Web Cache웹 브라우저는 서버와 HTTP 프로토콜을 통해 리소스를 서버에서 요청하여 가져오고 이를 사용자에게 제공만약 클라이언트가 이전에 받은 데이터와 똑같은 데이터를 서버에 재요청해서 데이터를 다시 내려받으면 해당 과정은 낭비니까 캐시의 개념을 웹브라우저에 적용한 Cache-Control 사용 HTTP에서 제공하는 헤더 클라이언트가 서버에 접속 할 때, 이미지, JS..

WebView프레임워크에 내장된 웹 브라우저 컴포넌트로 View의 형태로 앱에 임베딩 하는 것즉, 앱에서 웹 브라우저를 이용해 화면을 보여주는 방식네이티브 앱처럼 보이고, 기능 또한 앱과 비슷하게 구현되지만 웹 기술을 활용했다는게 가장 큰 차이점네이티브 앱과 달리 웹 기반이기 때문에 HTML, CSS, JS등을 활용하여 개발 대부분의 앱 서비스들이 네이티브로만 개발하지 않고 일부 페이지는 WebView로 개발해서 넣는다WebView를 사용하는 이유- 기술적인 한계App 내에서 결제 모듈을 이용하는 경우 WebView를 사용하는 경우가 많은데 결제 모듈을 App으로 새로 개발하기에는 시간도 오래걸리고 구현 하기가 어렵기 때문PG 사에서 이미 구현해놓은 결제 모듈과 API르르 사용하면 간단한 일을 굳이 비용..

TerserES6를 위한 자바스크립트 parser, mangler 그리고 compressor아니 저 영어 단어들이 뭔데..?parserParsing은 특정 자료에서 내가 원하는 정보만 가공하고 추출해서 불러올 수 있도록 하는 것해당 파싱을 수행하는 프로그램을 parser라고 한다 생성규칙과 열을 발견하는 프로그램으로서 프로그래밍 언어로 쓰여진 프로그램을 문법 규칙에 따라 해석하고 해당 문법이 맞는지 여부를 조사manglerTerser가 mangler로서 하는 역할은 코드에서 사용한 변수, 함수, 속성들의 이름을 단순화 시키는 것인간이 개발을 할 때는 변수나 함수의 이름에 의미있는 네이밍을 사용하는게 중요하지만, 컴퓨터 입장에서는 의미없는 일그냥 소스파일의 크기가 커질 뿐Terser를 이용하면 코드 최적화..

Test프로그램을 실행하여 오류와 결함을 검출하고 어플리케이션이 요구사항에 맞게 동작하는지 검증하는 절차즉 테스트를 통해서 발생 가능한 결함을 예방하고 어플리케이션이 요구사항을 충족하는지 검증추가적으로 개발 과정에서 생기는 변경사항들로 인해 새로운 결함이 유입되지 않았는지 확인 가능 프론트엔드는 UI가 존재하기 때문에 두 가지 형태의 테스트를 할 수 있는데자동화 테스트 : 코드로 작성해서 반복적으로 진행하는 테스트수동 테스트 : 브라우저를 통해 개발자가 직접 하는 테스트로 분류할 수 있음프론트엔드에서 테스팅이 필요한 이유Agile과 DevOps의 확산Agile과 DevOps 프로젝트 flow에 E2E 테스트만을 사용하여 소프트웨어 개발을 할 경우 뒤늦게 버그가 발견되고 해당 원인을 찾는데 시간을 많이 소..

Web WorkerJS는 싱글 스레드이기 때문에 스크립트가 실행되면 해당 스크립트가 종료될 때까지 해당 웹 페이지는 응답 불가 상태이를 해결하기 위해 스크립트 연산을 웹의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술Web Worker를 통해 무거운 작업을 분리된 스레드에서 처리하면 메인 스레드가 멈추거나 느려지지 않고 동작 가능 Web Worker는 스크립트의 다중 스레드를 지원=> 시간이 오래 걸리는 JS 작업 실행중에도 사용자가 웹 페이지를 사용할 수 있음...! 워커 스레드의 전역 객체는 window가 아니라 globalThisJavaScript는 싱글스레드라며...자바스크립트의 언어적 특징을 참고하면 좋다그러니까 Web APIs를 이용하면 충분히 비동기적으로 사용할 수 ..

DOMDocument Object Model문서의 구성요소들을 객체로 구조화하여 나타낸 것프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작주로 JS에서 웹 페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용트리구조DOM은 트리구조로 표현되며, 각 노드는 웹 페이지의 다양한 요소들을 나타냄라이브 특성DOM에 대한 변경은 즉시 웹 페이지에 반영조작 가능API를 사용해서 DOM 요소를 선택, 수정, 추가 또는 제거 가능=> 해당 과정을 DOM 조작이라고 부름Q. DOM에 대한 변경이 즉시 웹 페이지에 반영하려고 브라우저가 화면을 다시 그리면 리플로우와 리페인트에 대한 비용이 너무 많이 발생하지 않을까...? 리플로우와 리페인트가 기억나지 않는다면?Virtual DO..

TypeScriptMS에 의해 개발, 관리되고 있는 오픈소스 프로그래밍 언어대규모 개발에 있어서 발생하는 JS의 문제를 해결하기 위한 JS의 확장된 언어=> ES5의 Superset이기 때문에 기존의 JS 문법을 그대로 사용 가능=> ES6의 새로운 기능들을 사용하기 위해 별도 트랜스파일러를 사용하지 않아도 기존의 자바스크립트 엔진에서 실행 가능 Dynamic Typing을 지원하는 JS와 달리 직접 타입을 부여해주어야 하는 정적 타입의 언어브라우저에서 실행하기 위해선 파일을 JS로 한번 변환하는 컴파일 작업을 거쳐야 함정적 타입 언어TS는 JS의 단점 중 하나인 동적으로 타입을 지정하는 특징을 보완하기 위해 등장JS는 변수 타입이 런타임에 지정되는 대표적인 동적 타입 언어동적 타입 언어는 배우기 쉽고 ..