오늘 수강한 강의 : # 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript오늘의 강의 정리 📗React란?User Interface를 만들기 위한 JS 라이브러리(Facebook_현재Meta에서 만들었다.)웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생겼으며, 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용되었음DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크(라이브러리)가 등장Angular, React, Vue를 프론트엔드 개발을 대표하는 도구 3가지라 부름Angular, Vue ..

오늘 수강한 강의 : # 【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript오늘의 강의 정리 📗JS 복습모듈 - import & export모듈개발하는 app이 커지면 어느 순산 파일을 여러개로 분리해야하는 순간이 옴js 에서 분리된 파일 각각을 모듈(module)라고 부름보통 클래스 하나나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성export파일이나 모듈 안의 함수나 객체를 export 할 때 사용Named exports와 Default exports 두가지 방법이 있음부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있음즉, 여러개의 모듈을 모아놓을 하나의 모듈을 만들 수 있음.각각의 reducer 을 만든 다음 하나의 super..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗제어구조, 제어구문프로그램의 논리 구조를 표현할 수 있는 조건문과 반복문, 그리고 그 밖에 프로그램의 논리 구조에 영향을 미치는 구문Boolean 연산자값 : true , false (진리값)1 2; // false3 === 3; // true3 !== 3; // falseNumber.isFinite(Infinity); // falseNumber.isNaN(NaN); // true'hello'.includes('ll'); // true비교 연산자논리 연산자js는 진리값에 대한 여러 연산을 지원논리 연산// 논리 부정 (logical NOT)!true; // false!false; // ..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗자바스크립트 기초 이해하기자바스크립트란?웹 페이지에서 복잡한 기능을 구현 할 수 있는 스크립팅 또는 프로그래밍 언어.보통 스크립트 언어 혹은 인터프리터 언어로 분류됨.JavaScript 코드는 JavaScript엔진에 의해 해석(기본 기계어로 직접 변환)됨.JavaScript 엔진 : JavaScript 코드를 실행하는 컴퓨터 프로그램.(최초 JS엔진) 단순한 인터프리터 -> JIT(Just-In-Time)또는 런타임 컴파일을 통해 성능 향상클라이언트 측 JS : JS 가 브라우저에서 작동하는 방식을 나타냄.이 경우 JS 엔진은 브라우저 코드 내부에 위치.모든 주요 브라우저에는 JS 엔진..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗멋있는 웹사이트 만들기CSS 변수변수의 선언 : "–"로 시작하는 변수명 : 사용하고자 하는 속성일반 속성과 마찬가지로 요소 내부에 선언하면 되나, 보통은 root 의사선택자 안에 적용해서 전역으로 사용main { --main-bg-color : brown;}:root { --main-ft-color: rgb(255,255,255);}변수 사용 : var(“CSS 변수명”, [해당 변수가 없을시 사용할 속성])main { background-color: var(--main-bg-color)}CSS 변수의 상속상위 엘리먼트의 변수값은 하위 엘리먼트로 상속됨하위 엘리먼트에 선언된 변수값은 상..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗em : 해당 단위가 사용되고 있는 요소의 font-size 속성값에 비례해서 결정되는 상대 단위font-size : 20p0.5em = 20 px x 0.5 = 10px1em = 20 px x 1 = 20px2em = 20 px x 2 = 40px3em = 20 px x 3 = 60pxfont-size : 10px0.5em = 10 px x 0.5 = 5px1em = 10 px x 1 = 10px2em = 10 px x 2 = 20px3em = 10 px x 3 = 30pxrem : html 요소의 font-size 속성값이 기준rem에서 r은 rootHTML에서 최상위 요소는 이기 때..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗HTML CSS 레이아웃 및 포지셔닝text 스타일링margin 축소(중복)인접 요소끼리만 margin 축소 현상이 일어나는게 아니라, 부모자식 요소 사이에서도 margin 축소가 일어남.선형 그라디언트linear-gradient( to right, yellow 50%, red 60%, purple )positionstatic : (default) 요소를 일반적인 문서 흐름에 따라 배치차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용abso..

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프오늘의 강의 정리 📗오늘 VOD 강의(13-16일차) 진도에서는 깃과 깃허브를 통한 버전관리와, HTML CSS의 레이아웃 및 포지셔닝에 대해서 배웠다. Git, Github의 경우엔 계속해서 써왔고, 앞으로도 계속 사용할 버전관리 시스템이기 때문에 다시 한 번 복습한다는 관점에서 수강을 완료했다. HTML CSS에서도 grid와 flex처럼 요소를 배치하는 부분에서 최근 프로젝트에서 고생을 했던 부분이었기에 관심있게 수강 할 수 있었다.git, github를 통한 버전관리브랜치가지 또는 분기점.보통 git을 통한 협업 혹은 개발을 할때에 주 축이 되는 브랜치의 현재 상태를 복사하여 ** 생성한 새로운 Br..

오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프 HTML & CSS 요약HTML과 CSS에 관해 기존에 배운 HTML 요소들과, CSS 스타일링 방법에 대해 복습하는 강의를 들으며 아래의 새로운 태그를 배웠고,강조 태그 강조할 컨텐츠 //(시스템에서 읽어 줄 때 텀을 두면서 어조를 조금 바꾸는 식으로 강조)강조할 컨텐츠 //(시스템에서 읽어줄 때 강하게 읽으면서 강조)파비콘 태그 HTML과 CSS를 summery하는 웹페이지를 만들었다.강의를 따라 배포한 netlify 링크가 아마 하루까지밖에 유효하지 않는다고 해서, 아래에 작성한 코드를 첨부한다.//index.html Hi there! marks a comment by..

HTML & CSS 자세히 알아보기오늘 수강한 강의 :  【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프 css 코드 서식인라인 스타일을 사용하지 않을 때(style 속성을 통해) CSS 코드는 일반적으로 다음과 같다.p { font-family: sans-serif; text-align: center;}이 코드는 읽기 쉽게 작성되어 있다. 하지만, 반드시 위처럼 작성해야 하는 것은 아니며, 이론적으로는 아래와 같이 작성할 수도 있다.p {font-family: sans-serif;text-align: center;}그러나 위와 같은 코드는 이해하고 유지 관리하기가 훨씬 더 어렵기 때문에 일반적으로 읽기 쉽게 작성한 맨 위의 서식처럼 작성한다. 다음은 CSS 코드 형..

웹 개발 기본과 HTML&CSS오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프웹(WEB)이란?World Wide Web의 줄임말로 사용됨.전 세계의 컴퓨터들을 네트워크로 연결하여 "정보를 공유"하는것을 목표로 함.컴퓨터들을 인터넷으로 연결하는 여러 서비스들 중 하나가 바로 웹(Web,www).www.google.com을 검색하면 벌어지는 일HTTPHTTP(Hyper Text Transfer Protocol)웹상에서 정보를 가져와 화면에 출력하기위해 사용하는 통신규약 중 하나인터넷에서 HTML 문서와 같은 데이터를 주고받을 수 있도록 해주는 프로토콜.기존 TIL 참고 :HTTP/1.0, HTTP/1.1, HTTP/2, HTTPS, H..

1. Class component : 더 많은 기능 사용 가능하나, 코드가 길어지고 복잡해지며 조금 느려진다. - 1) functional component에서 사용 할 수 없던 것들 - 2) 하지만 react 16.8 이후에는 대부분이 functional component를 통해서 Hook을 이용해서 사용 가능해짐. 2. Functional component : 제공하는 기능은 적으나, 코드가 짧아지고, 빨라진다.