[K-Digital Training](FastCampus)FrontEnd

2021.11.22 ~ 2022.03.10 (580H)

서버는 컴퓨터다!client 의 요청에 따라 데이터를 제공하는 컴퓨터 Server!제공자 역할을 하는 컴퓨터컴퓨터를 제공자로 만드는 프로그램client 쪽 개발 - Front-end!server 쪽 개발 - Back-end!다양한 브라우저가 존재한다.여러가지 브라우저에

git 설정git config --list확인git config --global --unset user.nameuser.name 을 다시 설정git config --global --user.name "user.name"git config --global --user.e

git 저장을 숙련하기위한 과제!github flow practicegithub flow로 프로젝트를 수행해봅시다주제: 에어비엔비체 구현하기Tasks직접 실행해보고 동작 원리 파악하기알고리즘 구현하기구현된 알고리즘을 수행할 페이지 구현하기github flow로 기능 단

Part02 웹 사이트 뼈대 만들기 01. HTML 마크업 언어란 Programing Language - 기계를 동작하게 지시하는 언어 Markup Language - 형식과 절차에 맞춰 필요에 맞게 작성하는 언어 What You See What You Get (

Cascade Style Sheet (CSS)HTML : 가져다 놓고CSS : 꾸미고Javascript : 시킨다.설계는 HTML로 & 디자인은 CSS로

git 으로 관리하며 개발하기 TIL Today I Learnd! github 잔디밭 관리 잘하기 github blog 관리 하기 ( hexo ) vim repo 삭제 > rm -rf reponame/ branch 삭제 > git branch -D 브렌치명

width, height: 높이와 너비단위px => 절대 크기 : 모니터상의 한점% => 상대 크기 : 바로윗 부모의 크기에 비례margin : 20px 15px 20px 15px;: 바깥쪽 여백padding: 안쪽 여백border : 1px solid black;:

Part04 JAVASCRIPT 01. Javascript와의 첫 만남

04.Javascript 배열과 반복문 for 문

HTML TIP inline 요소 특징 옆으로 수평하게 쌓인다. `` 글자 요소는 width, height 를 사용할 수 없다. 글자 요소는 margin padding은 위아래는 사용할 수 없고 좌우만 사용할 수 있다. 인라인 요소 안에는 블럭 요소를 사용할

background-image: url("");: 이미지 삽입background-attachment: scroll;: 스크롤 생성parallax(페럴렉스) :background-attachment: fixed;: 배경은 그대로 있고 요소만 움직여 배경을 부분부분 보여지

검색 엔진 최적화 ( SEO : Search Engine Optimization ) 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정. 웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정. 여러가지 브라우저에

server.jsnode server.js 주로 제목, 네비게이션을 포함하고 로고, 목차, 검색폼을 그룹핑 할 수 있다. 한번만 쓰이지 않고 section, article에서 그 영역 내 header위치에 쓰인다. 페이지내의 가장 주요한 부분을 그룹핑할 때 한번만 사용

: class 이름을 생성할 때 의미를 두고 만들어 중복하지 않고 사용할 수 있도록 하는 작명법. menu\_\_name: 요소\_\_일부분menu\_\_content--상태: 요소\_\_일부분--상태\_.throttle(function(){},300);: 반복 작업

float 층에 띄우기! float: left;float 층에 띄우고 아래에는 인라인이 올수 없기 때문에 글이 옆으로 흐른다.float 층으로 떠버리면 기본흐름 층의 나머지는 크기에 맞춰 조정된다.크기에 맞추기위해 다시한번 랜더 트리를 그리도록 한다. ( BFC 재계

슬라이드창 구현하기 Swiper > swiperjs.com : 자바스크립트 라이브러리 : 사용하기 위해 링크를 걸어준다. : 예제 처럼 클래스를 설정하여 사용할 수 있다. 클래스 설정 후에는 js로 동작을 넣어주어야 한다. 여러가지 옵션이 있고 쉽게 사용할

Figma ( 디자인 툴 ) > figma.com 디자인 툴 중 많이 쓰이는 figma 를 사용하고 익혀보자! 이전 프로젝트에서 사용해 보았기 때문에 익숙하다! 기본적으로 하나하나 부분적으로 생성하고 합쳐서 사용하는 방식. 즉 인스턴스를 생성하듯이 하여 복사

하나의 div에 3개의 버튼 만들어 넣기width를 가진 버튼그룹 div를 만들고버튼그룹인 div에 display:flex; 를 주고flex-wrap: wrap;: 줄이 넘어가면 줄 바꿈하여 배치함.을 설정한다.버튼을 크기를 조정하여 2개는 윗줄에 한개는 아랫줄에 오게

youtube iframe api우선 영상을 재생할 위치에 id 가 player 인 div 요소를 생성한다.youtube.js 파일을 새롭게 만들고그 안에코드를 입력해준다.플레이어 매개변수(https://developers.google.com/youtube/p

수업 주제메모리 관점의 jsjs DOM 이해하고 사용하기메모리 동작을 볼 수 있는 툴 페이지!파이썬 튜터여러가지 언어의 메모리 동작을 볼 수 있다.js : 인터프리터 언어, 타입 구분없이 할당c : 컴파일 언어, 타입에 따라 메모리 지정js의 함수는 객체다.선언된 함수

A -> B -> C -> A -> B -> C -> A -> B -> C 로 만들기 위해C'-> A -> B -> C -> A' 로 양끝에 클론을 만들어 놓고양끝에 C' 혹은 A' 에 도착하면 에니매이션을 잠깐 끄고 C 혹은 A 로 다시 옮긴다.insertBefore

String.prototype.indexOf('위치를찾을글자');: 찾는 글자의 위치를 숫자로 알려줌. 없으며 -1 반환.문자 데이터의 prototype으로 있는 함수는String.indexOf('글자');형식으로 사용할 수 있다.let str = "hello worl

이미 객체로 구성되어 있는 정보를 같은 속성명으로 분해하여객체에서 필요한 값들만을 지정하여 사용할 수 있다.기본값을 설정해 줄 수 있고객체에 값이 있다면 기본값을 무시하고 객체에 있는 값이 할당된다.할당 받을 값의 변수명을 : 을 적고 변경하여 사용할 수 있다.전개 연

String, Number, Boolean, undefined, null , bigint , symbolObject, Array, Function원시 데이터는 변경 불가능하다.변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다.변수에 할당한 원시 값을 변경하면 메모

바닐라 자바스크립트로 완성하기.기획디자인마크업스타일링자바스크립트(저작권 보호하기위해 잘 보이지 않게 함!)준비된 기획과 디자인을 사용했다.디자인에 마크업을 준비하기위해 조원들과 회의를 통해 통일 시키고 결정하였다.ul을 어디까지 활용해야하는가웹접근성을 좋게 하기 위해

미리 잡아놓은 마크업을 토대로 스타일링배치에 편하게 border를 넣어서 색별로 표기하며 배치를 잡는다.border라인의 두께가 배치에 영향을 주기 때문에box-sizing: border-box; 로 borer를 안으로 포함시킨다.fetch 함수를 이용해 json 데이

4. 스타일링 ☝🏽 todo 아이콘 배치 native, nav 완성 저금통 box 추가 동작 설정 날짜 최신일(->오늘)과 두번째일(->어제) 글자 변경

매번 프로젝트를 시작하기 전에 회의를 통해 현재 진행사항 공유 후 앞으로 해야할 것을 공유.( 미리 공유사항을 정리해서 글로 준비해오고 각각 발표식으로 공유하면 좋을 것 같다.)\-> github issue page 로 관리할 수 있도록 작성.문제점은 수시로 공유.js

JS DATA 내보내기, 가져오기 Default export 내보내기 > export default function test(num){console.log('test'+num+'번')}; 한파일에 한번만 할 수 있다. 가져오기 다른 js 파일에서 사용하기 이름은

TypeScript programming language compiled language ( 전통적은 compiled 는 아니다. ) transpile Compiled / Interpreted compiled 컴파일이 필요 O 컴파일러가 필요 O 컴파일하는 시점

월별 관리를 위해 today month를 찾아 해당하는 달에 포함되는 지출 구하기.월별 지출관리 페이지에서 지정한 사용가능 총액을 표시하고 월 지출금액과 계산하여 표시.광고에 현재 잔액을 통해 광고하기. (+면 투자, -면 대출 광고)저금통에 돈을 넣으면 잔액이 줄고

: type을 만들어내는 방식.type을 정의하여 사용하기 때문에 코드량이 줄고 중복으로 사용가능하게 한다.⭐️ js 로 컴파일을 하면interface 를 통해 type을 정의한 부분은 보이지 않는다.: 없어도 상관없는 프로퍼티 만들기 ( ? ): 프로퍼티 네임을 넣는

⭐️ 이 페이지만 보면 vue의 기본 문법을 사용할 수 있도록 작성하고자 하였다!!즉, JavaScript 를 더 효율적인 방식으로 작성하여 이용하고자 만들어진 js 작성툴 같은 것이다.vue 로 작업을 하면 js 로 바꿔서 웹에서 구동시킨다.우선적으로 js 는 동작하

Classes constructor(구조) & initialize(초기화) strict 모드에서는 프로퍼티를 선언하는 곳 또는 생성자에서 값을 할당해야 한다. 클래스의 프로퍼티가 정의되어 있지만, 값을 대입하지 않으면 undefined 이다. 생성자에는 asyn

: CSS Preprocessor (CSS 전처리기)main.scssparcel-bundler 패키지를 설치해두면 sass 를 인지하여 자동으로 설치!sass 는 scss -> css 로 바꿔준다.본래 css 주석은 남는다.// 주석은 css로 컴파일 되지않는다.상위선

구성data 옵션에 return 으로 data를 선언해준다.methods 옵션에 function을 만들어 실행을 준비시킬 수 있다.( 이벤트 핸들러 )data를 갱신하면 화면에 표현되는것도 바뀐다. (Reactivity) 반응성!v-속성 을 디렉티브(Directive)

beforeCreated, created, mounted, updated, unmountedcreated, mounted 를 많이 활용한다.created 는 컴포넌트를 생성한 직후이다.mounted 는 html에 연결된 직후이다.{{ msg }} 와 같이 사용한다. v

괄호 없이 사용하면 함수의 인자는 event객체를 갖는다.괄호 안에 인수를 사용하면 입력된 인수가 들어있다.인수와 event 객체를 모두 사용하고 싶을때는 $event 를 사용한다.하나의 태그에 여러개의 method를 호출하때는 () 를 꼭 넣어야한다.@click.pr

: 외부 패키지 연결하기 위한 설정.: 구성이 없는 단순한 자동 번들링소/중형 프로젝트에 적합자동으로 dist에 필요한 파일을 copy 하여 넣어주는 패키지 사용!npm install -D parcel-plugin-static-files-copypackage.json에

A JavaScript library for building user interfaces.dom tree 를 직접 사용하지 않고 component 를 만들어 virtual DOM 을 통해 사용한다.DOM 을 직접 제어하는 경우 : 바뀐 부분만 정확히 바꿔야한다.DOM

React Hooks hooks 이전 컴포넌트 내부에 상태가 있다면? class 컴포넌트 내부에 상태가 없다면? 라이프사이클을 사용해야 한다면? class 라이프사이클에 관계 없다면? function class component function comp

CRA, ESLint, Prettier, husky: git에 commit 하기 전에 점검!npm i -D huskynpx husky installpackage.jsonnpx husky add .husky/pre-commit "link-staged"npm i lint-

전통적으로 새로운 페이지로 이동할 때 페이지 정보를 url 주소를 통해 서버에 요청하고 전달 받았다.But!SinglePageApplication 를 사용하기 시작한 후서버에서 app 전체를 받아오고 client가 필요한 부분을 url 변경을 통해 사용하는 방식을 사용

주소 뒤에 ?key=value 를 입력하는 형식을 queryString 이라고 한다.사용법?name=mark내장 함수 사용하기.query-string npm으로 받아서 사용하기npm i query-string 여러 route 중 순서대로 먼저 맞는 하나만 보여준다.ex

npm i styled-componentsShadow DOMnpm i react-shadow한정적으로 css를 적용해 줄 수 있고 다른 곳에서 제어하지 못하도록 할 수 있다.디자인 되어있는 component 사용하기!npm i antdindex.js 에 antd.css

: Higher Order Component ( 고차 컴포넌트 )HOC = function(컴포넌트) { return 새로운 컴포넌트;}컴포넌트를 받아 새로운 컴포넌트를 리턴하는 함수 이다.withRouter(컴포넌트) -> router에 의해 호출되지 않아도 matc

통합테스트에 비해 빠르고 쉽다통합테스트를 진행하기 전에 문제를 찾아낼 수 있다.테스트 코드가 살아있는 명세가 된다.( 테스트를 읽고 어떻게 동작하는지도 예측 가능하다.)현재 가장 핫한 테스트 도구Easy SetupInstatnt Feddback ( 고친 파일만 빠르게

useRef 사용forwardRef: 상위로 참조 전달하기!create react app 을 사용해 만든 프로젝트는 npm run build 를 통해 빌드 할 수 있다.build/static 폴더 안에 JS,CSS 파일들이 생성, 파일 이름에 hash 값이 붙는다.❗️

우선 둘 중 하나를 선택하는 것이 아닌 둘 다 함께 사용할 수 있다.Complex Setup / Management: 큰 프로젝트를 하는 경우 너무 많은 Context Provider를 갖게 된다.( 복잡도 상승 )Perfomance: state 변동횟수가 많은 경우

: Software Development Life Cycle소프트웨어를 계획, 개발, 시험, 배포하는 과정요구사항 분석 -> 설계 -> 구현 -> 테스트 -> 유지 및 보수build & Fix: 일단 만들고 고치고 만들고 고치는 모델.Prototype: 최소한의 요구사

npx create-react-application redux-practicenpm i redux react-reduxsrc > store > index.jsindex.jsstore 이용이 필요한 부분에 제공한다.하지만 프로젝트에 하나의 store만 만들수 있으니 프로

react에서 redux store를 사용할 수 있게 하고사용할 컴포넌트에서 react-redux의 useSelector hook을 사용하여 data를 읽어올 수 있다.useSelector hook 을 이용해 읽어오면 해당 컴포넌트를 react-redux 가 자동으로

코딩 문제를 해결할 때 컴퓨터의 연산을 5초 이내로 하도록 풀어야한다.어림잡아 일반적으로 js 연산 속도를 초당 2000만번 정도로 생각하고 문제로 주는 입력값의 크기 즉 배열의 길이와 복잡도를 고려하여 5초 안에 연산을 마치도록 알고리즘을 사용하여 작성한다.지문읽기

원본 state를 직접 수정하지 않기!redux store 를 사용하면 주의할 점은 원본 데이터를 변경하지 않아야한다는 것이다.action을 reducer에 보내주어 새로운 state에 기존 state값을 복사하고 새로운 state 값을 변경하여 새로운 스테이트를 반환

npm i react-redux 설치npm i @reduxjs/toolkit 설치name-slice.js createSlice() 생성initialState 생성const uiAcitons = uiSlice.actions; 생성src/store/index.jsconst

Redux 비동기 실행

Redux-thunk

해커뉴스 페이지에서 제공하는 api를 활용하여 리딩 페이지 만들기.해커뉴스svelte로 만든 예시: ex) 스벨트로 만든 해커뉴스 리딩 페이지UI/UX 팀과의 협업.디자인 시안을 보고 디자이너의 의도를 듣고 필요한 부분들 추가하고 불필요한 부분을 제거하기 위한 회의.구

React Mini Project 작업 순서 컴포넌트 구조 설계하기 작은 컴포넌트부터 생성하기 그러기 위해 컴포넌트 단위를 잘 구성하고 작은 단위를 골라 작성한다. 우선 phone 사이즈 제작을 위해 > phone > phoneTop & application

📢 설연휴 이후 ( 11주차 목, 금 2일 중 1일 ) React Mini Project 구현 01. head, nav 02. Home 1) Ranking Top 5 Ranking Contents slider swiper api 사용 paginati

✅ List 카드 드래그 모션 추가✅ slide pagination 색 변경✅ 경과시간 api로 출력

📌 오늘 구현 목표✅ 상세 페이지 (component 생성)

📌 오늘 구현 목표✅ 무한 댓글 대댓글 구현무한 댓글 대댓글 구현

📌 오늘 구현 목표✅ 유저 정보 모달 구현유저 정보 모달 구현

5개 기업이 참여하는 파이널 프로젝트가 시작 되었다.각 기업들이 2가지 project를 기획하고 10개 팀이 프로젝트를 진행한다.함께 협업하게 된 기업은 에듀해시글로벌파트너스 이다.대표님, 기획담당자님, 백엔드 개발 담당 매니저님 총 세분과 줌을 통한 미팅을 하였다.대

( \* UX/UI 디자이너 최희경 님 발표 자료 첨부 )이교헌님restApi 사용 및 sort 후 출력 과정 설명이근영(블로그 본인)무한 댓글 로직 구현 설명이지혜님전체 동작 구현 시현 및 동작 설명

6\. 최종 제출

프로젝트의 방향성을 제시하는 프로젝트 이름 세우기실제 application 을 사용할 대상을 대표하는 페르소나를 설정페르소나가 많기보단 특징을 갖는 적은 수의 페르소나가 좋음.예시) 공무원 준비생 application - 초시생, 장수생application에 연관된 모

모의고사에 대한 다른 학생들의 느낌을 공유하고 싶다.(성적표 받기 전에 체감난이도 평가 미달)모의고사에 문제에 대한 해석, 출제 이유 등을 성적을 받음과 동시에 해소하고 싶다.(코멘트 사용 시간 제한)수강생들은 자신감이 필요하다.수강생들은 공부하느라 바쁘다.수강생은 강

작성 완료! 완료! 완료!모든 참여 기업이 참관한 줌에서 모든 파이널 프로젝트 참여 팀들이 기획 발표를 한다.지금까지 기획을 위해 조사한 것들을 모두 ppt 에 담아 기획 발표!몇가지 고민사항들을 물어보고본래 프로젝트 취지와 합당한지도 다시 확인 하였다.역시나 고민

디자인 시작!1차 디자인 기한은 3일!구체적인 기능들을 논의하고 페이지 시작부터 끝까지 필요한 기능들과 사용방식을 논의하였다.앞으로 디자인 기간동안 지속적으로 확인하며 회의를 통해 기능 사용 순서과 방식에 맞춰디자인이 잘 되도록 디자이너와 개발자가 소통 필수!

48시간 단기 프로젝트 해커톤 참여!

48시간 단기 프로젝트 해커톤 참여!

48시간 단기 프로젝트 해커톤 참여!

가장 주가 되는 페이지 부터 개발하여 나간다.main - report page.nav, header, noticelogin순으로 개발!github organization 을 만들어repo 를 fork 하여 작업!master, develop branch 는 1명이상의 a

d3 라이브러리로 시각화 하기.목표진행

반응형 페이지 작성 기본 기획 및 디자인 문제.반영형 페이지를 작성하기위해 고려되어야할 것들이 많다.기획 디자인 단계에서 놓친 것들이 많아 개발 과정에서 문제 발생.많은 모니터 사이즈, 테블릿 사이즈, 스마트폰 사이즈에 대응하기 위해완전 반응형을 기획하였다.개발 시작

패스트캠퍼스 프론트엔드 스타트업트랙 과정 수료