FE
[논의 사항]
1.
댓글에 사용자 태그 or 대댓글 기능을 구현하기에는 시간이 촉박하여 나머지 기능 구현을 우선시로 함
2.
데모데이 이전까지 해야할 작업 논의
•
최적화 작업 (필요한 부분만)
•
스켈레톤 UI 적용
•
톤 앤 매너 유지해서 변경될 테마 팔레트 적용
•
로고 & 파비콘 생성
•
디자인 전체 개선
•
와이어프레임 최종 수정
•
실제 API 연동 및 기능 수정 & 추가
•
LightHouse 성능 확인 및 리팩토링 진행
•
배포 에러 해결
•
최종 배포
[프로젝트 및 UI 관련 피드백]
1.
유효성 입력 필드 통일화 (마이페이지 회원정보 수정 / 회원가입 & 로그인)
2.
댓글에 사용자 태그 or 대댓글 기능 추천
3.
검색 시 input에 입력할 때에는 하단 Top15 정보 유지 권장
4.
검색 시 다중 필터 적용으로 변경 (태그 검색은 max 3, 특산주 검색은 max 1)
5.
오프라인에서도 좋아요 클릭 시 즉시 반영되게 하고, 서버가 안정되면 동기화하여 상태를 업데이트하며, 동기화 실패 시 원래 상태로 롤백하도록 구현 추천
6.
전체 UI 톤 앤 매너 유지
[Q&A]
1.
포트폴리오의 구조 및 최적화 관련
면접관들이 개발자 도구를 통해 불필요한 리렌더링 발생 여부 등을 어느 정도까지 평가하는지?
•
면접관들은 일반적으로 기본적인 성능 최적화를 기대함
•
불필요한 리렌더링을 완전히 제거할 필요는 없지만, 명백한 성능 문제는 해결해야 함
•
주요 기능과 사용자 경험에 영향을 미치는 부분에 집중하는 것이 좋음(비즈니스적 관점)
어느 수준까지 최적화 작업을 해야 하는지?
•
가장 중요한 점은 성능 최적화에 대한 이해도를 보여주는 것
◦
React.memo, useMemo, useCallback 등의 적절한 사용
◦
데이터가 많은 내용들에 대한 가상화 적용
◦
이미지 최적화
◦
코드 스플리팅
포트폴리오 전체를 반드시 최적화해야 하는지?
•
전체를 다 최적화 할 필요는 없지만 완성도 측면에서는 반복적인 작업들이 많기 때문에 꼼꼼하게 해주시는 것이 그렇게 시간을 많이 증가시킬 것이라고 생각하지 않음
2.
포트폴리오 제작 기간
면접에서 긴 제작 기간을 어떻게 긍정적으로 설명할 수 있는지?
•
중요한 것은 시간을 효율적으로 사용하고 품질 높은 결과물을 만드는 능력
•
프로젝트 기간이 X개월 걸렸습니다. 이 기간 동안 기본 기능 구현뿐만 아니라 코드 품질, 확장성, 사용자 경험 개선에도 집중했습니다. 예를 들어, ~~~를 통해 유지보수성을 향상시켰고, ~~~로 사용자 경험을 개선했습니다
회사에서 무조건 짧은 제작 기간을 선호하는지?
•
회사들은 반드시 짧은 제작 기간만을 선호하지는 않음
•
우리가 생각하듯이 면접관도 생각함, 본질, 솔직함이 중요함
3.
Next.js 공부 필요성
Next.js를 필수로 다룰 줄 알아야 하는지?
•
Next.js는 현재 프론트엔드 개발에서 매우 중요한 프레임워크
•
SSR, SSG, API 라우트 등을 이해하고 있으면 좋음
•
하지만 현실적으로 6개월 내에 모든 것을 익히는 것이 깊이 있게 하기가 쉽지 않음
◦
협업 프로젝트, 개인 프로젝트 1회 더 하는 것도 좋은 방향
◦
포트폴리오라도 제작하는 것 추천
어느 정도까지 다룰 수 있으면 좋은지?
•
Next.js로 간단한 프로젝트를 만들어 보고, 그 과정에서 배운 점들을 설명할 수 있으면 충분
4.
포트폴리오 제작
전체 포트폴리오를 별도로 제작할 필요가 있는지?
•
포트폴리오를 별도로 제작하는 것이 더 좋습니다.
◦
자신만의 개성을 보여줄 수 있음
◦
기술 면접관에게 안내하기가 쉬움(UX 고려)
◦
기술 스택을 직접 구현한 부분들을 보여줄 수 있음
노션과 같은 툴로 충분한지?
•
충분 하고, 필요시에는 페이지를 만드는 것도 좋습니다.
5.
퍼블리싱 등 비주력 직무에 대한 고민
퍼블리싱이나 다른 직무로 업무가 치우치게 될 경우 어떻게 대처해야 하는지?
•
퍼블리싱이라는 직군이 따로 존재하는 경우가 많이 사라지고 있고, 사라졌음
•
회사와 솔직하게 소통하여 프론트엔드 개발 업무 비중을 늘릴 수는 있겠지만 해당 업무도 지속적으로 할 수 없고 회사의 재정상황에 따라서 1순위로 경쟁력을 잃는 방법
•
너무 퍼블리싱 위주라면 개인 시간을 활용해 프론트엔드 기술을 계속 학습하고 사이드 프로젝트 진행
•
퍼블리싱 업무를 통해 UI/UX에 대한 이해를 넓히는 기회로 활용
•
퍼블리싱 작업 중에도 JavaScript를 활용한 인터랙션, 애니메이션 등을 구현하여 프론트엔드 개발 스킬을 꾸준히 연마
•
UI/UX 기반으로 공통적인 업무들을 더 잘할 수 있도록 기술 스펙트럼을 넓히는 계기로 활용하는 것이 좋음
이런 상황이 이직 시 경력에 부정적인 영향을 미칠지?
•
HTML5, CSS3, JavaScript(ES6+)에 대한 깊은 이해 없이는 서비스하는 라이브 서비스 팀의 프론트엔드 개발자는 영원히 하기 힘듦
•
HTML5, CSS3, JavaScript(ES6+)에 대한 깊은 이해는 프론트엔드 개발자에게 필수적입니다. 퍼블리싱 업무를 통해 이러한 기본기를 탄탄히 다질 수 있음
◦
React에서 JSX를 사용할 때, HTML 구조에 대한 깊은 이해가 필요
◦
불필요한 DOM 조작을 줄이고, 효율적인 마크업 구조를 설계함으로써 React 애플리케이션의 성능을 향상
•
디자인 시스템 등을 만들 때도 힘든 상황이 많아짐
◦
디자인 시스템의 변경사항을 효과적으로 관리하고 문서화해야 함
◦
퍼블리싱 경험은 CSS 변경사항을 추적하고 관리하는 데 도움이 됨
•
퍼블리싱 경험을 통해 얻은 기술적 인사이트와 이를 프론트엔드 개발에 어떻게 적용할 수 있는지 구체적으로 설명
◦
적절한 HTML 태그 사용이 접근성과 SEO에 미치는 영향을 이해
◦
CSS-in-JS를 사용할 때, 불필요하게 복잡한 선택자를 피하고 컴포넌트 기반의 스타일링을 채택
◦
다양한 화면 크기에 대응하는 CSS 기법을 숙지
▪
미디어쿼리를 적게 사용해도 반응형을 만들 수 있어 DOM 최적화에 기여
◦
애니메이션 및 트랜지션을 활용한 UI/UX 향상
◦
HTML 구조와 ARIA 속성의 중요성을 이해
◦
이미지 포맷, 크기 조정, lazy loading 등의 기법 (그냥 Next image로 하면 되지 않나요??? (X))
◦
웹 폰트 로딩이 성능에 미치는 영향과 최적화 방법
◦
사용자 친화적인 폼 디자인과 HTML5 폼 검증에 대해 이해
◦
CSS 변수(Custom Properties)의 사용법과 이점을 이해
6.
Vue 프로젝트 추가 관련
•
보여주기식이라도 Vue를 다룰 수 있다고 포트폴리오에 기재하는 것이 좋은지?
◦
새로운 기술을 빠르게 습득할 수 있는 능력 증명되니 긍정적
◦
다양한 프레임워크에 대한 이해도 표현 등에 있어서 나쁘지 않음
◦
내공이 얼마인지가 더 중요하기 때문에 과장하지 않고 새로운 기술에 서스름 없이 받아 들이는 내용이나 응용에 대해서 강조하는 것이 중요
차별성 없는 '보여주기 식'의 간단한 결과물을 올리는 것이 좋은지?
•
보여주기식 X, 정직한 경험 표현
•
학습 능력 강조
•
기술 간 유사성 인식
•
기술 전이 능력
•
다른 기술도 학습해서 응용력을 확인하고 있음을 보여줄 수 있음
7.
컬러팔레트 관련
특산주와 관련이 있는 브라운 계열을 주 색상으로, 금색을 포인트 색상으로 사용하는 것에 대한 의견?
•
특산주 테마에 맞는 색상 선택은 좋은 아이디어
◦
브라운 계열: 중간 톤의 따뜻한 브라운 (예: #8B4513, #A0522D)을 주 색상으로 사용
◦
금색: 포인트 색상으로 사용 (예: #FFD700, #DAA520)
◦
보조 색상: 크림색 (#FFFDD0)이나 베이지 (#F5DEB3)로 밝은 느낌 추가
◦
강조 색상: 버건디 (#800020)나 딥 그린 (#006400)으로 고급스러운 느낌 부여
•
•
주 컬러
•
강조 컬러
•
주 컬러
•
테마 컬러
BE
•
이미지 업로드 API 구현 후 PR 요청
•
AWS S3 키 및 yml 파일 공유
•
알림 신고 승인 부분 리팩토링 진행 후 PR 요청
•
신고와 매니저 API에 동일한 승인, 반려 API 명세 내용 수정
•
알림 관련 매니저 신고 API 리팩토링 진행
•
Type "비속어 사용" 같은 사용자 직접 입력내용에서 -> 신고Type 내용으로 변경