rosie

1. 자바스크립트의 타입 프로그래밍 언어는 값을 특정 유형으로 분류하는데 특정 유형을 다른 말로 하면 자료형이나 타입(type)이라 부릅니다. 모든 프로그래밍 언어는 내장 자료형이 있지만 내장 자료형은 언어마다 다릅니다. JavaScript 는 느슨한 타입(loosely typed)언어, 혹은 동적(dynamic) 언어입니다. => 변수의 타입을 미리 선언할 필요가 없다는 뜻으로 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이고 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻입니다. 자바스크립트의 타입 종류 원시 타입(Primitive Data Type, 기본 타입) 값이 변수에 할당될 때 메모리 상에 고정된 크기로 저장합니다. 원시 타입의 값은 병경 불가능한 값, 불변 값(Immutabel ..

1. useState 함수 위치 이동하기 useState 함수의 위치를 변경하고 appRouter 컴포넌트에 isLoggedIn 프롭스를 추가합니다. AppRouter 컴포넌트가 라우터 역활을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는 것이 좋습니다. App 컴포넌트에 footer 엘리먼트도 추가합니다. => footer 엘리먼트는 사이트 아래에 있는 요소 입니다. footer은 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담고 있습니다. // ./src/components/App.js import { useState } from "react" import AppRouter from "./Router" const App = () => { const [isLo..

1. switch 형태 switch (표현식) { case 값1: 명령문1 break case 값2: 명령문1 break default 명령문3 } 중괄호 {} 로 둘러싸인 블록 형태를 띠고 있고, 중괄호 안에는 case문이 있습니다. switch 의 표현식은 case 의 값과 일치 여부를 확인하고 이때 === 일치 연산자를 사용합니다. === 일치 연산자는 값과 자료형을 모두 비교하고, 결과 값으로 true 또는 false를 반환합니다. case문이 있는 경우, 위에서 부터 순차적으로 일치한 값이 나올 때까지 case 값을 확인하면서 내려갑니다. case값이 일치하면 해당 명령문을 실행합니다. break는 다음의 코드들을 더 이상 실행하지 않고, switch 조건문을 끝내는 역할을 합니다. 일치하는 c..

1. 조건문 어떤 조건이 참인지 거짓인지에 따라 실행 여부를 결정하는 구문을 말합니다. 조건문은 대표적으로 if, switch가 있습니다. 2. if 조건문 형태 if (표현식) { 명령문 } if 조건문은 표현식을 소괄호 () 로 둘렀나 형태를 가집니다. 표현식에는 의사결정을 할 수 있는 조건문을 작성합니다. 결과 값은 항상 불린형 값으로 반환되며 if 조건문의 결과 값이 true인 경우에만 명령문이 실행됩니다. const result = true if (result) { cosole.log("result가 참 입니다.") } // result가 참 입니다. if (!result) { console.log("실행되지 않습니다.") } if (result) { console.log("result의 결과"..

1. 자바스크립트 문장 구조 코드(Code) 문법을 토대로 단어의 조합으로 하나의 문장을 만들어내는 사람의 언어처럼 프로그래밍 언어도 문장을 구성하는 문장을 코드라 합니다. 코드를 구성하는 가장 작은 기본단위는 값, 변수, 연산자, 키워드입니다. => 이 요소가 모여서 하나의 문장을 만듭니다. 구문 패턴 표현식(Expressions) 값을 생성합니다. 표현식은 모두 어떤 값을 이행하지만, 개념적으로는 두 가지로 나뉩니다. 부수 효과가 있는 표현식 ex) x = 7 평가하면 어떤 값으로 이행하는 표현식 ex) 3+4 명령문(Statements) 일종의 행동 또는 행우를 수행하게 하는 코드입니다. if, if-else, for 등이 있습니다. 표현식 명령문(Expression Statement) 프로그래밍에..

1. eslint 적용하기 eslint란 코드의 규칙을 검사하는 오픈 소스 프로젝트 입니다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 유지해 줍니다. VSCode 에 확장 기능에서 ESLint 를 검색 후 설치 합니다. 설치 후 터미널에 아래의 코드를 입력합니다. npm i -D babel-eslint eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard​ .eslint 라는 파일을 생성됩니다. parser: eslint 의 입맛에 맞게 코드를 읽고 변환해줍니다. parserOptions: 읽어올 코드에 대한 정보를 나타냅니다. plugins: 기본 규칙외에 부가..

1. useState 함수 사용하기 useState함수로 로그인 여부를 판단하기 위한 상태를 만들때 [isLoggedIn, setIsLoggedIn] = useState(false) 처럼 useState 함수를 사용해서 상태와 상태 관리 함수로 짝을 만들어 사용할 수 있습니다. => isLogged 의 값은 setIsLoggedIn 함수만 사용해서 변경이 가능합니다. 로그인이 되어 있지 않은 상태일 때 로그인 페이지를 보여주려면 isLoggedIn 상태를 참조해서 렌더링할 컴포넌트를 결정하면 됩니다. => isLoggedIn 이 false 이면 로그인 페이지를 보여주는 Auth 컴포넌트, true 일 경우에는 로그인 후 볼 수 있는 Home 컴포넌트를 렌더링 하면 됩니다. 아래의 코드처럼 Router.j..

1. 라우터 준비하기 리액트에서 프로젝트 구조 구성은 라우터를 적용하기 위해 한다고 생각해도 됩니다. => 라우터란 주소 표시줄에 site.com/a 나 site.com/b 와 같은 주소를 입력했을 때 어떤 컴포넌트를 보여 줄지 결정하는 역활을 함 라우터가 제대로 동작하려면 라우터가 이해할 수 있도록 파일과 폴더를 구성해야 합니다. 라우터를 적용하기 전에 프로젝트의 뼈대를 세워야 합니다. => 페이지는 routes 폴더에 저장하고 페이지를 이루는 구성 요소들은 components 폴더에 나눠서 저장합니다. App.js 파일은 components 폴더에 옮기고, routes 폴더에는 Auth.js, EditProfile.js, Home.js, Profile.js 를 만듭니다. index.js 파일에서 Ap..

1. 파이어베이스의 비밀키 숨기기 firebaseConfig 변수에 apiKey 와 같은 값들은 파이어베이스에 접속하는 비밀키로 사용됩니다. Github에 firebasejs 파일을 업로드 하게 되면 누구나 비밀키를 확인할 수 있는데, 그렇게 되면 비밀키를 본 사람이 데이터베이스에 접근해서 데이터를 바꾸는 등의 보안 문제가 발생할 수 있습니다. => 이러한 상황을 막으려면 환경 변수라는 것으로 비밀키를 숨겨야 합니다. * 환경 변수 : 운영 체제 및 기타 소프트웨어가 컴퓨터에 고유 한 정보를 결정하는 데 사용할 수 있는 동적인 값. 즉 환경 변수는 컴퓨터의 위치, 버전 번호, 객체 목록 등과 같은 다른 것을 나타내는 것 .env 파일을 생성 후 그 파일에 비밀키 변수를 등록한 다음, 비밀키가 필요한 다른..

1. 파이어베이스 설정하기 firebase.google.com 접속하면 처음 화면에서 시작하기 누른 후 프로젝트 만들기 프로젝트 이름을 지정할 수 있는 화면이 생성되면 프로젝트 이름은 리액트 프로젝트 이름과 동일하게 작성합니다. 파이어베이스를 처음 사용한다면 "Firebase 약관에 동의합니다."에 체크 후 계속 버튼을 누릅니다. 다음 화면에서 "이 프로젝트에서 Google 애널리틱스 사용 설정" 을 끄고 프로젝트 만들기를 눌러서 설정을 마칩니다. => 구글 애널리틱스 : 사이트의 사용자 통계 수치 등을 알려주는 구글의 서비스 -> 여기서는 다루지 않기 때문에 사용해제를 권장 "새 프로젝트가 준비되었습니다." 라는 문구가 나오면 계속 버튼을 눌러서 다음으로 갑니다. 프로젝트 만들기가 끝나면 파이어베으스 ..