COMMIT.chat
View Bookmarks
react 썸네일react

2024-09-19

목차

  1. 출근과 연휴 이야기
  2. 브라우저 개발자 도구 설정: Preserve log
  3. 소셜 로그인과 본인 인증 (카카오톡 CI 관련)
  4. SwiftUI vs React 바인딩 및 멀티스레드 개념 토론
  5. 모달(Modal)과 모달리스(Modaless)의 차이와 활용 사례
  6. PHP와 JavaScript, React 개발 경험 공유
  7. React Native에서 드래그앤드롭 트리 UI 관련 질문과 라이브러리 정보
  8. 개발 생산성, 함수형 프로그래밍 및 순수 함수 개념 정리
  9. 개발자 일상과 연애, 커뮤니케이션 이야기
  10. 기타 소소한 개발 팁 및 링크 공유

1. 출근과 연휴 이야기

  • 연휴 후 출근하면서 야근과 출근 스트레스에 대한 토론이 오감.
  • ‘인간의 3대 거짓말’: "이번엔 공부해야지", "이번엔 살 빼야지", "이번엔 퇴사해야지"가 유머처럼 공유됨.
  • 출근 시간과 재택근무 의향, 업무 집중 등이 언급됨.

2. 브라우저 개발자 도구 설정: Preserve log

  • 기본적으로 새로고침 시 콘솔 로그가 사라지지만, 설정에서 "Preserve log"를 활성화하면 로그가 유지됨.
  • 여러 브라우저와 창에서 설정이 동기화되어 우연히 활성화되기도 함.
  • 오류 추적 시 필수적이라 추천하는 설정임.

3. 소셜 로그인과 본인 인증 (카카오톡 CI 관련)

  • 카카오 소셜 로그인으로부터 CI(Continuous Integration 아닌, 주민등록번호 대체 인증값) 코드를 얻을 수 있음.
  • CI는 본인 인증 정보지만, 결제 등 중요 작업 시 추가 본인 확인 절차가 필요할 수 있음.
  • CI 토큰과 액세스 토큰은 다르며, 소셜 로그인만으로 완전한 본인 확인이 어려움.

4. SwiftUI vs React 바인딩 및 멀티스레드 개념 토론

핵심 개념

  • SwiftUI 양방향 바인딩:
    UI 요소와 데이터 모델이 서로 직접 연결되어 변경 시 양방향으로 자동 동기화됨.
    멀티스레드 때문이 아니라 상태 관리의 편리성 및 개발 생산성을 위해 설계됨.

  • React 단방향 데이터 흐름:
    데이터는 부모에서 자식 컴포넌트로만 흐름, 변경은 명령적으로 함.
    이는 상태 변화의 예측 가능성과 추적성 향상을 위한 결정.

  • 멀티스레드와 UI 갱신:
    React는 기본적으로 싱글 스레드(브라우저 메인 스레드)상에서 동작함.
    백그라운드 연산용 Web Worker 사용 가능하지만, DOM접근은 불가해 UI 갱신에는 제한적임.

  • OOP와 함수형 프로그래밍 차이:
    SwiftUI는 양방향 바인딩과 선언형 UI, React는 함수형 프로그래밍 성격의 선언적 UI를 지향.
    순수 함수형 컴포넌트를 추구하지만 실제 컴포넌트는 사이드 이펙트를 갖고 있음.

의견 공유

  • 양방향 바인딩은 UI 불일치 가능성이 있음(특히 깊숙한 상태관리 시 무한루프 가능성).
  • React에서는 상태관리 및 화면 업데이트 구조가 양방향 바인딩에 적합하지 못해 단방향 흐름을 택함.
  • 함수형 프로그래밍의 개념과 React의 컴포넌트가 완전히 순수 함수가 아니라는 점 이해 필요.
  • 개발 생산성은 친숙함과 익숙함에 큰 영향을 받음.

추가 설명: 순수 함수란?

  • 입력값이 같으면 항상 같은 출력값을 반환하며, 외부 상태 변경이나 부수 효과가 없는 함수.
  • 함수형 프로그래밍은 불변성, 고차 함수, 일급 함수 등의 특징도 포함.

5. 모달(Modal)과 모달리스(Modaless)의 차이와 활용 사례

정의

  • Modal:
    다이얼로그가 화면 중앙에 뜨며, 모달 창 외부는 잠기고 상호작용이 불가능.
    주로 사용자의 주의를 집중시켜야 하는 중요한 작업이나 입력 시 사용.

  • Modaless:
    모달과 반대, 다이얼로그가 열려 있어도 다른 화면과 상호작용 가능.
    툴팁, 토스트 메시지 같이 정보 표시용에 적합.

활용 예시

  • Modal: 로그인 창, 중요한 경고 메시지, 결제 입력 창, 이용 약관 동의 등.
  • Modaless: 상세 정보 팝업, 간단한 알림 토스트 메시지, 툴팁 등.

6. PHP와 JavaScript, React 개발 경험 공유

  • PHP의 문자열 연결 연산자(.)가 불편하다는 평과 JSX 패턴과의 유사성 언급.
  • PHP는 타입 약식 비교(==)가 까다롭고 혼란을 준다는 경험 공유.
  • React Native, React Hooks 사용을 통한 상태 관리 경험과 라이브러리 예시.
  • 함수형 컴포넌트는 완전한 순수 함수는 아니지만 부수 효과를 분리해 관리하는 점 강조.
  • 최신 PHP 버전의 타입 선언 지원 및 Hack 언어 등 페이스북의 HHVM 관련 정보도 언급.

7. React Native에서 드래그앤드롭 트리 UI 관련 질문과 라이브러리 정보

  • 윈도우 탐색기 스타일 드래그앤드롭 가능한 트리 UI 구현 문의.
  • 추천 라이브러리:
    • react-native-tree-view: 기본 트리, 드래그앤드롭 직접 구현 필요.
    • react-native-draggable-flatlist: 리스트 드래그앤드롭 지원.
    • react-native-dnd-tree: 드래그앤드롭 가능 트리 구조 제공.
    • react-native-sortable-list 등 다양한 선택지.
  • 다만, React DOM 의존성으로 인해 완벽한 React Native 지원 라이브러리는 제한적.
  • 모바일에선 복잡한 UI 대신 단순화된 인터랙션 선호, 기획과 디자인 단계에서 결정하는 것이 바람직함.

8. 개발 생산성, 함수형 프로그래밍 및 순수 함수 개념 정리

  • 함수형 프로그래밍이 모든 상황에 적합하지는 않음.
  • React Hooks에서 부수 효과를 useEffect로 분리해 다루는 방식은 함수형 패러다임 내의 실제적용 사례.
  • 함수형 컴포넌트 ≠ 순수 함수지만, 가능한 한 상태와 부수 효과를 깔끔하게 분리하는 것을 권장.
  • 불변성 유지 및 예측 가능한 상태 관리가 유지보수와 디버깅에 도움.
  • 언어와 프레임워크에 따라 함수형 프로그래밍 채택 정도와 방식은 다양함.

9. 개발자 일상과 연애, 커뮤니케이션 이야기

  • 소개팅 전 카톡 내용과 만남에서의 대화량 관련 경험 공유.
  • 카톡 너무 많이 하면 만나서 대화가 없는 현상, 적당한 대화 유지가 중요하다는 의견.
  • GPT 활용 연애 질문 리스트 준비 사례와 성공담 공유.
  • 인간관계와 감정 문제로 번지며 유쾌한 분위기로 마무리됨.

10. 기타 소소한 개발 팁 및 링크 공유

  • 비트 연산자를 활용한 빠른 정수 변환 팁 (| 0 사용법 등).
  • PHP에서 Math.floor 대체 트릭 소개.
  • Angular 공식 문서 초기 오류 경험과 CSS 선택자 활용법 추천 링크.
  • 대규모 프로젝트 참여 및 청년 취업 부트캠프 모집 공고 공유.

면접팁⚡

  • 순수 함수와 함수형 프로그래밍 정의를 명확히 할 것
    면접에서 "순수 함수란 무엇인가요?" 질문 시, 입력에 대해 항상 같은 출력과 부수 효과가 없음을 명확히 설명해야 함.

  • React의 데이터 흐름 구조 설명 준비
    React는 단방향 데이터 바인딩을 사용하는 이유에 대해 상태 관리 예측성과 디버깅 편리성 관점에서 답변 준비.

  • SwiftUI와 React 바인딩 차이점 이해
    각각 양방향/단방향 바인딩의 장단점과 멀티스레드 환경과의 관계를 구분해 설명 가능해야 좋은 인상.

  • 모달과 모달리스의 차이를 알고 있음
    UI/UX 면접 질문 시, 모달과 모달리스 사용처 및 효과를 구분해 설명할 수 있으면 플러스 요인.

  • 소셜 로그인 시 보안과 인증 절차 인지
    카카오톡 등 소셜 로그인 API 활용 시 CI 이해와 추가 인증 절차 필요성 인지 여부는 실무 질문 대비에 도움이 됨.

링크🔗

#개발자대화#React#SwiftUI#모달#PHP#함수형프로그래밍#ReactNative#드래그앤드롭#소셜로그인#개발생산성
이전 포스트

2024-09-18

2024년 9월 18일
다음 포스트

2024-09-20

2024년 9월 20일