KDT 핀테크 프론트엔드 개발자 2기 배운 내용

git bash 입력해서 CLI 창 띄우기 Linux 명령어를 사용 ※개념 커널 : 하드웨어와 소프트웨어를 연결 shell : 운영자와 커널을 이어준다 $ : 사용자의 입력을 받을 준비가 됐다 ~ : 로그인한 사용자의 최상위 폴더를 의미 / : 운영체제가 접근할 수

git config --list : 확인 git config --global user.name ""git config --global user.email ""git config --global core.editor "vim"git config --global core.

README.md : 프로젝트를 설명하는 파일, 가장 중요한 역할, 문서화의 일부이름, 한줄요약, 데모페이지, 어떻게 설치, 지원, 버전, 라이센스등을 포함해서 작성한다.\*https://github.com/angular/angular : reference에

4일차는 실습을 진행하여 복습을 하였고 5일차에 다시 내용을 배웠다.되돌리기 연습 revert-practice\+git log 로 바뀐 내용 확인 가능나쁜 예시 : mv README.md LICENSE단순하게 이름을 바꾸려고 mv 만 사용할 경우 git status로

1. 프론트엔드 개발의 정의 HTML, CSS, JS를 사용하여 데이터를 GUI(Graphci User Interface)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것을 말한다. 흔히 앞단이라고 말한다. 2. HTML (Hyper Text Marku

1. Visual Studio Code 설치 code.visualstudiocode.com으로 들어가 자신의 운영체제에 맞는 다운로드 파일을 선택하여 다운로드 받는다. 프로그램 설치를 진행한다. 2.

1. Element(요소) > 내용 Element(요소) : 어떠한 태그들로 내용이 감싸져 있고 그것이 하나의 HTML 코드로써 동작하게 되는데 이를 Element(요소)라 한다. 내용 전체가 요소 이다. 시작(열린)tag : 앞쪽에 있는 ""이다. 종료(닫힌)t

1. 기본 문법, 주석 1-1. 선택자 {속성: 값;} 선택자 : 스타일(CSS)을 적용할 대상(Selector) 속성 : 스타일(CSS)의 종류(Property) 값 : 스타일(CSS)의 값(Value) 속성은(:) 값이다(;) { } : 스타일 범위의 시작과 끝

1. CSS로 제어가 가능한 것들 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 2. 속성(Properties) HTML의 속성(Attribute)과 표현이 다르다는 것을 먼저 인지하자. 2-1. 너비 (width,

1. 배치 1-1. position position : 요소의 위치 지정 기준 기본 값 : static(기준 없음) position: relative; : 요소 자신을 기준, 화면에는 아무런 변화가 없다. 만약 뷰포트 기준이 아닌 다른 요소를 기준으로 삼고 싶다면

1. JavaScript 개요 1-1. 표기법 표기법은 크게 4가지로 되어있다. dash-case(kebab-case) snake_case camelCase ParcelCase 1. dash-case(kebab-case) dash를 사용한 표기법 ex) the-

※ 코로나 확진 관계로 몸 상태가 좋지 않아 업로드가 늦었습니다.. 1. Animation Animation: animation 속성들을 통해서 animation 동작을 제어하는 속성이다.(controller) @keyframes규칙으로 만들어 놓은 animatio

1. @media 반응형 레이아웃(웹사이트)를 만들 때 사용하는 문법이다. +) 추가 개념 @charset "" : 인코딩 @import url('') : import를 사용해서 url연결 @keyframes : 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일

1. 데이터 타입 (typeof) typeof : 데이터 타입을 확인하는 연산자이다. 2. Operator(연산자) 1. 산술 연산자(arithmetic operator) 일반적인 +, -, *, /, %이다. 2. 할당 연산자(assginment operator)

문자(string)숫자(number)불린(boolean)nullundefined심볼(Symbol)큰 정수(BigInt)배열(Array)객체(Object)함수(function)따옴표로 묶여 있어야 함!Not-A-Number - 숫자 데이터 / 숫자로 표시가 불가!NaN내

String 전역 객체는 문자열(문자의 나열)의 생성자 이다.indexOf(searchValue)메소드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환한다. 일치하는 값이 없다면 -1을 반환한다.매개변수(searchValue) : 찾으려는 문

객체(object)

함수(Function) 선언과 표현 선언 : 호이스팅 O 표현 : 호이스팅 X call : 함수 호출 new Function() 생성자 함수 호출로 함수를 만드는 법! 근데 자주 안씀. 반환과 종료 return undefined return 키워드를 사용

1. Import & Export import: javascript파일은 기본적으로 외부에 있는 다른 javascript파일을 가져올 수 있는 하나의 통로가 있다. 이를 import로 작성하여 가져온다. export: javascript파일은 특정 내용을 밖으로

※과제로 인하여 정리 기간이 늦어졌습니다.. 수업내용 위주의 정리입니다. 함수 1. 화살표 함수 화살표 함수는 익명함수이다. 함수 표현이며 호이스팅이 되지 않는다! 간소화: return은 생략이 가능하다. 단, return이 하나만 있을 때만 가능하다! 객체데이

※과제로 인하여 정리 기간이 늦어졌습니다.. 수업내용 위주의 정리입니다.

정규식, Regular Expression정규표현식은 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식 언어(패턴)이다.간단한 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능 등을 정규표현식을 사용하여 만들 수 있다.문자 검색(search)문자 대체(r

Scss 문법을 통해 표준 css문법보다 쉽고 강력한 기능을 가지고 있기에 사용한다.하지만 브라우저에서 실제로 동작할 수 있는 것은 표준의 css뿐이므로 Sass문법을 css 문법으로 변환(컴파일)을 해줘야 한다.css의 전처리 도구라고 한다.&: 자신이 포함되어져 있

구조를 만들어놓고 인스턴스라고 불리우는 객체 데이터를 찍어낼 수 있다.생성자 함수로만 사용하라고 정의하기 위해 파스칼케이스로 작성 한다.내부 메소드는 한 번만 만들어진다.class는 "틀"이다. class 문법은 prototype으로 돌아간다. 지금은 새로운 class

Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다.모든 Vue 어플리케이션은 createApp함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다.인스턴스가 생성되면, mount메소드에 컨테이너를 전달하여 mount 할 수 있다.어플리케이션

객체구조분해에서는 콜론을 사용하여 사용하고자 하는 이름을 바꿀 수 있는데, import에서는 as키워드를 대신 쓴다.참조사이트: http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY

계산된 데이터, 계산된 데이터는 데이터 옵션에 정의한 특정한 데이터를 추가적으로 연산을 통해 정의를 한 다음 그 값은 반환해서 사용할 수 있는 새로운 계산된 데이터이다.캐싱기능이 존재하며 한 번 연산해둔 값이 있다면 재 연산 하지 않는다.getter, setter(값을

v-if디렉티브는 조건에 따라 블록을 렌더링 할 때 사용한다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 된다.v-if는 전환 비용이 높으며 런타임 시 조건이 변경되지 않는다면 사용하는 것이 좋다.v-else와 함께 “else 블록”을 추가하는 것도

1. Component 컴포넌트란 Vue의 가장 강력한 기능중 하나이며 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움이 된다. 1-1. Props 컴포넌트가 실행될 때 속성처럼 받아내는 내용들을 받아줄 수 있는 옵션이다. 해당 컴포넌트에

※ 과제로 인하여 한 번에 정리해서 올립니다. CDN을 이용한 Vue.js 써보기 `을 head` 태그에 적어주면 vue 기능을 활욜할 수 있다. 기본적인 세팅 index.html main.js 1. Data data속성은 반응성을 가지는 데이터들을 정의하는 용

※그림 출처: Fast campus - 한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. / 박영웅 강사님 강의App.vue를 기준으로 여러 컴포넌트를 활용하는데 부모 형제가 아닌 특정한 관계가 여러가지 컴포넌트에서 같은 데이터를 활용할 때 Store라는 개

vite는 현재 사용하는 프론트엔드 개발에서 웹팩을 중심으로 개발 환경과 배포 시스템이 구축되어 있는데, 이 웹팩을 사용할 때 보다 훨씬 더 빠르게 개발하고 배포할 수 있기 때문에 등장한 javascript 네이티브 모듈을 기반으로 한 dev server이다. 웹팩은

router-view vue-router를 사용하여 중첩 된 라우트 구성을 이용할 수 있다. 아래는 공식 문서에 있는 예시를 가져온 것이다. 이를 이용하여 이번 mini project에 이용을 해 보았다. 적용한 곳은 로그인/회원가입 페이지, 마이페이지, 제품검색

이번주 처음으로 React를 시작했다.다른 프론트엔드 프레임워크인 Vue를 다뤄봐서 그런지 그나마 쉽게 개념들을 이해하고 내용들이 와 닿았다는 생각이 들었다.React는 Meta(전 Facebook)에서 만든 프론트엔드 라이브러리(프레임워크)이다.오픈소스 프로젝트이며,

React의 Hook

React Router 1. 개념 및 설치 react-router는 특정한 주소와 컴포넌트를 연결시켜주고, 주소 이동을 통해서 다른 컴포넌트화면을 보여줄 수 있도록 하는 기능을 제공해주는 라이브 러리다. 단일 페이지 주소 뒤에 다른 주소가 추가 되면서 작업을 진행 할

Redux는 useReducer를 썼을 때와 비슷한 구조를 가지고 있다.\+1, -1 버튼을 가진 카운터를 구현해보자.먼저 폴더의 구조는 src 내부에 다음과 같이 생성해준다.그 다음 Redux를 미리 설치해주자yarn add redux react-redux처음으로 어