개발자들이 남긴 기록..

리액트 정모 소식과 분위기
React 상태관리: useEffect vs 이벤트 핸들러
React 리스트 렌더링 시 key 사용법
웹 입문 강의 추천과 학습 팁
AWS S3와 웹 호스팅 비용 및 활용
React Native ESBUILD 빌드 문제
웹표준(semantic web standards)의 중요성
카카오톡 오픈채팅 업데이트 소식

1. 리액트 정모 소식과 분위기 🌸

3월 14일(금) 19:00, 강남권 또는 잠실에서 리액트 개발자 모임 4회차 정모 예정
개발자뿐 아니라 여성분들도 자유롭게 참여 가능해 부담 없이 연락 권장
지난 3회차에는 약 14명이 모여 다양한 주제로 이야기 나눔
주로 공부하는 내용이나 개발 이야기, 서로의 경험을 공유하는 시간으로 예정
분위기는 편안하고 유쾌, 회사 이야기나 개인 근황도 자연스럽게 나눈다고 함

2. React 상태관리: useEffect vs 이벤트 핸들러 🕒

휴대폰 인증번호 타이머 구현 관련 질문
핵심: 인증번호 타이머는 이벤트 핸들러에서 직접 처리하는 게 흐름을 파악하기 좋음
useEffect 활용: 보통 서버와 외부 상호작용 시 사용하며, 상태 변경에 따른 부수 효과 관리용
핸들러에 타이머 로직을 넣으면 코드 흐름이 한눈에 들어오고 유지보수가 편리
컴포넌트 언마운트 시 타이머(cleanup)를 반드시 해줘야 메모리 누수를 방지 가능

설명:
React의 useEffect는 컴포넌트의 생명주기 중 특정 시점에 부수 효과(side effects)를 처리하기 위해 씀. 서버 데이터 요청, 타이머 설정/해제 등이 대표적. 이벤트 핸들러는 사용자의 동작을 즉시 처리하는 데 적합하여 타이머 시작 버튼 클릭 등 이벤트에 직접 연결하는 것이 직관적임.

3. React 리스트 렌더링 시 key 사용법 🔑

배열 map으로 컴포넌트를 여러 개 렌더할 때 key 프로퍼티가 필요함
권장: 배열 인덱스 대신 유니크한 ID나 고유 값 사용
인덱스를 key로 사용하면 리렌더링 최적화가 제대로 안 되고, UI 버그 발생 가능
ID가 없는 경우 UUID같은 고유 식별자를 생성하여 key로 할당하는 것이 안전함
React 공식 문서에 관련 내용 잘 정리돼 있으니 참고 권장

설명:
React의 key는 리스트 내 각 아이템을 식별하는 용도로, React가 변경된 부분만 효율적으로 업데이트할 수 있도록 도움. 인덱스 사용 시 아이템 순서 변경 시 문제가 일어날 수 있음.

4. 웹 입문 강의 추천과 학습 팁 🖥️

입문자에게는 환경설정, IDE 사용법 등 기본부터 배우는 게 필수
추천 강의: 노마드 코더, 제로초 로드맵, 생활코딩 등 무료/유료 강의 다양
작은 웹 프로젝트를 직접 만들어보며 경험 쌓기 중요
React, Redux 같은 상태관리 라이브러리는 기본적인 웹 동작 익힌 후 입문 추천
회사 실무에서는 기초 웹표준(semantic web)과 퍼블리싱 능력도 매우 중요

5. AWS S3와 웹 호스팅 비용 및 활용 ☁️

AWS S3에 정적 웹사이트 배포 가능
비용 매우 저렴, 소규모 개인 프로젝트는 무료 수준으로 운영 가능
CloudFront (CDN) 연결하면 빠른 캐시와 전송 속도 향상
정적 사이트엔 백엔드 없이 HTML, CSS, JS 파일만 올려도 충분
GitHub Pages도 대안으로 자주 추천됨

6. React Native ESBUILD 빌드 문제 ⚙️

ESBUILD로 React Native 빌드 시 패키지 참조 오류 발생하는 경우 존재
원인:
- package.json에 의존성 누락
- 설치는 했지만 타입 정의 부족(ts관련)
- yarn PnP 사용 시 접근 경로 문제
해결 팁: 패키지 설치 상태 꼼꼼히 확인, 타입스크립트 설정 점검 필요

7. 웹표준(semantic web standards)의 중요성 🌐

웹표준은 HTML 태그, ARIA 역할, 접근성 등을 포함하는 개발 원칙
기초가 탄탄해야 유지보수 쉽고 다양한 환경에서 호환 가능
AI시대에 웹표준을 지키면 봇이나 스크린리더 등 보조기술에 잘 대응 가능
단순히 'role' 속성 붙이는 것만으로 웹표준이 지켜지는 건 아님
꾸준한 학습과 경험으로 자신만의 웹표준 지식 쌓기 권장

8. 카카오톡 오픈채팅 업데이트 소식 🗣️

오픈채팅에서 '@' 입력 시 '모두 멘션하기' 기능이 조용히 추가됨
부방장뿐 아니라 일반 사용자도 모두 호출 가능하나, 한정된 횟수(예: 1127번) 사용 필요
보이스룸 등 음성 대화 기능 활성화 중
운영 권한 관련 업데이트로 채팅방 관리 효율성 증가

면접팁⚡

React 상태관리 관련 질문 팁

이벤트 핸들러와 useEffect 역할의 차이를 분명히 이해하고 설명 가능해야 함
예: 타이머 관리 시 컴포넌트 라이프사이클에 따른 cleanup과 사용자 이벤트 처리 구분

React 리스트 key 사용법

인덱스와 유니크 키 사용 시 발생할 수 있는 문제점 명확히 언급
최적화 및 버그 예방을 위해 유니크 키 사용을 권장하는 이유 설명

웹표준과 접근성

웹표준 지식과 중요성, 특히 실제 프로젝트에서 웹 접근성을 어떻게 고려하는지 답변 준비

링크🔗

React 리스트 렌더링 공식 가이드
https://ko.react.dev/learn/rendering-lists#key
노마드 코더 (Nomad Coder)
https://nomadcoders.co
생활코딩 홈페이지
https://opentutorials.org/course/1
AWS S3 정적 웹사이트 호스팅
https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/WebsiteHosting.html
React 공식 문서 (useEffect)
https://reactjs.org/docs/hooks-effect.html
React Native ESBUILD 관련 이슈 참고 포럼
https://github.com/facebook/react-native/issues?q=esbuild

2025-02-12

목차