COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-08

목차

  1. JavaScript 변수 선언과 TDZ(Temporal Dead Zone)
  2. React에서 변수 선언법 및 상태관리
  3. Flutter와 React 하이브리드 웹뷰 이슈
  4. 퇴사와 이직 경험 공유
  5. 신입 및 경력 개발자의 포트폴리오와 이력서 작성 팁
  6. 웹 개발 중 CSS 스타일 복사 및 활용 방법
  7. React Native와 바텀시트 컴포넌트 추천 및 개발 환경
  8. 재귀 호출을 이용한 API 데이터 페칭 패턴 공유
  9. 개발자 커뮤니티에서 공유된 블로그/링크드인 활용기
  10. 기타: 커피 이야기, 야구 및 일상 잡담

Z #React #Flutter #웹뷰 #이직 #경력관리 #CSS #ReactNative #커뮤니티

1. JavaScript 변수 선언과 TDZ(Temporal Dead Zone) ⚠️

  • 핵심: let과 const로 선언한 변수는 TDZ 때문에 선언 전에 접근하면 에러가 난다.
  • TDZ란?
    TDZ(Temporal Dead Zone)는 변수 선언(선언문 실행) 이전의 시점으로, let이나 const 변수에 접근하면 참조 에러가 발생하는 구간임.
  • 기존 var와 차이
    var 변수는 호이스팅 되어 선언과 초기화가 동시에 이루어져, 선언 전에도 undefined 값을 가지며 접근 가능해 예기치 않은 버그가 생기기 쉽다.
  • TDZ가 왜 필요?
    let과 const 변수들의 안전성을 보장하고 의도하지 않은 변수 사용을 방지하기 위해 도입되었음.
  • const vs let
    • const: 변경 불가능한, 재할당할 수 없는 변수 선언에 사용.
    • let: 값이 변할 수 있는 경우 사용.
  • 의견
    TDZ 개념이 처음에는 혼란스럽지만, 자바스크립트의 문법 안정성을 위해 꼭 필요한 개념임.

2. React에서 변수 선언법 및 상태관리

  • React 컴포넌트에서 상태 변수 관리 시 보통 const 사용 권장.
  • useState 훅으로 받은 상태와 설정 함수는 배열 구조 분해 할당을 이용해 const [state, setState] 형태로 선언함.
  • 상태값은 직접 변경하지 않고, 상태 변경 함수(setState)를 통해 변경해야 React의 상태 관리가 올바르게 작동함.
  • 대부분의 경우 불변성을 유지하며 const를 주로 쓰고, 변경이 필요하면 let을 사용하나 React에서는 let 사용 빈도가 낮음.

3. Flutter + React 하이브리드 웹뷰에서 iOS 리사이징 이슈 🐛

  • Flutter와 React를 동시에 사용하는 하이브리드 앱에서 iOS에서 인풋 박스 포커스 시 화면이 이상하게 리사이징되는 현상 보고됨.
  • 요점
    iOS는 폰트 크기가 16px 미만일 경우 인풋 필드에 포커스 시 자동으로 확대하는 기능이 있는데, 이것이 의도치 않은 레이아웃 깨짐을 일으킴.
  • 해결책
    인풋 폰트 크기를 16px 이상으로 설정하여 iOS의 확대 동작을 막음.
  • 공식 이슈: Flutter 17.2 버전부터 발생하는 문제로 알려져 있음.
  • 참고: Flutter GitHub 이슈
  • Android는 이 문제가 없으며 iOS 특유의 동작임.

4. 퇴사와 이직 경험 공유 ✈️

  • 일감 부족으로 "물경력"(일이 별로 없어 실제 경험치가 부족한 상태)이 되는 경우의 고민
  • 사이드 프로젝트나 공부를 통해 역량 관리 해야 함.
  • 퇴사 전 회사 상황이 나빠지는 순서 (재정문제 → 인력 감축 → 신규 요청 처리 불가 → 롤백) 사례 공유
  • 이직 준비 시 코드 리뷰 문화나 클린 아키텍처 도입, 테스트(Jest) 등 회사 제안 및 기술 스펙업도 도움됨
  • 퇴사 후 재충전 및 이력서, 포트폴리오 정리 중요.
  • 이직 준비: 오픈된 프로필, 블로그 관리, 링크드인 활용 등이 효과적임.

5. 신입 및 경력 개발자의 포트폴리오와 이력서 작성 팁 📄

  • 경력기술서는 이력서와 별도로 준비하는 게 좋으며, 최근에는 노션 링크를 첨부하는 경우도 많음.
  • 포트폴리오는 실제 프로젝트 경험 및 작성한 코드를 중심으로 정리하는 게 효과적.
  • 신입이나 경험이 적을 경우에도 커뮤니티 활동, 작은 프로젝트 경험 등을 잘 정리해서 어필해야 함.
  • 면접이나 커뮤니케이션 시 실제 코드를 이해하고 설명하는 능력 중요.
  • 퍼블리셔 채용 시에는 마크업 이해도, 웹 표준 준수 여부, UX/접근성 감각 등이 면접 포인트임.

6. 웹 개발 중 CSS 활용과 개발자 도구 사용법 🎨

  • 유명 사이트의 CSS를 참고할 때, 개발자 도구의 Styles 패널에서 개별 스타일 속성이 복잡하게 중첩되어 보여 어려움 발생
  • 보통 필요한 부분만 패턴으로 이해하고, 반복 경험을 통해 속성 의미를 익히며 필요한 스타일을 참고하는 방식을 사용.
  • 컴퓨터 탭에서 계산된 스타일을 확인하여 필요한 값만 재현하는 게 효율적.
  • 개발은 레고 블록 조립하듯 점차 익숙해지는 과정임을 인지하는 게 좋음.

7. React Native 바텀시트 컴포넌트 및 개발 환경 추천 🛠️

  • 네이티브 모바일 앱에서 흔히 쓰이는 바텀시트 (Bottom Sheet) UI 컴포넌트는 몇 가지 인기있는 라이브러리가 있음:
  • 바텀시트는 자주 쓰이지만 만들어 쓰기 귀찮고 성능 최적화 고민 필요.
  • Flutter와 RN의 장단점 및 팀 내 의견 분분하지만, 토스의 RN 도입 사례가 참고됨(Toss Tech RN 관련 글)
  • 팀과 프로젝트 성격에 맞게 기술 도입 여부 결정 필요.

8. 재귀 호출을 이용한 API 데이터 페칭 경험 공유 🔄

  • API에서 큰 데이터를 페이징해서 가져오려고 재귀 호출 방식을 사용하는 사례가 있음.
  • 종료 조건을 두고 더 이상 호출할 데이터가 없으면 재귀 종료 후, 받아온 데이터들을 합쳐서 최종 응답 생성.
  • DynamoDB 같은 NoSQL DB에서는 쿼리 설계 미숙 시 이런 방식으로 빠르게 구현하는 경우도 있음.
  • 재귀 호출은 명확한 종료 조건과 데이터 통합 로직이 핵심임.

9. 개발자 커뮤니티에서 공유된 블로그/링크드인 활용기 📢

  • 링크드인과 블로그(벨로그, 미디엄 등)를 통해 개발 프로필과 글을 공개하면 이직 제안 수신에 도움이 됨.
  • 고양이 사진 같은 친근한 콘텐츠도 사람들의 관심을 모으는 요소임.
  • 미디엄은 글 퀄리티 기준이 높아 진입장벽 존재, 벨로그는 가볍게 시작하기 좋음.
  • 직접 블로그 만들거나 노션에 정리하는 개발자도 많음.
  • 지속적이고 꾸준한 콘텐츠 생산이 중요한 점 강조.

10. 기타 잡담 및 소소한 이야기 ☕

  • 커피(에스프레소, 커피우유) 관련 각자의 경험과 카페인 섭취 주의
  • 야구팀 팬덤, 시즌 이야기, 일상 잡담 다수
  • 개발 중 겪는 즐거움과 어려움, 유머 섞인 대화 풍성

면접팁⚡

  • 퍼블리셔 채용 시 테스트 항목
    • HTML/CSS 기본 태그 및 스타일 구현 능력
    • 웹 표준과 접근성(Accessibility) 이해도
    • 피그마, 제플린 등 디자인 시안 해석 및 반영 경험
  • 경력 개발자는 경력기술서 또는 포트폴리오에서 실제 프로젝트 기여도와 역할 명확히 하기
  • 코드 리뷰 문화와 테스트 도입 경험 언급 시 긍정적 인상
  • Git 히스토리 이해 여부와 이슈트래킹 시스템 경험도 질문 가능
  • 재귀 함수, API 데이터 페칭 경험이 있다면 간략한 로직 설명 준비

링크🔗

#JavaScript#TDZ#React#Flutter#웹뷰#이직#경력관리#CSS#ReactNative#커뮤니티
이전 포스트

2024-04-07

2024년 4월 7일
다음 포스트

2024-04-09

2024년 4월 9일