패스트캠퍼스 메가바이트스쿨 프론트엔드

메가바이트 스쿨 프론트엔드 취업연계 과정이 드디어 시작됐다 오늘은 오티인만큼 개괄적인 교육 프로그램 소개 및 조원들과 친해지고 스터디 목표를 정하는 것을 주로 했다 우리 조의 목표는 아래와 같이 정했다! 강의 수강 후 매일 각자 블로그에 TIL올리기 토이프로젝트 진행

1. git이란 무엇인가? > Git? 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 버전관리 시스템(VCS)이다. Q) 버전관리 시스템은 뭐지? 형상관리 시스템과는 뭐가 다른가? A) 형상관리란 스프트웨어 구성 관리라고도

Markdown 제목, 문장, 줄바꿈 제목짓기 > 제목은 # 숫자 만큼 크기를 결정할 수 있음 문장짓기 + 줄바꿈 그냥 텍스트를 입력하면 문장을 지을 수 있음 줄바꿈은 spacebar 2번 입력 혹은 이탤릭 두껍게 이탤릭 + 두껍게 취소선 밑줄 목록(Lis

1. 개요 Linux 리눅스 이전 > - 유닉스라는 os가 지배적인 상황에서 리눅스(Linux) > - 리누스 토발즈가 작성한 커널 혹은 GNU 프로젝트의 라이브러리와 도구가 포함된 운영체제 > - pc와 모바일, 서버, 임베디드 시스템 등 다양한 분야에서 활용됨

Today Topic : Branch 🗝 Keywords ✅ README.md ✅ .gitignore ✅ Licence ✅ Repository ✅ Branch merge ✅ GitFlow ✅ GitRevert 1. 레퍼지토리 설정 1-1) READM

Today Topic : Web Programming 🗝 Keywords ✅ 컴퓨터의 메모리 ✅ 프로그래밍 언어 ✅ 웹의 탄생 ✅ HTML 구조 ✅ ✅ ✅ 1. 컴퓨터의 메모리 (with Web Programming) 컴퓨터는 메모리에 있는 data

Today Topic : HTML Basic 🗝 Keywords ✅ 요소란 무엇인가? ✅ 태그란 무엇인가? ✅ 인라인요소/블록라인요소 ✅ div, h1, p, img, ul/ol, a, span, input, table ✅ HTML 전역 속성 1. 상위요

Today Topic : Web Programming 2 🗝 Keywords ✅ JS와 Web ✅ JS의 Server 활용(node.js) ✅ Html 태그 사용의 중요성 ✅ Html outline ✅ CSS가 중요한 이유 1. JS와 Web > 🚀

CSS 기본문법 선택자 { 속성: 값;} 선택자 { 속성: 값; 속성: 값;} 스타일 범위 시작과 끝은 중괄호로 표시하며, 여러 가지 속성이 한 선택자에 들어갈 수 있음. 주석처리는 커맨드 / 하면 자동으로 입력 됨. CSS 선언 방식 내장방식 html 내부의

Today Topic : CSS 속성 🗝 Keywords ✅ CSS 속성의 종류 ✅ 박스모델 ✅ 글꼴 ✅ 문자 ✅ 1. css 속성의 종류 HTML의 속성은 Attributes라고 하고, css/js는 properties라고 함. 2. 박스모델 2-1

Today Topic : CSS 속성 2 🗝 Keywords ✅ 배경 ✅ 배치 ✅ flex ✅ ✅ 1)배경 > 배경 background-color : 배경 색깔을 넣을 수 있음. transparent(투명함) background-image : url(경로

0. 들어가며 드디어 css를 처음으로 실습을 해보는 클론코딩을 진행하게 되었다. 클론코딩을 알려주는 강의를 따라갈까 하다가 개발바닥 유튜브의 멈춰!클론코딩 를 본 뒤로 맨 땅에 헤딩으로 클론코딩을 시작해야겠다 마음 먹게 되었다. > 🚀 클론코딩의 목표 html

1. 표기법 > 🚀 표기법 dash-case(kebab-case) snake_case camelCase PascalCase Zero-based Numbering > 대부분의 경우 자바스크립트에서는 camelCase를 사용함. PascalCase는 new 함수에

1. 객체 1-1) 객체 표현식 >객체 표현식 객체란 {}를 통해서 카테고리로 묶어서 정보를 관리할 수 있음 ctaaag이라는 사람에 대한 정보를 카테고리로 묶고 싶다면 ctaaag의 객체를 만들면 됨 객체는 key:value로 구성되어있음. 카테고리 항목이 k

데이터타입 1-1) Wrapper(래퍼 객체) > 래퍼 객체 래퍼 객체는 원시타입인 데이터 타입에 .을 찍으면 해당 데이터 타입을 감싸고 있는 객체로 잠시 넘어간 상태로 존재함. 래퍼 객체로 이동하게 되면 여러가지 빌트인 객체를 사용할 수 있음 예를 들어 numbe

1. 가위바위보 게임만들기 1-1) 컴퓨터에서 랜덤한 숫자 뽑기 랜덤 숫자 뽑아내기 > 🚀 Math 함수 랜덤한 숫자를 뽑을 때는 math.random으로 0~1까지 무작위 숫자를 꼽아서 내가 원하는 숫자범위를 곱하거나 더해서 지정해주고, math.floor로 소

Today Topic : Javascript 예제풀기 2 🗝 Keywords ✅ 숫자야구 ✅ 1등 뽑기 1. 숫자야구 > 더 공부할 것! 각각의 숫자를 비교할 때 조건문을 줄일 수 있는 방법 있는지 확인해볼 것 반복문 안에 입력값을 넣어서 계속 입력받으면서 비

좌표 1-1) 특정 요소의 좌표값 알아내기 > getBoundingClientRect 특정 요소의 위치(좌표)값을 구하기 위해서 요소를 쿼리셀렉터로 선택 후에 getBoundingClientRect를 이벤트로 만들면 된다. > x좌표와 y좌표 값 알아내기 cli

ㅇ

static html과 react element 생성방법 비교 > element 만들기 React.createElement("h1", null , "hello, world") React.createElement("h1", {children:"hello, worl

자바스크립트 프로젝트 리뷰

Today Topic : React element 🗝 Keywords ✅ Rerendering ✅ Event-handler 1. Rerendering > 🚀 Vanila js와 React의 차이점 위와 같이 버튼에 숫자가 계속 변경되는 함수를 만들었을 때

Today Topic : React element 🗝 Keywords ✅ Component ✅ React.useState() ✅ React.useEffect() ✅ Hook 1. Component > 🚀 Component 컴포넌트란 element들의 집

style > 🚀 Style 리액트에서 style은 element의 인라인 방식으로 선언할 수 있다. sytle = {{ borderRadius }} 이 때는 {{}}를 꼭 두개 붙여줘야함 그런데 보통은 비슷한 형태의 element는 위와 같이 함수를 만들어서

1. component,props 이해하기 1-1). 함수 컴포넌트와 클래스 컴포넌트의 이해 1-2) props와 함수 컴포넌트 > 공식문서 내 props 설명 > props는 함수 인자값? 객체? 도대체 뭐야.. props라는

리액트에서 이벤트를 다루는 방식은 조금 특별하다직접 이벤트를 만드는게 아니라 SyntheticBaseEvent라는 이벤트와 유사한 역할을 하는 레퍼런스를 참조해서 이벤트를 다룸.우리는 이를 합성이벤트(인터페이스는 같지만 직접 대응되지 않음)라고 부른다.만약 브라우저 고

1. form > 🚀 개요 react에서 form에 접근하기 위해서는 기본적으로 state를 활용한다. hook의 useState를 활용해서 component를 활용할 수 있다고 보면 되는데, 이렇게 state를 통해 control이 가능한 것을 controlledC

useState > useState란? 변화되는 변수를 추적하고 싶을 때 사용함. 자바스크립트 최신 문법 중 구조분해할당이 있음. 데이터가 변할 때는 데이터바인딩을 새롭게 해주는 것 변하는 값은 무조건 state로 만들고, 초기값으로 배열이 들어가는 값의 변화를 주고

1. topic 생성하기 > 🚀 map으로 topic 한번에 생성하기 위와 같이 배열자체를 topic으로 넣고, map 함수를 사용하면 topic에 따라서 사용할 수 있음 배열.map((a,i)=>{})은 배열의 개수만큼 반복해서 실행하는데, 인자 a를 넣으면 하

Today Topic : React로 쇼핑몰만들기(1) 🗝 Keywords ✅ react-bootstrap ✅ react에 image 넣기 ✅ component 활용 1. react-bootstrap 사용하기 > 설치 : 터미널에서 아래와 같이 설치할 것.

Today Topic : React로 쇼핑몰만들기(1) 🗝 Keywords ✅ react-router 기본개념 및 설치 ✅ navigate,nested routes, outlet ✅ react-router로 제품 상세페이지 만들기 1. react-router

Today Topic : React로 쇼핑몰만들기(3) 🗝 Keywords ✅ redux / redux toolkit 설치 ✅ store의 state 보관 및 사용 ✅ store의 state 변경 ✅ store의 state가 object,array일 경우

Today Topic : React로 쇼핑몰 만들기 (4) 🗝 Keywords ✅ styled-components로 스타일 입히기 ✅ useEffect를 활용하여 구매이벤트 만들기 ✅ ajax 통신으로 데이터 끌어오기 ✅ 더보기 버튼으로 데이터 끌어오기 ✅

Today Topic : React로 쇼핑몰 만들기 (5) 🗝 Keywords ✅ 상세페이지 tab 만들기 ✅ 상세페이지 tab 애니메이션 효과 붙이기 ✅ ✅ 1. 상세페이지 tab 만들기 2. 상세페이지에 애니메이션 효과 붙이기 > 애니메이션 css

Today Topic : LocalStorage로 최근 본 상품 기능 개발하기 🗝 Keywords ✅ LocalStorage 개요 > LocalStorage 문법 localstorage는 개발자도구 애플리케이션 페이지에 보면 나와있음 로컬스토리지(브라우저 닫아도

Today Topic : React로 회원가입 구현하기 🗝 Keywords ✅ ✅ ✅ ✅ ✅

KDT 해커톤

기본 타입 타입을 미리 정하기 애매할 때(union type, any, unknown) 함수에 타입 지정하기 > 함수에 타입 지정하기 인자의 타입지정은 인자 우측에 :type return 값의 타입지정은 함수명() 우측에 :type >void void는 리턴을

1. Redux의 동작 원리 redux의 핵심은 store라는 central Data를 관리하는 기능으로 모든 state를 관리할 수 있도록 돕는 라이브러리이다. store를 생성하고, 해당 store를 subscription하는 컴포넌트에 전달을 하고, 컴포넌트는

우리는 react-redux라는 아주 고마운 존재가 있다고 저번 시간에 배웠지만, 이번엔 더 쉬운 놈을 들고 왔다. 바로 Redux toolkit이다. redux toolkit의 장점은 아래와 같다 createSlice로 여러가지의 state를 쉽게 만들어 관리가 가

1. Sass 설치 live sass compiler 설치 (버전 체크 필요) cra에서 npm i sass 진행 파일명.css -> 파일명.scss로 변환하면 css파일로 컴파일이 됨(compiler가 자동으로 해줌) 에러 확인은 vscode의 출력 부분 체크가 필