Portfolio

4월 28일

민재

재관

질문에 대한 답변을 길게 하지 않아도 된다는 말을 들어서 의견이 궁금함.

react 장점?: Vdom 이야기도 했으면 좋았을듯.

props: 흠..

props drilling: children 이해 못했음.

export default vs export: 여러 라인? 이해 못했음.

천욱

React의 강점 -

React 라이프 사이클

mount → update → unmount!

mount에 대한 설명은 좋았어요!

함수형에서는 useEffect로 라이프사이클이 돌아하는것도 잘 숙지하고 있는 것 같은데 update할 때 의존성 배열을 이용해서 한다까지 설명해주면 좋을것 같습니다!

this -

가상돔 - 음……음…

setState 이전 값 콜백으로 해준다는 설명 좋았어요!

props

인자라는 단어가 맞나?? 그냥 프로퍼티라고 해도 될거같은데!

props drilling 해결 방법 children?? - 내가 몰라서 물어봄. 나도 공부좀 해봐야겠다

export, export default 차이점

설명이 맞긴한데 뭔가 고급진 설명으로 뭐라할수있나??

재관

민재

spa: 설명 좋았음

장단: 이것두 좋았음
SEO 관련질문
DOM 조작이 빈번해서 성능 저하 가능성있음.

라이프사이클:

클래스:

virtual DOM: shadow DOM

클컴 함컴: 오 그런거였어?

프롭스 드릴링: 깔끔하네

setState로 변경하는 이유:

플래그

리액트 상태의 불변성:

컨텍스트 api: 좋다 리렌더링이 일어난다! 로 깔끔하게 말해도 될듯!

key: 설명

재관

천욱

SPA -

SEO 해결법 - SSR 말고 다른 방법이 있을까? react snap? SSG?

라이프사이클, 메서드 - 어떤 단계에는 어떤 메소드 이런식으로 설명해주시면 더 좋을것같아여

가상돔 -

클래스 함수형 차이점들

클래스

this.state의 데이터 불변성 굿

함수형

setState - 왜 리액트가 state에 직접 접근한걸 감지를 못할까? - 굿

react hooks - 클로저 언급한거 좋은것같습니돠

key props - 배열 index를 key로 사용하는걸 지양해야하는 이유도 숙지하시면 좋을것같아요!

천욱

민재

CSR, SSR:

CSR 장 단점:
next

Recoil: 내가 생각할때 단점은 전역이 굳이 필요하지 않다면 도입하지 않아도 될것같다.

useRef: DOM을 조작할때 사용하는 예 좋았는데 하나더 설명하자면.. (리렌더링 방지)

클래스. 함수: 컴포넌트 상속,

JSX: 객체로서 리턴된다는게 핵심일듯!

컴포넌트가 재렌더링 될때:

key props:

재관

CSR, SSR 장/단: SSR로 받아오고 CSR로 동작하믄 안되나유?: next?

useRef: 값 변동 일어나도 리랜더 트리거 안댐.

props vs state:

컴포넌트 언제 재랜더링됨?

1,2,3,4,5 가 찍히게 해봐요


// let, const 사용금지
for(var i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000);
}

5월 2일

민재

지영

key props를 사용하는 이유: -

index 지양해야하는 이유: 그냥 배열의 삽입, 수정 등으로 index가 변경될 수 있다 라고 간단하게 말해주면 좋을듯!
Math.random
본인이 생각하는 가장 좋은 방법: 백엔드에서 제공하는 id값을 사용한다 는 어때요?(그냥 궁금함)

shuldComponentUpdate: 답변x (나도 몰루..ㅎ)

라이프 사이클: 오 에러도 포함되는구나? /마운트, 업데이트는 componentdid 인듯?!

props Drilling: 굳

해결방법: 상태관리 라이브러리

사용경험?: -

컴포넌트의 별칭 사용하기: -

export default도 as로 사용하나? : 답변x/ 그냥 바로 바꿔도 됐던 것 같기두..?

jsx 최상위로 하나의 태그가 존재해야하는 이유: -

전역상태관리 redux vs recoil: -

recoil의 단점: - (리덕스와 비교했을 때 단점이 있다면 말해줘도 좋으려나? /그냥궁금증)

자식컴포넌트에서 부모컴포넌트로 데이터 전달: 굳

jsx란?: 아까 설명해줬던 jsx가 객체다! 라는 걸 포함해줘도 좋을듯?

useReducer란?: -

많이 차분해졌네요 굳!!!

천욱

key props - 배열 index 사용하면 안되는이유 간단하게 설명해줘도 좋을듯!

shouldComponentUpdate - update단계에서 실행되는 메서드로 props또는 state를 변경했을 때 리렌더링을 할지 여부를 지정하는 메서드


class Example extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 이전값과 현재값이 같으면 리랜더링을 하지 않습니다.
    return nextProps.value !== this.props.value
  }
}

라이프사이클 - componentWillUnmounted..?ㅋㅋ

컴포넌트 이름 변경 - export default는 안되지..않나….? (뇌피셜)

return 부모요소 하나여야하는이유 - 대답했었나?ㅋㅋㅋ못들음 → 가상돔이 컴포넌트 변화를 감지할때 효율적으로 비교할 수 있도록 하나의 DOM트리 구조로 이루어져야한다는 규칙때문이라고함.

재관

key props: BE에서 받은 id 값을 사용할 수 있다면 해당 값을 사용하는 것이 좋다고 하여서 물어봐씀.

export default는 as 없이 그냥 써도됨.

export, import { ~ } as ~
export default, import ~ From ~~

single root element가 필요한이유?

재관

지영

css in js 리액트에서 사용 경험/장단점: -

어떤 라이브러리 사용?: chakra ui 사용 (styled component 나 emotion에 대해 설명하는 줄 알았음!!)

메모이제이션: -

react 장단점: 굳

virtual dom을 사용하지 않는다고 했는데 해당 개념에 대해?: 굳

제어 컴포넌트 vs 비제어 컴포넌트: 굳

제일 좋았던 라이브러리/이유: 리액트쿼리, 굳

csr vs ssr: 굳

ssr을 사용하면 좋은 경우: 좋네여

seo를 고려할 때 사용했던 방법: next 사용 굳 좋네여

엘리먼트와 컴포넌트 차이: -

useRef: -

천욱

차크라 CSS in JS인가욥?

메모이제이션, useMemo, useCallback - 난 되게 복잡하게 생각했는데 간단하게 잘 설명해준것같아염

제어컴포, 비제어컴포 -

csr, ssr -

민재

초반에는 차크라 말안해줘서 인라인을 설명하는 줄 알았음ㅋㅋ 장점 단점은 좋았음

메모이제이션

장점 단점 좋았음

좋았음 그냥 그단어만 쓰기 싫어하는거 같더라

컨트롤, 언컨트롤

리액트쿼리 좋아요~

CSR, SSR -

SEO - 넥스트 head 같은걸 기대하긴했음..ㅎㅎ

렌더링이 일어나도 값이 변하진 않지만 그래도 상태값이 변해도 리렌더링이 발생하지 않는다라고 설명하는게 더 깔끔할것 같아요!

천욱

지영

렌더링 성능 향상을 위한 방법: 무한스크롤

무한스크롤 어떻게 구현?: 라이브러리 사용 / 경험 얘기해준 게 좋네요

가장 인상깊었던 라이브러리?: 리코일 /리코일 장점을 언급해준 게 좋네요

전역 상태관리가 필요했던 이유?: 굳

props drilling에서 상태관리 라이브러리를 사용하는 기준: 2depth

라이브러리(리코일) 사용하면서 불편했던 점: 좋네여 / 느꼈던 불편함을 개선한 경험이 있다면 말해도 좋을듯!

useRef: 설명이 조금만 더 다듬어지면 좋을듯! 사용예시 좋았어용

useRef를 초기값을 null로 지정하는 이유?: 답변x

key Props 사용 이유: index 안되는 이유도 같이 설명해주는 거 좋네요

index 사용 시 state에 영향을 줄 수 있다고 했는데 state에 어떤 영향?: 답변x

컴포넌트 안에서 for문 대신 사용할 수 있는 방법?: -

css in js 사용 경험/장단점:

메모이제이션 사용방법: -

useMemo. useCallback: 설명 조금만 추가되면 좋을 것 같네요! useCallback 은 함수의 참조값을 유지한다~ 같은 거!
react.memo와 useMemo 차이점: 답변x memo는 컴포넌트의 props 변경 여부에 따른 메모이제이션/useMemo는 컴포넌트 내에서 데이터 메모이제이션

react 18에서 추가된 기능: 오호라

민재

자기 경험으로 설명한점 좋았음

오.. 리코일 단점 좋네

useRef - 예시드는 것좋았음! 근데 재관이랑 비슷하게 값이 변해도 리렌더링이 안일어나는값이라고 말하는게 더 정답에 가까울듯!

그래도 확실히 여러번하니까 좋아지는거같아ㅋㅋㅋ

key state에 영향을 끼치는거 이거 나도 설명잘하고싶은데

prop에 따른 스타일 변경 이야기하는거 좋았음, 용량보다는 한파일안에 작성하다보니 지저분해보인다가 더 좋을듯!

memo 나도 잘몰라서 물어보긴함.. 일단 컴포넌트 자체를 메모이제이션하는 것이라고 알고있음.

재관

리코일: 쓰는기준? 단점? [ 컴포넌트 구조화를 어떻게 잘 해야하죠? | 그래서 그 문제는 해결 하지 못했었나요? ]

React18 신기능?

지영

민재

이벤트: 버튼을 예로 든것은 좋았어용~

이벤트 버블링:

리액트 라이프사이클:

함수형 컴포넌트:

useEffect: 무한루프 이야기 좋아, 역쉬.. 잘말해

useEffect 컴포넌트가 사라질때만이라기 보다는 언마운트가 필요할때라고 말하는게 더 좋은 답변일듯

버츄얼돔:

쉐도우돔:

ref: 설명 간결하고 좋았어요~

천욱

이벤트 버블링을 막는다 → e.preventDefault로 막아본적 없으려나? 아 stopPropagation 뭐시기인듯

라이프사이클

의존성 배열 여러개 값이 바뀔때 → 바뀔때마다 렌더링되지 않나? (뇌피셜)

hooks 나온 이유 -

state값 바꾸면 안되는이유 - state가 객체로 이루어져 있다 → 실제 돔이기 때문에 참조값을 바꾸면 가상돔이 모르기 때문에 업데이트가 안된다. 이거 맞나??

재관

버블링: 아 막아봤어야 했는데….아쉽네….ㅋㅎ

useEffect: cleanUP 함수 동작조건, deps가 여러 개인데 모두다 변화할때. (사실 이것도 변화 하는 시점을 어떻게 질문해야할지 모르게쓰음. 질문할 떄 단어를 어떻게 골라야하나? render 기준)

랜더링: 랜더링이 뭐임?

5월 3일

민재

지영

cross browsing: -

모든 브라우저가 동일한 화면?: -
100% 완벽하게 동일해야 하나?: -

다르게 표기되는 이유: -

react hook form 도입 이유: 굳 /useState 과용도 언급해두 좋을듯!

라이브러리를 활용하지 않고 비제어 컴포넌트로 관리하는 방법: 답변x /-> ref로 사용하면 되려나?
유효성 검사: 굳

왜 유효성 검사를 위한 yup을 추가로 사용했는지?: 굳

stack vs queue: -

queue 사용 경험: -
자바스크립트에서는 어떻게 사용?: -
왜 성능이 안좋은지?: -
왜 자바스크립트는 배열 메모리를 미리 선언하지 않아도 동작할 수 있는가?: -

- axios 사용 이유: 굳

key props 사용 이유: 굳

tanstack query: 굳

재관

크로스 브라우징

브라우저 엔진차이, OS도 영향이 있는걸로 알고있긴함유

hook form 안쓰고 비제어 컴포넌트로 만들면안댐?

axios? :

2. Axios를 많이 쓰던데 그동안 왜 많이 썼을까? (그리고 이젠 왜 안써도 된다 하는 것일까?)fetch 함수는 장점이 많았지만 그동안 browser 에서만 지원이 되었기 때문에 다른 환경에서는 사용할 수 없거나 node-fetch, isomorphic-fetch와 같은 라이브러리들을 사용했었어요.그에 비해 Axios는 XHL 기반으로 되어있어서 모든 환경에서 동작했고, fetch에서만 제공하는 기능들을 모두 구현해 두었기 때문에 API 관련해서 사용하기 쉬운 장점이 존재했구요!하지만, Node.js v18 부터 fetch를 지원하기 시작하면서 별도의 라이브러리 없이 Browsers, Node.js, Bun, Cloudflare Workers 등 다양한 환경에서 유니버설 하게 사용가능해 졌어요!그러면서 점점 axios의 장점은 희미해지고 대체가 가능해진 것에 반해, 단점은 더욱 도드라지게 보여지게 되었어요.

axios의 단점: axios는 fetch의 기능을 따로 구현했기 때문에 번들 사이즈도 크고 퍼포먼스에서도 비효율이 존재해요.

그렇기에 fetch나 fetch base 라이브러리도 고려해보시면 좋을 것 같아요. 개인적으로는 ky 라이브러리를 사용해 보았는데 괜찮더라구요!지금도 axios는 충분히 편리한 라이브러리임은 틀림 없어요. 레퍼런스도 많고 interceptor가 필요한 상황이면 아직까진 axios 외엔 대안이 별로 없더라구요. 하지만 이러한 장단, 특성이 있다는 것을 알고 쓰는 것을 추천드려요!

지영

민재

스토리북: UI 테스트와 엣지케이스를 확인할 수 있다는 부분을 말해주면 좋을것 같아!

단점:

사이드이펙트:

useInsertionEffect: 답x

18버전: x

JSX: 좋아용

리액트쿼리 장점: 기존 보일러 플레이트를 줄일 수 있었다도 들어가면 좋을듯!

단점: 내가 궁금해서 물어봄

리코일 아톰, 셀렉터: 오..

개선된 부분: 오오..

재관

이벤트 핸들러

batching 이 어떻게 달라졌을까요?

jsx ? , 장점, 불편했던거?

usecallback usememo:

prop drilling https://velog.io/@jangws/React-Context가-꼭-필요할까-컴포넌트-합성으로-props-drilling을-극복해보자

재관

지영

axios interceptor: 굳

fetch vs axios: 사용 예시 언급 좋네여

fetch 사용 경험: -
fetch 장점: -

react query 좋았던 점: 사용 경험 굳

단점: 굳
다른 라이브러리 사용 경험?:
기존에는 라이브러리 없이 어떻게 사용?:

리코일 사용 경험: 굳

리코일 선택 이유: 오호

useCallback, useMemo: 좋네요

성능 최적화: -

웹접근성 향상:

웹 접근성 가이드라인: https://github.com/lezhin/accessibility
웹 접근성 향상이 필요한 이유! 체험해볼 수 있음!

[네이버 온라인 장애 체험]

다양한 웹 상황에 공감하여 웹의 문턱을 낮춰주는 웹 접근성 체험

https://nax.naver.com/index

useEffect vs useLayoutEffect: 답변x

리액트에서 돔에 접근할 때 방법:

스토리북 장점: 굳

state 직접 변경 안되는 이유: 굳

민재

axios interceptor: request, response, error 상황에서 전처리가 가능하게 해준다.

axios 장점: 굳

React query:

단점

비동기 통신 처리방법 useEffect 대답을 원하긴했는데

useCallback 좋네용

웹접근성: 알트같은거 언급해도 좋을듯

즉석 질문했는데 답변잘해줬음

스토리북 굳 문서화로 다른 도메인들과 협업하기 좋다도 말하면 좋을듯!

불변성…

REACT

4월 28일

5월 2일

5월 3일