코드스테이츠 10주차 -[배포] 클라이언트 빌드와 배포 / HA2 회고

엄혜진·2021년 8월 21일
0

CodeStates

목록 보기
10/15
post-thumbnail

벌써 두 번째 HA가 끝났다. 긴장을 안 하긴 했어도 과제형 전날에는 나름대로 걱정을 조금 하면서 잤다. 코플릿형이 너무 쉬웠고 변별력이 없었기에 “React가 많이 어려우면 어떡하지?”, “평가 기준이 절대 평가이기 때문에 다 맞아야 통과되는 것은 아닐까?”라는 생각에 이상한 걱정을 하다가 잠들었었다. 코플릿형은 지금까지 열심히 공부했고, 여태 풀었던 문제들을 잘 이해하고 숙지했다면 누구나 풀 수 있었던 난이도였다. 과제형은 약간의 까다로운 부분이 있었다고 해야 할까나? 변수명을 다르게 작성하면 테스트가 절대 통과되지 않고, 실행이 잘 작동된다고 하더라도 테스트에 부합하지 않는다면 절대 통과되지 않았다. 하지만 이것은 스프린트를 풀 때 부터 알고 있었기에 딱히 놀랍지는 않다. 종합적으로 보면 열심히 공부했다면 난이도가 그렇게 어렵게 느껴지지는 않았던 시험이었다. client와 server로 나눠져 있는데 내가 좋아하는 server가 무척 쉽게 나왔다. 이게 끝인가?🧐 싶을 정도로 금방 풀었다.
이번 시험을 풀면서 export default와 act와 setTimeout를 어떻게 잘 사용하면 오류를 해결할 수 있을지 확실하게 깨닫게 되었다. 테스트는 통과가 되었지만, 오류가 나는 부분들을 해결하는 데 시간이 더 오래 걸렸다.
Section2에서 가장 도움을 많이 받았던 부분은 단언컨대 스터디였다. 코드스테이츠가 지향하는 부분은 스스로 공부, 구글링을 통한 해결 능력 향상과 같은 혼자서 이 험난한 코딩 세계를 헤쳐나가야 하는 부분이 많다. 레퍼런스를 보아도 이해하기 어려운 코드들이 더러 있는데 스터디원들과 함께 끝까지 풀어보고 코드를 다시 간결하게 줄이면서 확실하게 알고리즘적인 사고가 많이 향상된 것 같다😊 내가 아는 부분을 다른 사람에게 설명하면서 내가 어떤 부분이 취약한지 알 수 있고, 부담 없이 서로의 지식을 공유하니 한층 성장하는 느낌이다. 으쌰으쌰하면서 조금 힘들거나 놀고 싶을 때도 약간 각성하게 되는 그런 효과도 있다. 다른 분들에게도 꼭 스터디를 하라고 추천하고 싶다. 다만 잘 맞는 사람들과 이뤄져야겠지만😮
Section3에 가기 전에 React에 조금 더 깊게 알게 되었던 시간이었다. 내 목표였던 ‘기수 이동 없이 한 번에 수료하기’가 실현될 수 있을 것 같은 그런 자신감이 생겼다. 이제 백앤드에 해서 공부하게 되는데 걱정은 되지만 재밌을 것 같아서 기대도 된다. 이번 주말에는 푹 쉬고 다시 한 달 동안 미친 듯이 달려봐야겠다.


10주차 배운 내용 중 정리하고 싶은 내용

[배포] 클라이언트 빌드와 배포


  • 정적 웹사이트 : HTML 파일(코드) 자체로 배포되는 사이트 (CSR, Client Side Rendering)
  • 동적 웹사이트 : 서버에 의해 HTML 파일이 동적으로 생성되는 사이트 (SSR, Server Side Rendering)
AJAX 이전에는 요청에 따라 결과가 변하는 동적인 웹페이지를 만들기 위해서는 서버가 매번 동적으로 생성해야함 
   => 서버가 HTML의 형태로 브라우저에 제공해줘야함 
   => 헤더나 푸터 등의 페이지 구성요소의 중복 요청/응답이 빈번
   
   ∴ 네트워크 상에서 주고받는 패킷의 크기가 큼
   
   
   
<동적 웹페이지 예제 - node.js>
      
  const http = require('http');

  const server = http.createServer((req, res) => {
    res.setHeader('Content-Type', 'text/html'); // HTML 문서의 형태로 전달됨
    res.end('<h1>동적 웹페이지</h1><p>with 랜덤한 값</p>' + Math.random()); // 서버에 의해서 동적으로 바뀜
  });

  server.listen(3000);AJAX기술이 보편화 되면서 Single Page Application으로 변모
    => 클라이언트 사이드의 규모↑, 단일 파일로 자바스크립트나 페이지를 만드는 작업은 보다 고도화
    => 고도화된 클라이언트 웹 앱은 수많은 모듈로 이뤄짐. 수많은 모듈을 하나로 묶어주는 작업을 번들링(bundling)

    ∴ 과정을 통칭하여 "소프트웨어 빌드"라고  (소스코드를 실행 가능한 결과물로 변환하는 작업)
   

  • 주요 빌드 툴

<React 프로젝트 생성 툴>

Create React App => react-scripts 모듈 사용
Next.js => next 모듈 사용



<빌드 툴>

webpack => 모듈 번들러
babel => TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로 바꿔주는 컴파일러
ESLint => 자바스크립트 Code convention 및 문법 검사기
Sass, less => CSS Preprocessor
                                           


                                    [ webpack 및 다른 빌드 툴이 하나의 파일로 번들링하는 과정 ]



[HA2] React


  • 오류 해결 방법

"Warning: An update to App inside a test was not wrapped in act(...)." 
    "When testing, code that causes React state updates should be wrapped into act(...)":

비동기적 컴포넌트가 비동기 API를 호출하는 경우이기에 에러메세지가 발생 

=> waitFor라는 비동기 유틸리티 사용, Fake Timer를 이용하여 오류 방지, act로 감싸주기 등의 방법으로 에러 방지 가능

  useEffect(() => {
    api()
    .then(el => {
      setTimeout(() => {
        "Hi, Hello!"
      }, 10)
  })}, [])

*위와 같은 방식으로 에러메세지 해결*
  
  
  
  
export function api () => import { api } from './api'
export default function api () => import api from './api'

0개의 댓글