# front end

861개의 포스트
post-thumbnail

Vue.js 재사용성을 높이자! Slot편

Vue.js 프레임워크에서 제공하는 함수들로 컴포넌트의 재사용성을 높일 수 있다. 슬롯 슬롯(slot)은

약 3시간 전
·
0개의 댓글
·

프론트엔드 개발환경 - 웹팩(Webpack) 2

ajax 방식의 api 연동은 cors 정책 때문에 반드시 서버가 필요웹팩 개발 서버 : webpack-dev-serverdevServer 기본 설정목업 API 1: devServer.setupMiddlewares (webpack5)express.js의 app 객체를

어제
·
0개의 댓글
·

프론트엔드 개발환경 - 린트(Lint)

코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 함ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나포맷팅, 코드 품질 역할을 수행Rules(규칙): ESLin

어제
·
0개의 댓글
·

프론트엔드 개발환경 - 바벨(Babel)

크로스 브라우징의 혼란을 해결ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다타입스크립, JSX처럼 다른 언어로 분류되는 것 또한 호환되게 만들어 준다VariableDeclaration : const → var 변환 등의 작업을

어제
·
0개의 댓글
·

프론트엔드 개발환경 - 웹팩 (Webpack)

CommonJS: 자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식AMD(Asynchronous Module Definition)는 비동기로 로딩되는 환경에서 모듈을 사용하는

어제
·
0개의 댓글
·

프로트엔드 개발환경 - NPM

CDN: Contents Delivery NetworkNPM은 이 유의적 버전(Sementic Version)을 따르는 전제 아래 패키지 버전을 관리한다.유의적 버전은 주(Major), 부(Minor), 수(Patch) 세 가지 숫자를 조합해서 버전을 관리. 각 버전을

어제
·
0개의 댓글
·

[10/04] 원티드 온보딩 챌린지 week 1

week 1에서 진행한 학습 내용을 정리합니다.

어제
·
0개의 댓글
·
post-thumbnail

[혼자하는] JavaScript - 3

연산자 : 프로그래밍 언어에서 특정 연산을 하도록 하는 문자여기서 두번째 줄에서 사용된 = 문자가 바로 연산자이다. 그 중에서 = 는, 대입 연산자에 해당된다. 첫번째 줄은 새로운 변수를 선언하는 것으로서, 대입 연산자에 해당하지 않음.산술 연산자 : 사칙연산과 같은

2일 전
·
0개의 댓글
·

TS webpack 수동으로 작성하기

webpack 작성

3일 전
·
0개의 댓글
·
post-thumbnail

✔️ React 의 Props 이해하기

React에서 사용하는 Props를 알아보도록하자

5일 전
·
0개의 댓글
·
post-thumbnail

🏁 엘리스 AI 트랙 5기 - 지원 과정 + 1차 팀 프로젝트

어느덧 진행중인 엘리스 AI 트랙 과정이 절반에 접어들었습니다.개발 블로그를 시작하면 엘리스 트랙 과정을 기록으로 남겨보자 마음을 먹고 있었는데 ㅎㅎ... 바쁘다는 핑계로 포스팅을 안하다가 드디어 이번에 첫 엘리스 AI 트랙 포스팅을 하게 되었네요..

6일 전
·
0개의 댓글
·
post-thumbnail

✔️ React 에서 동적 UI를 만드는 3-STEP

리액트에서 동적 UI를 만들고자 할 때 유용한 3-STEP

6일 전
·
0개의 댓글
·
post-thumbnail

Vue.js API, Methods

뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위

2022년 9월 27일
·
0개의 댓글
·
post-thumbnail

✔️ React 의 useState

useState 의 사용법과 Object, Array 정보를 담고있는 State 변경 시 유의사항

2022년 9월 27일
·
0개의 댓글
·

HTML

여는 태그()와 닫는 태그()로 구성HTML은 공백을 표시하지 않는다.출력: Hello HTML!주석 다는 방법!DOCTYPE 우선 브라우저가 문서를 해석하는 방법을 정의해주자.<html> HTML 전체를 감싸주자<head>페이지에 대한 metadata를 적

2022년 9월 26일
·
0개의 댓글
·
post-thumbnail

Front-End, Back-End 기본 개념 특강

\- 사용자가 볼 수 있는 모든 부분 / HTML, CSS, JavaScript -집의 구조를 결정웹페이지 틀을 잡는 것(Header, Footer 등) 쉽지만 중요하다. (언어가 아니라고 하는 밈이 있을 정도)집의 인테리어 웹페이지를 꾸며주는 것 집의 기능을 부여(

2022년 9월 25일
·
0개의 댓글
·

9. 웹 페이지 따라 만들기 <크로스 브라우징>

인터넷 익스플로어에서는 flex item 의 width를 overflow가 hidden으로 설정되어 있음에도 불구하고, flex box 너비에 최대한 많은 아이템들이 보여질 수 있도록 수축시킴.따라서 flex-shrink:0 으로 설정시켜야함.또한, class-card

2022년 9월 24일
·
0개의 댓글
·

8. 웹 페이지 따라 만들기 <footer>

항상 inner태그가 기본이 되어야 한다.footer 태그 바로 위의 줄을 만들기 위해 border-top 으로 설정해두었다.margin과 padding설정은 알아서 잘 보고 하자.

2022년 9월 24일
·
0개의 댓글
·