rosie

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 애널리틱스 사용 설정" 을 끄고 프로젝트 만들기를 눌러서 설정을 마칩니다. => 구글 애널리틱스 : 사이트의 사용자 통계 수치 등을 알려주는 구글의 서비스 -> 여기서는 다루지 않기 때문에 사용해제를 권장 "새 프로젝트가 준비되었습니다." 라는 문구가 나오면 계속 버튼을 눌러서 다음으로 갑니다. 프로젝트 만들기가 끝나면 파이어베으스 ..

1. react로 시작하기 폴더를 생성 후 VSCode 로 실행합니다. 터미널을 연 후, 터미널 시작 경로가 VSCode로 연 폴더의 경로인지 확인합니다. create-react-app 을 사용하여 리액트 프로젝트를 생성합니다.create-react-app- twitterClone 생성된 폴더를 기준으로 VSCode를 재실행합니다. 2. Github 저장소와 연결하기 Github에 로그인 후 왼쪽 상단에 보이는 를 눌러서 저장소 만들기 화면으로 이동합니다. Repository name(저장소 이름)에 twitterClone을 입력하고 Description(설명)에는 "Cloneing Twitter with React and Firebase"를 입력합니다. (Description 은 작성을 하지 않아도 상..

1. 서버란? 서버(Server)는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미합니다. => 클라이언트가 요청하는 정보를 서버가 받아서 처리하고 응답을 주는 것 서버라는 것은 개념적인 용어입니다. 어떠한 형태의 컴퓨터든 정보제공 역활을 하는 주체이면 서버컴퓨터로 불릴 수 있다. 서버 구축 서비스 BaaS(Backend-as-a-Service) : 구글, 아마존, 마이크로소프트와 같은 대형 IT기업은 대부분 서버 구축 서비스를 제공합니다. 직접 구현하기 까다로운 회원가입, 로그인과 같은 기능을 제공합니다. => 서버 구축 서비스를 사용하면 기능을 구현하는데 필요한 시간을 단축시키고 안정적인 서비스를 제공함 파이어베이스란? 구글(Google)이 ..