값으로 들어갈 부분들을 따로 백엔드에서 받아올 필요는 없을 것 같아서 mock data로 만들어 주었다!

너무나 당연하고 간단한건데 Styled component로 형태가 살짝 혼란스러워서 기존에 하던 것도 잊은 것 같다. 이전 코드가 남아 있으면 좋았텐데 아쉽다!

아직까지 엄청나게 편하다는 느낌을 받지 못했지만 조금 적응 된 것 같다! props로 값을 받아오거나 할 수 있지만 아직 그렇게까지 활용은 하지 못했고 이번 프로젝트때는 공통된 색깔을 theme을 활용한게 전부이다! 다음에는 조금더 다양하게 적용 해볼 수 있으면 좋겠다!

2차프로젝트에서는 조건부렌더링을 많이 써보고 싶어서 로그인페이지를 자원해서 맡게되었다. 외부 Api를 사용해서 구현한다고 공지해주셔서 그러려니 하고 있었는데 실제로 하다보니까 공식문서를 참고해서 잘 적용하는게 중요한 파트였다!

로그인

_카카오 로그인 Rest Api를 이용_하기 위해서 kakao developers 사이트를 참고하여서 대략적인 흐름을 잡을 수 있었다!!

사용자 입장에서 편하게 이용하던 카카오로그인 기능을 직접 활용해본덕에 조금 더 흥미를 가지고 공부 할 수 있었다.

그리고 인가코드를 받아올때 내가 지정한 uri로 오는데 크때 바뀌는 url 값을 활용하여서 화면의 구성에 변화를 주었다. 1차 프로젝트에서 useParams hook을 이용하였는데 url안에 정말 많은 객체가 있고 활용할 수 있는 메서드가 있다는 것을 알 수 있었고 get메서드로 인가코드를 유연하게 관리할 수 있었다.

또 인가코드로 카카오가 가지고 있는 사용자의 정보에 접근할 수 있기때문에 환경변수에 따로 관리를 해주어야 했다.

글쓰기 막기

코드 자체는 간단하지만 로그인 여부에따라서 사용자가 이용할 수 있는 서비스가 달라야 하는점을 여러방면으로 생각을 하면서 코드를 써야하는구나를 생각하게 된 코드이다!

slick slider

슬라이더의 아래쪽에 페이지가 변할때마다 해당 페이지 숫자가 나타나게 하는 부분의 코드이다! 라이브러리를 처음 이용해봐서 내장되어있는 기능을 쓸 생각을 못하고 직접 기능을 넣으려고 시도했는데 공식문서에 원하는 부분이 있어서 멘토님의 도움을 받아서 적용법을 배웠다! 이번에 slick slider를 써보면서 공식문서를 어떻게 보고 코드에 직접 적용하는지 알게 되었다!

라이브러리를 처음 써봐서 어떻게 내가 원하는 레이아웃과 기능을 사용하는데 시간이 많이 걸려서 과연 라이브러리가 편리한게 맞을까 의문이 들었는데 사용에 적응하니까 왜 쓰는지 알 수 있었다!

rebase 순서

새로한 작업을 모두 마치고

1. git checkout main
2. git pull origin main
3. git checkout feature/이름
4. git rebase -i main
5. 가장 오래된 commit을 pick
6. 나머지는 squash 한다
7. esc → :wq로 창을 빠져나온다
8. 메시지는 하나만 남기도 다 삭제한다
9. esc → :wq로 창을 빠져나온다
10. git push origin feature/이름

순서가 꼬였을때는 git push origin feature/login -f -f 명령어로 강제로 푸쉬한다

현재 프로젝트의 원본 사이트의 슬라이더가 위의 슬라이더와 비슷해서 활용 해 보았다.

npm install react-slick --save

우선 설치를 해주어야 한다. 그리고 공식 페이지에 있는 코드를 복사해서 붙여넣기 해주었다.

import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

원래는 위와 같은 코드였는데 styledComponent를 쓰기위해서 아래와 같이 작성 해주었다. 같은 부분이 다섯번 반복되기때문에 map메서드를 사용하여서 값을 변화해 주려고 한다 (아직 구현중)

그리고 기본적으로 내장되어 있는 페이지를 나타내는 점을 없애고 화살표를 보이게 했고, 원본 홈페이지와 같이 점 대신에 페이지가 변할때마다 숫자를 변하도록 만들어줄 예정이다 (구현중)

라이브러리가 간단하다고 하는데 실제로 내가 볼 수 있는 코드가 적어서 어떻게 동작 하는지를 알기가 어렵고 설정을 변경할 수 있는 옵션들을 내가 찾지 못하는건지 공식문서가 아닌 블로그를 다 찾아서 옵션을 바꿔줘야 하는 부분이 좀 번거로웠지만 어떻게 쓰는지 감을 잡을 수 있었다.

일단 전체적인 흐름을 정리하자면
1.프론트엔드에서 사용자에게 로그인/동의 확인을 받은후 카카오로 인가코드를 요청 2.카카오에서 확인후 프론트엔드로 인가코드를 넘김 3.프론트엔드는 받은 인가코드를 백엔드로 전달 4.백엔드는 받은 인가코드와 프론트엔드가 사용한 Redirect URI를 카카오로 전달하여 토큰을 요청 5.카카오에서 확인후 토큰을 백엔드로 전달 6.백엔드에서는 카카오서 받은 토큰을 활용하여 우리 서비스 전용 토큰을 발행 7.백엔드는 발행한 전용토큰을 프론트로 전달하고 8.토큰 확인후 로그인 됐으면 서비스를 이용할 수 있도록 화면을 전환

위의 과정을 위해서는 우선 kakao developers에 등록을 해야 한다.
링크텍스트 1.kakao developers(위의 링크)에 들어간다 2. 오른쪽 상단의 내 애플리케이션을 누른 후 로그인을 한다. 3. 애플리케이션 추가하기를 누르고 앱 이름 사업자명을 적어준다. (나는 프로젝트명을 두 군데에 적어주었다) 4. 사용자에게 받아올 정보를 정해서 설정해 준다 5.Redirect URI를 설정해 준다. 설정한 주소로 인가 코드를 받아오기 때문에 프론트엔드에서 접근할 수 있는 localhost:3000으로 설정을 해주어야 한다. 나는 http://localhost:3000/kakaoLogin 주소로 설정했다.

1.인가 코드 받기

위의 과정을 통해 인가 코드를 받아온다.

const params = new URL(document.URL).searchParams;

URL객체를 이용하여 현재 주소의 searchParams의 객체를 params변수에 넣어주고

const code = params.get('code');

searchParams안에 있는 get 메서드를 이용하여 파라미터의 code키의 값을 가져온다.

카카오에 인가코드를 요청하는 링크에는 kakao developer에 등록 하면서 받았던 REST API키와, 내가 등록한 Redirect URI를 넣어준다.

이때 REST_API_KEY는 누가 API를 요청하는지에대한 정보가 담겨 있기때문에 보안에 신경써야 한다고 한다! 그래서 환경변수에 넣어서 관리를 해준다고 한다. 그래서 최상위 루트에 .env파일을 만들어서 값을 따로 관리 해준다. (사실 환경변수가 왜 key값을 암호화 하는데 쓰이는건지는 모르겠다.)

• 변수명의 시작은 꼭 REACT_APP으로 시작 해야하고 값을 따옴표 등으로 감싸지 않아야 한다. 그리고 따로 import 해주지 않아도 사용할 수 있다.

• 로그인 버튼을 눌렀을때 현재 페이지 URL을 인가코드 요청 URL로 변경되도록 하였고, 카카오의 로그인 요청 창이 뜨면서 사용자가 동의를 하면 동의한 정보가 카카오로 가고 내가 지정한 Redirect URI로 code 값이 담겨져서 온다.

• 그리고 코드 값이 있으면 코드를 담아서 백엔드에 보내면 token을 보내주고 토큰이 있고 없고에따라 화면이 전환 되도록하였다.

• 백엔드와 통신 할때 REST_API_KEY와 REDIRECT_ID를 통일해야 한다.
  

백엔드 멘토님은 공식문서를 보고 혼자서 코드를 짜보라고 하셨지만 절대로 할 수 없을 것 같아서 여러 블로그를 참고하였다. 코드만 보았을땐 단순한 것 같은데 스스로 다 하기는 쉽지 않은 것 같다.

백엔드에서 데이터를 받아올때는 따로 전해줘야할 정보가 없기 때문에 body부분이 필요 없다.

  const addCart = product => {
    fetch('http://10.58.7.204:8000/carts', {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('jwt'),
      },
      body: JSON.stringify({
        product_id: product,
        quantity: 1,
      }),
    }).then(response => response.json());
  };

장바구니에 담길 상품의 정보를 전달 해야하기때문에 body부분에 백엔드에서 요청한 정보를 담아준다

let login = () => {
    fetch('http://10.58.6.107:8000/users/login', {
      method: 'POST',
      body: JSON.stringify({
        email: id, 
        password: pw, 
        //아이디혹은 이메일,페스워드 로그인시 필요한 정보 보내고
      }),
    })
      .then(response => response.json())
      .then(response => {
        if (response.USER_NAME) {
          localStorage.setItem('jwt', response.TOKEN);
          // 토큰 로컬스터리지에 삽입
          navigate('/main-eokhwa');
          ///이후 페이지 이동

        }
      });
  };

최초 로그인 후에는 아직 토큰 값이 없기 때문에 받은 토큰 값을 저장할 이름을 setItem 함수에 담아서 저장한다.

아직 외워서 쓰기에는 헷갈리기때문에 다음 통신때 참고해야겠다

npm install styled-components import styled from "styled-components";

사용방법

// App.js

const App = () => {
  return (
    <>
      <Button>Button</Button>
      <NewButton>New Button</NewButton>
    </>
  );
};

const Button = styled.button`      
  margin: 20px;
  padding: 20px;
  border: none;
  background-color: yellow;
  font-size: 20px;
`;

const NewButton = styled(Button)`  
  color: white;
  background-color: purple;
`;

export default App;

Button // 1 New Button // 2

먼저 선언된 버튼의 속성을 가져오고 거기에 스타일을 더 더해서 사용하는 것도 가능하다
</br>

// App.js

import React, { useState } from 'react'; import styled, { css } from 'styled-components';

const App = () => { const [changeColor, setChangeColor] = useState(false);

const handleChanageColor = () => { setChangeColor(!changeColor); };

return ( <> Button </> ); }

const Button = styled.buttonpadding: 20px; margin: 10px; border: none; background-color: ${(props) => (props.primary ? "purple" : "pink")}; // 1;

export default App;

props를 이용하여 동적으로 스타일링을 할 수 있다
</br>

// App.js

import { Link } from 'react-router-dom'; ;import styled from 'styled-components';

const App = () => { return 장바구니; };

const CartLink = styled(Link)color: red;;

export default App;

// Elements

장바구니

Link, 아이콘 등과 같이 외부 라이브러리의 컴포넌트도 import하여 스타일리을 확장해서 사용 가능하다
</br>

import React from 'react'; import styled from 'styled-components'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css';

const Main = () => { return ( // slick 코드 ); };

const Carousel = styled(Slider).slick-slide { // slick 커스텀 스타일 };

export default Main;

최대한 컴포넌트화 하여서 사용해야 하지만, 외부 라이브러리를 사용하여 정해진 스타일을 변경 해야 할때는 네스팅을 이용한다
</br>

// src/styles/GlobalStyle.js

import React from 'react' import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`

• { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } `

export default GlobalStyle;

// index.js

import React from 'react'; import ReactDOM from 'react-dom/client'; import { ThemeProvider } from 'styled-components'; import Router from './Router'; import GlobalStyle from './styles/GlobalStyle';

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );

전역에서 사용되는 css스타일은 createGlobalStyle 함수를 통해 컴포넌트를 생성할 수 있다.
</br>

처음에는 지금까지 배웠던 기능들을 활용하면 될 것 같아서 간단할 것 같다고 생각했던 부분들이 백엔드와의 통신에 대한 개념이 없는 상태에서 적용하려고 했더니 프로젝트 후반부로 갈수록 수정할 부분이 많이 생겨서 조급 해졌던 점이 많이 아쉬웠다.

링크텍스트

setCards 부분에 들어오는 데이터의 형태를 인지하지 못해서 map함수가 실행 되지 않아서 오류를 해결하는데 너무 많은 시간을 쏟았고 멘토님의 도움으로 해결 했을때는 조금 어이가 없었다... 내가 받을 파일들이 어떤 형태인지 꼭 인지하고 잊을 것 같으면 주석으로라도 남겨서 많은 시간을 쓰지 않도록 주의 해야겠다고 생각했다.

query parameter로 받을 값들을 value 값들로 설정하여 거의 값들이 고정됐는데 추후에 어떤 값이 유동적으로 변할 수 있도록 코드를 수정하고 싶다!

백엔드와 통신을 하기 전에는 그냥 화면상에서 하트를 누르면 색이 바뀌게 하면 됐는데, 로그인한 후에 누른 하트의 정보를 백엔드로 넘겨 줘야 했고, 넘겨준 값을 내가 다시 받아와야 했는데 그런 개념이 없어서 코드를 새롭게 추가했어야 했다.
토큰이 있고 없고를 먼저 확인하고 전체 하트에서 하트가 눌린 제품의 id값을 가져와서 하트의 색이 바뀔 수 있도록 조건을 넣어주었다.
그리고 클릭이 됐을때 화면에 바로 하트의 색이 바뀔 수 있게 따로 조건을 넣어 주었다.

통신을 해보면서 데이터를 주고받는 개념을 잡을 수 있어서 2차 프로젝트 때는 많이 헤매지 않을 수 있을 것 같다!

fetch 함수로 처음에는 모든 데이터를 다 받아온다 

하나의 카드를 클릭하면 해당 카드의 디테일 페이지로 이동할 수 있도록 onClick 이벤트를 걸어준다.
id는 CardList에서 props로 받아온 값들을 구조분해 할당 해주었다.

useParams 훅은 Router 에 등록해준 path parameter 정보를 담고 있는 객체를 반환한다. 여기서 params.id에는 params객체의 key로 id를 지정하여 해당 id 값을 가져온다.

의존성 배열에 params.id 를 넣어주지 않으면 페이지 랜더링이 되지 않아서 Previous, Next 버튼을 눌러 주어도 새로운 데이터를 받아오지 않아 페이지에 변화가 없다

첫랜더링시 무조건 리턴이 되면 이전에 남아 있던 정보가 잠시 보이는 시간이 있기때문에 조건을 걸어준다(조건부렌더링)

전체적인 흐름을 살펴보면

1. Router에 이동하고자 하는 페이지에 가기위한 조건 path parmeter를 지정한다.
2. useNavigate함수로 이동하려고 하는 페이지 링크로 변경해 준다.
3. 이동한 페이지에서 useParams 함수를 써서 지정해준 Path Parameter 객체값을 받아온다.

카드를 hover하면 반투명한 배경이 이미지 앞으로 뒤에있는 이미지는 크기가 약간 커지는 효과가 원본 사이트에 있어서 구현 해보려고 했다. hover처음에는 해당 이미지에 직접 hover를 줬는데 전혀 먹히지 않았는데 카드를 감싸고 있는 부모 컨테이너에 효과를 줘야했다. 그리고 이미지가 커지기는 했는데 부모 컨테이너 안에서 커지는게 아니라 범위를 넘어서 커져서 부모 컨테이너에 overflow:hidden을 줬더니 원하는 범위 내에서 사이즈 변겨이 있었다. overflow:hidden은 float 기능을 쓸때만 사용 해봤는데 이번 기회에 다른 사용법을 익힐 수 있었다 그리고 카트와 하트 아이콘이 시간차를 두고 올라올 수 있도록 transition을 줘서 따로 올라오게 효과를 줬다!

썸네일에 있는 장바구니 아이콘을 누르면 데이터베이스로 제품id와 수량을 DB로 넘겨서 사이드에 있는 마이페이지로 장바구니에 담은 상품 정보가 담기게 된다. 아직은 로그인과 연동이 되지 않아서 토큰값을 상단에 먼저 넣어 주었다.

(실제 화면은 현재 볼 수가 없는 상태여서 사진은 추후에 추가 예정/ 다른 통신을 하게되면 더 추가 예정 )

1. fetch를 이용하여 데이터를 받아와서 그 데이터를 setMonsters에 전해주어 배열인 monsters에 할 당해 주었다.

2. filter 메서드를 사용하여서 monsters 배열안에 있는 객체를 monster라는 매개변수로 받아왔다.

3. 객체안의 name이라는 키를 전부 소문자로 바꿔주었다. 그리고 소문자인 이름들이 사용자사 적은 문자를 포함 하고 있으면 return 해주도록 했다.

   return monster.name.toLowerCase().includes(userInput); 

*나는 소문자로 바꿔주는 식과 return 되는 값을 한번에 적어주고 싶었는데 왜인지 오류가 발생했다. 아직까지 뭐가 문제인지는 모르겠다

1. 부모 컴포넌트에서 정의해준 변수와 함수를 자식 컴포넌트에서 쓰려면 전달을 해주어야 한다. 전달 해주는 값과 이름을 같게 해주어서 알기 쉽게한다.
2. props는 값을 객체로 전달 되기때문에 handleChange={handleChange}와 같은 형태의 객체에 값을 할당하는 것처럼 식을 적어준다.

1. 자식 컴포넌트에서 값을 사용할때는 props.key의 형태로 적어서 사용한다.

1. map메서드는 배열의 요소를 지정한 조건에 맞추어 반복해주는데 이때 동적인 데이터의 경우 요소가 삭제되거나 추가될 수가 있는데 이때 key값으로 고유한 값을 주어 정보가 엉키지 않게 해 준다.

동적인데이터: 백앤드로부터 받아야 하며, 지속적으로 변경되는 데이터를 뜻한다 (댓글 등)

정적인데이터: 상수데이터라고도 하며, 변하지 않는 데이터를 뜻한다 (footer 등)

mock data란?

• 샘플 데이터, 실제로 api에서 받아오는 데이터가 아닌 프론트엔드 개발자가 개발 진행중 필요에 의해 샘플로 만들어 본 데이터를 뜻 한다. (백엔드에서 데이터를 당장 가져올 수 없는 경우에 미리 만들어서 기능을 테스트 해 볼수 있다)

  → mock data 사용이유 :

• 모든 코드를 적으면 코드 가독성이 좋지 않고 수정이 힘들어진다.

• 상수데이터 + Array.map() 조합으로 간결하게 코드 표현이 가능하다. 유지 보수가 용이해집니다.

→mock data 데이터 관리:

• 상수데이터는 js파일로 분리하거나, 파일내의 하단부에 선언하여 사용할 수 있다.
• 변하지 않는 데이터라는 것을 표시하기 위해서 “대문자+snake case”를 이용하여 변수의 이름을 짓는다
• 별도로 분리시 export/import를 통해서 사용하고, js파일은 import하는 컴포넌트에서 접근하기 쉬운 가까운곳에 생성한다.

• animalData.js

  const ANIMAL_LIST = [
  {
    id: 1,
    userName: '기린',
    content: '아프리카에 사는 목이 긴 동물',
  },
  {
    id: 2,
    userName: '팽귄',
    content: '남극에 사는 귀여운 동물',
  },
  {
    id: 3,
    userName: '두더지',
    content: '눈이 잘 안보이는 동물',
  }
  ];
  

export default ANIMAL_LIST;

</br>

- AnimalList.js

import React from 'react'; import Comment from './Comment/Comment'; import ANIMAL_LIST from './commentData'; import './CommentList.scss';

function AnimalList() { return (

export default AnimalList;

</br>

- mock data 생성
    - animalData.json

[

{ id: 1, userName: '기린', content: '아프리카에 사는 목이 긴 동물', }, { id: 2, userName: '팽귄', content: '남극에 사는 귀여운 동물', }, { id: 3, userName: '두더지', content: '눈이 잘 안보이는 동물', } ]

mock data 위치: public > data > commentData.json 
</br>
- mock data호출

import React, { useState, useEffect } from 'react'; import Comment from './Comment/Comment'; import './CommentList.scss';

function AnimalList() { const [animalList, setAnimalList] = useState([]);

useEffect(() => { fetch('http://localhost:3000/data/animalData.json', { method: 'GET' // GET method는 기본값이라서 생략이 가능합니다. })
.then(res => res.json()) // 백엔드에서 받아온 파일을 js가 읽을 수 있는json 파일로 바꿔준다 .then(data => { //받아온 파일을 어떻게 사용할지 적어준다 setAnimalList(data); }); },[])

return (

export default AnimalList;

</br>

- 조건부렌더링

처음 useState의 값이 빈 배열이고, 빈배열은 truthy한 값이기 때문에 map함수가 실행이된다. 
undefined인 값을 map함수로 돌리게 되면 오류를 일으키기때문에 조건을 걸어주어야 한다

if(animalList && animalList.map() //animalList 가 true이면 map()을 실행해라 ```

1. useEffect

• React는 props,state를 재료로 jsx문법을 통해 화면에 ui를 그려내는 라이브러리이다. ui를 그려낼시 props,state 외에도 데이터를 받아오거나 DOM에 직접 접근하여 기능을 구현해야 하는 경우가 있는데, 이럴 경우를 side effect가 있다라고 한다.

  
  

• - side effect의 단점*

     1. alert창과 같이 동작이 끝나지 않으면 다음 화면이 랜더링 되지않는 block rendering현상이 있다
     2. state가 변경될때마다 동작이 실행되는 always trigger 현상이 있다. 예로는 화면이 바뀔때마다 큰 용량의 같은 데이터를 받어오게 되면 서버과부화가 발생하게 된다.
     </br>
  
        ** mount : 컴포넌트가 최소로 화면에 그려졌을때**

  useEffect는 최소 mount 시에는 무조건 한번은 실행이 된다.

  
  

** - side effect의 해결법 **

useEffect(()=> {
console.log("effect!")})

-> 컴포넌트가 랜더된 후에 실행이 되기때문에
랜더링을 막지 않는다.

2. always trigger 해결법


useEffect(()=> {
console.log("Wow!")}, [a])

-> 배열안의 값이 변할때 함수를 실행한다
-> 배열 값이 비어있으면 최초 1회 mount 후에 절대로 실행 되지 않는다
<api받아오기, nav바와 같이 한번 받아 오면 값이 변하지 않는 경우에 사용>

clear Effect

 useEffect(()=> {
    const interval = setInterval(() => {
        console.log("interval!");
}, 500);
return () => {
clearInterval(interval);
};       ->unmount 시에 실행된다
}, []);  ->mount시에 실행된다 

1. state

let[글제목, 글제목변경] = useState([”a”, “b”, “c”]);

let copy = 글제목

copy[0] = “A”;

글제목변경(copy);

state 변경 함수

→ 내용이 같으면 바꾸지 않는다

→ array가 담긴 변수는 주소를 저장하고 있다 그래서

글제목 변경을 해도 주소값이 변한적이 없기때문에

state에 변화는 없다.

let copy = […글제목];

copy[0] = “A”;

글제목변경(copy);

array나 object의 경우 내용 변경을 하고 싶을 시 […state명]을 꼭 써준다

1. component

2. function()을 만들고

   -다른 함수 밖에 만든다

   -이름은 영어 대문자로 시작한다

1. return()안에 html담기
2. <함수명></함수명> 쓰기

시작과 끝이 같은 태그로 감싸져 있어야 한다

component 사용 된는 곳

• 반복적인 html 축약할 때
• 큰 페이지들
• 자주 변경되는 것들

너무 많이 만들면 가져다 쓰기 힘들어 진다

조건식으로 모달창을 열고 닫을 수 있다

1. map()

[1,2,3]map(function()){

console.log(1)

}

→ 1,1,1 1이 세번 콘솔로그에 찍힘 (array 자료안의 갯수만큼 반복)

[1,2,3]map(function(a)){

console.log(a)

}

→ 1,2,3이 찍힘 (파라미터는 array 안의 자료를 뜻함)

[1,2,3]map(function(a)){

return ‘123’

}

→[’123’, ‘123’, ‘123’] 이 찍힘 (array 안의 자료를 자료의 수만큼 반복하여 배열로 만들어 준다)

array 자료의 갯수만큼 함수안의 코드를 실행해준다

매개변수는 array안에 있는자료를 뜻하고 그자료를 바탕으로 동작을 실행한다

*repositories *

-> Git을 관리하는 프로젝트 저장소를 말한다.(폴더 개념) -> 종류로는 rocal repository, Remote repository가 있으며, 각각 본인의 컴퓨터에 저장된 저장소와, 내컴퓨터가 아닌 외부버전의 프로젝트 저장소를 뜻한다.

사용법

1. 새 저장소를 만들고 git으로 관리를 하려면 터미널에 "프로젝트 폴더로 이동 후"

   git inint

이라는 명령어를 입력 해준다. 이 명령어는 프로젝트 폴더 내에 .git 디렉토리를 생성하고, git은 현재 저장소에 대한 모든 변경사항을 추적/관리 한다.

2. repository의 현재 상태 확인

git status

명령어를 입력하여 현재 repository의 상태를 확인할 수 있다. -> git으로 추적 관리 되고 있지 않은 파일이 있다면 staging area에 추가해서 git으로관리 할 수 있도록 해주어야 한다

3. 프로젝트 폴더에

git add

라는 명령어를 입력하여 원하는 파일들을 staging area로 추가 해줄 수 있다. 주로

git add .

명령어를 사용하면 모든 파일과 폴더를 한번에 staging area에 추가 할 수 있다.

4. commit 남기기 (커밋이란 프로젝트의 현재 상태를 메세지와 함께 남기는 것으로, 프로젝트 코드의 변경 사항을 확인하여 프로젝트 진행 상황을 효율적으로 관리 할 수 있게 해준다)

   git commit -m "commit message"

위의 명령어를 통해서 레파지토리의 변경 사항을 메모하고 파일들을 커밋한다.

5. 커밋 내용 확인하기

   git log

프로젝트의 커밋 내용을 확인 하려면 위의 명령어를 입력하면 된다

6. .gitignore

stagin area에 추가하고 싶지 않거나 git으로 관리 하지 않아도 되는 파일은 .gitignore 폴더에 넣어주면 된다.

git명령어 요약

git init -새 저장소 생성

git status - 상태확인

git add files.js -staging area에 파일 추가

git add . - 전부 추가

git commit -m “Commit message” -커밋 남기기

git log - 커밋 내용 확인하기

# Branch

git branch - 모든 브렌치 확인

git branch <새 브랜치 이름> -branch 만들기

git checkout <브랜치 이름> - 브랜치 전환

git checkout -b <새 브랜치 이름> - 브랜치 생경과 동시에 이동

git merge - 브랜치 병합하기

git branch -d -브랜치 삭제하기

• 다른경로(url주소)에 따라 다른 view를 보여주눈 것
• React-router는 리액트 라우팅 기능을 위해 가장 많이 사용되는 라이브러리
• React는 따로 가지고 있지 않다(그래서 라이브러리로 구분된다)

1. SPA가 무엇인지 설명할 수 있다.

   • 페이지가 한개인 애플리케이션

2. react-router-dom를 이용해 Routes Component를 구현할 수 있다. a. react-router 설치

    npm install react-router-dom (터미널에 작성)

   b. src 폴더에 Router.js파일을 만들어서 아래의 내용을 작성 해 준다

   c. index.js에서 Router파일을 import 해주고 라우팅 적용을 해 준다.

   3. react-router-dom에서 Routing을 하는 방법 2가지와 차이점에 대해 설명할 수 있다.

      • 방법에는 <Link>를 이용하는 방법과 useNavigate로 구현하는 방법 두가지가 있다.

   4. <Link> Component 와 <a> tag 의 차이점에 대해 설명할 수 있다.

      • <a> 서버에 요청하여 페이지를 새로고침 함 (외부사이트로 이동) 서버에 요청하지 않음(프로젝트 페이지 내에서 페이지 전환)
        a. ```Link to="/sign" ``` 를 이용 하여서 이동할 위치를 적어준다
        →클릭시 바로 이동하는 로직 구현 시에 사용

      b. useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.
      →페이지 전환 시 추가로 처리해야 하는 로직이 있는 경우 useNavigate 훅을 활용

5. css 전처리기의 역할에 대해 설명할 수 있다.
   • css가 가질 수 있는 불리한 점을 해결하기 위해서 만들어짐. ->반복적으로 사용되는 부분을 변수로 처리하여 재활용성을 높여준다.
6. sass에서 제공하는 문법을 이용하여 css파일을 scss파일로 변환할 수 있다.
   1. npm install sass (터미널에 작성) →node-modules 폴더에 sass폴더가 생성된다
   2. .css파일 확장자를 .scss로 바꾼다 →import 구문도 모두 수정한다.
   3. Nesting 기능을 적용한다

• js의 확장 문법이다 (웹 브라우저는 읽을 수 없다)
• js파일이 jsx코드를 포함하고 있으면 파일을 컴파일 해 주어야 한다.
• js의 요소들처럼 다루어 진다
  

2. 표현식

    - const h1 = <h1>Hello world</h1>; 
    →html 혹은 js 처럼 보이지만 js 파일 안에서 작동하는 jsx문법이다
    - const panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px' />; 

→ html문법처럼 요소를 가질 수 있다.

• 가독성을 위해서 줄바꿈을 해 주어야하고, 여러줄의 경우에는 ()안에 넣어주어야 한다.

  

• jsx표현식의 첫 번째 여는 태그와 마지막 닫는 태그는 동일한 jsx요소에 속해야 한다 (첫번 째 코드는 작동을 하지만 두번 째 코드는 작동하지 않는다)
  
  
  

3. 랜더링 방법

• 랜더링 표현식을 넣어주어야 화면에 표시된다.
  
  ReactDOM.render()는 제일 많이 사용되는 jsx를 랜더링하는 방법이다. ()의 첫번째 요소로는 꼭 jsx의 표현식 또는 jsx표현식으로 평가되는 변수를 써야하고 두번째 요소에는 html의 어디 부분에 코드를 넣어줄지를 적는다.
  

4. class vs className

• JSX는 주로 HTML과 같은 문법을 쓰지만, 속성으로 class대신 className을 써준다
  
  

5. Self-Closing tag

• HTML에서는 self-closing tag에 “/”를 적어도 안적어도 되지만 JSX에서는 꼭 적어 주어야 한다.
  

6. 계산식

• {}를 써 주지 않으면 텍스트로 인식한다
  

7. 변수

• {}를 사용하면 밖에 선언된 변수에도 접근 할 수 있다
  

8. 조건문

• JSX에서는 조건문으로 삼항연산자를 사용한다
• A ? b: c A가 true라면 b, 아니라면 c를 실행한다
  

9. Conditionals: &&

• &&의 왼쪽에 있는 식이 true일 때, &&의 오른쪽에 있는 식이 랜더 된다.
  

10. map()

• 위의 코드는 배열 Strings를 li의 새로운 배열로 반환한다.
  

11. Keys

• JSX에서 list를 만들려면 keys가 필요하다.
  • key는 JSX 속성의 이름이다. 속성의 값은 고유해야 한다. html에서의 id 속성과 비슷하다.(꼭 사용해야 하는건 아니다)
    • key는 랜더링 할 다음 아이템을 확인하기 위해서 key 속송을 사용한다

고유한 키값을 주기 위해서 map()을 사용하고 매개변수로 i를 주었다

12. JSX를 사용하지 않아도 React를 작성할 수 있다

짝수인지 판별하는 함수 isEven을 작성 주세요

- 나머지 값을 가지고 판단하면 된다.!

2. calculateTotal 함수를 작성하세요.

   팁과 세금을 제외한 식사값이 주어졌을때, calculateTotal 함수는 팁과 세금이 포함된 총 식사값을 반환합니다.

   

- 금액에 세금과 팁 값을 계산한 값을 더 했다.

3. getPrefix 함수를 작성하세요.

   문자열이 주어졌을때, -를 기준으로 앞에 있는 문자열을 반환하세요.

- split()을 이용하여 “-”를 기준으로 문자열 만들고 첫번째 오는 값을 return 했다.
    - 내장함수를 많이 공부해야겠다는 생각을 했다.

4.getFind 함수를 작성하세요.

문자와 문자열이 주어졌을때, getFind 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다.

Notes: 문자열의 첫번째 문자는 인덱스 값 0 을 가집니다. 만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다. 만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다.

중요!! indexOf 함수를 사용하지 마세요.

• if문에 else를 꼭 쓰려고 해서 원하는 답이 안나오는 경우가 있어서 꼭 주의 해야겠다!!!
  
  

5.find_longest_word 함수를 만들어 주세요.

주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요.

• 뭐가 하고 싶었던 걸까,,? 변수 a는 필요가 없었는데 굳이 만들어서 괜히 머리만 아팠다
• 아래는 다시 써본 코드!

if문 쓸때 else를 꼭 쓰려는 강박을 버리자