국비지원 프론트엔드 과정

Image & GIF를 넣을때 사용Markdown 파일에 아래와 같이 입력headerMD Header Markdown 파일에서 뱃지를 표현하고 싶을 경우 사용Markdown 파일에 아래와 같이 입력BadgeMarkdown 파일에서 이모티콘, 물체 등등의 이모티콘을 넣을

화면에 이미지를 넣을 때 사용한다.src 안에 넣고 싶은 이미지의 경로를 적으면 된다.절대경로이미지 자체의 url을 복사하여 작성 (웹주소)상대경로이미지의 경로가 현재 파일과 같은 폴더에 있을 때는 파일명만 적어도 된다.이미지의 경로가 내부 폴더 안에 있을 때는 '/'

티스토리에 적었던 내용 벨로그에 옮김웹 개발 표준 문서MDNMDN/HTML온라인으로 웹 기술을 배우는 교육용 웹 사이트HTML, CSS, 자바스크립트, JSON, PHP, 파이썬, XML, SQL, Bootstrap, Node.js, JQuery등 다양한 교육용 자료를

티스토리에 적었던 내용 벨로그에 옮김inline tag폰트를 나타낼 때 사용글자의 정확한 크기를 알 수 없어서 자주 사용되지 않음size글자의 크기를 지정하는 속성face컴퓨터 내에 설치되어 있는 폰트에 한해 사용 가능하다.모든 컴퓨터에 같은 폰트가 설치되어 있지 않으

태그나 웹 페이지에서의 입력 방식 (로그인창, 회원가입 등)텍스트 필드에 글자를 입력하면 백엔드 서버에 양식이 전달됨전체 양식을 의미, 화면에 보이지 않는 추상적인 태그name: 폼의 이름action: 폼 데이터가 전송되는 백엔드 urlmethod: 폼 전송 방식 (G

웹 페이지에 오디오(mp3등) 파일을 나타낼 때 사용하는 태그여러 개의 오디오를 넣을 수 있지만 처음 인식된 확장자만 사용한다.autoplay : 웹 페이지 열람 시 자동재생loop : 오디오를 반복되게 함. loop="숫자"를 통해 반복 횟수를 조절할 수 있다.con

선택자 응용

백그라운드이미지 관련은 8일본문에 정리이미지 여러장 넣기 - ','(콤마)로 여러 개 삽입 가능background-image: url('img/BackgroundFront.png'), url('./img/BackgroundBack.png');background-size

창 사이즈(viewport)에 반응하여 상대적으로 크기가 변하기 때문에 반응형 웹에서 주로 사용한다.뷰포트의 1%를 크기로 갖는다.창 사이즈를 변경할 때마다 그에 맞게 변경됨.CSS vw & vh

정리할것 z-index position: absolute | relation 두가지에서만 사용 position: sticky position: fixed, absolute 응용 시멘틱(semantic) 구조 태그 header, section, article, nav

layout - 다단(columns) column-count 단(column)의 개수 column-width 단 각각의 너비 column-gap-width 🚩 벤더프리픽스(크로스 브라우징) 📝 설명 브라우저마자 렌더링 엔진이 다르기 때문에 웹에서 css를 적용할

나중에정리함

display: flex

🚩 transform transform 📝 설명 요소의 위치, 회전, 비틀기, 확대/축소 효과를 부여하기 위한 함수이다. 속성 translateX(n) : 요소 위치를 x축으로 n만큼 이동 translateY(n) : 요소 위치를 y축으로 n만큼 이동 trans

vscode html emmet 변경방법설정 -> emmet 검색 -> emmet:variables -> 항목 추가 -> lang ko로 변경흐림효과나 색상 변형 등 그래픽 효과를 요소에 적용한다.이미지로 대체CSS filter앨리먼트에 적용되는 css 속성을 애니메이

🚩 loading 응용 loading 📝 설명 어제 했던 css 백그라운드 배경 애니메이션에 로딩 효과를 응용하였다. ✒️ 사용법 입력 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 🚩 button 응용 button 📝 설명 지금까지 배운

🚩 📝 설명 ✒️ 사용법 입력 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 Javascript javascript란? 📝 설명 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있습니다. 한 줄씩

🚩 변수 타입 number 📝 설명 숫자를 나타낼 때 사용하는 변수 ✒️ 사용법 입력 출력 이미지로 대체 string 📝 설명 문자열을 나타낼 때 사용하는 변수 ✒️ 사용법 입력 출력 이미지로 대체 boolean 📝 설명 boolean 타입. t

🚩 Javascript 객체(object) 📝 설명 데이터, 함수의 묶음 (그룹핑) / 복합데이터 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 집합. 프로퍼티의 값으로 함수가 올

🚩 Javascript javascript란? 📝 설명 ✒️ 사용법 입력 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 Javascript

🚩 대화상자 alert / confirm / prompt 📝 설명 팝업 창을 띄우는 것은 같지만 각자 역할이 다르다. alert() 경고창. 단순히 메시지를 전달하는 역할이고 반환값이 없다. (확인 버튼만 존재) confirm() 확인창. true/fa

🚩 제어문 - 조건문(Conditional Statement) 제어문이란 코드의 흐름을 제어하는 문장을 뜻한다. 제어문은 조건문, 선택문, 반복문이 있는데 그 중 조건문은 해당 조건이 true/false일 때 동작한다. switch () 📝 설명 정해진 범위 안의 값에 대해 특정한 일을 해야 하는 경우에 사용 ✒️ 사용법 입력 예제1 js 예...

🚩 제어문 응용 적정 몸무게 구하기 ✒️ 코드 입력 html js 출력 이미지로 대체 >prompt 입력 >결과 ![](https://velog.velcdn.com/images/raumschiff_/post/4fd88528-0d06-42d9

🚩 다양한 함수 정의 익명 함수(함수 표현식) 📝 설명 함수를 변수에 할당하여 사용한다. 함수는 일종의 객체(Object)이기 때문에 가능 ✒️ 사용법 입력 예제 js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 javascript 익명함수 화살표 함수(arrow function) 📝 설명 function 함수를 화살표로...

🚩 object 만드는 법 객체 리터럴(Object literal) 📝 설명 중괄호를 이용하여 객체를 만드는 방법 { key: value, key: value }의 형태로 되어 있다. ✒ 사용법 입력 js 출력 이미지로 대체 Object class (생성자 함수) 📝 설명 new Object()를 사용하여 객체를 만드는 방법. 중괄호가 n...

🚩 생성자함수(construction function) 생성자 함수 📝 설명 객체를 만들어 주는 함수 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. ✒ 사용법 입력 js 객체 리터럴 js 생성자 함수 출력 이미지로

나중에 내용 추가해서 다시 수정하기~ 🚩 확장 (extends) extend 📝 설명 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됨 ✒ 사용법 입력 js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 Math Math 📝 설명 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체이다. (함수 객체❌) Number 자료형만 지원 메서드 abs() : 절대값 출력 ceil() : 소수점 이하 올림 floor() : 소수점 이하 내림 (음수 포함) r

클론코딩 둘중 하나 할 예정 https://www.bing.co.kr/ https://www.lush.co.kr/ 🚩 반복 호출 setInterval() 📝 설명 각 호출 사이에 고정된 시간으로 함수를 반복적으로 호출한다. clearInterval() 함수로

🚩 DOM (Document Object Model) DOM 📝 설명 DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을

내일수정~ 🚩 Document method querySelectorAll() 📝 설명 querySelector()와 사용방법은 동일 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환 ✒️ 코드 작성 예제 css html js 출력 이미지로

🚩 DOM - text 접근 text에 접근하는 방법 📝 설명 HTMLElement.textContent : 숨김처리한 텍스트까지 가져옴 Element.innerHTML : 화면에 보이는 텍스트만 가져옴 Node.textContent : html 태그까지 그대로 가져옴 (숨김처리 여부 상관❌) ✒️ 코드 작성 예제 css html js 출력 ...

🚩 classList 응용 예제1 ✒️ 코드작성 입력 css html js 출력 이미지로 대체 예제2 ✒️ 코드작성 입력 css html js 출력 이미지로 대체 ![

🚩 classList 응용 이전, 다음 버튼이 있는 modal 팝업창 만들기 ✒️ 코드작성 입력 css html js 출력 이미지로 대체

🚩 javascript form 관련 응용 예제 ✒️ 코드작성 입력 css html js 출력 이미지로 대체 🚩 jQuery att

🚩 javascript offset ✒️ 코드 작성 입력 css html js 출력 이미지로 대체 🚩 jQuery tab 메뉴 응용1 📝 설명 어제 한 tab 메뉴 응용 이어서 작성하여 완성 ✒️ 사용법 입력 css

🚩 javascript offset 23일에 작성하던 것 이어서 작성 ✒️ 코드 작성 입력 css html js 출력 이미지로 대체

🚩 javascript event eventHandler onblur : focus에서 벗어났을 때 작동됨 📝 설명 이벤트가 발생되면 실행되는 함수를 뜻한다. ✒️ 코드 작성 입력 예제1 css html js 출력 이미지로 대체 >예제 1 ~ 4

작성예정 🚩 javascript webAPI onscroll 📝 설명 페이지에서 스크롤 시 동작 ✒️ 코드 작성 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [javascript onscroll](https:/

🚩 javascript list 앱 예제 ✒️ 사용법 입력 css html js 출력 이미지로 대체 list 앱 예제 js 수

🚩 javascript 윈도우 사이즈 관련 API ✒️ 사용법 입력 css html js 출력 이미지로 대체 list 앱 예제 js부분 수정 ✒️ 사용법 입력 css html js 출력 이미지로 대체 ![](https://velog.velcdn

🚩 javascript 마우스 좌표값 구하기 📝 설명 event를 이용하여 마우스의 좌표값을 알 수 있다. ✒️ 코드작성 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 js mouse API 마우스 좌표값 구하기

🚩 javascript Array 📝 설명 이름과 인덱스로 참조되는 정렬된 값의 집합. 배열을 구성하는 값을 요소(element)라고 하며, 위치를 가리키는 숫자를 인덱스(index)라고 한다. ✒️ 사용법 입력 js 출력 이미지로 대체 🔗 참고 링크 &

🚩 javascript shallow copy(얕은 복사) 📝 설명 값의 "주소 값"을 메모리에 복사한다. 반대 의미로 깊은 복사(Deep Copy)가 있는데 이는 "실제 값"을 복사한다. ✒️ 코드 작성 입력 js 출력 이미지로 대체 🔗 참고 링크 &

🚩 javascript 고차함수 📝 설명 다른 함수를 인자로 받거나 반환(콜백), 사이드이펙트x 배열을 사용하는 함수를 의미. 고차함수 종류 forEach / find / findIndex / some / every / filter / map / flatMap / sort / reduce ✒️ 코드 작성 입력 예제1 js 예제2 js 출력 ...

🚩 javascript iterator(순회) 📝 설명 반복, 순회할 수 있음. 이터레이션 프로토콜을 따르는 객체(반복, 순회할 수 있는 규격을 따르는 객체) ex) Array, String, Map, Set - 이터레이션 프로토콜을 따르는 기본 자료구조 f

🚩 javascript set 📝 설명 자료구조 중 배열은 index(순서) 중요, item 중복 가능 그러나 set은 배열과 달리 순서(index)❌, item 중복❌ ✒️ 코드 작성 입력 js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 javascript module module 📝 설명 모듈이란 .js 파일 하나를 가리킨다. export와 import를 사용하여 외부 모듈을 가져올 수 있다. ✒️ 사용법 입력 counter.js main.js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 javascript module 🚩 추가 연산자 단축평가. 논

질병결석 했을 때 수업 내용이라 대충 적어놓고 나중에 다시 정리예정 🚩 nullish null을 체크하는 방법 📝 설명 ✒️ 코드 작성 입력 js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 javascript nullish 🚩 에러 처

🚩 promise promise 📝 설명 콜백(callback) 중첩을 해결하기 위해 사용 가독성을 높이고 에러 처리를 쉽게 함 비동기적으로 수행하는 작업의 결과를 알려줌 ✒️ 코드 작성 입력 예제1 js 예제2 js 출력 이미지로 대체 >2초 후 실행

🚩 async, await async, await 📝 설명 promise를 조금 더 편하게 사용할 수 있도록 하는 문법 async는 function 앞에 위치하고, await는 promise 앞에 위치한다. ✒️ 코드 작성 입력 js 출력 이미지로 대체

🚩 git git / guthub 📝 설명 Git : 소스코드를 효과적으로 관리하기 위해 개발된 '분산형 버전 관리 시스템' GitHub : 대표적인 무료 Git 저장소 기본적인 리눅스 명령어 pwd : 현재 위치 확인 cd .. : 한 단계 위 디렉토리로 이

🚩 javascript 네트워크 통신 예제 http 사용 예제 ✒️ 코드 작성 입력 css html js 출력 이미지로 대체 json 사용 예제 ✒️ 코드 작성 입력 css html js json 출력 이미지로 대체 ![](https://velog.velcdn.com/images/ra

git branch 기존 repository에 새 branch 생성 $ git branch 브랜치이름 브랜치 전환 $ git switch 브랜치이름 현재 브랜치 확인 $ git branch 브랜치 커밋 $ git commit -m "테스트1" 브랜치 깃허브에

지각으로 오전 수업을 못들어서 나중에 복습하고 추가 🚩 javascript sort 📝 설명 ✒️ 사용법 입력 js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 javascript fetch 📝 내용 17일에 작성했던 자바스크립트 data 응용을 fetch를 사용하여 코드 변경 ✒️ 코드 작성 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 javascript fetch() calculate 📝 내용 위의 상품목록

🚩 javascript localStorage 📝 내용 예전에 js를 이용해서 만들었던 쇼핑 리스트 앱을 localStorage를 이용해 내용이 날아가지 않고 유지되도록 코드 변경 ✒️ 사용법 입력 css html js 출력 이미지로 대체 🔗 참고

🚩 javascript 투두리스트(일정관리) 1일차 코드 작성 📝 내용 지금까지 배웠던 것을 응용하여 투두리스트 작성 ✒️ 사용법 입력 css html js

🚩 javascript 투두리스트(일정관리) 2일차 코드 작성 📝 내용 지금까지 배웠던 것을 응용하여 투두리스트 작성 ✒️ 사용법 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

🚩 bootstrap 부트스트랩 기초 📝 설명 부트스트랩이란, 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. css 파일을 따로 추가하지 않아도 스타일을 지정할 수 있다. 파일을 직접 다운받아 사용하거나 cdn으로 포함하여 사용할 수 있다

🚩 bootstrap 부트스트랩을 이용하여 사이트 제작 📝 내용 부트스트랩으로 만들 사이트를 하나 정해서 제작해보기 ✒️ 사용법 입력 css html 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 Bootstrap

🚩 javascript fake API 📝 내용 JSON Placeholder를 이용해 데이터를 가져와서 사용 ✒️ 사용법 입력 index.html css html js user.js css html js 출력 이미지로 대체 🔗 참고 링크

🚩 Canvas canvas tag / API 📝 설명 화면에 그림을 그릴 수 있는 공간을 만들어서 마우스로 그림을 그릴 수 있도록 하게 해 주는 tag / API ✒️ 사용법 입력 css html js 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [Canvas API](https://de

🚩 React 기초 codesandbox 📝 설명 온라인 코드 에디터 개발 환경 구축 없이 간단하게 웹으로 코딩해 볼 수 있다. > 리액트 개발 화면 html + javascript -> jsx방식(javascript syntax extension) 수정을

🚩 React 기초 컴포넌트 📝 설명 리액트에서 앱을 이루는 가장 작은 조각을 말한다. 재사용성 높음 데이터(props)를 입력받아 출력하는 함수 컴포넌트 이름은 대문자로 시작한다. ✒️ 코드 작성 입력 React Button.jsx Box.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 codesandbox

🚩 React 컴포넌트와 props를 사용하여 card 만들기 ✒️ 사용법 입력 css는 따로 기재x App.js Avata.jsx Profile.jsx Wrapper.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크

개인사정으로 하루 결석하여 나중에 추가 예정 🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Count

🚩 React useState 📝 설명 useState 함수를 사용하면 컴포넌트에서 변경되는 값을 관리할 수 있음 (동적) 클릭할 때마다 값이 1씩 올라가는 컴포넌트 ✒️ 코드 작성 입력 App.js Input.jsx Input2.jsx 출력 이미지로

🚩 로컬에 리액트 설치하는 방법 yarn으로 설치 권장! -> npm보다 용량이 훨씬 적음 https://yarnpkg.com/ $ npm install -g yarn -> 예전 버전으로 설치됨 (1.22.19) $ corepack prepare yarn@stab

🚩 React 리액트로 가위바위보 만들기 1일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면(미완성) >각 버튼 클릭 시 콘솔 출력

🚩 React 리액트로 가위바위보 만들기 2일차 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 (미완성) 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 아직 승패 관련글씨는 구현x 버튼 클릭할 때 마다 컴퓨터의 이...

🚩 React 리액트로 가위바위보 만들기 3일차(완성) 📝 설명 가위바위보 페이지를 만들어서 승리/패배 구현해보기 컴퓨터가 아니라 나를 기준으로 코딩 ✒️ 사용법 입력 App.js Box.jsx App.scss 출력 이미지로 대체 >시작 화면 >각 버튼 클릭 시 출력 화면 버튼 클릭할 때 마다 컴퓨터의 이미지 랜덤으로 변경됨 가위 ![...

🚩 React useState(중첩된 객체) prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js 출력 이미지로 대체 ![](https://velog.velcdn.com/images/raumschiff_/post/02

🚩 React 배열렌더링 prompt로 값을 받아서 이전에 있던 값 교체 ✒️ 코드 작성 입력 App.js UserList1.jsx UserList2.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 [React] 배열렌더링 useRef 📝 설명 컴포넌트의 속성

🚩 React 배열 추가, 삭제, 속성 수정(응용2) 📝 설명 어제 마지막으로 한 내용에서 변수의 이름을 통일하지 않고 다시 코딩 ✒️ 사용법 입력 App.js CreateUser.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 &

🚩 React useCallback 📝 설명 React Hooks 중 하나, useMemo와 비슷 useMemo는 특정 결과값을 재사용, useCallback함수를 재사용 함수 안에서 사용하는 props가 있으면 꼭 deps로 포함시켜야 함 -> 최신값을 인식하게 ✒️ 사용법 useCallback(함수선언구, 변화요소(dependency)) 예제...

🚩 React useState로 만들었던 내용을 useReducer로 변경(기존배열) ✒️ 코드 작성 입력 App.js CreateUser.jsx UserList.jsx 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는 링크 useReducer() useState로 만들었던 내용을 useReducer로 변경(배열객체) <b

🚩 React useContext 사용해서 다크모드 구현 📝 설명 useContext를 사용해서 다크모드 toggle버튼 구현해보기 ✒️ 코드 작성 입력 App.js App.css components 출력 이미지로 대체 🔗 참고 링크 & 도움이 되는

🚩 React CSS Module 📝 설명 css module을 사용하면 css 클래스가 중첩되는 것을 방지할 수 있다. css 파일명 뒤에 .module을 붙여주면 됨 ✒️ 예제 코드 작성 입력 App.js Button1.jsx Button1.modul

일마다 나눠쓰기 힘들어서 한 번에 작성 🚩 React 음식 주문 사이트 코딩 📝 설명 장바구니에 음식을 한 개씩 추가하고 제거할 수 있게 코딩 장바구니에 음식을 추가/제거 할 때마다 금액 계산 css module을 사용하여 한 컴포넌트에 모듈 한 개씩 생성하여

🚩 React 날씨 API 📝 설명 외부 날씨 API를 가져와서 화면에 출력하기 ✒️ 사용법 입력 App.js App.css WeatherBox.jsx WeatherButton.jsx 출력 이미지로 대체 🔗 참고 링

🚩 React SWAPI 📝 설명 SWAPI를 가져다가 연결해보기 ✒️ 사용법 입력 App.js App.scss MovieList.jsx Movie.jsx 출력 이미지로 대체 ![](https://velog.velcdn.com/images/r

🚩 React firebase 이용하여 데이터 저장(미완성) 📝 설명 firebase를 사용하여 내용을 입력받아 출력할 수 있도록 코드 수정 예정 ✒️ 사용법 입력 App.js MovieList.jsx Movie.jsx AddMovie.jsx 출력

🚩 React firebase 이용하여 데이터 저장(미완성) 📝 설명 firebase를 사용하여 내용을 입력받아 출력할 수 있도록 코드 수정 예정 ✒️ 사용법 입력 App.js MovieList.jsx Movie.jsx AddMovie.jsx 출력

🚩 React 음식 주문 사이트 코딩(기존 내용 추가/수정) 2일차 📝 설명 1일차 장바구니에 음식을 한 개씩 추가하고 제거할 수 있게 코딩 장바구니에 음식을 추가/제거 할 때마다 금액 계산 css module을 사용하여 한 컴포넌트에 모듈 한 개씩 생성하여 작

🚩 React 음식 주문 사이트 코딩(기존 내용 추가/수정) 3일차 📝 설명 1일차 장바구니에 음식을 한 개씩 추가하고 제거할 수 있게 코딩 장바구니에 음식을 추가/제거 할 때마다 금액 계산 css module을 사용하여 한 컴포넌트에 모듈 한 개씩 생성하여 작

지각

🚩 React router을 이용하여 youtube 사이트 구현하기 📝 설명 react router를 사용하여 유튜브 사이트 구현 ✒️ 코드 작성 입력 App.js index.js pages 폴더 Videos.jsx VideoDetail.jsx Not

🚩 React router을 이용하여 youtube 사이트 구현하기 2~4일차 📝 설명 react 를 사용하여 유튜브 사이트 구현 리팩토링 포함(리팩토링 전 코드는 주석처리) ✒️ 코드 작성 입력 App.js index.js pages 폴더 Videos

🚩 React router을 이용하여 youtube 사이트 구현하기 5일차 📝 설명 react 를 사용하여 유튜브 사이트 구현 연관동영상 띄우는 작업 리팩토링 포함(리팩토링 전 코드는 주석처리) ✒️ 코드 작성 입력 App.js index.js pages 폴더 Videos.jsx NotFound.jsx components 폴더 Sear...

🚩 React router을 이용하여 youtube 사이트 구현하기 5일차 📝 설명 react 를 사용하여 유튜브 사이트 구현 연관동영상 띄우는 작업 리팩토링 포함(리팩토링 전 코드는 주석처리) ✒️ 코드 작성 입력 App.js index.js pages

🚩 React 리액트와 파이어베이스를 사용하여 쇼핑몰 사이트 구현하기 1일차 📝 설명 react와 firebase를 이용하여 쇼핑몰 사이트 구현하기 상단 헤더와 네비게이션 바, firebase 로그인 구현 ✒️ 코드 작성 입력 App.js index.css index.js Navbar.jsx firebase.js js 출력 이미지로 대...

🚩 React 리액트와 파이어베이스를 사용하여 쇼핑몰 사이트 구현하기 2일차 📝 설명 react와 firebase를 이용하여 쇼핑몰 사이트 구현하기 상단 헤더와 네비게이션 바, firebase 로그인/로그아웃 구현 로그인하면 로그아웃으로 글씨 변경되게 구현(반대

🚩 React 리액트와 파이어베이스를 사용하여 쇼핑몰 사이트 구현하기 3~6일차 📝 설명 react와 firebase를 이용하여 쇼핑몰 사이트 구현하기 상단 헤더와 네비게이션 바, firebase 로그인/로그아웃 구현 로그인하면 로그아웃으로 글씨 변경되게 구현(반대도 구현) firebase에 새로운 제품 등록하는 페이지 구현(admin user만) ...

프론트엔드 프레임워크 종류리액트 : js라이브러리, 틀 없이 처음부터 작성뷰 : js프레임워크, 샘플들이 있음Angular : 리액트나 뷰보다는 자주 사용되지 않음