[5회차] 스터디

[ayoung-iya]

매회 차마다 "[n 회차] Study"라는 제목으로 디스커션이 올라오면 아래 템플릿으로 면접관의 입장에서 댓글 달아주시면 됩니다.

QnA를 작성하실 때는 면접관 역할에서 본인이 했던 질문과 지원자의 답변 내용을 작성하면 됩니다.
답변 내용을 전부 받아 적기 힘들면 키워드 위주로 작성해 주셔도 됩니다.
기술 질문은 예상 답변도 작성해 주시면 감사드립니다.

## 역할
면접관 - 
지원자 - 

## QnA
### Q. 

A. 

[ayoung-iya]

역할

면접관 - 윤아영
지원자 - 김민영

Q. 1분 자기소개

• 협업 개발 소통 중요성, 개발 문제를 효율적으로 관리, 쉬운 코드, 새로운 기술을 빠르게 적용

q. 새롭게 기술을 배울 때 어떻게 하는가?

• 관련 코드를 찾아보기, 강의 참조하되 의존하지 않는다.

Q. 효율적인 커뮤니케이션과 역할 분담의 중요성을 깊이 이해하게 되었다고 하였는데, 그렇게 하기 위한 방법이 어떤 것이 있을지?

• 개발 진행 사항 공유, 스케쥴링 언급, 일정관리

Q. 갈등 상황이 있었나요?

• 갈등까지는 아니고 상대방을 많이 생각해서 재촉할만한 상황, 화를 낼 수 있는 상황이 발생했을 때 말을 못하는 분위기에서
• 먼저 객관적인 사실 언급, 그러면 다른 팀원들도 자유롭게 이야기를 한다.

Q. 상품 리뷰 기능을 구현할때 사용자 흐름을 어떻게 간소화 하였는가?

• 필수 요소를 다 작성하기 전까지는 버튼 비활성화
• 리뷰 작성한 것을 볼때 오름차순 정렬, 별점과 텍스트가 멀어져있으면 직관적으로 보이지 않아 디자이너분과 상의후 수평으로 조율

처음에 모달로 작성이 되어 있었는데 수정되었다고 말해도 좋을 거 같아요. 간소화했다고 하면 이전과 비교해서 어떻게 간소화되었는지 궁금할 거 같아요

Q. 소켓을 활용한 실시간 공동구매 리스트 업데이트 기능 구현에서 어떻게 데이터 일관성을 유지하였는가?

• 실시간 데이터 주고받을 때 문제가 발생할 수 있다.
• 예) 클라이언트 서버 연결이 끊겼을 때 그 사이 생긴 데이터가 있을 때
• 소켓 IO를 활용 자동으로 재연결 데이터 손실 방지

Q. 실패한 경험 있다면 소개해주세요.

• 실패했던 경험, 실시간 데이터통신 공동구매 기능, 시작으로 열리게 되면 24시간 한정적으로 넣으려고 하면 타이머설정
• 벡엔드에서 시간상 불가, 우선순위에서 밀림

실패한 경험과 함께 극복한 이야기 혹은 앞으로 같은 실패가 일어나지 않기 위해 보안하고자 하는 뒷이야기를 나올 수 있도록 이야기해봐도 좋을 거 같아요.

Q. 호이스팅에 대해서 설명해주세요.

• 자바스크립트 변수선언 함수선언이 최상위로 끌어올려지는 것
• 어디에 변수를 사용할 수 있다.

q. let, const 에러가 발생하는데?

• let, const 호이스팅은 되는데 선언전에 일시적 사각지대가 존재

어디에서나 변수를 사용할 수 있다는 말은 조심해야할 거 같아요

Q. 클로저에 대해서 설명해주세요.

• 자바스크립트내, 함수가 선언된 환경을 기억, 외부 변수에 접근할 수 있다.
• 실행된 이후에도 처음에 정의된 환경을 기억하고 있기 때문에 같이 있었던 변수에 접근할 수 있습니다.
• 클로저 데이터 보호, 은닉

중첩 함수가 외부 함수보다 더 오래 유지되는 경우를 추가해도 좋을 거 같아요

Q. 리액트의 장점이 무엇이라고 생각하나요?

• 컴포넌트 기반 개발, 독립적 재사용가능, 유지보수성, 복잡한 ui관리
• 가상돔을 사용하고 있어서 보도 효율적으로 업데이트 실제돔과 비교하여 바뀐것만 업데이트 한다. 비교적 빠른렌더링
• 개인적인 장점, 커뮤니티 활성화, 자료가 많다.

q. 바닐라로는 컴포넌트기반의 개발할 수 없나?

• 없는 것 같다.
• 되나요??

리액트도 결국 자바스크립트로 구현된 것이니까 가능하지 않을까 생각했습니다~

Q. CSR, SSR에 대해서 설명해주세요

• 브라우저에서 렌더링하는 방식, html, js 클라이언트 js 실행해서 ui 렌더링
• ssr 서버에서 렌더링을 수행하여 완성된 html 전달
• 렌더링 위치
• csr 초기 로딩속도 느리다. ssr 초기 로딩속도가 빠르다.
• seo의 차이

저도 seo 설명할 때 끝마무리가 어렵더라구요. 저는 ssr이 csr보다 seo 측면에서 유리하다라고 표현합니다

Q. 자바스크립트만 사용하는 것과 비교하여 타입스크립트를 사용하는 이유에 대해서 설명해주세요.

• 타입스크립트 코드 작성하면서 컴파일 시점 타입오류를 잡을 수 있다. 런타임 오류를 미리 방지

• 타입 명식, 코드의 의미가 명시적 가독성이 높아지고

• 남이 봤을 때도 코드를 쉽게 이해할 수 있을 거 같다 유지보수성도 향상된다.

• 규모가 큰 개발 유리할 것

• 어떻게 타입오류를 잡을 수 있을까?

• 정적타입시스템 지원, 프로그램의 변수 함수 타입을 미리 알고 있고 비교해서 컴파일러가 코드를 작성을 하면 확인

Q. 리액트의 종속성 배열에 대해서 설명해주세요

• useEffect 리액트 훅에서 사용되는 것
• 모르겠다.

q. useEffect의 의존성배열이 빈배열일 때, 값이 있을 때, 의존성배열이 없을 경우에 대해서 설명해주세요

• useEffect, 빈배열: 처음 렌더링될때 한번만 컴포넌트가 리렌더링, 이후 리렌더링 된다고 해도 재실행되지 않는다
• 값이 있다면 값을 변경될때 렌더링
• 의존성 배열이 없다면 컴포넌트 렌더링할 때마다 실행

Q. 개발자로서 중요하다고 생각하는 능력이 무엇인가? 그부분을 향상시키기 위해 어떤 노력을 하는가?

• 뭘 배우고 왜?라는 질문이 필요하다. 구현이 되었다고 끝이 아니다
• 동작 방식 개선할 때도 이해도가 높아지고
• 한번 배워서 개념 넘기게 되면 나중에 생각했을 때 한 번 듣고 흘리게 되고 머리속에 박혀있지 않다.
• 사소한 질문이라도 꼬리 질문처럼 파고 들어야 내 것이된다.

q. 관련 내용이 있는가?

• 부트 캠프 클론 코딩 진행. 돌아간다하고 마무리 한 적이 있다.
• 마지막 프로젝트 웹소켓을 개발할 때에는, 백엔드와 어떻게 돌아가는지 물어보고 궁금했던 것을 계속 물어봤다.

전체적으로 자신의 경험에 빗대어 잘 설명하였습니다
약간의 당황이 겹쳤을 때 코쓱을 발견했습니다.
화이팅!! 💪💪

[minyoung0503]

역할

면접관 - 김민영
지원자 - 윤아영

QnA

0. 1분 자기소개

A.

• 논리적인 사고와 문제 해결 능력을 키우기 위해 노력하는 개발자
• 최근 프로젝트 리팩토링 과정에서 코드가 의도한 대로 동작하지 않을 때, 새로 만드는 것도 하나의 방법이었지만 문제의 원인을 찾아 해결하는 접근을 선택
• 협업 프로젝트에서는 팀의 원활한 진행을 위해 자신의 역할을 충실히 수행하는 것이 중요하다고 생각하여, 주어진 시간 내에 맡은 페이지와 컴포넌트 개발을 완료하고 추가적인 개선점을 찾거나 다른 팀원들을 도와 전체 목표 달성에 기여

---

1. "기본에 충실하고자 한다"고 하셨는데, 개발 과정에서 기본을 지키기 위해 어떤 노력을 하고 계신가요?

A.

• 최근 리팩토링을 진행하면서 useState나 useEffect를 사용할 때 정말 필요한지에 대해 깊이 고민
• useState: 동일한 항목을 가리키기 위해 두 개의 상태를 사용하는 상황 경계
• useEffect: 불필요하게 상태 업데이트를 위해 사용되는 경우, 공식 문서를 봤을 때 지양해야 한다고 생각

---

2. 적절한 state를 설정하기 위해 고려해야 할 요소는 무엇인가요?

A.

• 상태는 변화하는 것
• 화면에서 변하지 않는 값은 상태로 관리하지 않고, 변하는 것만 상태로 관리
• props나 기존 상태를 통해 계산될 수 있는 값들은 상태로 관리하기보다는 계산된 값으로 관리하는 것이 중요하다고 생각

---

3. 코드에서 부수 효과를 피하기 위해 객체나 배열을 복사해서 사용한다고 했는데, 이에 대한 구체적인 예시를 들어주실 수 있나요?

A.

• 배열을 업데이트할 때 내부 요소를 직접 변경하면 동일한 배열로 인식되기 때문에, 업데이트를 제대로 인지하지 못할 수 있음
• 따라서 배열이나 객체를 업데이트할 때는 새로운 배열이나 객체를 생성해 주소 값이 변경되도록 해야 함

---

4. React와 Next.js를 사용하신다고 하셨는데, 두 차이점은 무엇인가요?

A.

• React는 라이브러리이고, Next.js는 React를 기반으로 하는 프레임워크
• Next.js는 파일 기반 라우팅을 지원하며, 서버 사이드 렌더링(SSR)에 최적화
• React는 클라이언트 사이드 렌더링(CSR)에 더 최적화

---

5. TypeScript와 JavaScript의 차이점 중, 개발 과정에서 느꼈던 각각의 장점은 무엇이 있었나요?

A.

• JavaScript는 동적 타입을 지원하여 비교적 자유롭게 코딩할 수 있다는 장점
  하지만 이로 인해 휴먼 에러가 발생하거나 의도한 대로 동작하지 않아도 컴파일 과정에서 오류를 발견하지 못해 런타임 에러가 발생할 수 있다는 단점
• 이러한 문제를 방지하기 위해 등장한 것이 TypeScript라고 생각
  TypeScript는 정적 타입을 사용함으로써 런타임 에러를 방지

---

6. 로그인 페이지에서의 동작 흐름 개선과 관련된 문제를 어떻게 발견하고 해결하셨나요?

A.

• 기존에는 사용자가 인증되지 않은 상태로 메인 페이지 이외의 페이지에 접근하면 로그인 페이지로 이동하고, 로그인 후에는 다시 메인 페이지로 이동하는 흐름
• 이를 개선하여, 로그인 후 원래 가려던 페이지로 바로 이동하는 것이 사용자 경험에 더 낫다고 판단
• 이를 위해 돌아갈 페이지를 쿼리 스트링에 저장하고, 로그인 후 해당 URL로 이동할 수 있도록 변경

---

7. 백엔드와 프론트엔드 간의 데이터 형식 차이를 다루는 방식에 대해 더 자세히 설명해 주세요.

A.

• 1️⃣: 네이밍 규칙의 차이
  백엔드에서는 스네이크 케이스를, 프론트엔드에서는 카멜 케이스를 주로 사용
  데이터를 받을 때 스네이크 케이스를 그대로 사용하는 경우와 카멜 케이스로 변경해서 사용하는 경우가 혼재하여 코드의 일관성이 떨어진다고 생각
  이를 해결하기 위해, 스네이크 케이스를 카멜 케이스로 변환하는 함수를 정의하여 일관성 유지
• 2️⃣: 백엔드에서 시작 시간이나 마지막 날짜 같은 데이터를 문자열로 전달할 때, 프론트엔드에서는 이를 Date 객체로 변환해 사용해야 했음
  변환 작업을 각 페이지에서 하는 대신, 별도의 함수를 정의하여 변환된 값을 전달하는 방식으로 개선
  이렇게 하면, 나중에 백엔드에서 키 값이나 데이터 형식이 변경되더라도 해당 함수만 수정하면 되므로, 프론트엔드 코드 전체에 큰 영향을 주지 않고 유지보수가 가능하다고 판단

---

8. useEffect의 사용을 줄이기 위해 어떤 방식을 사용하셨나요?

A.

• 가장 큰 변화가 있었던 페이지는 여행 상세 페이지
  스케줄이나 이미지가 변경될 때 useEffect를 사용해 상태를 업데이트
  이벤트 핸들러 내에서 setter 함수를 사용해도 되는 부분이어서 useEffect를 제거
  → 불필요한 리렌더링 한두 번 줄일 수 있었음
• 디바이스 화면을 분할하여 스크롤을 조절하는 기능(데스크탑에서는 좌우 분할, 모바일에서는 상하 분할)
  하나의 컴포넌트로 관리하다 보니 사이즈 변경 시 리렌더링이 발생하는 문제 발견
  이를 해결하기 위해 가로 분할 컴포넌트와 세로 분할 컴포넌트를 분리하여 각각 관리하도록 개선
  → 불필요한 리렌더링 없앨 수 있었음

8-1. 이를 통해 얻은 교훈이나 배운 점은 무엇인가요?

A.

• 컴포넌트를 분리하면서 리렌더링이 줄어든 것도 있지만, 코드가 더 직관적으로 변해 가독성이 좋아짐
• useEffect를 제거함으로써 코드의 길이도 많이 줄었음
• useEffect는 의존성 배열을 확인해 한 번 더 렌더링되는 과정을 거치기 때문에 실행 순서를 예측하기가 더 복잡했는데, 이를 제거하면서 코드 흐름을 읽기에도 더 쉬워짐

---

9. 리팩토링이 필요한 코드인지 아닌지 판단할 때 어떤 기준을 사용하나요?

A.

• 사실 이 프로젝트를 리팩토링했다고 했지만, 프로젝트 완료 후 백엔드에서 대대적인 업데이트가 발생하면서 페이지가 완전히 망가지는 현상 → 이를 해결하기 위해 코드를 수정하는 방법밖에 없었음

프로젝트에 한정지어서 물어본 것이 아니라 아영님이 평소 개발하실 때 리팩토링 기준이 뭔지 궁금해서 여쭤본 질문이여서 위 부분은 말씀 안 해주셔도 될 것 같아요 !!

• 리팩토링의 필요성을 따질 때에는 급한 우선순위를 정하고 성능적으로 개선이 필요한 부분부터 진행하는 것이 맞다고 생각
• 그 외의 부분은 개인의 성장에 따라 부족한 부분이 드러날 것이므로, 그런 필요에 맞춰 리팩토링 진행

---

10. 협업 과정에서 어떤 어려운 점이 있었나요?

A.

• 큰 어려움은 없었던 것 같지만, 소통의 부재에 아쉬운 부분
• 각 팀원들이 프로젝트 이외에도 다른 일을 많이 진행하고 있어서, 코어 타임을 정하긴 했지만 다른 업무가 있는 팀원들은 자유롭게 일을 보고 오다 보니 그들의 진행 상황에 대한 소통이 부족
• 백엔드와 디자이너가 병렬로 진행하다 보니 디자인이 완료되어야 프로젝트를 시작할 수 있다는 생각이 들어, 백엔드가 완료되어야만 작업을 시작할 수 있다는 느낌 → 이로 인해 일정에 시간적 딜레이

제가 받아적느라 어떻게 해결했는지 못 여쭤봤는데 해결방안도 한 번 생각해보시면 좋을 것 같아요 🙇🏻‍♀️

---

11. 건축학을 전공하셨는데, 어떻게 프론트엔드 개발자로 전향하게 되었나요?

A.

• 건축학과를 졸업한 후 공무원 준비를 하다가 쉬는 시간을 가짐
• 그 기간이 길어지면서 동생이 개발자라는 직군에 대해 이야기해줌
• 개발자라는 직업은 실제로 사용하는 애플리케이션이 어떻게 만들어지고 작동하는지 알아가는 과정이라고 생각해 흥미를 느낌
• 프론트엔드는 실제 소비자와 더 밀접하게 연관되어 있다고 생각했고, 그 소비자가 바로 나일 수도 있다는 점에서 더 가깝게 접근할 수 있겠다는 생각이 들어 개발을 시작

---

12. 건축학에서 배운 것이 개발자로서의 업무에 도움이 된 적이 있나요?

A.

• 사실 실질적인 도움은 잘 모르겠지만, 건축을 공부할 때 프로그램으로 개발을 진행하는 과정이 흥미롭게 느껴짐
• 프론트엔드 개발을 하면서도 JavaScript나 TypeScript를 활용해 프로그램을 개발하는 것에 대해 흥미를 느끼고 있음

---

13. 프론트엔드 개발자로서 가장 즐거웠던 경험은 무엇인가요?

A.

• 하나의 작업이 완성되었을 때 눈에 보이는 결과
• 컴포넌트나 페이지를 개발할 때 내가 의도한 대로 동작하는 것
• 문제가 발생했을 때 그 원인을 발견하고 해결하는 과정
• 문제를 해결했을 때 완성된 것

---

14. 쿠키, 세션 스토리지, 로컬 스토리지의 차이점을 설명해주세요.

A.

• 로컬 스토리지: 브라우저가 꺼져도 데이터를 기억하는 저장소
• 세션 스토리지: 브라우저가 꺼지면 데이터가 소멸되거나 기한을 지정할 수 있는 저장소
• 쿠키: 주로 보안이 필요한 데이터를 저장하는 데 사용

• 쿠키: 서버와 클라이언트 간에 데이터를 주고받기 위해 사용되며, 요청마다 자동으로 서버로 전송.
  용량 제한(약 5KB)이 있고, HttpOnly와 같은 보안 옵션을 설정해 XSS 공격을 방지할 수 있음.
• 로컬 스토리지: 브라우저에 데이터를 영구적으로 저장하며, 브라우저를 닫아도 데이터가 유지.
  용량이 최대 4~5MB로 넉넉하며, 서버로 자동 전송되지 않음.
• 세션 스토리지: 브라우저에 데이터를 임시로 저장하며, 브라우저를 닫으면 데이터가 사라짐.
  용량은 로컬 스토리지와 비슷하지만, 일시적 데이터 저장에 사용.

---

15. 프로세스와 스레드를 설명해주세요.

A. 프로세스가 머리라면 스레드는 팔

프로세스와 스레드는 컴퓨터에서 작업을 수행하는 기본 단위

프로세스 (Process)

• 정의: 실행 중인 프로그램을 의미. 프로세스는 코드, 데이터, 프로세스 상태, 스택, 힙 등을 포함하여 독립적으로 실행.
• 특징:
  • 각 프로세스는 독립적인 메모리 공간을 가짐.
  • 프로세스 간에는 메모리 공간이 공유되지 않으며, 통신이 필요할 경우 IPC(Inter-Process Communication)를 사용.
  • 프로세스 생성, 종료, 상태 전환 등의 관리가 필요.

스레드 (Thread)

• 정의: 프로세스 내에서 실행되는 더 작은 단위. 하나의 프로세스는 여러 개의 스레드를 가질 수 있으며, 이들은 같은 메모리 공간을 공유.
• 특징:
  • 스레드는 같은 프로세스 내에서 자원을 공유하기 때문에 메모리 사용이 효율적.
  • 스레드 간의 통신이 상대적으로 빠르고 간단.
  • 멀티스레딩을 통해 여러 작업을 동시에 수행할 수 있어 성능 향상.

---

→ 프로세스는 독립적으로 실행되는 프로그램의 인스턴스, 스레드는 프로세스 내에서 실행되는 작업의 단위로, 자원을 공유.

---

16. Box Model에 대해 설명해주세요.

A.

• 콘텐츠 박스와 보더 박스가 있음
• 콘텐츠 박스는 해당 콘텐츠의 사이즈인 width와 height를 설정하는 것
• 보더 박스는 콘텐츠의 사이즈에 padding과 border를 포함한 전체 사이즈를 결정

Box Model: 웹 페이지의 요소가 공간을 차지하는 방식을 설명하는 개념

1. Content: 실제 내용이 들어가는 부분 (텍스트, 이미지 등).
2. Padding: 콘텐츠와 경계(border) 사이의 여백. 요소 내부의 공간을 조정.
3. Border: 요소의 테두리. 패딩과 외부 여백(margin) 사이에 위치.
4. Margin: 요소와 다른 요소 간의 외부 여백. 요소 외부의 공간을 조정.

→ 이 네 가지 요소로 요소의 전체 크기와 배치를 결정

16-1. Box Model이 웹브라우저에서 어떻게 동작하는지 설명해주세요.

A.

• 브라우저는 Content 영역에 요소의 실제 내용을 렌더링.
• Padding 적용으로 콘텐츠와 박스의 테두리 사이에 여백 추가.
• Border 그려져 요소의 경계 형성.
• Margin 적용으로 요소와 다른 요소들 사이의 간격 설정.
• 브라우저는 각 부분을 합산하여 요소의 전체 너비와 높이 계산.
• 계산된 값을 기반으로 페이지의 레이아웃 조정.
• 각 요소가 페이지 내에서 정확하게 위치하고, 적절한 간격과 정렬 유지.

---

17. 웹 페이지의 성능을 고려할 때 HTML 파일에서 <script>태그를 어디에 위치시키는 게 좋을지 설명해 주세요.

A.

• HTML 파일의 가장 하단에 두는 것이 좋다고 생각
• HTML 상단에 위치할 경우, 전체 HTML이 렌더링되기 전에 스크립트가 실행되어 해당 엘리먼트를 찾지 못하는 문제 발생
• 그러나 type="module"을 사용하거나 async 또는 defer 속성을 사용할 경우에는 위치에 큰 상관이 없을 것으로 예상

끝에 <script> 태그를 넣거나, 스크립트에 defer 속성을 추가 → HTML 파싱이 완료된 후에 스크립트가 실행되므로 페이지 로딩 속도와 성능 개선

---

18. 자바스크립트는 싱글스레드인데 비동기코드가 작동 가능한 이유는 뭘까요?

A.

• 자바스크립트는 Web API의 도움을 받아 비동기적인 작업 수행 가능
• 비동기적으로 실행된 자바스크립트에서 콜백 함수는 Web API에 의해 처리되고, 이 작업은 이벤트 큐에 쌓임 → 이벤트루프는 콜 스택과 이벤트 큐를 교차하며 확인 → 콜 스택이 비워지면 이벤트 큐에 있는 작업들이 순차적으로 콜 스택에 쌓여 실행

1. 이벤트 루프: 비동기 작업을 관리하고 콜백을 실행하는 메커니즘.
2. 콜백 큐: 비동기 작업이 완료된 후 실행할 함수를 저장하는 큐.
3. Web API: 브라우저의 기능으로, 비동기 작업(예: AJAX 요청)을 수행할 수 있게 해주는 API.
4. 프로미스: 비동기 작업의 완료를 나타내는 객체로, 결과 값을 다룰 수 있게 해줌.
5. async/await: 비동기 코드를 작성할 때의 문법적 편의성을 제공하는 기능.

→ 이 요소들이 결합되어 자바스크립트는 싱글스레드 환경에서도 비동기 작업을 처리 가능

---

19. 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?

A.

클래스형 컴포넌트와 함수형 컴포넌트는 React에서 UI를 구성하는 두 가지 주요 방법

클래스형 컴포넌트 (Class Components)

• 정의: ES6 클래스 문법을 사용하여 정의된 컴포넌트.
• 구조: class 키워드로 선언하며, render() 메서드를 통해 JSX를 반환.
• 상태 관리: this.state를 사용하여 상태를 관리하고, this.setState()로 상태를 업데이트.
• 생명 주기 메서드: componentDidMount, componentDidUpdate, componentWillUnmount 등 생명 주기 메서드를 통해 컴포넌트의 생명 주기를 관리.

함수형 컴포넌트 (Functional Components)

• 정의: 함수로 정의된 컴포넌트. ES6의 화살표 함수나 일반 함수로 작성 가능.
• 구조: 상태가 필요하지 않으면 간단한 함수로 작성하고, 상태가 필요할 경우 useState와 같은 Hook을 사용.
• 상태 관리: Hooks를 통해 상태와 생명 주기 기능을 사용 가능.
• 명확성과 간결함: 더 간단하고 읽기 쉬운 코드를 작성 가능.

---

→ 클래스형 컴포넌트는 상태 관리와 생명 주기 메서드를 사용하여 복잡한 컴포넌트를 작성할 수 있으며, 함수형 컴포넌트는 더 간단하고 직관적인 방법으로 작성할 수 있으며, Hooks를 통해 상태와 생명 주기 기능을 사용할 수 있다.

---

20. React 라이프 사이클을 설명해 주세요.

A. 마운트 → 상태가 업데이트 되었을 때 업데이트 → DOM에서 사라지게 된다면 언마운트

1. 마운트(Mount): 컴포넌트가 DOM에 처음 추가될 때

• constructor: 컴포넌트 초기화 및 상태 설정.
• componentDidMount: 컴포넌트가 마운트된 후에 호출, API 호출이나 타이머 설정 등에 사용.

2. 업데이트(Update): 컴포넌트의 상태나 props가 변경될 때

• shouldComponentUpdate: 컴포넌트가 업데이트될 필요가 있는지 결정. (성능 최적화)
• render: 컴포넌트의 UI를 렌더링.
• componentDidUpdate: 업데이트가 완료된 후 호출, 이전 props나 상태와 비교하여 후속 작업을 수행.

3. 언마운트(Unmount): 컴포넌트가 DOM에서 제거될 때

• componentWillUnmount: 컴포넌트가 언마운트되기 전에 호출, 타이머 정리나 이벤트 리스너 제거 등에 사용.

---

21. State와 Props의 차이점에 대해 설명해주세요.

A.

• state: 해당 컴포넌트에서 변경되는 상태를 의미
• props: 부모 컴포넌트에서 받는 값, props의 상태는 부모에서 관리

state와 props는 React에서 데이터와 상태를 관리하는 주요 개념

1. State (상태)

• 컴포넌트의 내부 상태를 저장, 컴포넌트가 관리하고 변경할 수 있는 데이터
• setState 메서드 또는 useState의 setter 함수를 사용하여 변경
• 컴포넌트의 동적인 데이터를 처리할 때 사용

2. Props (속성)

• 컴포넌트에 전달되는 읽기 전용 데이터
• 부모 컴포넌트에서 자식 컴포넌트에 전달하며, 자식 컴포넌트는 이 데이터를 읽기만 가능하고 변경은 불가능
• 부모 컴포넌트가 Props 값을 변경하면 자식 컴포넌트에 전달된 값이 자동으로 업데이트
• 컴포넌트에 데이터와 콜백 함수를 전달할 때 사용

21-1. state를 직접 변경하지 않고 setState를 사용하는 이유를 설명해주세요.

A.

• 상태를 보호하기 위해
• 임의로 다른 곳에서 상태 값을 변경할 수 없게 되어 정보 보호

• 상태 관리의 일관성: setState를 통해 상태 변경을 React가 추적할 수 있어, UI가 예상대로 업데이트. 직접 상태를 변경하면 가상 DOM과 실제 DOM의 동기화가 깨질 수 있음.
• 비동기적 업데이트: setState는 비동기적으로 작동하여 여러 상태 업데이트를 배치 처리할 수 있어 성능 최적화.
• 이전 상태에 대한 의존성: setState는 이전 상태를 기반으로 새로운 상태를 설정할 수 있게 해주어, 상태 변경을 더 안전하게 관리.
• 렌더링 최적화: setState를 호출하면 React가 필요한 부분만 리렌더링하므로 성능 향상.

---

💡피드백

• 아영님 말씀하시는 톤이 너무 좋아요 ,, 차분하게 하나하나 설명해주시는 게 너무 듣기 좋았어요 🥹🥹
• 기술 관련 질문으로 들어갈 때 확연히 다르게 목소리가 작아지고 눈을 이리저리 굴리시는 모습을 발견했어요 ! 간단한 답변이라도 자신있게 말해주시면 좋을 것 같아요 !!
• 아영님의 갱신된 이력서 기다리고 있겠습니다 고생하셨어요 🙇🏻‍♀️