코드스테이츠_S2_회고

윤뿔소·2022년 10월 19일
0

CodeStates

목록 보기
27/47

CSR과 SSR의 차이점에 대해서 설명해주세요.

  • 한마디 정리
    SSR과 CSR은 렌더링이 어디에 일어나냐의 방식 차이로 SSR은 서버에서, CSR은 파일을 받아 클라이언트에서 렌더링됩니다.

  • 면접관이 물어볼 것들?

    • 자세한 차이점
      차이점을 자세히 말하자면 SSR은 요청받은 페이지마다 서버에서 렌더링해오기에 첫 로딩은 빠릅니다. 하지만 요청받으면 첫 페이지를 렌더링하던 그 과정 그대로를 반복하기에 서버 부하가 커지고 EX에 부정적인 영향을 주는 단점이 있습니다.
      CSR은 처음부터 JS파일을 받아와 클라이언트에서 렌더링하기에 요청받을 페이지들이 미리 렌더링돼 다수의 요청을 처리하는데 SSR과 다르게 로딩이 길지 않아 EX에 장점을 가지고 있지만 파일들이 클 경우 첫 로딩이 길고, 각 페이지에 HTML파일이 따로 없다보니 meta데이터가 SSR보다 부족해 웹 크롤링에 그만큼 노출이 안되는 단점이 있습니다.
      (요즘 크롤러들은 JS로 실행시킬 수 있기에 많이 줄아듦)
    • 예시
      SSR은 각 페이지를 나눠 렌더링하니 네트워크가 느릴 때나 웹 앱의 상호작용이 없을 때, 메인 스크립트가 매우 커 로딩이 느릴 때와 페이지마다 검색 엔진 노출이 중요한 웹이면 SSR을 쓰는 게 낫습니다.
      CSR은 첫 로딩이 긴 편이라 네트워크가 좋을 때, 웹 앱과 상호작용이 많을 때, 메인 스크립트가 가벼울 때 좋습니다. (또한 데이터의 양이 많을 시 로딩을 띄울 수 있어 이럴땐 CSR을 사용하는게 좋음)

SSR은 서버 사이드 렌더링으로 서버에서 렌더링이 끝마친 상태로 클라이언트에 전달되는 렌더링 방식이고
CSR은 클라이언트 사이드 렌더링으로 서버에 요청한 뒤 JS와 HTML 파일을 받아 클라이언트에서 렌더링되는 방식이다.

나머지

  • JavaScript
    • Promise의 기능과 필요한 이유에 대해서 설명해주세요.
    • 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.
  • React
    • React의 state와 props에 대해서 설명해주세요.
    • React 컴포넌트의 key 속성에 대해서 설명해주세요.
    • useEffect의 dependency array에 대해서 설명해주세요.
      + JS 프로미스와 리액트를 잘 모른다,,
  • HTTP/네트워크
    • CSR과 SSR의 차이점에 대해서 설명해주세요.
    • GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요.
  • 웹서버 기초
    • HTTP 메세지 구조에 대해 설명해주세요.
    • Same-Origin Policy와 CORS에 대해서 설명해주세요.

꼬리질문
함수형 컴포넌트 vs 클래스 컴포넌트
State와 Props가 같이 쓰이는가? 있다면 어떤 경험?
최근에 프로미스를 사용한 경험, 어떻게 사용했는지?
유즈이펙트의 훅에 대해서 알려주실 수 잇나요?
자바스크립트의 참조타입에 대해 설명해주실 수 있나요?
1. 함수형, 클래스형

클래스형 컴포넌트:
state, lifeCycle 관련 기능사용이 가능하다. 메모리 자원을 함수형 컴포넌트보다 조금 더 사용된다. 임의 메서드를 정의할 수 있다.

함수형 컴포넌트:
state, lifeCycle 관련 기능사용이 불가능하다. 최근 Hook을 통해 이 문제가 해결되었다.메모리 자원을 클래스형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다.

  1. fetch, 프로미스 관계

fetch를 한 후에 날아오는 response 객체는 모든 header가 도착하자마자 우리에게 주어진다(body는 안 온 상태)
그렇기 때문에 현재 자바스크립트는 해당 body 값을 '기다리고 있는 상태'인 Promise 객체를 반환하는 것이다.
중간에 기다려서 Promise 객체가 다 끝난 상태를 받고 싶지만 그건 불가능하다.
애초에 Promise를 바로 리턴해버리기 때문에 .then으로 chaining하여 실행해야한다(이게 싫으면 async/await 사용).

  1. 원시자료형,참조자료형

원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담긴다.
=> number, string, undefined, null, boolean, symbol
참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.
=> 배열, 객체, 함수 등

알게된 것

진짜 나 모른다? 엄청 알게됨,, 특히 리액트에서 그냥 사용법만 알고 설명을 못한다. 그니까 모른다는 거임,, 그래서 모르는 것을 잘 알아야한다
⭐️평소에 내가 좋아하는 방식인 가르쳐주는, 강의식으로 단어를 설명하자! 나는 말하는 거, 가르쳐주는 식의 방식이 좋으니까 면접을 보는 게 아닌 강의식으로 얘기하는 연습을 하자

참고 자료

Interview_Question_for_Beginner
Must-Know-About-Frontend(프엔 기초 지식)
채용 사이트, 정보
코드스테이츠 폴더에 fe-section2-technical_interview-trial-reference 파일 보자!

회고 : 배울 게 너무 많아

섹션2에선 JS의 깊은 얘기, 리액트 사용법과 기본적인 CS지식을 배웠다. 진짜 힘들긴 한데 재밌기도 하고? 근데 또 힘들어서 초심을 벌써 잃어버릴 뻔도 하고 그렇다.
더더욱 몰입하려고 노력해야겠다. 그간 느꼈던 재미가 느껴지지 않는다면 다른 방식을 추구해 재미를 얻어보기도 하자.

Section 2 회고

1. 목표 회고

나는 섹션 1에서도 그렇고 내 목표는 재미다. 지큼까지 그래왔고? 앞에로도 계속크

하지만 내 원동력이 됐던, 나의 증기 기관에 넣을 재미의 땔감이 점점 부족해지고 있는 것도 사실이다.

왜냐면 프론트엔드에 재미를 느꼈지만 결국 계속 파고들고 공부하다보면 CS 지식, 서버에 관련된 기본적인 백엔드 지식을 습득하며 되게 힘들었다. 눈에 보이지 않는데 오류가 뜨고, 전혀 익숙치 않은 지식을 습득하기엔 많이 힘들긴 하니까.

이렇게 지식을 습득하며 깨달은 것이 있었다. 내가 하고싶은 것만 공부하면 안된다. 편식이란 건 영양 균형을 깨지게 만들테니. 달삼쓰뱉은 나의 성장에 독이 된다. 좀 더 파고들면서도 기본적인 소양은 지키도록 노력했다.

또 그렇다고 개발의 재미를 놓은 건 아니다. 실제로 리액트를 배우면서 DOM으로 하던 것을 컴포넌트로 만들며 쉽게 배치되고 만들었던 것이 너무 재밌었다. 이래서 프레임워크를 짜는 구나 싶었다.

그래서 더더욱 리액트로 만들어보는 실습을 하고싶었고, 때마침 코스에서도 DOM으로 만든 것을 리액트로 리팩토링하라는 과제도 선택할 수 있어서 꼭 해봐야겠다 생각했다. 물론 말이 리팩이지 npx로 새거를 만드는 것과 다름 없지만서도 내 의지를 불태울 정도였다.

2. 유지 / 습관

Good

  1. 명상 : 요즘 집에 혼자 틀어박혀있는 시간이 많아 플스하거나 아니면 유튜브를 보는데 또다른 방식의 휴식이 필요하다고 판단되어 일주일에 한번 머리를 진짜 말그대로 비우는 명상을 해보았다. 말이 명상이지 멍때리는 거긴 한데 ㅋㅋㅋ, 뇌과학에 관련된 책을 봤는데 뇌는 의식적으로 활동할 땐 활동하는데 그 활동을 그만두면 무의식이 바통을 이어받아 일을 한다고 하더라. 그래서 창의력이든 암기력이든 휴식을 거쳐 무의식에게 역할을 맡겨주는 과정이 필요하다고 기술했다. 그런데 그 휴식이 인스타 피드를 보는, 롤을 하는 그런 휴식이 아니라 멍을 때리는 비우는 휴식과 다른 형태로 ‘몰입’하는 휴식이 있다. 그런 휴식을 만들려고 노력했다. 그래서 머리를 비우는 휴식을 하려고 한강도 가고 등산도 하고 그러고 있다.
  2. 복습, 기록 : 저번 회고에서 복습, 기록을 Good으로 지정했는데 지금도 유지 중이긴 하다.

Bad

  1. 복습, 기록 : Good에서 한다고 하긴 했지만 좀 그날그날 바로 해야하는데 좀 미뤄버리는 불상사가 있었다. 아무래도 편식을 하는 과정에서 생긴 해프닝이었달까.. 다시 마음을 고쳐먹고 섹션3 때는 바로바로 하도록 노력하겠다.
  2. 섹션 2에서 운동 부족, 글쓰기 실력을 썼었는데 이건 계속 안되긴 한다. 운동은 그래도 주 3회로 늘리긴 했는데 더이상하면 공부에 지장이 생길 거 같아 균형을 맞추도록 노력 중이다.(핑계아니다.) 글쓰기는 포기 상태. 내 코가 석잔데 필기하는데 예쁘게 쓸 수 없다! 그냥 더 자세하게 기록하려고 노력하고 있다.

3. 결론 : 시도할 것들

  1. 섹션1 보다 열정과 노력이 좀 떨어진 느낌이 든다.
    1. 오늘, 주말 할 것들을 좀 더 자세하게 메모하여 퀘스트를 깨는 형식으로 바꿔보자
    2. Habitica 앱이란게 있다. 이게 요물인게 실제로 내가 퀘스트를 내고 깨는 방식으로 게임처럼 만든 앱이다. 이거 해봐야겠다.
  2. 휴식 방식
    1. 머리를 비우기, 명상, 멍 때리기
    2. 게임을 하더라도 몰입하여 게임해 다른 방식의 휴식을 채워주기
    3. 행복하기
  3. 운동 부족
    1. 명상을 위해 산책하기 - 장군봉
    2. 헬스를 안가더라도 하루에 30분은 걷기(이건 잘하고 있음)
profile
코뿔소처럼 저돌적으로

0개의 댓글