# front end
프론트엔드 개발환경 - 웹팩(Webpack) 2
ajax 방식의 api 연동은 cors 정책 때문에 반드시 서버가 필요웹팩 개발 서버 : webpack-dev-serverdevServer 기본 설정목업 API 1: devServer.setupMiddlewares (webpack5)express.js의 app 객체를
프론트엔드 개발환경 - 린트(Lint)
코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 함ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나포맷팅, 코드 품질 역할을 수행Rules(규칙): ESLin
프론트엔드 개발환경 - 바벨(Babel)
크로스 브라우징의 혼란을 해결ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다타입스크립, JSX처럼 다른 언어로 분류되는 것 또한 호환되게 만들어 준다VariableDeclaration : const → var 변환 등의 작업을
프론트엔드 개발환경 - 웹팩 (Webpack)
CommonJS: 자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식AMD(Asynchronous Module Definition)는 비동기로 로딩되는 환경에서 모듈을 사용하는
프로트엔드 개발환경 - NPM
CDN: Contents Delivery NetworkNPM은 이 유의적 버전(Sementic Version)을 따르는 전제 아래 패키지 버전을 관리한다.유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리. 각 버전을
[혼자하는] JavaScript - 3
연산자 : 프로그래밍 언어에서 특정 연산을 하도록 하는 문자여기서 두번째 줄에서 사용된 = 문자가 바로 연산자이다. 그 중에서 = 는, 대입 연산자에 해당된다. 첫번째 줄은 새로운 변수를 선언하는 것으로서, 대입 연산자에 해당하지 않음.산술 연산자 : 사칙연산과 같은
🏁 엘리스 AI 트랙 5기 - 지원 과정 + 1차 팀 프로젝트
어느덧 진행중인 엘리스 AI 트랙 과정이 절반에 접어들었습니다.개발 블로그를 시작하면 엘리스 트랙 과정을 기록으로 남겨보자 마음을 먹고 있었는데 ㅎㅎ... 바쁘다는 핑계로 포스팅을 안하다가 드디어 이번에 첫 엘리스 AI 트랙 포스팅을 하게 되었네요..
Vue.js API, Methods
뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위
HTML
여는 태그()와 닫는 태그()로 구성HTML은 공백을 표시하지 않는다.출력: Hello HTML!주석 다는 방법!DOCTYPE 우선 브라우저가 문서를 해석하는 방법을 정의해주자.<html> HTML 전체를 감싸주자<head>페이지에 대한 metadata를 적
Front-End, Back-End 기본 개념 특강
\- 사용자가 볼 수 있는 모든 부분 / HTML, CSS, JavaScript -집의 구조를 결정웹페이지 틀을 잡는 것(Header, Footer 등) 쉽지만 중요하다. (언어가 아니라고 하는 밈이 있을 정도)집의 인테리어 웹페이지를 꾸며주는 것 집의 기능을 부여(
9. 웹 페이지 따라 만들기 <크로스 브라우징>
인터넷 익스플로어에서는 flex item 의 width를 overflow가 hidden으로 설정되어 있음에도 불구하고, flex box 너비에 최대한 많은 아이템들이 보여질 수 있도록 수축시킴.따라서 flex-shrink:0 으로 설정시켜야함.또한, class-card
8. 웹 페이지 따라 만들기 <footer>
항상 inner태그가 기본이 되어야 한다.footer 태그 바로 위의 줄을 만들기 위해 border-top 으로 설정해두었다.margin과 padding설정은 알아서 잘 보고 하자.