2024-05-10

목차

1. 개발 중 야식과 기분 관리
2. React에서 이미지 맵(<map>, <area>) 사용법 질문
3. 포트폴리오로 TodoList 제작에 대한 고민
4. 개발자의 작업물과 태도에 대한 이야기
5. 분노 조절과 스트레스 관리
6. 리액트 프로젝트의 웹팩 설정 변경 방법
7. 코드 디버깅과 스트레스 해소 팁

1. 개발 중 야식과 기분 관리 🍜🍦

• 팀원들이 야식 먹으며 코딩하는 모습 공유.
• 야식(아이스크림, 간식 등)은 집중력과 기분 전환에 도움.
• 개발 중 피로함을 느낄 때는 잠시 쉬는 것도 중요함.
• 지하철 이용 중 무더위, 에어컨 미가동 경험담은 피로를 가중시키기도.

2. React에서 이미지 맵(<map>, <area>) 사용법 질문 🤔

• HTML에서 이미지 내 특정 영역 클릭 시 이벤트 발생시키는 <map>, <area> 태그 사용에 문제가 있었음.
• React에서는 기존 HTML 코드가 바로 동작하지 않을 수 있음.
• React에선 보통 "react-img-mapper" 같은 라이브러리 사용을 시도하지만, 동작하지 않는 경우가 있음.
• 초보자 설명:
  • <map>과 <area>는 고전적인 HTML 이미지 맵핑 태그로, 이미지의 특정 부분을 구역으로 나누고 클릭 이벤트를 줌.
  • React는 JSX를 사용하고 컴포넌트 기반이라, 직접 DOM 조작이나 이벤트 연결이 다를 수 있음.
  • 해결팁: 라이브러리의 문서와 예제 확인, 혹은 SVG 기반 클릭 영역 구현 고려, 또는 이미지 맵 관련 컴포넌트 직접 제작 권장.

3. 포트폴리오로 TodoList 제작에 대한 고민 📝

• TodoList 앱은 흔한 프로젝트물이라 초보자가 포트폴리오로 쓰기에 적합한지 의문 제기.
• 구글링 시 "하지 말라"는 부정적 의견도 발견됨.
• 의견 공유:
  • 단순 프로젝트라도 퀄리티와 확장성으로 차별화 가능.
  • 초반 연습용 프로젝트로 시작하여 나중에 점진적 개선 시도하는 전략 추천.
• 포트폴리오 목표는 "완성도"와 "개선 의지"를 보여주는 것.
• 실제 면접에서 작업물 대한 생각과 개선 의지 평가가 중요함.

4. 개발자의 작업물과 태도에 대한 이야기 🧑‍💻

• 좋은 개발자는 단순히 일해서 돈 벌려는 목적이 아니라 작업물에 대한 책임감과 자신만의 생각을 가짐.
• 면접에서도 개발자가 작업물을 어떻게 바라보고 개선할지에 대한 태도를 중요하게 본다고 경험담 공유.

5. 분노 조절과 스트레스 관리 😤➡️😌

• 분노 조절에 대한 유머러스한 대화가 오감.
• 본인의 감정을 통제하는 능력이 중요하며, 참는 것도 분노조절의 한 형태임.
• 스트레스를 받을 땐 잠시 쉬거나 하늘을 보고 심기 안정시키는 등 본인만의 방법이 필요.
• 과격한 행동은 지양할 것.

6. 리액트 프로젝트의 웹팩 설정 변경 방법 🔧

• Create React App(CRA) 기본 설정은 숨겨져 있어 수정이 어려움.
• webpack.dev.js 같은 개발용 웹팩 설정 파일은 보통 CRA에선 직접 수정하지 않음.
• 설정 변경 방법:
  1. eject (CRA 내장 기능 해제) 후 직접 설정 수정
  2. react-app-rewired, craco 같은 오버라이드 라이브러리 사용
  3. 처음부터 npm과 webpack 직접 구성해서 프로젝트 세팅
• 조언: 편리한 라이브러리를 사용해 오버라이드 하거나, eject 후 자신의 필요에 맞게 바꾸는 방법 선택.
• 참고로 'craco'는 아직도 사용하는 사람이 있지만 최근 트렌드에서는 더 새로운 방법을 찾아보기도 함.

7. 코드 디버깅과 스트레스 해소 팁 🧩

• 코드가 안 풀려 답답할 때 자연스레 스트레스와 몸 상태가 흔들리는 경험 공유.
• 이런 상황에선 잠시 쉬며 기분 전환(옥상에서 하늘 보기 등) 추천.
• 스트레스 받을 때 기분을 가라앉히는 방법 찾는 게 중요함.

면접팁⚡

• 포트폴리오 개발 시 완성도뿐 아니라 개선 사항을 파악하고, 어떻게 더 나아질 수 있을지 "개선 의지"를 반드시 보여줘야 함.
• 면접관들은 개발자가 단순히 일을 수행하는 사람인지, 자신이 만든 코드를 어떻게 바라보고 성장하려 하는지 신경씀.
• React 프로젝트에서 기본 CRA configuration을 벗어나고 싶다면 eject하기 전에 오버라이드 라이브러리를 이해하고 활용하는 것이 현명.

링크🔗

• React img mapper 라이브러리: https://www.npmjs.com/package/react-img-mapper
• Create React App 관련 eject 및 설정 변경: https://create-react-app.dev/docs/available-scripts/#npm-run-eject
• react-app-rewired: https://github.com/timarney/react-app-rewired
• CRACO (Create React App Configuration Override): https://github.com/gsoft-inc/craco