일급객체(First-class Object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 객체를 값으로 취급하는 것

1. 일급객체의 조건

1. 함수는 익명의 객체로 생성가능하다.

const increase = function (num) {
  return ++num;
};

const decrease = function (num) {
  return --num;
};

2. 함수는 객체,변수에 저장할 수 있다.

const test = { increase, decrease };

3. 함수는 매개변수에게 함수를 전달할 수 있다.

const increaser = makeCounter(test.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

4. 다른 함수의 결과로서 리턴될 수 있다.

function makeCounter(test) {
  let num = 0;

  return function () {
    num = test(num);
    return num;
  };
}

함수는 일급객체의 조건에 해당한다.

2. 일급객체가 할 수 있는 것

1. 고차 함수(forEach, filter, map, sort 등)
2. closer
3. 콜백 패턴

-one concern at a time : 하나의 함수, 변수, 클래스, 컴포넌트에 한번에 너무 많은 일 부여하면 과부화..... 하나의 관심만 가지게 하면 loose coupling(낮은 결합도), high cohesive(높은 응집도) 의 특성을 발견할 수 있음

장점

• 코드가 더욱 명료해짐
• 코드 재사용성이 올라감
• 유지 보수가 용이함
• 테스트 코드를 작성하기 쉬워짐

2. custom hook이란?

-use로 시작하는 자바스크립트 함수 -state와 effect를 다음과 같이 분리하여 사용할 수 있음 -custom hook 하나 당 하나의 파일로 분리 -custom hook 사용할 때 export -소문자로 시작

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.

inline style과 비슷한 느낌이지만 inline style은 인라인 태그로 style을 정의하는 반면 CSS-in-JS는 style태그를 따로 정의하고 해당 태그에 class화 시켜서 연결 하는 방식으로 동작한다는 점에서 큰 차이가 있다.

2. Styled component란?

styed component는 css in -js 방식의 스타일이다.

1) styled component 장점

1. 컴포넌트 레벨로 추상화하는 모듈성
2. 자바스크립트와 CSS 사이의 상수와 함수를 공유

2) styled component 단점

1. 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다.

2. 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.

3. Styled component 사용

1. install

npm i styled-components

2. 사용방법

const 컴포넌트명형식 = styled.태그명``; 백틱안에 스타일을 설정할 수 있다.

1.1 프로젝트 목표

1차프로젝트 전 투표를 통해 정해진 사이트 중에 [닥터마틴] (https://www.drmartens.co.kr/?gclid=CjwKCAiA9aKQBhBREiwAyGP5lZM6o6NnLiTYclw1ZGyyBfVZu0W3SQud_DsJZr-4OZLeySswqnsF9BoCUBgQAvD_BwE) 사이트를 클론하게 되었다. 신발판매 컨셉을 그대로 가져가면서 기본에 충실한 클론프로젝트를 진행했다.

1.2 프로젝트 기간

2021.01.24 ~ 2021.02.11 (중간에 1주일이 설 연휴기간이라 약 2주간 프로젝트를 진행하였다.)

1.3 팀 소개

팀 명: Dr. Mataeng

의미: 사실 그렇게 큰 의미가 있는 팀 명은 아니다. 어떤 이름으로 할지 계속 고민하다가 뒤에 탱을 붙이면 귀엽지 않을까요? 라고 의견내주신 동기님의 아이디어를 따라 닥터마탱!이 되었다. (닥터맛탱이 될 뻔 했지만 프로젝트가 이름따라 간다는 이야기를 듣고 맛탱으로 짓지 않아서 다행이라고 생각이 들었다.ㅎㅎ)

Members

Frontend : 유재민, 오수민, 장예지 Frontend-github Backend: 강종범, 이혜린(혜린님은 건강상의 이유로 중간에 하차하셨다....) Backend-github

1.4 사용한 기술 스택

• JavaScript(ES6+)
• React
• SASS
• github

협업툴

• slack
• trello

트렐로는 이번에 처음 사용해보는 툴이라서 티켓을 나누는 방법도 익숙하지 않았다. 그래서 중복되는 티켓을 만들기도하고 필요한 티켓을 만들지 않고 진행하는 실수도 있었지만 팀원들과 중간회고를 하며 티켓을 변경하고 Done전에 Review column을 만들어서 좀 더 진행상황을 세세하게 볼 수 있도록 했다.

• Notion

2. 프로젝트 영상

3. 기능구현

(내가 맡은 부분 ✌️) 로그인 회원가입 ✌️ 메인페이지 (레이아웃) ✌️ 마이페이지 상품 리스트 ✌️ 상품 디테일 검색 장바구니 주문 결제

3-1. 회원가입

1. 닥터마틴의 회원가입부분은 총 8개의 Input창으로 구성되어 있으며 각각의 Input창 별로 조건을 걸어야했다.

-> input에 들어가는 state값을 한꺼번에 관리하기 위한 코드 -> input에 여러가지 type들을 사용해볼 수 있는 기회였다.

2. backend에서도 유효성 검사를 하고 frontend에서도** 유효성 검사** 를 하는 식으로 구성하였다. 처음에는 한군데에서만 유효성 검사를 해도 되지 않을까? 라는 생각을 했었다. 그러나 서로 상호보완적이 가능하게 두군데에서 모두 검증해줘야한다.

-> backend와 조건을 맞춘뒤 작성한 유효성 검사 코드들, 정규식을 처음 사용해봤는데 매우 유용했다.

3. 유효성 검사를 끝낸 뒤 값들이 조건에 알맞으면 backend에 값들을 넘겨주고 회원가입이 완료되면 로그인 페이지로 넘어가는 플로우로 진행하였다.

4. 회원가입 폼들이 많아서 누르면 페이지의 최상단으로 가는** top버튼**을 만들었다.

3-2. 상품리스트

**

1) 필터**

1. 필터창에 원하는 조건을 선택하면 조건에 관련된 제품이 제품 리스트 창에 나오게 만들었다.

-> 필터창을 form으로 만들어서 매우 간단하게 필터의 데이터 값을 얻을 수 있었습니다.

->querystring을 이용해서 backend에 데이터를 요청했다. 그런데 이부분에서 색상부분이 한글로 되어있는데 한글 부분의 uri가 계속 숫자와 영어로 변환되었다. decodeuri 을 사용해서 해결했다.

2) pagination

1. 제품이 한 페이지에 6개만 보이도록 limit을 걸어두고 querystring을 사용해서 indexbutton을 눌렀을 때 다음페이지가 넘어가며 다른 상품이 보이도록 만들었다.

4. 회고

4-1. 좋았던 점

• *기한에 맞춰서 프로젝트를 완성 * 솔직하게 말하면 이번 프로젝트 전까지 무언가를 내가 스스로 완성해본 적이 없다. 그래서 프로젝트를 시작하기 전 내가 팀원들에게 크나큰 blocker가 되지는 않을까 엄청 걱정하면서 프로젝트를 시작했다. 그런데 프로젝트를 시작하니 팀원들과 협동하는 것이 너무 즐거웠고 내가 무언가를 하고있는 것도 신기했다. 집에가서 잠을 자기 전까지 어떻게든 오늘 이건 해결해야된다는 생각으로 여러가지 자료를 찾아보고 무조건 코딩을 쳐보기도 하면서 프로젝트 전과 다르게 실력(사실 실력이라고 할것도 없었다...)이 성장하는 기분이 들었다.

• 코드를 시작하는 것에 대한 두려움 극복(and git) 아는게 없으니 페이지 하나를 시작할 때 코딩 한줄을 치는 것이 시간이 오래걸렸다. 머리속으로 이게 맞는지 계속 생각하고.. 구글링하고... 몇줄치다가 다시 다 삭제하고 다시 시작하고의 반복이였다. 그런데 프로젝트는 기한이 있고 다른 팀원들과 시간을 맞춰야 되기 때문에 내가 머뭇거리면 다른 팀원들에게도 피해가 되기때문에 고민은 짧게 그러나 하면서 계속 생각했다. git을 올리는것도 잘못올리면 어쩌지라는 두려움이 있었는데 계속 반복해서 git을 사용하니까 자신감이 생겼고 잘못되도 괜찮다고 말해주는 팀원분들이 있어서 git두려움에서 벗어날 수 있었다.

4-2. 아쉬웠던 점

• 컴포넌트 활용을 잘 못한 것 같다.
• 네이밍을 비슷하게 사용하는 경우가 있어서 수정사항이 발생했다.
• 사용자를 조금 더 고려하는 사이트로 만들었으면 좋았을 것 같다.
• 피어리뷰를 하는 시간이 많지 않았다.
• bloker 많든 적든 자세하게 기록하지 못했다.
• 개발 기획 단계에서 개개인의 목표 공유를 하지 못했다.

4-3. 소감

처음 프로젝트를 끝내서 후련하기도 하지만 아쉽기도하다. 그 아쉬움 중에 커다란 하나는 우리 팀원들과 이제 헤어져야한다는 것이다. 말랑말랑이라는 말이 잘어울리는 순둥한 팀원들과 내 인생의 첫 프로젝트를 하게되서 너무 큰 영광이였다. 사소한 질문 하나에도 같이 생각해주고 서로 배려하고 어떤식으로 서로를 도울 수 있을지 생각하는 좋은 마음들이 모여서 이번 프로젝트가 잘 마무리 된 것 같다.

그리고 위코드를 시작하고 내가 개발자에 정말 어울리는 사람인지... 내가 잘해낼 수 있을지 매일매일 생각하면서 가끔은 너무나 큰 스트레스로 심장이 조여들어왔었다.그러나 프로젝트를 시작하면서 힘들기도 했지만 알아가는 기쁨을 느끼고 내가 해내가는 성취감을 느끼며 개발자 할 수 있을까? 라는 생각보다 그냥 너무 재밌다라는 생각이 더 커졌다. (거짓말같지만 자기전에 '빨리 내일이와서 코딩하고싶다' 라는 생각도 한두번정도?!했었다.) 아직까지도 내가 perfect하게 개발자에 맞는 사람인지는 잘 모르겠지만 perfect하지 않아도 뭐 어때?라는 마인드로 개발을 즐기면서 하고싶다.

Thanks to..❤️ 재민님,수민님,종범님,혜린님 제 인생 첫 프로젝트를 함께해주셔서 너무 감사했습니다. 사는동안 우리 많이 벌어요~

• datacenter 렌트 비용을 지불해야한다.
• 새로운 하드웨어 추가하거나 교체할 때 시간 많이 소모
• power subpply, cooling, maintenance 비용을 지불해야한다.
• 확장제한사항이 많다.
• 현재 유지되고 있는 인프라를 모니터링할 인원이 필요함
• 천재지변에 대응하기 어렵다.

2. cloud computing

• 인터넷만 연결되어있으면 어디서든 연결이 가능하다.
• 사용한 만큼만 지불하면된다.(시간단위로 사용)
• 정확하게 필요한 타입과 크기의 리소스를 지정하여 사용 가능

3. 클라우드가 해결해주는 문제들

• flexibility:유동적으로 원하는 리소스의 타입과 사이즈를 쉽게 변경
• cost-effectiveness: pay-as-you-go
• scalability: 쉽게 새로운 리소스를 추가할 수 있음
• high-availability and fault-tolerance:글로벌하게 확장되어있는 인프라.

4. cloud 서비스의 예

• email cloud service
• netflix (video on demand)
• dropbox (cloud storage service)

5. AWS( Amazon Web Service)

• 간단한 가입 프로세스
• Amazon의 Brand Value
• Stability - 엄청난 규모, 안정적

key services

EC2 :몇분안에 구동 가능한 가상 서버 VPC : aws 네트워크 망안의 사용자 전용의 사설 네트워크 망 S3 : 파일 업로드 및 공유 CloudFront : CDN Route53 : DNS ELB : 서버로 들어오는 트래픽을 골고루 여러개의 머신으로 전달

• Url 주소에 따른 다른 화면을 보여주는 것

2. 정적 라우팅, 동적 라우팅

1. 정적라우팅

• 관리자가 직접 테이블에 라우트를 지정해주는 것

2. 동적라우팅

• 정해져있지 않고 관리를 따로해야되는 것
• Id값에 따라 다른 상세 페이지 정보가 들어가게 됨
• 변수처럼 다뤄야 할 필요성이 있다.

3. path parameter, query parameter

path parameter, query parameter 라는 두가지 개념이 있다. path parameter : 한가지 리소스 query parameter : 전체 리소스에서 특정 한 곳을 찾아갈때 ? 뒤에 키워드

동적 라우팅이 구현되는 흐름 상품 클릭 -> 아이디 값을 받아서 url에 넘겨주고 -> url에 담겨있는 아이디를 이용해서 데이터를 fetch -> 요청된 데이터를 받아서 디테일 페이지에서 데이터를 뿌려준다.

1. path parameter 사용 예시

이벤트 발생 카드를 눌렀을때 onclick 이벤트 발생시켜야됨 -> useNavigate를 사용해서 이동 -> goToDetail 함수를 설정 (카드를 눌렀을 때 카드에 담긴 아이디값을 이용해서 디테일로 넘어가야된다) -> ${props.id} -> 라우터에서 해당 경로를 설정해줘야한다. -> 라우터에 : id 를 수정 -> detail에서 아이디값에 따른 데이터를 가져와야된다. -> useParams 사용 : url 패스파라미터의 값을 확인 가능 -> useEffect fetch함수 사용 API주소: url / ${params.id} -> 데이터가 필요한 컴포넌트를 수정

2. query parameter 사용 방법

?뒤에 있는 것이 쿼리 스트링 pagination을 query parameter로 구현할 수 있다. limit: 한페이지에 보여줄 데이터 수 offset: 데이터가 시작하는 위치

-query parameter를 사용할 때 useLocation 값이 필요하다.

단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

2. 제한사항

s는 길이가 1 이상, 100이하인 스트링입니다.

3. 접근방법

1) 문제 살펴 보기

글자를 반환하는 함수- return값이 필요하다. 단어의 길이는 홀수와 짝수 랜덤한 문자열 값이 주어진다.

2) 나의 생각 flow

★ 배열의 시작은 0

-짝수인 경우

예시) banana

세번째,네번째 n과a가 가운데 글자

배열의 index 2번째 3번쨰 글자

단어의 길이에 따라 가운데 글자의 index넘버 달라짐

-홀수인 경우

예시) apple

세번째글자인 p가 가운데 글자

배열의 index로는 2번째인 글자

4. 문제풀이

배열의 시작은 0부터 시작한다는 것을 잊고 1로 생각해서 코딩을 시작했다.

당연히 다른 글자가 가운데 글자로 나오는 것을 보고

배열에 대해서 다시 공부를 했다.

0부터 시작하는 것을 잊지말자!

리액트를 사용하게 되면 SPA(single page application)을 사용하게 됩니다. 한개의 웹페이지 안에서 여러개의 페이지를 보여줘야하기 때문에 다른페이지를 보여주고 싶을 때는 Routing을 사용해야합니다. 이러한 Routing을 사용하는 방법에는 useNavigate 와 Link가 있습니다.

1. useNavigate

useNavigate를 사용하기 위해서는 npm install react-router-dom --save을 통해 react routing을 설치해줘야한다.

1) useNavigate 활용 예시

import React from "react";
import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate("/main");
  };

  return (
    <div>
      <button className="loginBtn" onClick={goToMain}>
        로그인
      </button>
    </div>
  );
}

export default Login;

• useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다.
• 해당 함수를 navigate 라는 변수에 저장합니다.
• navigate 의 인자로 Router.js 에서 설정한 path를 넘겨주면, 해당 경로로 이동할 수 있습니다.

-> 페이지 전환시에 추가로 처리해야되는 로직이 있을 때 사용

2. Link

1) Link 사용 예시

import React from "react";
import { Link } from "react-router-dom";

function Login() {
  return (
    <div>
      <Link to="/signup">회원가입</Link>
    </div>
  );
}

export default Login;

• Link는 프로젝트내에서 페이지를 이동할 때 사용합니다.

-> 클릭시 바로 페이지가 변환되어야할 때 사용

Javascript Object Notion -클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷 -독립형 데이터 포맷으로 여러 프로그래밍 언어에서 사용할 수 있음

2. JSON을 사용하는 이유?

네트워크를 사용하는 데이터 통신은 데이터를 byte형식으로 주고 받는다. 그래서 JSON이 없이도 데이터를 서로 주고 받을 수 있다. 그러나 JSON을 사용하는 이유는 다른 개발자와 협업시 또는 자신의 데이터형식을 다른사람과 공유해야될 경우에 byte형식으로 작성했다면 공유하기에 어려움이 있다. 그렇기 때문에 JSON을 사용한다면 데이터형식을 공유하고 이해하기 쉬울 것이다.

3. JSON 표기방법

• JSON은 자바스크립트의 객체 리터럴과 비슷하게 키와 값으로 구성된 순수한 텍스트이다.
• JSON의 키는 반드시 큰따움표로 묶여야한다.
• 값은 객체리터럴과 같은 표기법을 사용할 수 있다.

  {
  "name": "myname",
  "age": 29,
  "alive" : true,
  }

1차 프로젝트를 진행하면서 회원가입 페이지를 구성했는데 여러가지 회원가입에 필요한 구성요소를 만들다보니 다양한 input의 type을 사용하게 되었다.

1. Date

<input>type="date" 날짜 선택기 인터페이스를 사용하여 사용자가 날짜를 입력할 수 있도록 하는 입력 필드 작성 의 요소 사용자가 날짜를 선택하면 value값이 년도-월-일 로 나오게 된다. 선택기의 인터페이스는 사용자가 사용하는 브라우저에 따라 다르다.

2. Radio

<input>type=radio는 일반적으로 관련 옵션 집합을 설명하는 라디오 버튼 모음인 라디오 그룹 에서 사용됩니다.

주어진 그룹에서 하나의 라디오 버튼만 동시에 선택할 수 있습니다. 라디오 버튼은 일반적으로 선택 시 채워지거나 강조 표시되는 작은 원으로 렌더링됩니다. 위의 이미지에서는 성별을 그룹으로 묶어서 여자와 남자 둘중 하나만 선택할 수 있게 만들었습니다.

3. number

<input>type=number 사용자가 숫자를 입력할 수 있도록 하는 데 사용됩니다. 여기에는 숫자가 아닌 항목을 거부하는 기본 제공 유효성 검사가 포함됩니다. -> 핸드폰번호를 기입하는 input에 number타입을 사용하려고 했는데 아래와 같은 문제가 있어서 사용하지 않았다.

• e와 E가 지수표기법으로 인하여 입력이 가능했다.

• 한글이 입력 가능하다.

-REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하느 방식을 규정한 아키텍처이고 RESTful API는 이 REST 아키텍처를 잘 사용한 API를 말한다.

-REST API는 자원, 행위,표현의 3가지 요소로 구성이되며 이것만으로도 HTTP 요청의 내용을 이해할 수 있다.

2. REST API의 설계 원칙

• url 은 page 기준이 아닌 resource 기준으로 작성( 동사보다는 명사를 사용한다.)
• 한 번에 여러 종류의 정보를 표출해야 한다면, 프론트엔드 개발자와 협의하여 REST에 맞춰 두가지 이상의 endpoint를 동시에 호출합니다.
• 리소스에 대한 행위는 HTTP요청 메서드로 표현한다. (GET,POST,PUT,PATCH,DELETE)

서비스를 이용할때 가장 기본이 되는 기능은 무엇일까? 그건 바로 회원가입이다. 회원가입을 통해 서비스를 이용하는 이용자를 파악할 수 있기 때문이다.

1. 인증

회원 인증에 필요한 것은 아이디, 이메일, 비밀번호 등 여러가지가 있지만 이 중에서 가장 중요한 것은 비밀번호이다.

비밀번호를 관리할때는 다른사람이 알 수 없도록 관리하고, 또한 이것을 암호화하도록 법적으로도 규정하고 있기 때문에 비밀번호 관리는 매우 중요하다.

비밀번호를 그러면 안전하게 저장하기 위해서는 어떻게 해야할까?

1) 해시함수 사용 해시함수를 이용해서 비밀번호를 수학적 연산을 통해 임의의 숫자와 알파벳으로 이루어진 결과값으로 바꿀 수 있습니다. 단방향이라서 해쉬화된 결과값만 보고 비밀번호를 유추하기는 매우 어렵습니다. 하지만, 같은 패스워드의 값을 넣으면 항상 같은 결과가 도출되기때문에 모든 해시값을 저장하고 이것을 유추해주는 사이트가 존재합니다. 그렇기 때문에 해시함수만으로는 안전하게 저장하는 것은 어렵습니다.

2) bcrypt 사용 해시함수만 사용했을 때의 단점을 보완하기 위해서 salting과 키스트레칭을 포함시켜 만들어진 해시 매커니즘

salting : 실제 정보 이외에 추가적으로 무작위 데이터를 더해서 해시 값을 계산하는 방법. salt는 비밀번호마다 모두 다르기 때문에 같은 비밀번호라도 해시값이 달라지게 된다.

키 스트레칭 : 기존 단방향 해시 알고리즘의 빠른 실행 속도가 취약점이 됐던것을 보완하기 위한 방법. 해시값을 계속 반복시켜서 결과값을 늘리는 방법입니다.

2.인가

해당 유저가 권한이 있는지 확인하는 절차

**

1) JWT(json web token)**

헤더, 내용, 서명으로 이루어져 있습니다. 헤더에는 토큰의 타입과 해시알고리즘의 정보가 들어갑니다. 내용에는 토큰에 담을 클레임 정보를 포함하고 있습니다. 서명에는 말그대로 서명, 암호화를해서 저장합니다. 유저아이디별로 토큰이 달라진다. JWT의 장점은 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요 없습니다.

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 ​ 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다.

2. 풀이

첫번째 방법

const twoSum = (nums, target) => {
  let result=[];
  for(let i=0; i< nums.length-1; i++)
  {
    for(let j=i+1; j< nums.length; j++)
    {
      if(nums[i]+nums[j] == target){

        result[0]= i;
        result[1]= j;
      }
    }
  }
  return result;
}

두번째 방법

const twoSum = (nums, target) => {
  let result=[];
  for(let i=0; i< nums.length-1; i++)
  {
    for(let j=i+1; j< nums.length; j++)
    {
      if(nums[i]+nums[j] == target){

        return result.concat([i,j]);

      }
    }
  }

}

세번째 방법

const twoSum = (nums, target) => {
  let result=[];
  for(let i=0; i< nums.length-1; i++)
  {
    for(let j=i+1; j< nums.length; j++)
    {
      if(nums[i]+nums[j] == target) {

        return [i,j];

      }
    }
  }

}

application이 발전하면서 어플리케이션의 규모가 커지면서 DOM으로 유지보수하기가 어려워졌다. 그래서 규모가 커지고 복잡한 어플리케이션을 관리를 더욱 편하게 하기 위해 다양한 framework와 library가 등장했다.

*Framework vs Library *

2. CRA

CRA는 create-react-app node module 의 약자로 리액트 프로젝트를 쉽게 만들 수 있게 필요한 모듈을 바로 설정해주는 도구이다. CRA를 사용하지 않는다면 우리는 필요한 모듈을 하나하나 프로그램을 설치하면서 초기 react 모듈을 설정하는데 많은 시간이 들었을 것인데 CRA를 이용하면 빠르게 해결할 수 있다.

CRA 설치 방법 npx create-react-app 프로젝트명

3. CRA 구성요소

1. node.modules, package.json, .gitignore

• node.modules CRA를 구성하는 패키지들을 모아놓은 폴더, 매우 용량이 크다.
• package.json 요약본, CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
• gitignore github에 올리고싶지 않은 폴더와 파일을 기록하는 곳, 용량이 너무크거나 보안상의 이유가 있을 때 이용합니다.

2. index.html, index.js, App.js

• index.js 메인 프로그램이라고 할 수 있습니다.

• App.js 실제로 화면에 표시되는 내용 등은 여기에서 정의됩니다.

• index.html 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다.

git master에서 brunch를 만들어서 자신의 로컬에서 작업하다가 merge를 했을 때 충돌(conflict)가 일어나는 경우가 있다. 내가 작업한 곳과 다른사람이 작업하던 곳의 동일한 라인의 코딩이 서로 달라서 충돌이 일어나는 경우이다.

2. git conflict 해결방법

1. 충돌이 일어났을 때 main 로 이동해서 제일 최신 업데이트된 저장소의 main 을 pull해준다.

   main 으로 이동 명령어: git checkout main 최신 업데이트로 pull 명령어: git pull

2. 충돌이 일어난 브랜치로 이동

3. 충돌이 일어난 브랜치와 main 을 merge해준다.

   merge 명령어 : git merge main

4. merge를 충돌된 곳의 상황을 보여준다.

5. 프로젝트 팀원과 충분한 검토와 상의 후 충돌된 곳을 수정합니다.

6. 수정한 것을 다시 git hub에 올리기 위해서 add ., git commit, git push를 해줍니다.

순서가 있는 리스트, 한개의 변수에 여러개의 값을 순차적으로 저장할 때 사용한다.

2. 배열의 특징

배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음

3. 배열의 메소드

1) push : 배열 끝에 추가

let days = ['월','화','수'];
days.push('목')
console.log(days) // ['월', '화', '수', '목' ]

2) pop : 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.

let days = ['월','화','수'];
days.pot()
console.log(days) // ['월', '화']

다양한 배열 메소드 http://tcpschool.com/javascript/js_standard_arrayMethod

const teacher = {
  name:'clark',
  age: 33,
}

**접근하는 방법**
teacher.name
teacher['age']

**추가**
teacher.gender = 'male';
teacher['hairColor'] = 'black';

**삭제**
delete teacher.hairColr;

2. 객체 프로퍼티 존재 여부 확인

const teacher = {
  name:'clark',
  age: 33,
}

teacher.birthDay;
-> 프로퍼티가 존재하지 않기 때문에 undefined 

'birthDay' in teacher;
-> 프로퍼티가 존재하지 않기 때문에 false

. 과 in의 차이점은 어떤값이 넘어올지 확신할 수 없을 때 in을 사용한다.

function adult(user){
  if(!('age' in user)|| //user에 age가 없을때
     user.age < 20)) {
    return false;
  }
  retrun true;
}

const Mike ={
  name: "Mike",
  age: 30,
}

const May ={
  name: "May",
}

console.log(adult(May)); 
--> age in 을 function에 넣지 않으면 undefined가 되서 return true값을 갖는다. 그렇기 때문에 값이 없는 것도 포함시키고 싶으면 in을 사용하면 좋다.

함수의 기본구조

ES6 이후 화살표 함수가 활발하게 사용되고 있음

1.일반함수선언문

let add = function(num1, num2){
  return num1+num2;
}

--> 화살표 함수로 변경

let add = (num1,num2)=>{
  retrun num1+num2;
}

//코드 본문이 한줄일때, 리턴문을 가로로묶으면 된다.
let add = (num1,num2) => (num1+num2;)

//리턴문이 한줄이면 가로생략가능
let add = (num1,num2) => num1+num2;

//인수가 하나일때 가로 생략가능
let sayHello = name => `hello,${name}`;

-DOM에서 일어난 어떤 사건을 나타낸다. 사용자가 어떤 작업을 했을때 어떤 동작이 일어날때 event가 발생한다고 한다. -웹 브라우저는 이벤트를 감지할 수 있으며 이벤트가 발생하면 이를통해서 사용자와 웹페이지간의 상호작용이 가능합니다.

2. event 종류

-이벤트는 일반적으로 function과 함께 사용되며 function이 일어나기 전에는 해당 기능이 실행되지 않게 만듭니다.

-evnet의 종류는 여러가지이며 대표적인 event로는 clik, keyup, scroll이 있다.

여러가지 이벤트는 아래의 링크에서 확인 가능하다. https://developer.mozilla.org/en-US/docs/Web/API/Event#interfaces_based_on_event

3. addEventListener

-이벤트 달 때 사용하는 함수는 addEventListner이다. 특정이벤트가 언제 발생하는지 듣고있다가 이벤트가 발생하면 함수를 실행시켜준다.

Syntax addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture);

git의 공식 명칭은 VCS로 version control system이라는 뜻입니다. 쉽게말하년 프로젝트 파일이 수정된 것을 기록하고 수정되기 전 버전으로도 돌아갈 수 있도록하는 시스템입니다.

2. Git을 사용하는 이유

위의 이미지처럼 파일을 작성하다보면 수정사항이 생기게 됩니다. 그때마다 파일을 수정해서 저장하다보면 파일도 많아지고 어떤것이 정말 최종파일인지 헷갈리게 됩니다.

git을 사용하게 되면 이런 수정사항을 한눈에 파악하기 쉬워집니다. 누가 어떤 수정을 했는지, 언제 수정했는지 파악 할 수 있으며 수정 전 프로젝트 상태로 언제든지 돌아갈 수 있습니다. 또한 협업할때 git을 사용하면 파일을 여러번 합칠 필요없으며 서로 코드가 겹치는 상황도 방지 할 수 있습니다.

3. Git hub란?

Git hub는 git을 더욱 효율적으로 관리하는 웹호스팅 플랫폼으로 협업시에 언제, 어디서나 git hub를 통해 프로젝트를 작성할 수 있습니다.