패스트 캠퍼스 MGS FE 3기

오리엔테이션 🧊 아이스브레이킹 간단한 자기소개를 하면서 조원분들과 친해지는 시간을 가졌다. 조원분들 모두 오프라인으로 참석하셔서 소통하기도 쉬웠고 조금 더 빨리 친해질 수 있어 좋았다. 무엇보다도 모두 열정적인 분들이어서 끝까지 열심히 해서 각자 원하는 목표를 달

Git, GitHub를 이용한 버전 관리

Git Bash 사용법 익히기, Hexo를 이용한 GitHub blog 생성

Git, GItHub 사용법, 브랜치 다루기

💡 Keyword 웹 프로그래밍이 무엇인지에 대해 상대 경로와 절대 경로 개발자 도구 CodePen 브라우저 스타일 초기화 1. 컴퓨터의 메모리 컴퓨터는 메모리에 있는 데이터를 CPU가 계산해주는 계산기이다. 메모리는 입력된 신호(주소/데이터)에 대한 전자 상태

💡 Keyword Javascript의 함수 웹페이지의 구조 파악 1. Javascript 구조적인 객체를 정적으로 찍어내는 html과는 달리 js는 데이터에 대한 반복, 비교, 평가, 저장 등 일련의 일들을 CPU에 명령할 수 있는 다양한 표현력을 가지고 있다

💡 Keyword 함수 선택자 -getElementById, getElementsByClassName, querySelector PSEUDO CODE Javascript 특강 ref: https://northern-goldfish-40c.notion.site/J

CSS 선언 방식에는 내장 방식, 인라인 방식, 링크 방식, @import 방식으로 총 4가지의 방식이 있다.유지보수 측면에서 단점이 많다. 직접적으로 코드를 작성 시에 내장 방식을 사용하는 것은 권장되지 않는다.너무 지나치게 우선해서 css를 덮어쓰면서 수정하고 싶어

css를 통해 html의 어떤 부분을 제어할 수 있을까?박스 모델글꼴배경배치플렉스(정렬)전환: 요소의 전, 후 상태를 애니메이션 처리변환: 요소를 회전하거나 이동, 크기 조정띄움애니메이션: 전환보다 조금 더 복잡한 애니메이션을 만들 수 있음그리드: 행과 열의 구조를 가

들어가기 전.. 인라인 상자 상하 여백은 적용 ❌ 👉 밀어내지 못한다고 말하는 것이 좀 더 정확, 덧그려진다. 좌우 여백은 적용 ⭕ 블록 상자 상하좌우 여백 적용 ⭕ 📖 예제 1 `를 사용해서 부모 요소 안에 자식 요소를 두 개 만들고, 자식

💡 Keyword position flex 빨간색: 기본 값 파란색: 기본 값 외에 자주 사용되는 속성 1. position 요소의 위치 지정 기준이다. position과 같이 사용하는 CSS 속성들(top, bottom, left, right, z-index

💡 Keyword 전환 효과(transition)와 각 속성들 변환 효과(transform)와 각 함수들 속성 perspective와 함수 perspective의 차이점 1. 전환(transition) transition: 속성명 지속시간 타이밍함수 대기시간 요

1주차(22-04-11~22-04-17) 주간 회고, 2주차(22-04-18~22-04-24) 주간 회고

JavaScript 개요 1. 표기법 dash-case(kebab-case) HTML, CSS the-quick-brown-fox snake_case HTML, CSS thequickbrown_fox camelCase JS theQuickBro

https://nodejs.org/en/🤔 LTS(Long Term Supported)장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전이다.https://gi

💡 Keyword js의 클래스 - 생성자와 this 함수 종류에 따른 this의 정의 ES6 Classes 상속(확장) 클래스 1. 생성자 함수(prototype) 다음 예제에서 객체 데이터를 하나 만들 때마다 메모리에 할당되는데 함수는 로직이 똑같음에도 불

💡 Keyword 각 데이터(문자열, 숫자 배열 등)에 적용할 수 있는 속성들 데이터 다음 데이터들을 다루는 추가적인 명령들에 관해 배워보자. String: "", '', `` Number Boolean: true, false undefined null Arra

💡 Keyword 구조 분해 할당 전개 연산자(...) 원시 데이터와 참조형 데이터의 불변성 얕은 복사와 깊은 복사(with lodash) 1. 구조 분해 할당 객체 데이터에서의 구조 분해 할당 user라는 객체 데이터에서 내용을 '구조 분해' 해서 내가 원하는

💡 Keyword 1. 가져오기, 내보내기 Default export: 이름을 지정하지 않고도 내보낼 수 있다. Named export: 이름을 지정하여 내보내야 한다. getType.js, getRandom.js를 통해 내보내고, main.js에서 가져와서 사

💡 Keyword 정규표현식의 쓰임새 정규표현식에서 사용되는 메소드 정규표현식 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)이다. 문자 검색(search) 문자 대체(replace) 문자 추출(extract) > 🤔 정규표현식 테스트 사

1. TypeScript 개요 'Programming Language' 언어이다. 'Compiled Language'이다. 전통적인 'Compiled Language'와는 다른 점이 많다. 그래서 'Transpile'이라는 용어를 사용하기도 한다. 자바스크립트

3주차(22-04-25~22-05-01) 주간 회고

터미널에서 npm 프로젝트를 시작한 후, 3개의 webpack 패키지를 동시에 설치한다.package.json의 scripts 부분에 명령어를 추가한다.필요한 파일들을 생성한다.webpack은 따로 파일을 생성하여 구성 옵션을 직접 지정해야한다.이는 브라우저에서 동작하

리액트에서는 사용자 정의 태그를 생성할 수 있는데, 이를 '컴포넌트' 라고 한다.컴포넌트를 사용하면 다음과 같은 장점이 있다.가독성 증가재사용성 증가유지보수 편리\_https://ko.reactjs.org/docs/create-a-new-react-app.ht

들어가기 전.. 라이브러리 vs 프레임워크 라이브러리 | 프레임워크 :--:|:--: 개발 편의를 위한 도구의 모음 | 기반 구조까지 잡혀있음 공구 | 공장 React | Vue.js, Angular React 생태계 생태계가 풍부하다! 즉, 구글링 하기 좋다. 해

CRA: create-react-app. 리액트 개발 환경을 세팅해주는 라이브러리이다.🤔 React 개발 시 편리한 확장 프로그램확장 프로그램 > 'react' 검색 > 가장 상단 프로그램 설치rfce: 다음과 같은 default 코드를 자동으로 생성해주는 모듈이다.

DOM: 논리 트리컴포넌트: 엘리먼트의 집합엘리먼트: 요소컴포넌트의 상태를 다루는 훅이다.여기서 APP()은 button이나 input 등 여러 요소들을 포함하고 있으므로 컴포넌트이다.useState를 사용해서 어제 만든 검색창 예제를 다음처럼 바꿀 수 있다.컴포넌트의

4주차(22-05-02~22-05-08) 주간 회고

1. CRA(create-react-app) React 프로젝트를 위한 boilerplate이다. CRA로 리액트 프로젝트 생성하기 CRA의 package.json 기본적으로 dependency들이 숨겨져있다. eject scripts를 통해 webpack, ba

1. 커스텀 훅 만들기 커스텀 훅(Custom Hook)이란 함수 컴포넌트에서 리액트의 기능(useState, useEffect..)들을 사용하게 해주는 함수이다. 이전에 훅을 이용해 만든 간단한 검색창 예제를 이번엔 커스텀 훅을 만들어서 반복되는 코드를 관리해보자

1. Props 공식 문서 - Components and Props 컴포넌트에 직접 주입하는 값을 props라고 한다. children도 props의 일부이다. props로 className이나 여러 handler를 줄 수도 있다. 읽기 전용이므로 입력값

5주차(22-05-09~22-05-15) 주간 회고

1. Hooks 공식문서: https://ko.reactjs.org/docs/hooks-intro.html 클래스의 단점을 보완하면서 라이프사이클 등과 관련된 함수를 재사용 가능하게 한다. 사용 규칙 훅은 자바스크립트 함수지만 두 가지 규칙을 준수해야 한다. 최상

1. Rendering 조건부 렌더링 렌더 시 무시되는 값 루프 활용 렌더링 key의 역할 조건부 렌더링 실습 true, false, null, undefined 이러한 값들은 화면에 렌더되지 않는다. 이를 {true ? : undefined} 이런 식으로

1. Memoization 공식문서: https://ko.reactjs.org/docs/react-api.html 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠

Date 관련(날짜 표기/계산 도구)스타일링 관련(스타일링을 조금 더 편하게 도와주는 도구)디자인 UI 관련(미리 해둔 스타일링을 제공하는 도구)애니메이션 관련(애니메이션 기능을 미리 구현해두고 제공하는 도구)모킹 관련(데이터 페칭을 대체해주는 도구)상태 관리 관련(컴

state 컴포넌트 안에서 관리되는 유동적인 데이터이다. 1. useState > 🤔 리액트 컴포넌트가 다시 렌더되는 조건 함수 컴포넌트가 렌더된다. = 함수 컴포넌트가 다시 실행되었다. prop이 업데이트 된 경우 state가 업데이트 된 경우 부모 컴포넌트가

CSS의 문제점 (React를 쓰면서)Global Namespace: 글로벌 변수를 지양해야 하는 JS와 대치Dependencies: css 간의 의존 관리Dead Code Elimination: 안 쓰는 css 인지 어려움Minification: 클래스 이름 최소화S

기존 바닐라 자바스크립트에서 input element가 필요하면 getElementByID, querySelector 등을 이용해 해당 DOM을 가져와서 사용한다.리액트에서는 useRef라는 것을 사용한다. 여러 HTML 엘리먼트 중에서도 <input>을 제어할

useEffect side effect를 다룰 때 사용하는 Hook이다. 다음 코드는 리렌더 될 때마다 Document에 대해 이벤트 리스너가 중복으로 생성된다. 이벤트 리스너가 중복으로 생성되어서 클릭 한 번에 alert이 여러 번 뜨게 되는 것 이때, useEffect를 사용해서 코드를 다음처럼 수정하면 이벤트 리스너가 최초 렌더 시 한 번만 생...

SPA(Single Page Application) 새 페이지를 보여줄 때, 페이지 이동 대신 자바스크립트를 이용하여 기존 DOM을 새로운 DOM으로 대체한다. MPA와 비교했을 때 SPA의 장단점 장점: 자연스러운 페이지 이동 UX 제공 가능 새로고침이 발생하

wildcard(*), Navigate props.path로 `(asterisk)를 넘겨주는 경우 모든 url에 대응한다. (Route는 순서대로 동작하므로, 일반적으로 `는 가장 아래 배치한다.) 이를 이용해 유저가 잘못된 url로 접근 시 404 페이지를 띄워주거나 메인 페이지로 이동시키는 등의 처리를 할 수 있다. (} />) ``: 해당 url로...

6주차(22-05-16~22-05-22) 주간 회고, 7주차(22-05-23~22-05-29) 주간 회고