4️⃣

9/21(토) 스크럼

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 내용으로 변경