[우리FIS아카데미 4기] 클라우드 서비스 개발 과정 3주차 회고

리액트의 주차였던 3주차!!! 이번주 너무 빠르게 지나갔다..

바로 회고 포스팅 시작하겠다.

2025-01-13-MON

React 기본 개념 정리✏️

다양한 기능이 추가되면서 자바스크립트 파일이 커지게 되어 브라우저가 부담되는 부분이 커져감

MPA일 때는 첫 페이지에서 두번째로 갈때 새로고침되면서(깜빡이면서) 이동됨
SPA일 때는 새로고침 없이 페이지 이동(사용자 경험 개선)

dom을 직접 조작하면 성능 저하 발생
=> 리액트에서 이를 해소하기 위해 가상dom을 활용함

CSR => React
서버로부터 받아온 json을 클라이언트에서 변화해서 쓸 수 있도록 한다
ex) 구글 지메일 => 처음 실행할 때 로딩하고 페이지 보여줌(로딩할 때 html이랑 자바스크립트 번들 파일을 불러오는 것)

SSR => NextJS
요즘은 다시 서버가 미리 html 그려주고 클라이언트는 그냥 받아서 고대로 그림

 

오늘 리액트 기본 개념으로는 component, props, state, event handling. useState까지 진행을 했고

useState 실습을 진행했다.

 

실습하면서 신기했던 점은 리액트를 바로 프로젝트에 적용시킨 것이 아니라 html에서  CDN으로 react를 직접 불러와서 script 태그 안에 작성한 것이었다. 

    <script type="text/babel">
      const coffee = "Coffee";

      // 개발자가 직접 생성한 컴포넌트, 컴포넌트는 최근에는 함수 형태로 작성(예전에는 클래스 문법을 작성했음)
      const MyCustomComponent = () => {
        return (
          <ul>
            <h2>Things cats like</h2>
            <li>Tea</li>
            <li>{coffee}</li>
          </ul>
        );
      };

      // ReactDOM.render() 함수를 사용하여 컴포넌트를 화면에 출력
      const rootDiv = document.getElementById("root");
      const root = ReactDOM.createRoot(rootDiv); // 화면 그릴 곳 지정

      // 실제 렌더링 처리 수행
      root.render(<MyCustomComponent />); // 작성한 함수를 HTML 태그 형태로 전달
    </script>

 

💡React map 함수 고유의 키 값이 들어가야 하는 이유

👉🏻 한 요소를 제거할 때 제거한 후, 요소를 재정렬을 해야 하는데 리액트가 이를 대신한다. 이 정렬을 빠르게 해주기 위해 인덱싱 키 값이 필요한데, 리액트에서 그것(키 값)을 달라하는 뜻임! (대강 알고 있던 내용이지만.. 중요한 리액트 상식이라 생각해서 Memo...📝)

 

useState 상태 변화에 따른 아코디언 실습과 섭씨 화씨 실습을 진행했다.

 

2025-01-14-TUE

이 날은 Todo List 실습을 진행했다.

 

실습을 진행하면서 아직 수업에서 안배운 것들을 사용하지 않고 배운 것들로만 하려니 코드가 뭔가 더러워지고... props drilling이 일어나고 그래서 기능 구현하는데 많이 애먹었다...

강사님께서 useReducer를 이용하기 위한 빌드업 과정이라고 하셨다..

덕분에 useReducer와 전역 상태 관리 라이브러리의 중요성을 크게 깨달았던.. 날이었다.

 

추가 기능도 넣어보았는데 나는 할 일을 체크할 때 상태를 DONE으로 바꾸고 tailwind CSS에서도 체크된 디자인을 적용해보았고 추가적으로 드래그앤드롭도 만들어보았다.

 

portal을 이용하여 모달 만드는 과정은 자주 쓰이기에 따로 포스팅으로 정리해두었다.

🔗 학습 일지 링크

[React] Portal 활용하여 모달 만들기

 

2025-01-15-WED

이 날은 전 날에 했던 todo 실습을 이어서 진행했다.

오늘은 useContext와 useReducer를 이용해서 복잡한 상태 변경 로직을 깔끔하게 리팩토링을 하는 시간을 가졌다.

 

오늘 오전에 수업하다가 강사님께서 나에게 기습 질문을 하셨다.

 

newTodo라는 배열에 굳이 spread를 사용하지 않고 그냥 push로 요소를 추가하면 상태값이 변하지 않을까? 라는 질문을 어떤 교육생 분이 하셨는데 이에 대한 답은 변하지 않는다였다.

 

그리고 newTodo라는 배열 요소가 변했음에도 현재 상태값 관련 리드온리 에러가 뜨지 않았다. 왜그럴까? 에 대한 질문이었다.

 

나 : "newTodo 변수의 주소값이 변하지가 않아서 렌더링이 발생하지 않기 때문입니다.... (쭈글)"

 

내 답에 대한 자신이 없어서 조심스럽게 말했지만 다행히 정답이었다... 휴~

push는 배열 자체의 메모리 주소를 변경하지 않고 기존 배열에 추가.
...(spread)는 배열이나 객체의 모든 요소를 새로운 배열 및 객체로 복사. 기존 배열이 아닌 새로운 배열 참조(주소값 다름)

 

이 부분은 나중에 포스팅에 따로 정리해두겠다!

 

그리고 수업 끝나고 첫 자바인액션 스터디 진행!

자바 언어 공부.. 열심히 해야지...

 

ContextAPI와 useReducer 관련한 포스팅은 따로 정리하여 적어두었다.

🔗 학습 일지 링크

[React] Context API 개념 및 사용 방법 정리

 

[React] useReducer에 대해 알아보자(with useState)

 

2025-01-16-THU

오늘은 일주일마다 마주하는 팀 미니 프로젝트 실습날.

 

이번에는 여태 해왔던 html css js 미니 프로젝트를 리액트로 야무지게 컴포넌트 작업을 해서 만들어보는 실습이었다.

새로 만들어도 되긴 했는데 우리 팀은 기존에 있는거를 바꿔보는 방안을 택했다.

급히 회의하면서 적은 할 일과 프로젝트 구조도..ㅋㅋㅋㅋ

 

저번에 js 하면서 백엔드 했던 사람은 프론트 프론트했던 사람은 백엔드 해봤는데 너무 힘들었어서 이번에는 제일 어려워보이는 게임 화면 컴포넌트 작업은 내가 하기로 했다.

 

스타일링은 기존에 클래스 명으로 만들었던 것을 스타일드 컴포넌트로 옮겨서 어려움은 없었다. 하지만 이 js 파일 안에 있는 모든 로직들을 각각의 컴포넌트로 옮겨 붙이고 연결시키는 작업이 상당히 번거로웠다.

 

최대한 클린코드로 깔끔하게 짜고 싶어서 컴포넌트로 뺄 수 있는 부분은 빼고 통신하는 api 코드도 훅으로 뺄 수 있는건 빼고 파일명 컨벤션도 맞추고 그래도 최대한 깔끔하게 잘 만든 것 같아 만족스러웠다.

북촌손만두 냠

아니ㅋㅋㅋㅋㅋㅋ 5명인데 음식 하나 더 시켜서 칼국수 하나 아깝게 거의 못먹고 남기고 왔다 흑

사실 더 먹을 수 있었는데 참았다.

mz샷 못참지

 

🍜 띵~호와 깃허브 레포

GitHub - woorifisa-service-dev-4th/frontend-1st-dding-ho-wa: 🎒띵~호와 레포지토리입니다. 💼

 

2025-01-17-FRI

오전에는 리액트 미니 프로젝트 발표를 했다. 강사님께서 우리 게임 1등한 사람은 커피를 사주겠다고 하셨는데 다른 교육생 분들 역시 개발자 아니랄까봐 로컬스토리지에 저장되어있는 것을 확인하고 값을 바꿔서 제출한 똑똑이분들이 몇몇 계셔서^^ 바로 팀원들이랑 해당 로직을 수정했다. QA가 필요한 이유...

 

강사님께서 오늘 써프라이즈로 스벅을...... 우리 반에............... 선사하셨다...............

감사합니다감사합니다감사합니다. 올해 제일 맛있는 커피였습니다.

서비스 반의 광기

히히 교육생분들이랑 홍콩반점 먹고 스벅 찰캌

 

오늘은 웹 서버 nginx 정적 호스팅 실습을 진행했다.

리눅스 서버 수업 이후로 CLI 리눅스 명령어를 오랜만에 하루 종일 만지작 거리니.. 어려우면서도 재밌었다.

 

그리고 프로젝트로 진행했던 띵호와 프로젝트를 직접 nginx로 배포해보는 실습도 했다.

1. nginx/만들어둔 nginx 실습용 폴더/프로젝트 폴더(깃 클론해서 받기)
2. 프로젝트 폴더에서 npm i, npm run build
3. vi nginx.conf에서 server root 경로를 nginx 내 클론받은 프로젝트 내 dist 폴더로 설정(/opt/homebrew/etc/nginx/nginx-test/frontend-1st-dding-ho-wa)
4. localhost:80으로 들어가면 성공!

+++ iterm이랑 vscode 연동하는 법.. 도 알았는데 이거 진짜 좋다... 
많은 도움을 주신 승준님께 감사의 말씀을.............🙇🏻‍♀️

 

끝나고 네트워크 스터디를 했는데 승한오빠가 진짜.... 야무지게 진행해서 내 차례 때 어떻게 할 지 식은땀 벌써 뻘뻘 흘렸다.

열심히 읽어야지...

🔗 학습 일지 링크

[nginx] 웹 서버 nginx 정적 호스팅 해보기 (MAC)

 

3주차 회고 끝!