🤔 멘토님, 질문 있습니다!!!
Q.
이미지 레이디 로딩을 구현하려 하는데 저화질 이미지에서 고화질 이미지로 전환되는 LQIP에 대해 질문이 있습니다.
저화질 이미지, 고화질 이미지 모두 결국 소스에 해당하고 받아오는데 시간이 필요하다고 생각하는데 둘 다 받아올 때의 공백기간에는 뭐가 보여지게 되는지 어떤 로직이 작동하는지 궁금합니다.
A.
프로젝트에 이미지가 많은 만틈 어떻게 처리할지 많이 고민해보는 것이 좋을 것 같습니다.
이미지를 불러오는 처리, 이미지 최적화, 이미지를 못불러오는 경우의 처리, 완전 실패시에 alt 처리 등에 대한 고민을 해보면 좋습니다.
이미지 최적화에 대해서 몇 가지 전달드립니다!
- Picture element 사용
- 디바이스별로 다른 이미지를 보여줄 수 있음
- 즉, 640 이하 모바일 기기에서는 더 작은 이미지 보여주는 시나리오 구성 가능
2. Image CDN을 통해 이미지 사이즈 조절
- Cloudinary와 같은 서비스를 사용해서 이미지를 올려놓고, 필요에 따라 원하는 사이즈를 로딩
- 이미지 요청시 파라미터와 같은 형식으로 300x300 혹은 1000x1000 이런식으로 조절 가능
- 초기에 blur 이미지 후에 원본이 도착하면 그 때 변경
이 글을 참고하셨나요?https://css-tricks.com/the-complete-guide-to-lazy-loading-images/LQIP를 쓰던 스켈레톤과 같은 다른 효과를 쓰던 초기 이미지화질보다는 원본이미지가 최대한 빨리 로딩되는 것이 중요합니다!
Q.
취업 관련하여 작은 회사라도 넣는게 좋을 까요 아니면 시간이 걸려도 가고 싶은 회사에 지원하는게 좋을 까요?
A.
자금, 시간적 여유가 있다면 천천히 준비해 좋은 회사에 들어가면 좋지만 1년 이상 취업 준비를 하는 것은 좋지 않습니다.
작은 회사든 큰 회사든 실무에서 하는 경험은 많이 다르고 배울 수 있는 점이 많습니다.
가고 싶은 회사에서 좋아할 만한 업무에 집중하며 경력을 쌓고 나중에 이직을 준비하는 것도 좋은 방법입니다.
안좋은 회사를 구별하는 방법은 채용공고, 채용 플랫폼 내의 평균 연봉, 회사평 등으로 추측할 수밖에 없습니다. 또는 원하는 회사의 개발팀이나 인사팀에 커피챗을 요청할 수도 있습니다.
☕ 커피챗 정리
⭐와이어프레임 피드백⭐
메인페이지
- 초기화면, 태그 변경에 따라 이미지 렌더링 뷰가 바뀔 텐데 그 사이사이의 갭을 어떻게 처리할지 고민해봐야한다.
- 검색 시 결과가 없을 때 빈화면에 뭘 표현할 건지도 고민해보자
- 검색 결과 이미지가 없을 때 전체보기로 넘어가는 버튼 추가
- 검색창 로직에서 백엔드와 소통하여 검색 타입 허용 범위를 의논해야한다. (ex.검색창에 이모지나 숫자를 넣어도 되는지 문자만 들어가야하는지)
- 최대한 불필요한 네트워크 요청를 줄이고 클라이언트에서 조건 처리되게 하는게 좋다.
채팅창
- 채팅을 전송하거나 대화하기를 눌러야 채팅창에 들어갈 수 있다면 처음부터 큰 창을 차지할 필요가 없을 것 같다.
- 다른 웹사이트의 문의하기와 같이 어떤 버튼을 눌렀을 때 채팅창이 나오는 식이나 여닫도록해서 두단으로 나눠가면 좋을 것 같다.
- 제공해주는 짤이 많으니까 짤로 다 차지하는게 좋을 것 같다.
- 채팅창을 분리하면 연습에도 도움이 될 것이다.
- 모바일 구현에도 더 편할 수 있다.
- 채팅창에 이미지를 전송하기 위해 메세지 보내기를 누르고 채팅창 안에서 또 보내기를 누르는게 동작이 긴거 같다. 전송하기 버튼을 보내면
- 채팅방으로 이동중입니다 대신 전송 중입니다메세지를 렌더링하고 바로 보내지게 하는 것은 어떨까
짤 이미지
- 호버해서 버튼이 나오는 것도 좋지만 바로 사진밖이나 안에 직관적으로 보이는 것도 좋을 것 같다.
- 호버를 할 시에는 색 변화나 이미지가 크기 변경, 보더가 생기는 등의 효과는 있어야할 것이다.
관리자 페이지
- 특정 계정이 아닌 경우에는 라우터 못들어가게 처리해야한다.
- 삭제를 했다면 리스트에 바로 갱신되도록 해야한다.
짤 업로드 페이지
- 드래그앤드랍 구현은 나중이라도 구현하면 좋을 것 같다.
- 검색 창에서 Top5 태그들은 분리해도 좋을 것 같다.
- 짤 업로드 시에는 페이지 리스트에 바로 적용되게 해야합니다!
- 자동완성 태그가 없을 때, 에러가 날 때 어떻게 할지 고민해보세요
- 업로드 중에 발생하는 에러 처리도 고민해보세요
이미지 상세보기
- 사용자가 업로드한 짤인 경우 삭제 버튼 위치는 업로드한 짤 페이지에 있어도 좋을 것 같습니다.
- 태그가 버튼 같이 보여서 클릭할 것 같습니다. → 형태 변경
- 신고할 때 아이콘 변경 → 사이렌 표시 같은 걸로
- 좋아요 수를 표현한다면 즉각적으로 반영되게 처리해야합니다.
좋아요, 업로드 짤 페이지
- input ui는 공통 컴포넌트로 만들고 프롭스로 넘겨 바뀌게 하는 것도 좋을 것 같습니다.
- 보통 세 페이지가 있을 때 다 따로 검색창을 만들기 보단 공통 컴포넌트를 활용합니다.
공통
- POST, PUT, DELETE와 같은 동작이 발생하면 반드시 해당 데이터를 렌더링하는 리스트에 바로바로 반영되어야합니다!
- 어떤 동작이든 성공시의 결과, 실패(에러)시의 결과가 통일되어야합니다. (ui, 모달, 토스트 등으로)
- 백엔드와 소통해서 어떤 타입을 전달해야하는지 null값은 보내도 되는지 등 확실하게!! 타입 의논을 해야합니다.
- 백엔드에게 전송하면 안되는 타입에 대해서는 네트워크 요청 전에 클라이언트 측에서 ui 메세지를 주는 등의 방법으로 불필요한 네트워크 소통을 최소화해야합니다.
- 상태관리가 꼬이지 않게 주의하세요.
- 테스크 분배를 할 때 최대한 공통 컴포넌트 부터 하는게 좋습니다.⭐
기타
- 와이어 프레임에 페이지 명 기입
- 가능하다면 화살표 추가
- 기획서에 페이지별 기능 추가