rosie

1. Issue 생성하기 Github 저장소에서 생성한 disney_plus_clone 시작 화면에서 Issues를 선택합니다. New issue 버튼을 눌러서 새로운 이슈를 생성합니다. Title에 "스토리북 설정"이라고 작성하고 Assignees에 코드를 작성할 사람을 선택 후 Submit new issue 버튼을 클릭합니다. 2. branch 생성하기 VS Code 터미널을 실행한 후 아래의 코드를 작성하여 새로운 branch를 생성합니다. git checkout -b feat/3 왼쪽 하단에서 현재 branch가 feat/3인지 확인합니다. 3. 스토리북 생성하기 Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이며, Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별..

1. Issues 생성하기 Github 저장소에서 생성한 disney_plus_clone 시작 화면에서 Issues를 선택합니다. New issue 버튼을 눌러서 새로운 이슈를 생성합니다. Title에 "라우터 설정"이라고 작성하고 Assignees에 코드를 작성할 사람을 선택한 후 Submit new issue 버튼을 클릭합니다. 2. branch 생성하기 VS Code 터미널을 실행한 후 아래의 코드를 작성하여 새로운 branch를 생성합니다. git checkout -b feat/2 왼쪽 하단에서 현재 branch가 feat/2인지 확인합니다. 3. 라우터 준비하기 라우터란 주소 표시줄에 site.com/a 나 site.com/b와 같은 주소를 입력했을 때 어떤 컴포넌트를 보여줄지 결정하는 역할을 ..

1. Github에서 Issues 생성하기 Github저장소에 생성한 disney_plus_clone 시작 화면에서 Issues를 선택합니다. New issue 버튼을 눌러서 새로운 이슈를 생성합니다. Titl에 "ES Lint&Prettier 설정" 이라고 작성하고 Assignees에 코드를 작성할 사람을 선택 후 Submit new issue 버튼을 클릭합니다. 2. branch 생성하기 VS Code 터미널을 실행한 후 아래의 코드를 작성하여 새로운 branch를 생성합니다. git checkout -b feat/1 // 숫자는 issue의 번호 왼쪽 하단에서 현재 branch가 feat/1인지 확인합니다. 3. ES LINT 설치하기 터미널에 아래 코드를 작성 후 실행합니다. npm i -D es..

1. react로 시작하기 명령 프롬프트 또는 터미널을 실행 후 원하는 위치에 create-react-app을 사용하여 리액트 프로젝트를 생성합니다. create-react-app disney_plus_clone 생성된 폴더를 기준으로 VSCode를 실행합니다. 2. Github 저장소와 연결하기 Github에 로그인 후 왼쪽 상단에 보이는 New를 눌러서 저장소 만들기 화면으로 이동합니다. Repository name(저장소 이름) 에 disney_plus_clone을 입력한 후 Create repository를 누릅니다. 아래의 코드로 Github 저장소와 diseyplusclone 폴더를 연결합니다. git remote add origin //[HTTPS주소 or SSH 주소] 3. 기초 파일 수정..

1. 배열 배열(array)은 같은 타입의 변수들로 이루어진 유한 집합으로 정의됩니다. 배열 자료형의 형태는 대괄호 [] 와 괄호 사이의 요소들로 구성됩니다. 요소가 없는 대괄호[] 는 빈 배열을 의미합니다. 배열에 요소들을 나열하는 경우 콤마(,)를 통해 구분합니다. => [요소1, 요소2, 요소3, ...] ex) [] -> 빈 비열 / [1, 2, 3] / [1. 'A', "a", true, null] 배열도 변수 대입이 가능합니다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자는 인덱스(index)라고 합니다. 배열 내부의 특정 위치에 있는 요소로 바로 접근할 때에는 인덱스(index)가 반드시 필요합니다. 인덱스란 배열 안에 위차한 요소의 좌표..

1. 로그인 폼 기본 구조 만들기 파이어베이스 설정으로 로그인 할 수 있는 서버가 준비되었습니다. routes 폴더에 Auth.js 파일에 로그인 폼을 만듭니다. // ./src/routes/Auth.js const Auuth = () => { return Continue with Google Continue with Github } export default Auth 코드 작성 후 화면을 확인해보면 과 버튼이 만들어집니다. 위에 버튼 두 개는 구글, 깃허브 소셜 로그인을 담당하고 구글, 깃허브 소셜 로그인은 파이어베이스 서버에 요청만 하면 되므로 서버 호출을 할 수 있게 버튼을 만듭니다. 이메일, 비밀번호 로그인의 경우 이메일과 비밀번호를 입력 받아야 하므로 form 엘리먼트와 input 엘리먼트를 사..

1. 자료형 변환 자바스크립트에서는 자료형 간 변환을 지원합니다. 숫자형 변수값을 문자형으로 변환하거나 문자형 변수값을 숫자형으로 변환할 수 있습니다. => 이를 자료형 변환(type coercion) 또는 형 변환이라고 합니다. 자료형을 변환하기 위한 방법으로는 개발자가 직접 명시적으로 자료형을 변환하거나, 자바스크립트 엔진에 의해 자동으로 자료형이 변환되는 방법이 있습니다. 보통 console 로 값을 문자열로 출력할 때, 내장 객체의 함수나 연산자를 사용하여 자료형 변환이 가능합니다. 엔진에 의해 자동으로 자료형이 변환되는 것은 자바스크립트가 동적 자료형 언어이기 때문에 적용되는 특징입니다. => 개발자가 작성한 코드가 어떠한 의도를 품고 있던 간에 자바스크립트가 미리 정해놓은 규칙에 따라 자료형이..

1. 논리 연산자 논리 연산자(Logical Operators)는 어떠한 명제에 대한 논리적인 판단을 내리는 연산자입니다. 참 또는 거짓의 값을 받아 논리적 연산의 결과로 true, false를 반환합니다. 종류 AND 연산자(&&) 표현식1 && 표현식2와 같아 작성합니다. 표현식1과 표현식2 모두가 참인 경우 true를 반환하고 그렇지 않은 경우 false를 반환합니다. OR 논리 연산자(||) 표현식1 || 표현식2와 같이 작성합니다. 표현식1, 표현식2 둘 중 하나가 참인 경우 true를 반환합니다. NOT 논리 연산자(!) !표현식으로 작성합니다. true를 !로 부정(Not)하면 false가 되고 false를 !로 부정하면 true가 됩니다. !! 연산자 not 연산자에 한 번 더 not 연산..

1. 산술 연산자 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다. 산술 연산자를 통해 숫자형 값을 계산할 수 있습니다. 10 + 5 // 15 10 - 5 // 5 10 * 5 // 50 10 / 5 // 2 자바스크립트의 산술 연산자는 숫자형 값 연산 외에 다른 연산도 가능합니다. 덧셈 연산자인 경우 문자형에 사용 가능하며 이때 두 개 이상의 문자열을 이어 붙일 수 있지만, 나눗셈, 곱셈, 뺄셈에서는 문자열을 사용할 수 없습니다. 산술 연산자에 = 연산자를 함께 사용하는 산술 등호 연산도 가능합니다. let x = 10 x += 5 x *= 2 console.log(x) // 30 const y = 10 y -= 5 y /= 5 console.log(y) // 1 나머지 연산자(%), 거듭..

1. 숫자형(Number) 숫자 형태를 가진 데이터입니다. 다른 프로그래밍 언어와 달리 숫자의 형태를 구체적으로 나눠 정의하지 않습니다. 정수, 부동 소수점, 작은 수, 큰 수 등 여러 유형의 숫자를 숫자형(Number) 하나로 정의합니다. 64-bit Floating Point(63비트 부동 소수점) 국제 IEEE 754 표준에 의해 정의된 방식으로, 숫자 값을 64bit 정보로 저장합니다. 숫자는 비트 0~51에 저장되고, 지수는 비트 52~62, 부호는 비트 63에 저장됩니다. ex) 13을 자바스크립트로 표현하면 컴퓨터는 숫자를 비트로 변환하여 메모리에 저장합니다. 숫자형으로 분류되지만 일반적인 숫자와 다른 역활을 수행하는 값이 있습니다. Infinity : 무한대를 의미하며 다른 어떤 수보다 가..