전체 글 184

2. twitter clone 하기 - 기본 환경 설정 하기

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. twitter clone 하기 - 기본 개념 정리(서버, 파이어베이스란?)

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

2. package.json 이란?

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

IT/Node.js 2021.09.23

2. 자바스크립트(JavaScript) 기초 문법(2)

선언 키워드 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..

IT/JavaScript 2021.09.23

1. 자바스크립트(JavaScript) 기초 문법(1)

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

IT/JavaScript 2021.09.22

4. Github 관련 기본 문법(3)

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

IT/Github 2021.09.22

2. text 관련 태그

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

IT/Html 2021.09.19

3. Github 기본 문법(2)

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

IT/Github 2021.09.17

2. HTML 기초 문법

1. HTML 기초 문법 HTML은 웹문서에서 어디가 어떤 부분인지를 표시하기 위해 태그(tag)라는 표기법을 사용해 마크업 하는 언어입니다.(마크업을 하기 위해서 사용하는 표기법이 태그!) 태그는 정확하게 사용하지 않으면 제 기능을 수행하지 못합니다. 조금의 오타라도 발생하면 문서가 기대대로 나타나지 않습니다. 태그는 "" 기호로 끝납니다. 태그는 '여는 태그'와 '닫는 태그'가 한쌍으로 작성되는 경우가 대부분이며, 여는 태그부터 닫는 태그까지가 어떤 콘텐츠를 의미합니다. ex) 안녕하세요 각 태그는 추가적인 '속성'을 부여할 수 있습니다. ex)안녕하세요 HTML 문서 작성의 기본은 입니다. 2. HTML 태그의 종류 디스플레이 특성별 블록 태그 : 태그가 공간 전체를 차지합니다. 콘텐츠가 차지하는 ..

IT/Html 2021.09.16

1. Node.js 란?

1. Node.js 란? Node.js는 서버사이드 JavaScript이며 구글의 자바스킙트 엔진인 V8을 기반으로 구성된 일종의 스프트웨어 시스템입니다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램입니다. Node.js는 JavaScript 엔진위에서 동작하는 자바스크립트 런타임(환경)입니다. Node.js는 서버사이드 스크립트 언어가 아닌 프로그램(환경)입니다. Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다.

IT/Node.js 2021.09.16