2023-12-03

목차

1. 모바일 브라우저 & iOS 프레임 드랍 문제
2. 타입스크립트 & 리액트 도서 및 이북 업데이트 이슈
3. 코딩 테스트(코테) 공부 경험과 팁
4. 리액트 컴포넌트 설계 및 라우터 활용
5. GitHub Actions와 환경변수 관리
6. 디자이너와 프론트엔드 협업 이해
7. 마크다운 에디터 구현 난이도 및 참고자료
8. 모니터 선택과 해상도에 대한 개발자 의견
9. 함수 컴포넌트의 장점과 리액트 개발 트렌드
10. 포트폴리오 작성 도구와 독서 습관

1. 모바일 브라우저 & iOS 프레임 드랍 문제

• 같은 크롬 브라우저라도 운영체제(OS)가 달라 실행 방식이 다름.
• iOS 기기에서는 애플 정책 때문에 크롬이 사파리와 동일한 WebKit 엔진을 사용함.
• WebKit 엔진 특성상 스크롤 이벤트 처리 시 프레임 드랍이 발생할 수 있음.
• EU에서 애플의 브라우저 엔진 독점 문제로 조사가 진행 중임.
• 초보자도 이해하기 쉽게 WebKit 엔진은 브라우저가 웹 페이지를 렌더링하는 핵심 프로그램이며, iOS에서는 모든 서드파티 브라우저가 사파리 엔진을 써야 해서 성능 차이가 남.

2. 타입스크립트 & 리액트 도서 및 이북 업데이트 이슈

• 책 <우아한 타입스크립트 with 리액트> 오탈자 다수 발견됨.
• 종이책은 수정된 책으로 새로 받기 어렵고, 이북은 업데이트 가능성이 있음.
• 이북 구매 추천, 이유는 오류 수정이나 예제 코드가 최신화될 수 있어서.
• 초보자에게 추천하는 학습 방식은 최신 자료를 계속 확인하며 공부하는 것.

3. 코딩 테스트(코테) 공부 경험과 팁

• 백트래킹 문제를 어렵게 느낄 때 많음, 이해를 돕기 위해 그림 그리면서 풀이 과정을 시각화하는 방법 추천.
• 기초 문제부터 반복해서 푸는 게 마인드 안정에 도움 됨.
• 코테는 꾸준한 연습이 중요하며, 문제 풀이가 어렵다면 쉬운 문제부터 차근히 접근할 것.
• 각자 학습 스타일과 페이스존을 존중하며, 코테를 힘들어하는 개발자들도 많음.
• 혼자 어려우면 함께 스터디나 모임 참여로 동기 부여 활용.

4. 리액트 컴포넌트 설계 및 라우터 활용

• 라우터 학습 중 컴포넌트를 세심하게 나누는 것이 유지보수와 재사용에 좋다는 점 체감됨.
• 큰 컴포넌트에 여러 기능을 몰아넣으면 나중에 분해할 때 힘듦.
• 적절한 분리 기준은 기능 단위 또는 UI 단위로 생각하면 쉬움.
• 리액트 함수형 컴포넌트가 대세가 된 이유는 메모리 효율, 코드 크기 감소, 선언 편의성, 그리고 Hooks를 통한 생명주기 제어 가능성 때문임.
• 클래스 컴포넌트는 this 바인딩 문제와 코드 복잡도 증가가 단점으로 꼽힘.

5. GitHub Actions와 환경변수 관리

• 프론트엔드 배포 시 API 키 같은 민감 정보는 .env파일에 숨겨야 함.
• .env 파일을 공개 리포에 올리면 보안 문제가 생기므로 절대 올리면 안 됨.
• GitHub Actions에선 "Secrets" 기능을 활용해 민감 정보를 저장 가능함.
• 워크플로우 내에서 시크릿 키를 불러서 환경변수를 만들고 빌드/배포에 이용함.
• 요약: 민감정보는 GitHub Secrets에 저장하고, 빌드 시점에 환경변수를 주입하는 것이 보안상 안전한 방법임.

6. 디자이너와 프론트엔드 협업 이해

• 디자이너는 완성된 UI 디자인(이미지, 폰트, 컬러 등)을 제공하고, 프론트는 이를 시맨틱 태그로 웹 화면에 구현함.
• 단순히 따라 만드는 것을 넘어, 컴포넌트 단위 분리 및 재사용, 상태 관리, 성능 최적화도 프론트엔드의 중요한 영역임.
• 디자이너도 CSS, 시맨틱 태그 사용 가능하지만 역할 분담으로 효율적 협업 추구함.
• 협업 시 '아주 상세한 컴포넌트 설계와 역할 분배'가 문제를 줄여줌.

7. 마크다운 에디터 구현 난이도 및 참고자료

• 노션처럼 실시간으로 마크다운을 화면에 보여주는 기능 구현은 꽤 어려움.
• 마크다운 에디터는 입력된 텍스트를 해석하여 HTML로 변환하고 렌더링하는 과정이 포함됨.
• 참고할 수 있는 오픈소스나 튜토리얼(예: https://novel.sh/)을 살펴보는 것을 추천.
• 초보자가 접근할 땐 단순한 마크다운 파서부터 시작해 점차 기능을 확장하면 좋음.

8. 모니터 선택과 해상도에 대한 개발자 의견

• 개발용으로 모니터 선택 시 최소 QHD(2560x1440) 해상도 추천.
• 4K 모니터는 화면 선명도가 뛰어나지만 가격과 성능 부담이 있음.
• 32인치 QHD는 업무 및 감상용으로 적당한 편.
• FHD(1920x1080)는 픽셀 계단 현상(글자가 울퉁불퉁 보이는 현상)이 있어서 장시간 작업 시 눈 피로가 올 수 있음.
• 개인 취향과 활용 용도(게임 vs 업무 등)를 고려하는 게 중요함.

9. 함수 컴포넌트의 장점과 리액트 개발 트렌드

• 함수 컴포넌트는 선언이 간결하고 메모리 사용 효율적임.
• React Hooks가 함수 컴포넌트에서만 제대로 활용 가능해 생명주기 및 상태 관리를 쉽게 할 수 있음.
• 클래스형 컴포넌트는 this 바인딩 문제와 코드 복잡도로 선호도가 점점 낮아지는 추세임.
• 최신 리액트 개발환경에서는 함수 컴포넌트 위주로 개발하는 것이 대세.

10. 포트폴리오 작성 도구와 독서 습관

• 포트폴리오 작성에 많이 쓰이는 도구는 Notion, Obsidian, 마이크로소프트(MS) 오피스, Apple 오피스 등 다양함.
• 책 읽기는 자기계발, 철학, 소설, 개발 서적 등 다양하게 취향에 맞는 분야로 추천됨.
• 독서를 꾸준히 하면 개발 실력 뿐만 아니라 사고력 향상에도 도움됨.
• ‘필요한 지식’ 중심으로 선택해 읽으면 완독률이 높아지고 효율적임.
• 독서 목표 설정(예: 매달 4권 이상)도 좋은 습관 형성에 도움이 됨.

면접팁⚡

• 코딩 테스트 준비 시 백트래킹 등 어려운 알고리즘 문제는 시각적으로 풀이 과정을 표현해 이해도를 높임.
• 함수형 컴포넌트와 클래스 컴포넌트 차이점을 명확히 이해하고 설명할 수 있어야 함.
• GitHub Actions에서 환경변수 안전하게 관리하는 방법을 숙지하면 DevOps 관련 질문에 대비 가능함.
• 프론트엔드와 디자이너 협업 과정에서 발생할 수 있는 이슈와 좋은 협업 방식을 간단히 설명하면 좋음.

링크🔗

• React 함수형 컴포넌트와 Hooks 개념 정리 참고: https://reactjs.org/docs/hooks-intro.html
• GitHub Actions Secrets 사용법: https://docs.github.com/en/actions/security-guides/encrypted-secrets
• 마크다운 에디터 참고 오픈소스: https://novel.sh/
• 타입스크립트 with 리액트 도서 관련 정보: (사용자가 별도의 링크 미제공)
• 리액트 및 타입스크립트 관련 커뮤니티 자료: https://velog.io/@sharlotte_04/hidden-feature-velog
• 파이널 프로젝트 참여 안내 (프론트엔드 취준생 대상): https://bit.ly/3sqcU1A
• 프로젝트 참여 신청 링크: https://bit.ly/3QRHr1F