COMMIT.chat
View Bookmarks
react 썸네일react

2024-03-21

목차

  1. Java Enum의 메서드 및 정적(static) 활용
  2. API 요청 흐름 제어: React 훅 내 분기 처리
  3. 'static' 키워드 의미와 활용
  4. Promise 체이닝과 API 호출 순차 처리 방법
  5. Flexbox로 비율 조절하기
  6. Git 및 PR 운영 문화 현황
  7. 특수문자와 URL 인코딩 문제
  8. NestJS와 전역 네임스페이스 사용 관점
  9. 개발자 연봉 및 채용 이야기
  10. 환경설정 파일 공유 및 관리 방법

1. Java Enum의 메서드 및 정적(static) 활용

  • Java Enum은 단순 열거형 이상의 기능을 제공함.
  • Enum 내부에서 메서드, 필드, 생성자, 그리고 정적 멤버(static)도 선언 가능함.
  • 'static'은 클래스 레벨에서 공유되는 멤버로, 메서드나 변수에 사용되며 인스턴스 생성 없이 접근 가능.
  • Java는 C#과 다르게 enum 내 정적 멤버를 지원하며, 의외로 많이 활용 가능한 부분임.
  • 초보자도 이해할 수 있게 enum의 기본 개념부터 메서드, 생성자, static 키워드의 차이를 짚어볼 필요 있음.

2. API 요청 흐름 제어: React 훅 내 분기 처리

  • 'useExample' 훅에서 A 요청이 실패하면 B, C 요청을 순차적으로 호출해야 하는 상황에 대한 고민 다룸.
  • 방법 1: A 요청 성공 여부를 state로 관리하고 useEffect에서 해당 상태를 감지해 요청 분기 처리.
  • 방법 2: 하나의 함수 안에서 A 요청 결과에 따라 B, C 요청을 순차적으로 실행.
  • 다수의 API 호출이 순서와 성공/실패 여부에 따라 연쇄적으로 수행되어야 할 때는 Promise 체이닝이나 async/await 활용하는 것을 추천.
  • Promise.race는 가장 빠른 완료만 처리하므로, 모든 요청을 다 처리해야 하는 상황엔 부적절함.
  • 익숙하지 않은 경우 Promise 배열을 만들어 reduce로 체이닝하거나, 재귀적으로 호출하는 방법, catch 핸들러에서 다음 요청 호출하는 패턴도 있음.

3. 'static' 키워드 의미와 활용

  • 'static'은 클래스 인스턴스와 무관하게 클래스 자체에 소속된 멤버를 의미.
  • JavaScript, Java, C# 등 여러 언어에서 공통으로 사용되지만 구현상의 차이 존재.
  • React 내 static 메서드는 보통 클래스형 컴포넌트에서 사용, 함수형 컴포넌트에서는 직접적으로 사용 안 함.
  • 자바스크립트에서도 class 내 static 메서드가 존재해, 인스턴스 없이 호출 가능하게 함.
  • 개발할 때 static 키워드의 용도와 함께 인스턴스 멤버와 구분해서 적절히 사용하는 방법을 숙지하는 것이 중요.

4. Promise 체이닝과 API 호출 순차 처리 방법

  • 다수 API를 순서에 맞게 호출해야 할 경우 .then()을 이어 붙이는 체이닝 기법 사용.
  • 예: promiseList.reduce((acc, cur) => acc.then(cur), Promise.resolve())로 구현 가능.
  • 재귀 호출로도 순차 처리가 가능하나 체이닝 방식이 가독성에 도움 됨.
  • 실패 처리(catch) 부분에서 다음 요청 호출하는 방법도 유용함.
  • Promise.all은 병렬 호출로 모든 Promise가 완료될 때까지 대기하므로 순차 처리에는 부적합함.
  • API 요청 흐름 제어 시 async/await로 작성하면 가독성이 높아져 초보자도 이해하기 쉬움.

5. Flexbox로 비율 조절하기

  • 브라우저 창의 세로 높이를 비율로 동기화하려면 flexbox 사용이 일반적임.
  • flex-direction: column; 후 각 flex item에 flex-grow 또는 flex 속성으로 비율을 할당함.
  • 예: flex: 0.3 0.4 0.3 => 각각 30%, 40%, 30% 비율로 배치됨.
  • flex-shrink, flex-basis 등 여러 인자를 함께 조정할 수 있으니 필요에 맞게 조합해서 사용.
  • CSS 비율 단위(%, vh, vw)와 상대적인 flex 비율 차이를 이해하는 것이 중요함.

6. Git 및 PR 운영 문화 현황

  • PR(Pull Request) 문화가 없는 회사도 있음. 메인 브랜치에 직접 머지하거나 force merge 하는 사례 존재.
  • 팀장이나 프로젝트 리더가 머지를 담당하는 경우가 많음.
  • 컨플릭트 발생 시 관련 작업자와 협의해 해결하는 절차 권장됨.
  • PR 기반 협업이 아닌 경우 코드 품질 관리, 버전 관리 어려움이 발생할 수 있음.
  • 내부망 환경이나 외주 위주 개발 문화도 영향을 끼침.
  • 이런 현황을 알고 입사 준비나 팀내 협업 방식을 조율하는 것이 필요함.

7. 특수문자와 URL 인코딩 문제

  • URL 파라미터에 특수문자(@, #, %, + 등)가 포함될 경우 서버나 브라우저에서 구분자로 인식해 오류 발생 가능.
  • 이를 해결하려면 클라이언트에서 encodeURIComponent()로 인코딩 후 서버에서 디코딩 처리해야 함.
  • 예: "pw=1234@#&userid=test" → 특수문자를 인코딩 하여 "pw=1234%40%23&userid=test"
  • 쿼리 파라미터 대신 POST 요청의 바디(body)로 전달하면 인코딩 문제 완화 가능.
  • 보안 상 비밀번호를 쿼리 파라미터로 보내는 것은 권장하지 않음.

8. NestJS와 전역 네임스페이스 사용 관점

  • NestJS는 IoC(제어 역전)와 데코레이터를 활용하는 구조지만 전역(global) 변수를 지양하는 추세임.
  • 전역 객체에 서드파티 라이브러리를 무분별하게 할당하는 것은 유지보수 및 타입 관리에 불리할 수 있음.
  • 타입스크립트 환경에서는 전역 네임스페이스 정의를 깔끔하게 처리하는 것이 중요하며, 명확한 의도가 필요함.
  • React에서 영감을 받은 아이디어를 NestJS에서 쓰면서도 상황별로 적합한 관리 방법을 고민해야 함.

9. 개발자 연봉 및 채용 이야기

  • 은행권 FE 채용이 드물고, 보수는 높은 편이라는 의견 공유됨.
  • 평균 연봉 1억 이상도 공공연한 이야기이며, 성과급 잔치 사례도 있음.
  • 재택근무보다는 내부망 사용 환경이나 보안 때문에 어려움이 많다는 점.
  • 금융권은 인맥의 영향이 큰 편이고, 실력만으로 승진이나 채용이 어려울 수 있음.
  • 이직, 장기근속, 퇴직금 등 장기적인 커리어 전략을 고민하는 사례 등장.

10. 환경설정 파일 공유 및 관리 방법

  • API 키, 서버 주소 등 민감 설정 파일은 보통 .env 파일로 관리함.
  • production, dev 환경별로 나누고 local 환경 설정은 공유하지 않는 경우가 많음.
  • .env.example 파일을 만들어 공유하고, 실제 키는 문서로 별도로 안내하거나 보안 스토리지에 저장.
  • 변경 사항이 있으면 서버나 개발환경에 반영하는 자동화 파이프라인이 있으면 이상적이나 케바케임.
  • 구글 드라이브, 사내 파일 스토리지 등 공유 수단 활용도 가능.

면접팁⚡

  • Java Enum의 확장 기능과 static 키워드 사용법을 설명할 수 있도록 준비하자.
  • API 요청을 조건에 따라 분기 처리하는 방법 (Promise 체이닝, async/await) 사례를 설명하면 좋음.
  • Git PR 문화가 없는 조직에서 발생할 수 있는 문제점과 개선 방안에 대한 의견 제시 가능.
  • 특수문자 인코딩 문제를 알고 URL 파라미터와 POST 바디의 차이를 명확히 설명할 수 있으면 도움이 됨.
  • NestJS의 전역 네임스페이스 사용과 IoC 개념 이해도를 보여주자.

링크🔗

#Java#React#API#Promise#Flexbox#Git#NestJS#URL인코딩#개발문화#연봉이야기#환경설정관리
이전 포스트

2024-03-20

2024년 3월 20일
다음 포스트

2024-03-22

2024년 3월 22일