📜 진행 내용

• [특강] 애자일 방법론
• [특강] 협력사 채용 설명회 _ 트릿지
• [특강] 리액트 숙련 과제 리뷰
• [자습] 코딩테스트 풀이 영상

💡 배운내용

▣ 애자일(Agile) 방법론

• 사전 정의

  • 소프트웨어 개발 방법론의 하나로, 처음부터 끝까지 계획을 수립하고 개발하는 폭포수 (Waterfall) 방법론과는 달리 개발과 함께 즉시 피드백을 받아서 유동적으로 개발하는 방법

• 애자일 도구

  • git, gitHub, 노션, 현업에서는 JIRA

• 애자일 방법 적용해보기

  • 프로젝트 시
    • Scrum : 하나의 프로젝트를 작은 주기(sprint)로 개발 및 검토를 하며, 효율적인 협업 방법을 제시하는 프레임워크

            ※ sprint : 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간

        - **주요 내용**
            - 개발 주기마다 적용할 기능이나 개선에 대한 목록을 제공하라.
                - 해당 주기에 목표를 작성하지 않으면, 기능 목록의 목적을 잃게 된다.
            - 솔루션에 포함할 기능과 개선에 대한 우선 순위를 부여한다.
            - 개발 주기는 1~4주 정도로 정하고 개발 주기마다 실제 동작할 수 있는 결과를 제공하라.
                - 주기가 너무 짧으면 개발(분석/설계/개발/테스트) 할 수 있는 시간이 부족, 너무 길면 느슨해지고 재작업의 양이 늘어나기 때문에 필요에 따라 조율할 것.
            - 매일 15분 정도(정해놓은 시간) Scrum meeting을 가질 것.
            - 항상 팀을 우선으로 생각하기
                - 본인 업무보다 더 급한 이슈가 생겼을 때 서로 도와주기
        - **진행 항목**
            - **칸반 보드(Kanban Board)**

                 : 작업을 시각적으로 업무 상태, 흐름을 보여주는 게시판

                - To do, doing, done
            - **일일 스크럼(Daily Scrum)** 
             : 매일 어제 한일, 오늘 할일, 해결해야 할 장애/문제 요소를 공유
            - **스프린트 계획 회의(Sprint Planning Meeting)**

                **:** 스프린트 목표와 스프린트 백로그를 계획하는 회의

            - **스프린트 백로그(Sprint Backlog)**

                 **:** 각각의 스프린트 목표에 도달하기 위해 필요한 작업 목록

            - **스프린트 리뷰(Sprint Review)** 
            : 스프린트 마지막날 개발자가 개발한 내용을 Stakeholder, 고객, 제품 책임자에게 시연하고 검토
            - **스프린트 회고(Sprint Retrospective)**
             : 스프린트 마지막날 좋았던 점, 개선할 점을 도출하고 더 나은 방향으로 개선

- 프로그래밍 언어 학습시
    - 무엇을 만들지 생각하며 튜토리얼을 읽을 것.
        - 처음부터 끝까지 읽는 것이 아니라, 큰 맥락을 잡고 작은 단위의 기능을 구현해나가면서 추가적으로 필요한 부분들을 같이 공부해나갈 것
    - 표준 라이브러리 소스 코드를 읽을 것
        - 양질의 코드를 많이 봐야, 좋은 코드를 작성할 수 있다.
    - 코드를 작성하면서, 필요할 경우 다른 자료의 코드를 부분적으로 가져와 적용해볼 것.

▣ [특강] 협력사 채용 설명회 _ 트릿지

• 회사를 고를 때 기준으로 삼을 부분

  • 멘토가 있는지
  • 개발자의 역할이 중요한 회사인지
  • 개인의 성장 가능성이 있는지

• 신입은 어느 정도의 기술을 갖추어야 할까요?

  • 신입 개발자가 갖추어야 될 부분은 어떤 언어를 ‘사용’할 줄 아느냐가 아니라,

    (프론트엔드의 경우, HTML, CSS, 자바스크립트, 리액트, 타입스크립트 정도면 충분)

    엔지니어어의 자질이 있는 지가 중요하다. 문제를 풀어갈 때 문제 본질에 대한 호기심과 문제가 무엇인지에 대한 정의를 내릴 줄 아는 것.

▣ [특강] 리액트 숙련 과제 리뷰

• 과제 개선하기
  • 기능 디테일
    • 유효성 검사 - 내용과 제목 각각에 대한 유효성 체크
    • 삭제 시 알림창으로 한 번 더 확인하기 (window-confirm)
  • 디자인
    • 헤더, 푸터 추가
  • 구조 개선
    • lable과 input 합쳐보기
    • margin도 컴포넌트 스타일로 분리하기
  • 문서 정리
    • 주석으로 컴포넌트 이력 남기기
    • css in js여도 파일 따로 분리하기

🎯 문제와 해결

• ⁉️ 어려웠던 내용

• 하드코딩한 부분 리팩토링

  • 투두리스트의 투두를 필터링하기.

❎ 한 번 더 공부할 내용

• 애자일 방법론

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 숙련 과제 리뷰 강의
• 스파르타 코딩클럽 - 트릿지 채용설명회
• 스파르타 코딩클럽 - 애자일 방법론 강의
• 스크럼 스프린트 - 알아야 할 모든 것

📜 진행 내용

• [과제] 리덕스로 투두리스트 만들기
• [특강] react lifecycle - 미수강

💡 배운내용

▣ [과제] 리덕스로 투두리스트 만들기

■ 프로젝트 세팅 2

• 라이브러리, 패키지 추가

  • styled-componnets 사용하기

    • styled-components : CSS in JS - Js 코드로 CSS 코드 작성할 수 있는 패키지

      • 설치

        • VScode 플러인 설치 : vscode-styled-compponents
        • 터미널 : yarn add styled-components

      • 사용

        • 컴포넌트 파일 : import styled from "styled-components";

        • 코드 작성 예시

            import styled from "styled-components";
          
            // 1. styled키워드를 사용해서 컴포넌트 생성
            // ※ styled. 뒤에는 어떤 html 태그로 생성할지 지정해준다. (form이면 form으로 하는 등.)
            const StBox = styled.div`
                // css 코드 작성방식과 동일하게 작성
              width: 100px;
              height: 100px;
              border: 1px solid red;
              margin: 20px;
            `;
          
            const App = () => {
                // 2. 생성한 styled-components를 JSX에서 html 태그처럼 사용
              return <StBox>박스</StBox>;
            };
          
            export default App;

- **react-router-dom 사용하기**
    - **react-router-dom** : 구분된 페이지를 구현할 수 있게 해주는 패키지, ( SPA를 구현할 수 있다. )
        - **설치**
            - 터미널 :  `yarn add react-router-dom`
        - **사용**
            - 연결할 페이지 컴포넌트 파일 생성 - 예) Home, About…
            - Router.js 파일 : `import { BrowserRouter, Route, Routes } from "react-router-dom";`
                - 코드 기본 양식

                    ```jsx
                    import React from "react";
                    import { BrowserRouter, Route, Routes } from "react-router-dom";

                    // 2. Router 함수 작성 
                    //BrowserRouter를 Router로 감싸는 이유는, 
                    //SPA의 장점인 새로고침시 화면깜빡임이 되지 않게 해주기 위함이다. 
                    const Router = () => {
                      return (
                        <BrowserRouter>
                          <Routes>
                          </Routes>
                        </BrowserRouter>
                      );
                    };

                    export default Router;
                    ```

                - 페이지 컴포넌트 Route 설정 - 코드 예시

                    ```jsx
                    import React from "react";
                    import { BrowserRouter, Route, Routes } from "react-router-dom";
                    import Home from "../pages/Home";
                    import About from "../pages/About";

                    const Router = () => {
                      return (
                        <BrowserRouter>
                          <Routes>
                                    {/* 
                                            Route의 react-router-dom 지원 props 중
                                            1. path는 사용하고싶은 "주소" 넣어주기
                                            2. element는 해당 주소로 이동했을 때 보여주려는 컴포넌트 넣어주기
                                     */}
                            <Route path="/" element={<Home />} />
                            <Route path="about" element={<About />} />
                          </Routes>
                        </BrowserRouter>
                      );
                    };

                    export default Router;
                    ```

            - App.js 파일 : Router.js import

                ```jsx
                import React from "react";
                import Router from "./shared/Router";

                function App() {
                  return <Router />;
                }

                export default App;
                ```

■ react-router-dom Hooks & API

• 요소의 이벤트 발생시 페이지 이동 구현

  • useNavigate

    • 컴포넌트 파일 주요 코드

        import { useNavigate } from "react-router-dom";
      
        const Home = () => {
          const navigate = useNavigate();
      
          return (
            <button onClick={() => { navigate("/works"); }}>
              works로 이동
            </button>
          );
        };

  • Link

    • 컴포넌트 파일 주요 코드

        import { Link } from 'react-router-dom';
      
        const Home = () => {
      
            return 
            <Link to="/contact">contact 페이지로 이동하기</Link>
        };
        export default Works;
      

• Dynamic Routes와 useParam

  • Dynamic Routes(동적 라우팅) : path에 id와 같은 유동적인 값을 넣어 특정 페이지로 이동하는 기능 구현의 방법

  • react-router-dom 에 이어서..

      import React from "react";
      import { BrowserRouter, Route, Routes } from "react-router-dom";
      import Home from "../pages/Home";
      import About from "../pages/About";
    
      const Router = () => {
        return (
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="about" element={<About />} />
                      {/* 추가한 코드 기본 예시 */}
                      <Route path="about/:id" element={<About />} />
                      {/* 추가한 코드 변형 예시 */}
              <Route path="about/:id" element={<Item />} />
            </Routes>
          </BrowserRouter>
        );
      };
    
      export default Router;

- **useParam** : 라우터 사용시 파라미터 정보를 가져와 활용하게 해주는 hook
    - 예제에서는 path값을 가져와 path의 id값을 조회할 수 있게 해주었다.
    - 코드 예시
        - Home.jsx - 이동 전 화면 컴포넌트 : Link를 사용해 data 배열의 id를 path뒤에 붙여주었다.

            ```jsx
            import { Link } from 'react-router-dom';

            const data = [
              { id: 1, todo: '리액트 배우기' },
              { id: 2, todo: '노드 배우기' },
            ];

            function Home() {
              return (
                <div>
                  {data.map((work) => {
                    return (
                      <div key={work.id}>
                        <Link to={`/works/${work.id}`}>
                          <span> Go to: {work.todo}</span>
                        </Link>
                      </div>
                    );
                  })}
                </div>
              );
            }

            export default Home;
            ```

        - Work.jsx - 이동한 컴포넌트 : useParams로 path값의 id와 data의 id를 비교하여 같은 데이터를 찾았다.

            ※ 아래 코드에서는 path의 id의 값이 문자형이기 때문에 parseInt를 사용했지만,

             id를 uuid로 생성한다면 parseInt를 사용하지 않고 비교해도 된다. 

            ```jsx
            import React from 'react';
            import { useParams } from 'react-router-dom';

            const data = [
              { id: 1, todo: '리액트 배우기' },
              { id: 2, todo: '노드 배우기' },
            ];

            function Work() {
              const param = useParams();
              const work = data.find((work) => work.id === parseInt(param.id));
              return <div>{work.todo}</div>;
            }

            export default Work;
            ```

            - 프로젝트에서 작성한 코드

                ```jsx
                const Detail = () => {
                    // store에 저장한 state 데이터를 가져와 사용함
                  const globalTodo = useSelector((state) => state.todos.todos);
                  const param = useParams();
                  const item = globalTodo.find((elem) => elem.id === param.id);

                  return (
                      <StDetail key={item.id}>
                        ID: <StIdContent> {item.id}</StIdContent>
                        <StDetailTitle>제목: {item.title}</StDetailTitle>
                        <StDetailContent>내용: {item.content}</StDetailContent>
                      </StDetail>
                  );
                };
                ```

🎯 문제와 해결

• 하드코딩한 부분 리팩토링 - 아직 해결 전…

⁉️ 어려웠던 내용

• 하드코딩한 부분 리팩토링
  • 투두리스트의 투두를 필터링하기.

❎ 한 번 더 공부할 내용

• [특강] react lifecycle

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 숙련 강의

📜 진행 내용

• [과제] 리덕스로 투두리스트 만들기
• [특강] 좋은 개발자의 비밀

💡 배운내용

▣ [과제] 리덕스로 투두리스트 만들기

■ 프로젝트 세팅

• 프로젝트 폴더 생성
• 리액트 프로젝트 세팅
  • CRA 사용
    • 터미널 : yarn create-react-app .
      • . 대신 폴더명을 넣어, 프로젝트 폴더 생성과정을 동시에 해도 된다.
        • yarn create-react-app 프로젝트폴더명
• 라이브러리, 패키지 추가
  • Styled-commponents
    • 터미널 : yarn add styled-components
    • 컴포넌트 파일 : import styled from "styled-components";
  • redux 설치
    • 터미널 : yarn add redux react-redux
      • = yarn add redux yarn add react-redux

■ 폴더 구조 세팅

• 1) 기본 폴더 구조 생성

• 2) src/configStore.js

  src/configStore.js 에 아래 코드 입력

    import { createStore } from "redux";
    import { combineReducers } from "redux";
  
    /*
    1. createStore()
    리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
    리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
    리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
    */
  
    /*
    2. combineReducers()
    리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
    이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
    combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
    */
  
    const rootReducer = combineReducers({}); 
    const store = createStore(rootReducer); 
  
    export default store;

• 3) index.js

디렉토리의 가장 최상단에 있는 `index.js`에 아래 코드 입력

```jsx
// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

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

    //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}> 
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

▣ [특강] 좋은 개발자의 비밀

• 궁금한 부분을 질문할 때, 내가 작업한 코드/공부한 내용 정리와 문제를 해결하기 위해 시도한 방법들과 그 결과들을 정리해서 물을 것.
• 에러메세지를 만났을 때, 바로 검색을 하지말고 먼저 에러 메세지를 읽고 고민한 흔적을 글로 남겨볼 것.
• 내가 만들어낸 것에 대한 스토리텔링을 TIL, WIL에 녹여라. 미래의 내가 봤을 때도 도움이 되고 포트폴리오에도 도움이 된다.
• 실생활에서 필요한 서비스 중에서도 시도해볼만한 작은 프로젝트를 찾아서 만들어보라.
  • 예) 코로나 방문 QR코드 이미지 바로가기 어플
• 프로젝트를 할 때는, 실제 서비스되고 있는 웹/앱의 기능을 자세히 살펴보고 참고해보라. 생각보다 구현해야할 기능이 많다.
  • 예) 아이디 찾기, 장기간 미방문 고객에게 메일링 서비스 등
• 자료 공유가 활발한 영어권의 글, 코드 작성법을 많이 볼 것.
  • medium.com 추천

🎯 문제와 해결

• 리덕스로 투두리스트를 만드려니까 에러의 연속이다.
  • 제대로 해결된 게 없어서,, 해결을 하면서 해결방법을 정리해야겠다.

⁉️ 어려웠던 내용

• 리덕스로 투두리스트 만들기

❎ 한 번 더 공부할 내용

• 리덕스로 투두리스트 만들기

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 숙련 강의

📜 진행 내용

• [강의] 리액트 숙련

  9~완강

• [특강] React 심화과정 _ Redux 복습
• [과제] 알고리즘 문제 풀기
• [과제] 리액트 미니 투두리스트
• [자습] 리액트 입문 과제 클론 - 과정 정리

💡 배운내용

▣ 알고리즘 문제 풀기

• 정규표현식 (regex / regular expression)

▣ 리액트

■ 숙련 과제시 - 입문 주차 과제 과정 참고하기

■ Redux 시작하기

• 숙련 주차 전체 복습 중..

🎯 문제와 해결

• ⁉️ 어려웠던 내용

• 리덕스로 투두리스트 만들기

❎ 한 번 더 공부할 내용

• 리덕스로 투두리스트 만들기

: 문자열에서 특정 문자 조합(패턴)을 찾기 위해 사용하는 형식의 언어이다.

**/pattern/flags**

: / / 안에 원하는 패턴을 작성하며, 뒤에 flag 옵션을 더할 수 있다.

패턴 작성 문법

Groups and ranges

Quantifiers

Boundary-type

Character classes

플래그

자바스크립트에서 정규표현식 사용

📗 예제

** 기본적으로 플래그는 gm으로 설정하여 실습함. 

* 기본 탐색
/Hi/gm

**< Groups and ranges >**

* Hi 또는 Hello 찾기
/Hi|Hello/gm

* 그룹으로 지정하여 찾기
/(Hi/Hello)/gm
// 위에서 |만 사용하여 찾았을 때와 달리, 찾은 결과값이 그룹으로 지정된 것을 확인 가능
/(Hi|Hello)|(And)/gm
// Hi와 Hello는 그룹 1에 해당 그룹 2는 undefined, And는 그룹 1은 undefined, 그룹 2에 해당

* grey, gray 찾기 1
/gr(e|a)y/gm

* grey, gray 찾기 2 : 찾아진 값을 그룹으로 보이지 않도록 탐색
/gr(?:e|a)y/gm

* grey, gray 찾기 3 : 해당하는 문자를 집합체처럼 처리해서 []안에 넣어준다.
/gr[ea]y/gm
/gr[a-f]y/gm
/gr[ead]y/gm

* 어떤 문자열이든 a-z, A-Z, 0-9까지, 모두 만족하는 문자 찾기
/[a-z]/gm
/[A-Z]/gm
/[0-9]/gm
/[a-zA-Z0-9]/gm

** 조건에 해당하지 않는 경우 찾기
/[^a-zA-Z0-9]/gm

**< Quantifiers >**

* a가 있는 경우와 없는 경우
/gra?y/gm

* a가 있거나 없거나 많은 경우
/gra*y/gm

* a가 하나만 있거나 많이 있는 경우
/gra+y/gm

* a가 최소 2개 최대 3개까지 있는 경우 / 최소만 지정해도 된다.
/gra{2,3}y/gm
/gra{2,}y/gm

**< Boundary-type >**

* 특정 문자열에서 단어의 시작부분에 있는 Ya 만 선택할 때
/\bYa/gm

* 특정 문자열에서 단어의 뒤에 Ya 만 선택할 때
/Ya\b/gm

** 위와 반대의 케이스 단어의 뒤에 쓰이지 않는 Ya 만 선택할 때 : Ya만 있는 단어는
Ya로 끝나는 단어이기도 하므로 선택되지 않는다!
/Ya\B/gm

* 문장의 시작과 끝에 있는 Ya를 선택할 때
** 시작
/^Ya/gm
** 끝
/Ya$/gm
*** 이때 플래그의 멀티라인 m을 선택하지 않으면, 전체적인 문장에서 찾지 않게 된다. 
: 전체 데이터 끝에 있는 Ya만 검색됨.
/Ya$/g

**< Character classes >**

* 특수문자 . (등등)을 찾을 경우
/\./gm
/\[\]/gm

*** 활용 예제 ***

1. 전화번호를 찾을 경우 : -, . , 공백으로 나눠져있음

1) 간단식
/\d\d\d-\d\d\d\d-\d\d\d\d/gm
2) 패턴 만들기 2가지 방식
/\d{2,3}[-. ]\d{3}[-. ]\d{4}/gm
/[0-9]{2,3}[-. ][0-9]{3}[-. ][0-9]{4}/gm

2. 이메일을 찾을 경우
// 나의 풀이
/[a-zA-Z0-9-.]{2,}\@\w{2,}\.[a-zA-Z0-9-.]{2,}/gm
// 선생님 풀이
/[a-zA-Z0-9._+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9.]+/gm

3. 유튜브 주소 뒤에 아이디 값만 찾기

1) 패턴의 데이터 찾기.
/(https?:\/\/)?(www\.)?youtu.be\/([a-zA-Z0-9-]{11})/gm
// 소괄호를 이용하여 만들었기 때문에 데이터가 매칭된 것을 살펴보면, 그룹으로 나눠진 것을 
// 확인할 수 있다. 

2) 원하는 데이터는 아이디 값이므로, 앞의 주소 패턴 그룹은 제외해준다. 
/(?:https?:\/\/)?(?:www\.)?youtu.be\/([a-zA-Z0-9-]{11})/gm

*** 자바스크립트에서 활용해보기

const regex = /(?:https?:\/\/)?(?:www\.)?youtu.be\/([a-zA-Z0-9-]{11})/
// undefined
const url = 'https://www.youtu.be/-ZClicWm0zM'
// undefined
url.match(regex)
// * 함수로 매칭되는 데이터를 호출하면, 결과값이 배열로 리턴된다.
// 인덱스 0번에는 매칭되는 데이터 전체의 문자열,
// **인덱스 1번에는 매칭되는 그룹의 데이터가 들어있다.** 
// (2) ['https://www.youtu.be/-ZClicWm0zM', '-ZClicWm0zM', index: 0, input: 'https://www.youtu.be/-ZClicWm0zM', groups: undefined]
// 0 : "https://www.youtu.be/-ZClicWm0zM"
// 1 : "-ZClicWm0zM"
// groups : undefined
// index : 0
// input : "https://www.youtu.be/-ZClicWm0zM"
// length : 2
// [[Prototype]] : Array(0)

const result = url.match(regex);
//undefined
result[1];
//'-ZClicWm0zM'

🔗 출처

• 드림코딩 유튜브
• 위키-정규표현식
• MDN-정규표현식

📜 진행 내용

• [강의] 리액트 숙련

  5 ~ 8 수강

• [특강] React 심화과정 _ Redux 복습

• [과제] 알고리즘 문제 풀기

• [자습] 리액트 강의 - 유데미

• **[자습] 리액트 입문 과제 클론 **

💡 배운내용

▣ 알고리즘 문제 풀기

JavaScript - 문자열 공백 제거, 3가지 방법

▣ 리액트

■ uuid 생성

• uuid 패키지 다운

  • npm 경우

    npm install uuid

  • yarn 경우

    yarn add uuid

• 사용하는 컴포넌트 파일에서 import

  import {v4 as uuidv4} from ‘uuid’;

• 적용하려는 코드에서 함수 실행하여 uuid 생성

  uuidv4( )

■ Redux

• Redux가 필요한 이유?
  • state가 props라는 이름으로 전달되며 (props Drilling) 계속 변경되는 이력을 관리할 수 없고, 또 어디에서 사용하는지 파악하기 어렵기 때문에, 상태를 관리해줄 도구가 필요하다.
  • Redux를 사용하면, state를 전역에서 접근이 가능하기 때문에 '중앙 관리소'라고 생각하면 된다.
  • state가 오직 Redux에서만 관리된다. (변경, 수정, 생성)
  • 자체적인 문서가 된다.
  • 문제 발생 시 원인을 빠르게 찾을 수 있다.

👉 기존에 많은 컴포넌트에서 참조하고, 관리/수정됐던 state store라는 저장소에 모아놓고 관리하자!

• Store : state, state들을 관리할 수 있는 메서드(reducer)가 들어있다.
• Reducer : state를 변경하는 함수들(메서드)

• UI(컴포넌트) → Dispatch

  • UI에서 이벤트 핸들러를 통해 Dispatch에게 요청을 하면, Dispatch는 Store가 해석할 수 있는 형태인 Action 객체 형태로 들고가서 처리가 되도록 요청해야 된다.
  • UI가 Store에게 요청을 하는 방법이 바로 Dispatch이다.

• Dispatch → Store

  • Store는 Dispatch에게 전달받은 Action을 기반으로, Reducer안에 정의된 방법으로 state를 갱신한다.

• Store → UI

  • 변경된 state를 UI(컴포넌트)에 전달되면, 다시 랜더링이 되면서 변경된 내용으로 화면이 그려지게 된다.

• state의 구분 state -> 컴포넌트 단위 state -> 전역 (global)

1. 전역 state -> redux store에 있는 state
2. 컴포넌트 state -> 컴포넌트에서 관리되는 state

👉 모든 state가 store에서 관리된다? - No! 지역적으로 관리하는 state도 있을 수 있다.

• store를 만드는 과정

  • 리듀서들을 정의 해놓은 파일

    • modules / counter.js (예시: counter라는 리듀서일 경우)

    1. Action value를 상수로 만들어준다.

       • Action value는 Action 이 무슨 일을 할지를 결정하는 정보의 결합이다. (type과 payload)

       • 파일 상단에 선언하며, 대문자로 표기, 의미를 알아볼 수 있도록 이름을 짓는다.

         const PLUS_ONE = 'PLUS_ONE';
         
         

    2. Action Creator를 만든다. 

        ```jsx
        export const plusOne = () => {
          return {
            type: PLUS_ONE,
          };
        };
        ```

    3. 리듀서는 state와 action을 갖는다. 
        - action의 type을 기준으로 어떤 state를 반환할 지 결정한다.

        ```jsx
        // 초기 상태값
        const initialState = {
          number: 0,
        };

        // 리듀서
        const counter = (state = initialState, action) => {
          switch (action.type) {
            case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
              return {
                number: state.number + 1,
              };
            case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
              return {
                number: state.number - 1,
              };
            default:
              return state;
          }
        };
        ```


- store 설정 파일
    - config / configStore.js
    1. (리듀서 생성 파일에서 불러온) reducer를 묶어준다. : 하나로 모아서 store에 모아주는 방식

        `const rootReducer = **combineReducers**({ counter });`

    2. 만든 reducer를 통해 store를 생성한다.

        `const store = createStore(rootReducer);`

    3. 생성한 store를 내보낸다.

        `export default store;`

👉 export 와 export default export 1. 복수의 개체가 있는 라이브러리 형태의 모듈에서 가져오기 할 때 사용된다. 2. 특정 개체만 가져오는게 가능하다. 3. 원하는 이름으로 import가 불가능하다. export default 1. 일반적으로 해당 모듈엔 하나의 개체(변수, 클래스, 함수 등)만 있다는 의미로 받아들여진다. 2. 따라서 해당 모듈의 전체 개체를 export 한다는 의미를 갖는다. 3. 원하는 이름으로 import가 가능하다. (ex. import 원하는이름 from "경로")

• UI (컴포넌트)

7. UI(컴포넌트)에서 필요한 Action Creator를 import하여 dispatch 메서드로 사용한다.

       <button onClick={() => {dispatch(plusOne()); }}>
       +1
       </button>

🎯 문제와 해결

• 아직 리액트로 프로젝트를 만드는 것이 어렵다. 리액트 숙련 과제 시작하기 전에, 배워가는 내용들 최대한 정리하고 복습 중이다.

⁉️ 어려웠던 내용

• 리액트 - 배운 내용 활용하여 새로운 기능 구현하기

❎ 한 번 더 공부할 내용

• 리액트 숙련 수업 자료와 비교해서 위 내용 추가 정리하기

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - [특강] React 심화과정 _ Redux
• Redux(리덕스)란? (상태 관리 라이브러리)
• Redex의 개요와 개념
• [React]export와 export default의 차이

📜 진행 내용

• [일일과제] 알고리즘 문제 풀기
• [과제] 리액트로 Todo list 만들기
• [자습] 리액트 추가 학습 - 유데미 Section 3~5
• [자습] 리액트 추가 학습 - 생활코딩
• [특강] 리액트 Todo list 과제 리뷰
• [특강] JS 자주 사용 되는 ES6 문법 살펴보기
• [특강] React 심화과정 _ Redux
• [원격] 리액트 입문주차
• [원격] 리액트 실무 기초
• [원격] 리액트 숙련주차

💡 배운 내용

• [과제] 리액트로 Todo list 만들기

  • 리액트 강의 들은지 얼마 되지않아 주어진 과제라서 엄청난 압박감을 느꼈다.

  • 최대한 내 힘을 많이 쏟아 과제를 끝내고 싶어서 리액트 공부에 욕심 부리다가,

    막상 과제는 시간에 쫓겨서 겨우 내게 되었다.

  • 기능 구현은 했지만, 기본적인 주석이나 컴포넌트 설계 등에 신경쓰지 못해 너무 아쉬웠다.

  • 과제 리뷰 강의에서도 기본적인 부분부터 신경쓸 것을 강조하셨다.

    • 주석, 필수적인 기능 (예: input창에 입력값이 없으면 입력이 되지 않도록 처리, 입력값이 없으면 사용자에게 경고창으로 메시지 전달하기 등)

• [특강] React 심화과정 _ Redux

  • 리액트 숙련주차에서 배우게될 리덕스에 대해, 특강이 진행되었다.
  • 특강 전에 리덕스에 대한 기본 개념을 간단하게 공부하고, 숙련주차 강의를 어느 정도 범위까지는 듣고서 특강을 들었더니 설명에 대한 이해가 더욱 잘됐다.

• [강의] 리액트 실무 기초
  • 기존에 지급되었던 리액트 강의도 호기심에 보게 되었는데, 강사님의 목소리 톤도 또렷하고 설명하는 방식도 명쾌하게 잘해주시는 것이었다..
  • 그래서 처음엔 1~2강의만 봐야지하고, 꽤나 많은 분량을 보게되었다.
  • 리액트 숙련 주차에 들어가더라도, 이 강의를 종종 찾아와서 이어 보도록 해야겠다.

✅ 이번 주 학습 목표 점검

• 잘한 것은?

  • 어렵지만, 이해하는 것을 포기하지 않고 계속 자료를 찾아봤던 것.

• 잘못한 것은?

  • 과제에 대한 중요성을 망각하고, 시간에 쫓겨 결국 제출할 때가 되어선 기본적인 요구사항을 못 지킨 것.

🗓️ 다음 주 학습 계획

• [내배캠] 주요 일정

  • 알고리즘 문제풀기 - 프로그래머스 단계별 풀어보기
  • [과제] 리액트 숙련 개인과제
  • [원격] 리액트 숙련
  • [특강] 리액트 숙련 개인과제 리뷰
  • [특강] 좋은 개발자가 되기 위한 비밀
  • [특강] 리액트 life cycle
  • [특강] 협력사 특강_트릿지
  • [특강] CS 기초

• [셀프] 추가 학습

  • [실시간] 자바스크립트 심화 복습

  • [자습] 리액트 강의 - 유데미

  • 이월 미진행 항목

    • [특강] CS 기초 : HTTP - 박민수 튜터님
    • [강의] Git
    • 보충 학습 + TIL 보충하기
      • 알고리즘 - 정렬

🎯 다음 주 학습 목표

• 리액트 적응하기 - 예제 연습 많이 해보기, 리덕스 익히기

🗨️ 생각 정리

• 해결해야할 문제/남아있는 의문
  • 블로그 이전 - 현재 벨로그에서 티스토리로 옮겨갈지..
  • 프로젝트시 기획단에서 해야할 목록과 방식들 정리
• 어떻게 개선할까?
  • 벨로그와 티스토리 각각의 장단점 다시 비교해보고, 최종적으로 선택하기 - 옮길 거면 빨리 옮겨야된다…
  • 웹 사이트 기획 입문 책에서 자료 얻기, 기타 블로그 등 추가적인 자료 더 찾아보기

📜 진행 내용

• [강의] 리액트 숙련

  1 ~ 6 수강

• [특강] React 심화과정 _ Redux

• **[과제] 알고리즘 문제 풀기 **

• [자습] 리액트 강의 - 유데미 Chapter 3 복습

💡 배운내용

▣ 알고리즘 문제 풀기

■ Set

• 정의
  • 중복된 값은 제외하고 유일한 값만 담아, 유사배열 형태로 반환하는 생성자 함수
  • 원시 값, 객체 참조 등 자료형에 관계 없이 저장할 수 있다.
• 생성 : new Set ( )
• 메서드 : add, delete, has, size
  • has 는 값의 포함여부 체크, size는 배열의 length와 같은 역할

👉 new Set도 전개복사, Array.from으로 배열 전환이 가능하다!

예제)

// 1
let mySet = new Set( );
mySet.add(1, 5, 5) // Set(1, 5)

// 2 
let my_string = "people"
let c = [...new Set(my_string)].join('') // 'peol'

▣ 리액트

■ State와 props

• 공통점

  • 둘다 일반 자바스크립트 객체이며, 렌더링 결과물에 영향을 주는 정보를 갖고있다.

• 차이점

  • props는 함수의 매개변수처럼 컴포넌트에 전달되지만,

    state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리된다.

■ State (상태) 끌어올리기

• 리액트에서는 기본적으로 단방향 (부모 → 자식, 하향식 데이터 흐름) 데이터 흐름을 갖는다.

  그렇기 때문에, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태나 타입이 무엇인지만 알 수 있다.

  즉, 하위 컴포넌트가 전달받은 데이터가 state인지 직접 입력한 내용인지 알 수 없는 것이다.

• 상위 컴포넌트의 ‘상태 변경 함수’ 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다.

• 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 경우가 있다.

  이 경우 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋다.

• 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 하는 것보다, 하향식 데이터 흐름을 지키는 것을 권장한다.

예제)

1. 부모와 자식 컴포넌트가 하나씩 존재하는 트리 구조에서, 상태를 변경시킬 수 있는 메서드가 존재한다고 가정해보자.

import { useState } from 'react';

export default function ParentComponent() {
  const [value, setValue] = useState('바꿀값');
  const handleChangeValue = () => {
    setValue('달라진 값');
  }

  return (
    <div>
      <div>값은 {value} 입니다.</div>
      <ChildComponent />
    </div>
  )
}

function ChildComponent() {
  const handleClick = () => {
    // 이 버튼을 이용해 부모의 상태를 바꿔보기.
  }
  return <button onClick={handleClick}>값 변경</button>
}

1. 부모 컴포넌트에서 상태를 변경하는 함수는 handleChangeValue이며, 전달은 props로 한다.

   ※ 전달할 때 handleButtonClick라는 함수 이름은 자식 컴포넌트에서 사용할 이름이다.

function ParentComponent() {
  const [value, setValue] = useState('바꿀값');
  const **handleChangeValue** = () => {
    setValue('달라진 값');
  }

  return (
    <div>
      <div>값은 {value} 입니다.</div>
      <ChildComponent **handleButtonClick={handleChangeValue}** />
    </div>
  )
}

1. 자식 컴포넌트에서는 고차함수에서 인자로 받은 함수를 실행하는 것 처럼,

   props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.

   다음의 상태변경함수 handleButtonClick( ) 은 버튼을 클릭했을 때, 콜백함수로 실행된다.

function ChildComponent({ **handleButtonClick** }) {
  const handleClick = () => {
        // 인자로 받은 상태 변경 함수를 실행
    **handleButtonClick()**
  }
  return <button onClick={**handleClick**}>값 변경</button>
}

👉 브라우저 실행 이미지

🎯 문제와 해결

• 해야할 공부가 산더미지만, 마음만 급하고 제대로 소화시키면서 따라가지 못하는 기분이었다.

  이런 상황에서, 같은 팀원분들이 도움되는 조언을 전해주셨다. 마음이 지쳐가던 차라, 진심으로 고마움을 느꼈다.

• 리액트를 공부하고 있는 시점에, 어려움을 느낀다면 그 어려움이 자바스크립트가 약해서 어려운건지 아니면 리액트 자체가가 어려운 것인지 잘 구분하라.

• 과제로 주어지는, 혹은 프로젝트를 진행할 때 필요한 코드들을 조립해서 완성하는 것은 틀린 방법이 아니다. 필요한 부분을 잘 검색해서 답을 찾을 능력을 갖추면 된다.

• 이 말을 들으니 이 전에 드림코딩에서 들었던 조언이 생각났다. 이 세상에는 나에게 필요한 모든 리소스가 존재한다. 단지 아직 내가 찾지 못한 것 뿐이다. resourceful한(지략이 풍부한) 사람이 될 것.

⁉️ 어려웠던 내용

• state

❎ 한 번 더 공부할 내용

• 리덕스

🔗 출처 및 참고자료

• 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i)
• 리덕스
• 컴포넌트 State
• State 끌어올리기
• React - State 상태 끌어올리기
• [React] React 시작하기(8) - state 끌어올리기
• 프로그래머스 코딩테스트 - 중복된 문자 제거

📜 진행 내용

• [강의] 자바스크립트 심화
  • Chap 5. 클로저
• [과제] 알고리즘 문제 풀기
• [자습] 리액트 강의 - 유튜브
• [자습] 리액트 입문과제 todolist 개선하기

💡 배운내용

▣ [자습] 리액트 강의 - 유튜브

• 리액트 숙련 과정 강의를 듣기 전에, 리액트 기초를 다지는 추가 영상 자료로 공부했다.
  • 리마인드
    • props와 state의 차이점
      • props는 컴포넌트를 사용하는 외부자를 위한 데이터
      • state는 컴포넌트를 만드는 내부자를 위한 데이터
    • state
      • state를 만드는 useState 함수는 배열을 리턴하고, 배열의 0번째 값은 상태의 값을 읽을 때 쓰는 데이터가 들어가고, 1번째 값은 0번째(상태의 값)값을 변경할 때 사용하는 함수이다.
      • 메인 작업 파일 App.js의 App 컴포넌트는 1번밖에 실행되지 않기 때문에 state를 이용해 상태를 감지하여, state의 변경이 일어나면 다시 실행되도록 한다.
        • state값이 업데이트 → App 컴포넌트(함수) 재실행
        • 변수는 잠시 저장할 용도로만 사용할 것.

🎯 문제와 해결

• 리액트 입문과제 todolist 개선하기

• [[React] Each child in a list should have a unique "key" prop.] (https://velog.io/@newas_born/React-Each-child-in-a-list-should-have-a-unique-key-prop)

• 작업 내용

  • 리액트 Todolist 만들기 과제

• 에러 메시지

  

• 에러 발생 코드

    <div className='list-container'>
          {todos.map((todo) => {
            if (todo.isDone === false) {
              return <TodoList todos={todos} setTodos={setTodos} />;
            }
          })}
    </div>

🔎 원인과 해결

⚠️ 에러 원인

• react에서는 map() 메서드 사용시 배열의 각 Item마다 독립적인 key 값을 설정해야 된다.
• 하지만, 에러가 발생한 코드에서는 key prop과 관련해 세팅을 해주지 않았다.

👉 리액트는 자동으로 생성한 태그의 경우, 리액트가 태그들을 추적해야되는 근거로써 약속된 프롭 key를 부여함으로써 성능을 높여 동작하게 한다.

🔐 해결 방법

• todo 목록이 세팅될 때 key값으로 uuid가 들어가도록 지정
• 각각의 todo li를 화면에 그려주는 작업시 key값도 같이 들어가도록 지정

setTodos([
      ...todos,
      {
        title: input,
        content: content,
        isDone: false,
        key: uuidv4(),
      },
    ]);
------------------------

<div className='list-container'>
      {todos.map((todo) => {
        if (todo.isDone === false) {
          return (
            <TodoList todos={todos} setTodos={setTodos} **key={todo.key}** />
          );
        }
})}

🔗 참고

• Each-child-in-a-list-should-have-a-unique-key-prop-해결-방법
• [Warning: Each child in a list should have a unique "key" prop.] 에러 해결

📜 진행 내용

• [과제] 알고리즘 문제 풀기
• [과제] 리액트로 Todo list 만들기
• [특강] 리액트 Todo list 과제 리뷰
• [자습] 리액트 추가 학습

💡 배운내용

▣ 리액트 과제 리뷰

• 화면 리렌더링 기준은 useState 함수로 묶여있는 값(state)이 setState로 변경될 때이다.

• state는 사용자가 직접 변경이 불가능하다.

  • state 변경을 하고 싶을 경우 useState 함수를 사용해 setState값이 변경되어 state값에 전달되게 한다.

• component 태그 사이의 요소값을 children 키워드로 접근할 수 있다.

  • 예) < Header > 여기는 children입니다. < /Header >

• 리액트 파일 확장자는 js, jsx 둘다 가능하지만, 컴포넌트가 들어가면 jsx로 사용하는게 맞다.

▣ 리액트의 State와 리렌더링

■ State

• state란?

  • 컴포넌트 내부에서 변경이 일어나는 값
  • 개발자가 의도한 동작에 의해 변경할 수 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다.
  • state 값이 변경되고 리 렌더링이 필요한 경우에 리액트가 자동으로 계산하여 변경된 부분을 렌더링 한다.

• state 만들기

  • state를 만들 때는 useState()를 사용한다.

• state 변경하기

  • state를 변경할 때는 반드시 setValue(바꾸고 싶은 값)를 사용한다.

    • state 값을 개발자가 직접 변경해서는 안된다!

      👉 setValue( ) 함수를 사용시 변경할 값을 직접 넣거나, 함수를 넣을 수 있다.

  • 함수를 넣는 경우, 함수가 리턴하는 값으로 state가 변경된다.

  • 현재 값을 기반으로 state를 변경할 경우 함수를 넣는 방법이 적합하다.

  • 1) setState 내에 변경할 값을 넣기*

    const [count, setCount] = useState(0);
    setCount(count + 1);

    2) setState에 함수를 넣기

    const [count, setCount] = useState(0);

■ 리렌더링 조건

1. state(상태) 변경이 있을 때
   • 리액트는 state 변경이 감지되면 리렌더링 한다.
   • 상태를 변경한다는 것은 setState함수를 실행할 때, 리액트 트리거가 업데이트된다는 것을 의미한다.
     • 트리거 : 이벤트에 반응해 자동으로 실행 되는 작업
2. 새로운 props가 들어올 때
   • 부모 컴포넌트로부터 새 props가 들어오면 자식 컴포넌트도 리렌더링 된다.
3. 기존 props가 업데이트 됐을 때
   • 부모 컴포넌트로부터 받은 props가 변경되면 props 값을 받은 자식 컴포넌트도 리렌더링 된다.
4. 부모 컴포넌트가 리렌더링 될 때
   • 부모 컴포넌트가 업데이트되어 리렌더링 되면, 자식 컴포넌트도 리렌더링 된다.

🎯 문제와 해결

• 과제를 하다가 에러가 발생했을 때, 에러 문구를 검색해서 빨리 처리하고 넘기느라 정리를 못했다. 추후 동일한 상황을 위해 에러 해결 부분을 정리하자..

⁉️ 어려웠던 내용

• todolist 과제 - 컴포넌트로 분리해서 기능 구현하기

❎ 한 번 더 공부할 내용

• 참고자료 내용 다시 정독하기
• todolist 과제 기능 보완하기

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 리액트 todolist 과제 리뷰 특강
• (번역) React는 컴포넌트를 언제 다시 리렌더링 할까요?
• [react] 리렌더링이 되는 조건들 살펴보기
• 리액트 State란?
• 리액트 재렌더링 조건 & 렌더링 성능 최적화 방법

📜 진행 내용

• [과제] 알고리즘 문제 풀기

• [강의] 자바스크립트 심화

  • Chap-04. callback

  🚩 학습 목표

  • Chap-04. 개념 이론에 익숙해지기

• [강의] 리액트 입문주차

  • 14 ~ 끝
  • 컴포넌트

• [강의] 리액트 실무 기초

  • 1주차 완강

💡 배운내용

▣ 알고리즘 문제 풀기

• 오늘 과제로 주어진 문제는 배열 메서드로 풀었지만, 이차 배열 만드는 방법 정리해 봄.

• 이차 배열 만들기

  • new Array( ) + for loop 사용하기

      let arr = new Array(5)
      console.log(arr) // (5) [empty × 5] 
    
      for(let i = 0; i < arr.length; i++){
          arr[i] = new Array(2);
      }
    
      console.log(arr)
    
      // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
      // 0: (2) [empty × 2]
      // 1: (2) [empty × 2]
      // 2: (2) [empty × 2]
      // 3: (2) [empty × 2]
      // 4: (2) [empty × 2]
    

  • 생성 함수 만들기

      function create2DArray(rows, columns){
          let arr = new Array(rows);
          for (let i = 0; i < rows; i++){
              arr[i] = new Array(columns)
          }
          return arr;
      }
    
      create2DArray(5, 2)
    
      // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
      // 0: (2) [empty × 2]
      // 1: (2) [empty × 2]
      // 2: (2) [empty × 2]
      // 3: (2) [empty × 2]
      // 4: (2) [empty × 2]

  • Array 객체에 배열 생성함수 추가 - innerArray를 생성, 초기값 지정 가능

      Array.matrix = function(m, n, initial) {
          let a, i, j, mat = [];
          for (i = 0; i < m; i += 1) {
              a = [];
              for(j = 0; j < n; j += 1){
                  a[j] = initial;
              }
              mat[i] = a;
          }
          return mat;
      };
    
      let arr = Array.matrix(5, 2, 0)
    
      arr
    
      // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
      // 0: (2) [0, 0]
      // 1: (2) [0, 0]
      // 2: (2) [0, 0]
      // 3: (2) [0, 0]
      // 4: (2) [0, 0]

  • ES6 최신 문법

      **const arr1 = Array.from(Array(5), () => new Array(2))**
    
      arr1
    
      // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
      // 0: (2) [empty × 2]
      // 1: (2) [empty × 2]
      // 2: (2) [empty × 2]
      // 3: (2) [empty × 2]
      // 4: (2) [empty × 2]
    
      **const arr2 = Array.from(Array(5), () => Array(2).fill(0))**
    
      arr2
    
      // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
      // 0: (2) [0, 0]
      // 1: (2) [0, 0]
      // 2: (2) [0, 0]
      // 3: (2) [0, 0]
      // 4: (2) [0, 0]

▣ 리액트 기초

• 리액트에서는 JSX 문법을 사용해서 ‘리액트요소’를 만들고 요소를 DOM에 렌더링 시켜준다.

  • 리액트에서는 HTML파일이 딱 1개이다. 그래서 뷰를 그리는 내용이 JSX문법에 의해 자바스크립트에 들어간다.

• JSX란? 간단히 말해 HTML을 품은 자바스크립트다.

  
  

• JSX 규칙

  1. 태그는 꼭 닫아주기

     예)

     • input 태그를 닫지 않고 넣을 경우 > Unterminated JSX contents 에러 발생

     function App() {
       return (
         <div className="App">
           <input type='text'>
         </div>
       );
     }

     

     • 수정 - 아래와 같이 잘 닫아주기

     <input type='text'/>

  2. 무조건 1개의 엘리먼트를 반환하기 (return)

     • 하나보다 많아도 적거나 없어도 안되며, 없을 경우 null이라도 넣어줘야 된다.

         function App() {
           return null;
         }

    예) 

    - return 아래에 p태그를 하나 추가 > Parsing error 에러 발생

        ```jsx
        return (
            <p>안녕하세요! 리액트 반입니다 :)</p>

            <div className="App">
              <input type='text'/>
            </div>
          );
        ```

        ![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04414c10-53cc-456f-8b3c-0812b7adf7b0/_2020-10-04__10.59.09.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/04414c10-53cc-456f-8b3c-0812b7adf7b0/_2020-10-04__10.59.09.png)


    - 수정 - 하나의 div 태그로 감싸주기

        ```jsx
        return (
            <div className="App">
              <p>안녕하세요! 리액트 반입니다 :)</p>
              <input type='text'/>
            </div>
          );
        ```


 3. JSX에서 javascript 값을 가져오려면?
    - { } 중괄호를 쓴다!

    ```jsx
        const cat_name = 'perl';
    // return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
        return (
          <div>
            hello {cat_name}!
          </div>
        );
    ```


    👉 값을 가져올 때 뿐만 아니라, map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용할 수 있다.



    ```jsx
    import React from 'react';
    import logo from './logo.svg';
    import './App.css';

    function App() {
      const number = 1;

      return (
        <div className="App">
          <p>안녕하세요! 리액트 반입니다 :)</p>
          {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
          {/* 삼항 연산자를 사용했어요 */}
          <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
        </div>
      );
    }

    export default App;
    ```

    - 리턴 안에서는 if문을 사용하지 못한다. 대신 삼항 연산자를 사용해야된다.

        ```jsx
        function App() {
          let name = 'hoesu';

          return (
            <div className='App'>
              {name !== '1' ? name : 1}
            </div>
          );
        }
        ```

 4. class 대신 className!
    - JSX로 작성하는 태그 내에서 클래스 명을 정해줄 땐 속성 값을 class대신 className으로 사용. 
     id는 그냥 id로 사용.

    ```jsx
    <div className="App" id="header-box">
    ```

 5. 인라인으로 style 주기


    👉 html 태그에 인라인으로 style 넣던 방식에서 조금 다르다.
    css 문법 대신 json 형식으로 넣어주면 끝!



    - HTML

    ```html
    <p style="color: orange; font-size: 20px;">orange</p>
    ```

    - JSX
        - 리액트에서 자바스크립트를 넣고 싶을 경우 기본적으로 { } 중괄호를 사용하고, string이 아닌 객체로 넘겨줘야된다.
        - 그렇기 때문에 {{ }} 중괄호가 중첩된 형태

    ```jsx
    // 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트기 때문.
    // 스타일 사용법 1 
    <p style={{color: 'orange', fontSize: '20px'}}>orange</p>

    // 스타일 사용법 2 : 스타일 딕셔너리를 변수로 만들고 사용!
    function App() {
      const styles = {
        color: 'orange',
        fontSize: '20px'
      };

      return (
        <div className="App">
          <p style={styles}>orange</p>
        </div>
      );
    }
    ```

🎯 문제와 해결

• 리액트 - 오늘 리액트 입문 강의를 다 듣고, 같은 강의를 한번 더 복습하려다 이전에 지급된 리액트 실무 기초 강의를 들었다. 아직 어렵긴 하지만, 상호보완적인 설명들과 예제들을 연습하면서 좀더 이해가 된 듯하다.

⁉️ 어려웠던 내용

• component

❎ 한 번 더 공부할 내용

• component 구조 그리기
• 상위 component와 하위 component 관계
• 리렌더링 조건

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 자바스크립트 심화 강의
• 스파르타 코딩클럽 - 리액트 입문주차 강의
• 스파르타 코딩클럽 - 리액트 리액트 실무 기초 강의
• [JavaScript] 자바스크립트 2차원 배열 선언 및 사용법
• React Hooks: useState 사용법

📜 진행 내용

• [과제] 알고리즘 문제 풀기

  • 오늘부터 과제로 1일 1문제씩 주어진다. 권장 문제 풀고 추가로 더 풀기.

• [특강] JS 자주 사용 되는 ES6 문법 살펴보기

• [강의] 자바스크립트 심화

  • Chap-04. callback

    🚩 학습 목표

  • Chap-04. 개념 이론에 익숙해지기

• [강의] 리액트 입문주차

  • 1 ~ 13까지 수강
    • 내용 : 시작하기 ~ component, JSX 문법, props, state

💡 배운내용

▣ 알고리즘 문제 풀기

• 문제를 풀다가 구조분해할당 복습이 필요했는데, 마침 오늘 진행될 JS 문법 특강시 내용이 포함되어있다.
• 듣고 정리하기.

▣ 자바스크립트 심화

• 실행 컨텍스트

▣ JS - 유용한 ES6 문법

• 객체

  • 변수에 할당한 값을 오브젝트의 key값으로 설정하는 법

  • 변수명을 오브젝트에서 [ ] 로 감싸면, 변수명에 할당된 변수가 key값이 된다.

    ```jsx

  • const a = 'age';*

    const obj1 = { id : 1, name : 'momo', 'my name' : '모모미', [a] : 3, // a가 key값이 되는게 아니라, 변수 a에 할당된 'age' 가 key값이 된다. }

    console.log(obj1) // {id: 1, name: 'momo', my name: '모모미', age: 3}

• 배열의 구조분해 할당

    const arr1 = [1, '모모', 3];
  
    > 변수에 하나씩 할당
    const myId = arr1[0];
    const myName = arr1[1];
    const myAge = arr1[2];
  
    console.log(myId)
    console.log(myName)
    console.log(myAge)
  
    > 구조분해할당으로 간견할게 할당
    const [myId, myName, myAge] = arr1
  
    console.log(myId
    console.log(myName)
    console.log(myAge)
  
    ** 필요한 부분만 꺼내오는 것도 가능하다. 
    (기본적으로 필요하지 않아도 기재를 해주되, 정말 필요없을 경우
    없다는 의미로 **'_' 언더바 기호를 사용해서 표기**한다. )
  
    const [myId, _, myAge] = arr1

• 객체의 구조분해 할당

    const obj = {
    id: 1,
    name: '모모',
    age: 25,
    habit: 'coding',
    };
  
    > 변수에 하나씩 할당
    const name = [obj.name](http://obj.name/);
    const id = [obj.id](http://obj.id/);
    const age = obj.age;
    const habit = obj.habit;
  
    > 구조분해할당으로 간견할게 할당
    const { name, id, age, habit } = obj;
  
    console.log(name)
    console.log(id)
  
    ** 필요한 부분만 꺼내오는 것도 가능하다. 
    const { id, habit } = obj;

▣ 리액트 입문 강의

• 리액트 시작하기 프로젝트 세팅

07. Props Part1

• props란 ?

  • 컴포넌트 간의 정보를 교류하기 위한 수단

  • 자식 컴포넌트가 부모 컴포넌트로부터 받아온 데이터묶음

  • props는 부모에서 자식 방향으로만 전달할 수 있다.

    예제 ) props로 값 전달하기

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
    const name = '정숙씨';
  **return <Child motherName={name} />; // Child 컴포넌트에 props로 name을 전달했다.**
}

function Child(**props**){
    console.log(props) // {motherName: '정숙씨'}
    return <div>연결 성공</div>
}

export default App;

```

예제 ) props로 받은 값을 화면에 렌더링하기

```jsx
// src/App.js

import React from 'react';

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
  const name = '정숙씨';
  return <Child motherName={name} />;
}

function Child(props) {
  // console.log(props.motherName);
  // return <div>연결성공</div>
  **return <div>{props.motherName}</div>;**
}

export default App;
```

• props Drilling > 내용 보강하기

  

  • React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다.

• 해결방법

    - children : layout component를 만들 때 자주 사용.

          import React from 'react';

          function User(props) {
            return <div>{props.children}</div>;
          }

          function App() {
            return <User>안녕하세요</User>;
          }
          export default App;

• PropTypes와 함께 하는 타입 검사 > 내용 보강하기
  • 앱의 크기가 커짐으로써 늘어나는 버그를 잡기 위해, 타입 검사 기능을 활용할 수 있다.

    import PropTypes from 'prop-types';

    class Greeting extends React.Component {
      render() {
        return (
          <h1>Hello, {this.props.name}</h1>
        );
      }
    }

    Greeting.propTypes = {
      name: PropTypes.string
    };

🎯 문제와 해결

• 없음

⁉️ 어려웠던 내용

• state
• prop types

❎ 한 번 더 공부할 내용

• props Drilling
• PropTypes
• state

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 자바스크립트 심화 강의
• 스파르타 코딩클럽 - 리액트 입문주차 강의
• 자바스크립트 객체 정리하기 1편 (자바스크립트 객체, 구조분해할당)
• React에서 Prop Drilling과 해결 방법
• Prop drilling 해결을 위해 context를 사용하기 전에 구조를 생각해보자.
• Props Drilling
• PropTypes로 React 입력 타입 체크하기
• PropTypes와 함께 하는 타입 검사

- node.js 설치 : 자바스크립트를 실행할 플랫폼

• node 홈페이지 - LTS로 설치 후 설치 및 버전 확인

    - 터미널 창 명령어 실행
        - ```node -v```

- 패키지 매니저 설치

• 많은 서드파티 패키지들의 집합소 , 둘 다 "프론트엔드 의존성"을 관리하기 위한 "패키지 매니저"

👉 두 가지 중 성능적으로 개선된 yarn 사용

- npm (Node Package Manager)
- **yarn** **설치하기**
    - 터미널 - 명령어 실행
        - 설치 : npm install -g yarn
        - 설치 확인 : yarn -v

- VSCODE 확장 프로그램

• Prettier - Code formatter 설치

    - 설정 - JSON으로 열기 - 우측 상단 아이콘 클릭
    - "editor.defaultFormatter":"esbenp.prettier-vscode” 추가
    - 다시 설정창으로 이동 - 검색창 format on save 입력 - format on save 체크박스 체크
        - 파일 저장할 때마다 프리티어를 적용해준다.

- 프로젝트 시작하기

• CRA로 프로젝트 생성하기

    - **CRA** (**Create React App) 란?**
        - 리액트 프로젝트를 하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구

** 1. 프로젝트 생성**

                ls #현재 파일 위치

                cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 이동 
                                      # 폴더로 직접 들어가서 폴더 내에서 우클릭하여 터미널 열어도 됨.

                yarn create react-app 폴더명(프로젝트명) #프로젝트 생성!

** 2. 생성한 폴더로 이동 - VSCODE에서 폴더를 열어도 된다. **

                cd **폴더명(프로젝트명)** # 생성한 **폴더명(프로젝트명)**

** 3. 프로젝트 구동 - VSCODE 터미널 창에 명령어 입력 **

                yarn start # 프로젝트 구동!

📜 진행 내용

• 팀 프로젝트 발표
• 팀 프로젝트 회고/ 마무리
• [기타] 주특기 입문 발제
• [기타] 새로운 팀 편성
• [기타] 티맥스 소프트 채용 설명회
• [강의] 자바스크립트 심화
• [특강] DOM 기초 - 최원장 튜터님
• [특강] CS _ OSI 7계층 - 김태선 튜터님
• [과제] javascript 퀴즈
• [자습] 알고리즘 문제 풀기 - 프래그래머스
• [자습] 리액트 강의 - 유데미
• 주말 스터디 모임 - 리액트로 Todolist 만들어보기

💡 배운 내용

• [기타] 티맥스 소프트 채용 설명회

  • 이번 티맥스 채용설명회에서 개발 분야라도 파트가 다양하게 나누어지고, 또 각 파트의 역할을 엿볼 수 있었다. 개발사를 고객층으로 하는 기업이기 때문에, QA 파트에서는 더욱 더 전문성 있는 인재를 원하고 있었다. ‘바닐라 아이스크림에 알러지가 있는 자동차’ 일화를 예시로 QA 파트에 적합한 인재에 대해 설명해주신 부분이 흥미로웠다. 본질적인 문제파악하기를 좋아하는 것, 깊이 연구하고 책임감있게 끝까지 파고들 수 있는 사람.

    이런 인재성에 대한 내용은 단지 QA 파트가 아닌 개발이라는 직군 자체에 해당한다는 생각이 들었다.

• [특강] DOM 기초 - 최원장 튜터님
  • 우리가 (HTML, CSS, Javascript로 브라우저에 보이도록) 하는 것이 다 DOM이었음을..
    • 이전에 DOM에 대해서 가볍게 공부를 했었는데, 이 기초 강의를 통해 다시 한 번 맥락을 짚어가며 정리할 수 있는 시간이 되었다.

• [강의] 자바스크립트 심화

  • 1. 데이터 타입, 2. 실행 컨텍스트, 3. this

       • 주특기 리액트 과정을 들어가기 앞서, 자바스크립트 심화 강의는 반드시 들어야 된다고 안내되었었다.
       • 강의 챕터 5개 영역 중 1. 데이터 타입, 2. 실행 컨텍스트, 3. this 까지 듣고 유데미의 리액트 강의를 들었는데, 모든 챕터를 다 듣고 리액트를 들은 것이 아님에도 확실히 많은 도움이 되었다.

       ※ 이번 주 진행되기로 했던 리액트 강의는 전체 학생의 자바스크립트 소화 정도에 의해 다음 주로 연기되었다.

• [자습] 리액트 강의 - 유데미

  • 리액트 시작하기
    • 리액트는 컴포넌트가 전부이다.
    • 리액트는 간단하게 사용자 인터페이스를 구축하는 자바스크립트 라이브러리다.
    • 자바스크립트 라이브러리 중 리액트는 비교적 가벼운 작업에, 앵귤러는 내장기능이 많아 큰 작업에 유용하며, 뷰는 리액트 + 앵귤러라고 생각하면 된다.

✅ 이번 주 학습 목표 점검

• 잘한 것은?
  • 강의를 수강하는데 진도가 더디게 나가고 있지만, 특강과 채용설명회를 빠지지 않고 들은 것.
    • 녹화본이 올라온다고 나중에 들을 것으로 미루다가 아예 들을 수 없을 정도로 연기되고 있는 특강들이 있다.
  • 자바스크립트 심화 강의 잘 소화 시키기
    • 한 챕터씩 한 번 듣고 나서, 다시 들으며 범위를 작게 잡아 정리해나가는 중이다.
• 잘못한 것은?
  • 기록을 효율적이게 하지 못해서, 일정에 차질이 생긴 것.
    • 중점적인 내용만 정리하자니, 복습할 때 정리본을 보더라도 큰 도움이 되지 않는 것 같아 내용 정리하는데 너무 힘을 쏟을 때가 많았다.
  • 자습 시간에 보충 해야될 부분 마치기
    • 내배캠 주요 일정과 더불어, 필요한 공부가 추가되다보니 내배캠 알고리즘 강의와 GIT 강의 그리고 CS 특강에 대한 수강을 하나도 진행하지 못했다.

🗓️ 다음 주 학습 계획

• [내배캠] 주요 일정

  • [원격] 리액트 입문
  • [과제] 리액트 입문 개인과제
  • [원격] 리액트 숙련
  • 알고리즘 문제풀기 - 프로그래머스 단계별 풀어보기
  • [특강] CS 기초 - 정영훈 튜터님
  • [특강] 리액트 입문_과제리뷰
  • [특강] 리액트 숙련_redux

• [셀프] 추가 학습

  • [실시간] 자바스크립트 심화 복습

  • [자습] 리액트 강의 - 유데미

  • 이월 미진행 항목

    • [특강] CS 기초 : HTTP - 박민수 튜터님
    • [강의] Git
    • 보충 학습 + TIL 보충하기
      • 알고리즘 - 정렬

🎯 다음 주 학습 목표

• 리액트 시작하는 단계 - 세팅 정리
• 리액트 - 문법, 컴포넌트 구성과 흐름 파악하기

🗨️ 생각 정리

• 해결해야할 문제/남아있는 의문

  • 효율적이게 기록을 정리하는 방식

• 어떻게 개선할까?

  • 초반부에 TIL 정리하던 것처럼, 당일에 배운 모든 것을 정리하려고 하지말아야 한다.

    이번 자바스크립트 심화 강의를 들으며 정리한 것처럼 당일 진행한 일정은 모두 기록하되, 범위를 적게 설정하여 정리할 것.

  • 틈틈이 다른 블로그 등 잘 정리된 표본을 찾아서 적용해보기.

📜 진행 내용

• [자습] 알고리즘 문제 풀기
  • 최대공약수와 최소공배수 다시 풀기
• [과제] javascript 퀴즈
• **[특강] CS _ OSI 7계층 **

🚩 학습 목표

- 내가 했던 것들이 DOM이었음을 깨닫기.

• [강의] 자바스크립트 심화

  • Chap-03. this

  🚩 학습 목표

  • 개념 이론에 익숙해지기

  ✅ 체크 리스트

  • Chap-01-6,7 정리

💡 배운내용

▣ 알고리즘 문제 풀기

• 오늘부터 팀원분들하고 오전 9 ~ 11시까지는 알고리즘 문제 푸는 시간으로 정했다.
• 확실히 혼자서 일정을 짜고 진행하는 것보다는, 같은 시간에 (같은 문제는 아니더라도) 같은 과제를 한다는 게 꽤나 의지되는 느낌이었다.
• 우리 팀에는 실력자 분이 계셔서, 문제 푸는 모습도 화면 공유로 엿볼 수 있었는데 상당한 도움이 되었다.

▣ javascript 퀴즈

• 얼마 전 수업 진행 방식에 대해 개선될 수 있도록 학생측에서 운영진 측으로 건의된 내용이 취합되었고,

  그동안 습득한 내용을 체크할 수 있는 장치 단계가 추가 되었다.

  처음이라 그런지 아직은 퀴즈 수준이 평이했다.

▣ 자바스크립트 심화

1-6. 불변 객체

◼️ 불변 객체로 만들기

• 불변 객체 : 가변일 수 밖에 없는 참조형 데이터 타입들을 변하지 않는 객체로 만든 것

    const obj = { vaule: 1 }
    const newObj = obj;

    newObj.vaule = 2;

    console.log(obj.vaule); // 2
    console.log(obj === newObj); // true

• 객체는 원본 객체 프로퍼티와 사본 객체 프로퍼티가 모두 동일한 참조형 데이터의 주소를 가리키고 있다.
  그렇기 때문에, 단순하게 할당하는 방식으로 복사를 하면, 사본 객체의 프로퍼티를 변경하면 원본 객체 프로퍼티까지 같이 변경되는 문제가 있다.

참조형 데이터가 저장된 프로퍼티를 복사할 대 그 주솟값만 복사하는 방법

1. 얕은 복사 (shallow copy)

1. for in 문 - 재귀적 수행
2. ... spread 연산자 - 전개 복사

2. 깊은 복사 (deep copy) - 객체 내부의 모든 값들을 전부 복사하는 방법

1. JSON 객체 메서드

   • JSON 객체의 stringify( ), parse( ) 활용 : 이 방법은 다른 방법들에 비해 성능이 좋지 않고, JSON.stringify( ) 메서드는 함수를 만났을 때 undefined로 처리된다는 문제점이 있다.

   • JSON.stringify( ) : 객체를 JSON 문자열로 변환 (기본 데이터타입의 문자열 아님. { } 까지도 다 문자열로 변환된다. )

   • JSON.parse( ) : JSON 문자열 JavaScript 값이나 객체로 생성

    ```jsx
    console.log(JSON.stringify({ x: 5, y: 6 })); //  '{"x":5,"y":6}’

    const json = '{"result":true, "count":42}';
      const obj = JSON.parse(json);

      console.log(obj.count); // 42
      console.log(obj.result); // true
      console.log(obj); // { result: true, count: 42 }
    ```


![Untitled](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/bd9dda6a-7826-426a-803b-90a72bdd461e/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230115%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230115T070232Z&X-Amz-Expires=86400&X-Amz-Signature=da60690914141f5c01c8c8a0ad2cdb7b4ec9fb57a9fc55ba5a78a402050b45ae&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

2. 재귀적 수행
   • 객체의 프로퍼티 중 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사

1-7. null과 undefined

• 둘 다 없음을 의미한다.

• undefined

  • 사용자가 지정할 수도 있으나, 자바스크립트 엔진에서 자동으로 부여하는 경우가 많다.

    • 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때.
    • 변수나 객체 등에 . 이나 [ ] 로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우
    • 함수에 return문이 없거나, 호출되지 않는 함수의 실행 결과.

    👉 사용자가 할당한 것인지, 자바스크립트 엔진이 반환한 것인지 구분할 수 없다.

• null

  • 값이 없다는 것을 ‘명시적’으로 표현할 때 사용한다.

    👉 값이 없음을 명시적으로 표현할 땐 undefined가 아닌 null 로 사용할 것!!

🎯 문제와 해결

• 문제 없었음

⁉️ 어려웠던 내용

• OSI

❎ 한 번 더 공부할 내용

• OSI

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - 자바스크립트 심화 강의
• JSON 기본 - 문자열
• [자바스크립트] 불변 객체 (feat 코어 자바스크립트)

📜 진행 내용

• [특강] DOM 기초 - 최원장 튜터님

🚩 **학습 목표**

- 내가 했던 것들이 DOM이었음을 깨닫기.

• [강의] 자바스크립트 심화

  • Chap-01. 데이터 타입
  • Chap-02. 실행 컨텍스트
  • Chap-03. this

  🚩 학습 목표

  • 개념 이론에 익숙해지기

  ✅ 체크 리스트

  • chapter 1~2 복습

💡 배운내용

▣ DOM 기초

• DOM(Document Object Model)

  • DOM은 브라우저에만 내장된 API

• DOM을 알기 위해, 웹페이지가 브라우저에 보이는 과정을 살펴보면서 시작해보자.

  1. 브라우저(클라이언트)에서 서버에 HTML을 요청 ( URL 주소를 입력하거나, 웹 페이지의 버튼 등을 누르는 등)

  2. 브라우저의 렌더링 엔진이 받아온 HTML을 파싱(parsing: 구문 분석)하여 DOM을 생성한다.

     • DOM이 담당하는 두 가지 기능

       1. HTML 문서에 대한 모델 구성

          • HTML을 한 줄씩 읽으면서 문서의 모든 것을 (심지어 그것이 주석이더라도) 자바스크립트가 HTML에 접근할 수 있는 노드(오브젝트)로 만든다.
          • 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree 라 한다.
            • 태그 → 노드 → 트리 구조 형성

       2. HTML 문서 내의 각 요소에 접근 / 수정

          • DOM의 모든 노드는 노드 간 이동, 수정 등을 가능하게 해주는 메서드와 속성(property)을 가지고 있다.

          ※ HTML 태그의 속성은 attribute라고 함.

          ※ method는 호출의 주체가 있다. 예) person.getAge( ) 함수는 혼자서 실행된다. 예) getAge( )

        ![Untitled](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/f3c3dc64-c587-4d18-be98-1499123c873a/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221201T115406Z&X-Amz-Expires=86400&X-Amz-Signature=9556b073da60c7f9ec3389a86269fe76011aae98c34795a3c85dccdc1ae2f92a&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

    - **DOM 탐색과 접근**

        ![Untitled](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/59896bc1-5e0d-480f-9399-31e371636b05/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221201T115425Z&X-Amz-Expires=86400&X-Amz-Signature=25b20e7149baadd5746a6fa54000f6cb7060965d6c89b9c8705f603b26bae231&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

        - **노드 트리의 가장 상위에는 단 하나의 root node를 가진다.**

        ![Untitled](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9bf10884-420b-43a0-9c9f-27cd101c7b21/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221201T115448Z&X-Amz-Expires=86400&X-Amz-Signature=bb8bb4b6166841a1c180394508d05b2e26ded0af3af8cc25c0320cd18e3a8fb7&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

        - **루트 노드를 제외한 모든 노드는 단 하나의 parent node를 가진다**.

        ![Untitled](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/d7012460-f608-4c3a-9d07-9f9a881caafb/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20221201%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20221201T115506Z&X-Amz-Expires=86400&X-Amz-Signature=f333ee1b2271172333c970138d5eff6322c151431f507b7a3669d62db631e105&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject)

        - 부모 노드(parent node) 하위에는 **자식 노드(childe node)**가 위치하며, 자식 노드는 여러 개가 될 수 있기 때문에 접근하기 위해서는 **인덱스 번호**를 붙여준다.

🔎 node vs element

• 자바스크립트의 DOM을 다루다보면 자주 접할 수 있는 node와 element의 차이점은 ? DOM 문서는 node의 계층적인 구조로 이루어진다. 이 때 node는 요소(element), 텍스트, 주석 등등을 다 포함하고 있으며 element는 node의 유형 중 하나인 것이다. 주로, < p >, < div > 같은 태그를 사용해서 작성된 노드를 말한다.
  우리가 자바스크립트에서 DOM을 탐색하고 조작할 때는, node의 다른 형태인 주석이나 텍스트보다 주로 element를 조작하는 경우가 많다.
  DOM을 조작하는 방법에는 node를 탐색하는 방법과 element를 탐색하는 방법이 있는데 element를 탐색하는 방법을 사용하면 주석이나 텍스트 등을 제외한 element만을 탐색할 수 있기 때문에 DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용한다.
  
• - node를 탐색하는 방법* : parentNode , nextSibling, childNodes …
• - element를 탐색하는 방법* : getElementsByTagName, getElementsByClassName, getElementById , querySelector …

🎯 문제와 해결

• 없음

⁉️ 어려웠던 내용

• 어렵다기보다 관련된 질문들이 생겨서, 자료들 더 찾아봤다.

❎ 한 번 더 공부할 내용

• DOM , CSSOM, Render tree
• 얕은 복사 깊은 복사

🔗 출처 및 참고자료

• 스파르타 코딩클럽 - DOM 기초 특강
• [Javascript] node와 element의 차이
• 5.31 DOM 문서 객체 모델(Document Object Model)
• 브라우저의 렌더링 과정 & Render Tree와 DOM Tree의 차이점
• 주요 노드 프로퍼티
• DOM Node란무엇인가 그리고 DOM Element와의 차이점은?

📜 진행 내용

• [기타] 새로운 팀 편성

  • 팀 OT

• [강의] 자바스크립트 심화

  • Chap-01. 데이터 타입

  • Chap-02. 실행 컨텍스트

    🚩 학습 목표

  • 자바스크립트의 데이터 종류에 대해 이야기할 수 있고, 각각 메모리에 어떻게 저장되고 사용 되고, 수거 되는지를 이해 할 수 있다.

    ✅ 체크 리스트

  • 학습 목표 달성

  • 자바스크립트 문법 중, 주요 개념(데이터의 메모리 저장 구조)에 대해 다음 질문에 답할 수 있어요

    • var a = 3; 이 메모리에 저장되는 과정을 설명
    • a = 7; 이 되었을 때, 3이 더 이상 사용되지 않을 때 무슨일이 일어나는지 설명

💡 배운내용

▣ 새로운 팀 편성

• 이번 주차는 3주 강의 수강, 1주 프로젝트 총 4주간에 걸쳐서 길게 진행이 된다.

  이전보다 긴 기간을 함께 할 팀이어서 편성 전까지 걱정이 많았는데, 다행히도 성실하고 긍정적인 영향력이 있는 분들을 만났다. 나도 좋은 기운을 전달할 수 있게 더 분발해서, 시너지효과가 커지도록 해보자.

▣ 자바스크립트 심화

1-5. 기본형데이터와 참조형데이터2

• 변수 복사의 비교

  • 기본형 데이터

      var a = 10;
      var b = a;

    

- **참조형 데이터**

    ```jsx
    var obj1 = { c: 10, d: 'ddd' };
    var obj2 = obj1;
    ```

    ![](https://velog.velcdn.com/images/newas_born/post/86a69899-6462-4470-8125-98c6c6186338/image.png)

🔎 보통 설명할 때, 기본형은 값을 복사하고, 참조형은 주솟값을 복사한다고 하나 엄밀히 따지면 자바스크립트의 모든 데이터 타입은 참조형 데이터일 수 밖에 없다.
단지 기본형은 주솟값을 복사하는 과정이 한 단계, 참조형은 기본형보다 한 단계 더 거친다는 것의 차이다.

• 변수 복사 후 값이 변경되는 경우 (객체의 프로퍼티가 변경되는 경우)

  • 기본형 데이터

    
    var a = 10;
    var b = a;

  • b = 15;*

    
    ![](https://velog.velcdn.com/images/newas_born/post/b254a455-9e96-4a01-abac-9b74bdbebb35/image.png)
    
    
    

👉 리마인드
- 변수기 때문에, 변수영역의 값이 바뀌는 것. 상수면 변수 영역의 값이 바뀔 수 없다!! 상수와 변수의 구분. - 데이터 영역이 바뀌느냐 안바뀌느냐의 차이는 불변과 가변의 구분.

• 참조형 데이터

    var obj1 = { c: 10, d: 'ddd' };
    var obj2 = obj1;
  
    **obj2.c = 20;**

  

👉 **복사했으면, 복사한 값은 원본에 영향이 없어야된다. 하지만..**

- a!== b ?
    - b는 다른 데이터를 바라보고 있다! 그러므로 다르다!
- obj1 !== obj2 ?
    - obj1과 obj2가 같이 가리키고 있던 obj1 위한 영역의 7103 값을 obj2 프로퍼티에 다른 값을 할당하면서 바꾸어 버렸다!

        그러므로 연결되어있던 obj1(복사 원본)까지 같아져버렸다.

    - **그렇기 때문에 참조형 데이터를 가변하다고 한다.**

🎯 문제와 해결

• 기초 수준과는 달리, 심화 수준에서는 깊이 배우는 거라 좀더 관련 자료를 찾아볼 부분이 많았다. 그래서 범위를 줄여서 정리해나가고 있다.

⁉️ 어려웠던 내용

• 기본형과 참조형 둘다 주소값을 가리키고 있는데, 이 부분이 보통 기본형은 값을 넣는다고 되어 있어 헷갈렸다. 하지만 엄밀히 따져서는 둘다 참조형 데이터라고 한다.

❎ 한 번 더 공부할 내용

• 얕은 복사, 깊은 복사

🔗 출처 및 참고자료

• 자바스크립트의 객체(메모리 할당, 가비지 컬렉션)
• 자바스크립트- 데이터 타입 정리
• javascript - [코어자바스크립트] javascript 의 메모리와 데이터 할당 (데이터 할당의 자유와 효율성)
• 5.6 Data type & Variable 데이터 타입과 변수

📜 진행 내용

• [기타] 주특기 입문 발제
  • 자바스크립트 심화, 리액트 학습 안내
• [강의] 자바스크립트 심화
  • Chap-01. 데이터 타입
  • Chap-02. 실행 컨텍스트

🚩 학습 목표

• 자바스크립트의 데이터 종류에 대해 이야기할 수 있고, 각각 메모리에 어떻게 저장되고 사용 되고, 수거 되는지를 이해 할 수 있다.

  ✅ 체크 리스트

  • 학습 목표 달성
  • 자바스크립트 문법 중, 주요 개념(데이터의 메모리 저장 구조)에 대해 다음 질문에 답할 수 있어요
    • var a = 3; 이 메모리에 저장되는 과정을 설명
    • a = 7; 이 되었을 때, 3이 더 이상 사용되지 않을 때 무슨일이 일어나는지 설명

💡 배운내용

▣ 주특기 입문 발제

• 프로젝트시 역할 분담
  • 못하더라도, 작은 기능이라도 맡아서 할 것. 잘하는 사람만 거의 맡아서 진행하지말고, 1명이 1인분을 할 수 있도록 해야한다.
• 자바스크립트 공부시
  • 실행 컨텍스트 - 자바스크립트 문맥, 현재 자바스크립트의 눈이 어디에 향해있는지.
  • 강의 듣고, 강의자료 추가학습의 모던 자바스크립트 튜토리얼 학습하기 -> 반복하기
  • 이해 안가도 포기하지말고 계속 반복해서 학습할것.
  • 리액트 숙련 가기전에, 리액트 입문을 배우는 거고, 리액트 입문을 배우기 위해 자바스크립트 심화를 배우는 것.

🏃‍♀️ 긴 기간 몰입하기 위해서, 미래를 잘 설계하고 긍정적인 결과를 기대하자. 그래야 지치지않는다.

▣ 자바스크립트 심화

1-2. 데이터 타입의 종류

• 데이터 타입 : 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말한다.

  • 자바스크립트의 데이터 타입은 크게 기본형(premitive type)와 참조형(object/reference type)으로 나뉜다.
    • 기본형 : 숫자, 문자열, boolean, null, undefined, Symbol(ES6에서 추가)
    • 참조형 : 객체 - 배열, 함수, Date, 정규표현식, Map, Set

• 기본형과 참조형의 차이점

  • 복제의 방식

    

    

• 기본형 : 값이 담긴 주소값을 바로 복제

• 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값 복제

🔎 데이터 타입 이해를 위한 배경 지식

1. 메모리와 데이터
   • 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 한다.
   • 컴퓨터는 모든 데이터를 0 또는 1로 바꿔 기억하며, 하나의 메모리 조각을 비트라고 한다.
   • 모든 데이터는 byte(8bit) 단위의 식별자인 메모리 주소값을 통해서 서로 구분이 된다.
     • bit 단위로 구분이 되면 너무 비효율 적이기 때문에 새로운 단위인 byte를 사용한 것
       • 1 bit = 8 byte
2. 식별자와 변수
   • 변수 : 변할 수 있는 데이터
   • 식별자 : 어떤 데이터를 식별하는 데 사용하는 이름, 변수명
     

1-3. 데이터 할당

• 변수 선언과 할당의 구조

자바스크립트는 변수명이 할당된 주소에 직접 데이터를 저장하지 않는다.

• 변수는 변수 영역에, 데이터는 데이터 영역에, 오브젝트는 오브젝트 영역에 할당이 된다고 생각하면 쉽다.

1. 변수 선언 - 변수 영역에 변수명이 저장됨

   var a;

2. 데이터 할당 - 데이터 영역에서 ‘abc’라는 값을 찾아보고 있으면 그 데이터의 주소를, 없다면 새로 할당한 데이터의 주소를 변수명의 변수에 저장한다.

    var a;
    a = 'abc';
   
    var a='abc';

3. 데이터 변경 - 새로 할당하는 값 ‘def’라는 값에 대해 2번 과정을 거친다. 이 때, 이전에 할당했던 값 ‘abc’는 이제 어떤 식별자와도 연결되어 있지 않기 때문에, 가비지 컬렉션이라는 자동 메모리 관리 방법에 의해 자동 해제 된다.

   단, 메모리에서 언제 해제될지는 예측할 수 없다.

    var a;
    a = 'abc';
    var a='abc';
    a = 'def'

👉 변수 영역에 값을 직접 대입하지 않는 이유는?

(= 변수영역과 데이터영역을 나누는 이유)

1. 자유로운 데이터 변환을 위해

   • 이미 입력한 문자열이 길어진다면, 처음 차지한 데이터 영역에서 확장해야 되기 때문에, 옆에 있는 다른 데이터들까지 이동하게 해야 된다.

2. 메모리의 효율적인 관리를 위해

   • 반복되는 데이터를 여러 번 저장해야될 경우

     ※ 숫자형 = 8byte, 주소 공간의 크기 = 2byte

     • 예) ‘5’ 를 800개 저장한다면

       1. 변수 영역에 값을 바로 할당한다고 할 때

          8byte * 500개 = 4000byte

       2. 데이터 영역에 값을 저장 후 해당 주소를 변수 공간에 입력할 때

          2byte * 500 + 8byte = 1008byte

🎯 문제와 해결

• 어려워서 반복해서 강의를 듣고, 다른 자료들을 찾아봤다.

⁉️ 어려웠던 내용

• 메모리 관점에서의 데이터 할당

❎ 한 번 더 공부할 내용

• 얕은 복사, 깊은 복사 연습하기.

🔗 출처 및 참고자료

• 자바스크립트의 객체(메모리 할당, 가비지 컬렉션)
• 자바스크립트- 데이터 타입 정리
• javascript - [코어자바스크립트] javascript 의 메모리와 데이터 할당 (데이터 할당의 자유와 효율성)
• 5.6 Data type & Variable 데이터 타입과 변수

📜 진행 내용

• 팀 프로젝트 발표
• 팀 프로젝트 회고/ 마무리

💡 배운내용

< 팀 프로젝트 발표 >

• 전체

  (다른 팀 프로젝트 및 튜터님 피드백 중)

  • 삭제 기능을 구현할 땐, 삭제 전 경고창으로 사용자에게 삭제할지 한 번 더 확인하는 과정이 필요하다.
  • 수정 기능을 구현할 땐, 기존 내용을 같이 보여주면서 수정하도록 해야한다.
  • 노션으로 일정과 대시보드 활용하여 프로젝트 진행하기
  • 프로젝트를 본격적으로 시작하기 전에 코드 컨벤션 규칙 정하기
  • 트러블 슈팅에 대한 부분 잘 정리해둘 것!

• 팀

  • 위 내용과 겹치는 부분이 많아서, 추후 서면 피드백으로 다시 비교해보기.

• 개인

  • Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점
    • 프로젝트 진행에서 부족한 부분 수시로 체크하기.
    • 체크한 부분은 반드시 팀원과 소통 후 결정하여 작업하기.
    • 코드 개선방향에 대해 항상 고민하기. (모듈화, 변수명, 불필요한 태그 줄이기 등)
  • Problem : 뭔가 문제가 있다 싶은 점. 변화가 필요한 점.
    • 깃헙 pull/push 할 경우 충돌되는 영역이 너무 많다.
    • 프로젝트 진행시 기획(구현 기능 상세, 폴더 구조, 데이터 설계, 진행 일정, 코드 컨벤션), 준비, 진행 과정 정리 잘하기
  • Try : 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 시도해 볼 것들
    • 개인 프로젝트를 진행하면서 브랜치를 나눠서 연습해보기.
    • 아래 항목들에 대해 나의 기준에 맞는 양식 만들어놓기
      • 구현 기능 상세, 폴더 구조, 데이터 설계, 진행 일정, 코드 컨벤션
    • 기능 구현시 작은 단위로 push할 것.
    • 깃헙을 자유롭게 활용하면서, 에러가 발생해도 원인 파악할 수 있는 수준 갖추기

🎯 문제와 해결

• 발표 전까지, 프로젝트 CSS 스타일링을 좀더 마무리 하는 과정에서 계속 JS 구현 기능이 제대로 작동하지 않는 에러가 발생했다.
  • 시간 관계상 함수를 직접 작성한 팀원 분과 협업하여 해결하면서 진행했다.
  • 추후에는 내가 참여하는 프로젝트의 함수들이 어떻게 작동하는지 면밀히 살펴봐야 한다.
• 깃헙에 pull / push하는 과정에서 충돌하거나, 제대로 업로드가 되지 않는 경우가 많았다.
  • 이 부분은 깃헙에 대한 공부가 부족한 것이기 때문에, 이번 주에 git 강의를 통해서 다시 정리 후 연습 해야한다.

⁉️ 어려웠던 내용

• 오늘의 문제 부분을 해결하는 과정

❎ 한 번 더 공부할 내용

• 깃헙