2024-05-01

목차

1. JavaScript 구조분해할당과 변수 할당 차이
2. React Context Provider 사용 이유와 효과
3. 프론트엔드 토스트 및 Overlay 컴포넌트 개발 경험 공유
4. 디자인 시스템 오픈소스화 현황 및 국내외 차이
5. 프론트엔드 실무 & 이직 관련 경험 및 코딩 테스트 팁
6. Next.js 사용 여부와 SSR(Server Side Rendering)의 필요성
7. SNS 소셜 로그인과 이메일 발송 API 개발 입문 가이드
8. 프론트엔드 백엔드 언어 추천과 공부 방법
9. GraphQL 오류 “No resolver for operationName” 해결 방안
10. 블록체인(Layer 2) 관련 공유 및 기술 소개

1. JavaScript 구조분해할당과 변수 할당 차이

• 핵심 : const count = response 와 const {count} = response 는 상황에 따라 전혀 다른 결과를 낸다.
• 설명 :
  • const count = response 는 response 전체 객체를 count 변수에 할당한다.
  • const {count} = response 는 객체의 count 프로퍼티 값을 변수 count에 바로 할당하는 구조분해할당 문법이다.
• 주의점 :
  • 만약 response가 객체가 아니거나, count라는 프로퍼티가 없는 경우 구조분해할당은 에러가 나거나 값이 할당되지 않는다.
  • 구조분해할당은 객체 안에 특정 값을 "추출"하는 기능이며, 반환 값이 그냥 상수일 경우 사용할 수 없다.

2. React Context Provider 사용 이유와 효과

• 핵심 : Context Provider가 감싸주지 않으면, 해당 Context 값을 참조하는 컴포넌트는 정상 동작하지 않을 수 있다.
• 설명 :
  • React Context는 Provider를 통해서 Context 값을 하위 컴포넌트에 전달한다.
  • Provider가 없으면 useContext 훅으로 참조하는 countContext 등의 값은 기본값을 받거나 undefined가 되어 실행이 안될 가능성이 높다.
• 결론 : 같은 Context라도 Provider가 감싸주는 범위 내에서만 정상적으로 값이 연동된다.

3. 프론트엔드 토스트 및 Overlay 컴포넌트 개발 경험 공유

• 토스트 알림 컴포넌트를 직접 제작 중이며, 기존 Notification v1을 대체하는 작업을 수행 중.
• useToast와 같은 훅(Hook) 제작에 대한 고민과 구현 경험 공유.
• Overlay 컴포넌트 구현 시 setTimeout으로 DOM에서 요소를 "날리는(제거하는)" 부분이 어려운 포인트로 언급됨.
• 개선 사항과 오픈소스 공개를 위한 준비 과정에 대해 서로 의견 교환.

4. 디자인 시스템 오픈소스화 현황 및 국내외 차이

• 디자인 시스템을 오픈 소스화 하는 사례가 국내보다 외국 회사에서 훨씬 활발함.
• 국내는 주로 회사 내부용으로만 개발하는 경우가 많고, 디자이너와 협업에 따른 현실적인 어려움 공유.
• 일부는 외부 UI 라이브러리를 래핑하여 사용하는 경우도 많음.
• 디자인 시스템 구축에 대한 팀원 수, 현실적인 여력 부족 문제도 언급.

5. 프론트엔드 실무 & 이직 관련 경험 및 코딩 테스트 팁

• 경력 1~3년차 개발자 이직 시 코딩 테스트(코테)의 필요성에 대해 의견 공유.
• 보통 중견 이상 기업에서는 코테 요구가 많고, 중소는 덜한 편.
• 코테 난이도를 프로그래머스 레벨로 평가하면서 기본 알고리즘력(레벨 2~3) 이상은 갖추는 게 좋다는 조언.
• 코테 공부만 집중하기보다는 실무와 병행하는 방안이 권장됨.

6. Next.js 사용 여부와 SSR(Server Side Rendering)의 필요성

• Next.js는 반드시 사용해야 하는 프레임워크가 아니며 상황에 따라 선택해야 함.
• SSR이 필요하지 않다면 단순 React 사용이 비용 효율적이다.
• 디자인 시스템과 타입스크립트를 함께 사용하는 경우가 많음.
• Next.js는 풀스택 개발에 적합하고, 내부 API와 DB를 한 곳에 포함하여 편리함 제공.
• 프론트엔드 입문자는 Next.js의 러닝커브가 Nuxt.js(뷰 프레임워크)와 비슷하다고 언급됨.

7. SNS 소셜 로그인과 이메일 발송 API 개발 입문 가이드

• 소셜 로그인 :
  • 구글/네이버/카카오 등 소셜 로그인은 각 업체에서 제공하는 API를 연동하여 구현.
  • 직접 로그인 기능을 완전히 만드는 것보다, 제공된 OAuth나 OpenID Connect API를 활용하는 것이 일반적.
  • 로그인 정보는 각 소셜 업체가 관리하므로 개발자가 직접 비밀번호 관리 필요 없음.
• 이메일 발송 :
  • Node.js 백엔드에서 nodemailer 같은 모듈을 활용해 SMTP 서버와 연동하여 이메일 발송 기능 구현 가능.
• 보안 우려 :
  • 보통 소셜 로그인한 정보를 악의적으로 탈취하는 문제는 해당 로그인 구현의 보안 수준(https, 토큰 관리 등)에 달려있으며, 잘 관리하면 큰 걱정 없음.
• 학습 팁 :
  • 백엔드 기술에 익숙하지 않다면 Node.js + Express 추천.
  • 구글 로그인 등 구현 시 OAuth 2.0 프로토콜 이해가 도움됨.

8. 프론트엔드 백엔드 언어 추천과 공부 방법

• 백엔드 입문 시 JavaScript/Node.js + Express 조합이 친숙하고 비교적 배우기 쉬움.
• AI 관련 전공자라면 파이썬 추천 (특히 데이터 처리, 머신러닝 목적).
• 백엔드에서 이메일 발송, 인증 토큰 처리, API 설계 공부가 중요.
• 지나치게 기술 스택을 늘리기보다 기본을 탄탄히 하는 것이 효율적.

9. GraphQL 오류 “No resolver for operationName” 해결 방안

• 이 에러는 호출한 쿼리나 뮤테이션 명과 일치하는 리졸버(resolver)가 서버에 없을 때 발생.
• 클라이언트 쪽 쿼리 이름 혹은 서버 쿼리 스키마에 오타나 누락된 부분 체크 필요.
• 서버 셋업이나 네트워크 이슈 가능성도 점검하는 것이 좋음.

10. 블록체인(Layer 2) 관련 공유 및 기술 소개

• 블록체인 네트워크의 Layer 2(L2)는 메인 네트워크(L1) 위에서 처리 속도를 높이고 비용을 줄이기 위한 별도의 처리 계층.
• L2를 이해하는 입문자가 참고할 수 있는 블로그 글 공유.
• 관련 기술로 네트워크 허브, 스위치와 같은 인프라 요소가 논의됨.

면접팁⚡

• 코딩 테스트 난이도는 프로그래머스 기준 레벨 2~3 수준 준비 추천.
• 구조분해할당 등 기본 자바스크립트 문법과 동작 원리 숙지 필수.
• React Context API에서 Provider의 역할을 명확히 이해하고 설명할 수 있어야 함.
• SNS 로그인 구현 관련 기본 OAuth 2.0 개념 이해 및 보안 이슈도 숙지 필요.
• GraphQL 사용 시 Resolver 설정과 쿼리 이름 일치 여부 체크 중요.

링크🔗

• Vue 공식 사이트
• React 공식 사이트
• Node.js 이메일 발송 관련 블로그
• 블록체인 L2 관련 블로그 1
• 블록체인 L2 관련 블로그 2 (후속편)