rosie

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)이 ..

1. package.json 프로젝트의 설명서 역활을 합니다. 프로젝트와 관련된 메타데이터가 담기는 공간 입니다. npm 패키지를 주고 받는 장소입니다. => 주고 받는 패키지에 대한 상세한 설명서 (배포한 모듈 정보를 담고 있음) 패키지의 이름, 버전, 데이터 등이 담긴 파일이 바로 package.json 2. package.json 내부 용어 dependencies : 서비스에 필요한 패키지를 기록합니다. devDependencise : 개발 단계에 필요한 패키지를 기록합니다. 터미널에 npm i(npm install) 명령어를 실행하면 package.json 내부의 dependencies 목록을 보고 node_modules 내부에 패키지를 설치합니다.

선언 키워드 var, let, const 의 차이점 ES5까지는 변수를 선언할 수 있는 키워드가 var 뿐이었고, ES6에서 let, const 키워드가 추가되어 이를 이용하여 변수를 선언할 수 있습니다. var는 함수 레벨 스코프이고 let, const 는 블럭 레벨 스코프입니다. var 로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다. console.log(num) // undefined var num = 10 위의 코드의 실행단계는 var num 으로 먼저 선언이 되고 console.log(num)에는 아무런 값이 없으므로 undefined 상태로 결과가 출력됩니다. 마지막으로 var num = 10 여기에서 할당이 일어나게 됩니다.console.lo..

1. 값과 변수 값(value)이란? 프로그래밍 언어를 구성하는 기본단위 컴퓨터는 사람이 사용하는 언어가 아닌 0과 1로 표현합니다. 이러한 0과 1로 표현 하는 것을 2진수라고 합니다. => 컴퓨터 CPU가 처리하는 데이터의 최소 단위 크기를 비트(bit, Binary Digit, 2진수)라 합니다. 컴퓨터가 사람이 지시하는 작업을 처리하기 위해서는 작업에 필요한 모든 것을 컴퓨터가 이해할 수 있는 형태로 구성됩니다. 컴퓨터는 데이터를 비트로 처리하지만, 프로그래밍에서는 이 데이터를 값(value)으로 나타냅니다. 변수(variavle)란? 값을 넣어놓는 공간 자바스크립트에서 벼수에 값을 지정하는 방법 a = "변수에 값을 지정하기"​ 암시적 선언: 별도이 키워드가 없이 변수를 할당하는 방법 암시적 선..

1. 로컬 상태 최신으로 만들기 항상 새로운 작업을 시작하기 전에는 나의 로컬 상태가 최신인지 확인을 해야합니다. => 다른 사람이 하는 작업과 충돌이 일어나거나 새롭게 반영된 환경에서 작업을 하지 못할 수 있기때문 서버의 것을 가져와 내것에 합치는 것이 로컬 상태를 최신으로 만드는 것입니다. 이때 사용하는 명령어는 pull 입니다. pull : 원격 저장소에서 로컬 저장소로 소스를 가져오는 명령어$ git pull origin main

1. 텍스트 관련 태그 태그 : 제목 표시용 태그(블록 태그) 제목을 표시할 때 사용하는 태그이나, 꼭 제목을 위해서만 사용해야 하는 것은 아닙니다. 단지 일반 텍스트에 비해 크고 굵은 텍스트일 뿐이며, 제목이라는 의미를 가지고, 내용을 강조하고 싶을 때도 사용을 합니다. h 뒤에 붙는 숫자는 1일 때 크기가 가장 크고, 6일 때 가장 작습니다. 태그 : 문단 표시용 태그(블록 태그) 텍스트를 표시할 때 가장 많이 사용되는 태그입니다. 하나의 p태그가 하나의 단락을 의미합니다.(닫는 태그 전까지 쓰는 내용은 모두 하나의 문단으로 간주, 문자들끼리 덩어리처럼 붙어있는 형태로 표시) p태그가 시작되면 새로운 줄에서 새롭게 시작됩니다. (새로운 태그가 등장하면 줄 바꿈도 자동으로 실행됨) 태그, 태그 사용 주..

1. 작업 결과물 올리기 앞에서 생성한 레파지토리를 VSCode로 파일을 엽니다. README.md 라는 파일을 추가합니다. *. md 파일은 마크다운이라는 확장자 파일을 의미합니다. 파일이 생성되면 파일명이 초록색으로 보이게 됩니다. 초록색: 버전 컨트롤이 되고 있는 추가된 파일 회색 : 버전 컨트롤이 안되어지고 있는 파일, .gitignore 에 추가된 파일 파란색 : 버전 컨트롤이 되고 있는 기존 파일에서 수정이 일어났을 때 추가된 README.md 파일을 서버로 올릴때 2단계를 거쳐서 올라가게 됩니다. commit: 서버로 올라가지 않고 내 컴퓨터에만 정보가 남게 됩니다. push: commit 된 요소들을 서버로 올립니다. 파일을 추가하기 전에 추가한 파일을 git에서 관리하고 있는지 확인을 먼..