[스파르타 _ 리액트 과정] 20일차

et Ji·2022년 11월 28일

내배캠 리액트 스파르타 코딩클럽 팀 프로젝트 협력사 특강

TIL

목록 보기

25/40

- 학습 일자 : 22. 11. 25

📜 진행 내용

[특강] 협력사 특강 - PAP 주식회사
[특강] CS 기초 : HTTP - 박민수 튜터님
[과제] 팀 _ 기초 프로젝트 진행
- [전체]
  - 메인, 마이 페이지 CSS 마무리
  - 메인페이지 - 댓글 좋아요, 싫어요 기능 추가
  - 다크 모드, 반응형 구현
- [개인]
  - 메인, 마이 페이지 CSS 마무리
  - 반응형 구현

💡 배운내용

< 협력사 특강 - PAP 주식회사 >

스파르타와 오랜 기간 연계되어 있는 PAP 주식회사에서 채용 설명회를 진행해주셨다.

채용 설명회였지만, 개발자를 준비하는 우리들에게 어떤 자세로 어떤 부분들을 중점으로 준비하면 좋을지 많은 조언을 해주셨다.

자바스크립트의 기본 개념을 확실하게 익혀라.
- 얕은 복사 / 깊은 복사
- 함수형 프로그래밍 적용
프로젝트를 진행할 경우,
- 사용자 입장에서 생각해서 기획하라.
- 어떤 부분을 담당했고, 또 왜 그렇게 코드를 작성했으며, 고민한 포인트가 무엇인지 정리해두기
- 화면을 자꾸 그려야 되는 랜더링을 어떻게 줄일지 염두하라.
  - 위 내용들은 추후 면접 시 질문 요소가 될 수 있다.
공부를 하면서, 블로그 혹은 기록하는 수단에 오답 노트를 작성하라.
- 추후 동일한 문제가 발생할 경우 찾아보면 분명 도움이 될 것이다.
혼자서 공부할 경우, 고민할 시간 범위를 정해놓고 그 시간까지도 해결이 못한다면 도움을 청하라.
- 구글에서 검색하면 모든 답은 나온다. 검색하는 log의 줄을 키워드 중심으로 검색해 볼 것
기본적으로 알면 좋은 CS 지식
- 메모리 관리 관련, OS
- 백엔드 관심있다면, 메모리와 스레드 관리

< 과제 _ 팀 기초 프로젝트 >

◾ 진행 내용

전체
- 메인페이지 댓글 좋아요, 싫어요 기능 추가
  - 댓글 좋아요, 싫어요 기능 추가
    - 댓글 1개당 한번씩 좋아요/싫어요를 카운트 업 할 수 있으며, 한 번 클릭하면 더이상 활성하지 않는다는 것을 보여주도록 버튼을 어둡게 스타일링 한다.
개인
- 메인, 마이 페이지 CSS 마무리
  - 전체적인 CSS 스타일링 다듬기
    - 1차적으로 스타일링한 부분은 다소 완성도가 부족해서, 피그마에서 기획했던 시안대로 디테일을 잡았다.
    - 단순히 CSS 스타일링 하는 것이 아니라, JS 파일에서 DOM요소를 만들어서 추가하는 함수 내부에서 순서를 맞추고 또 필요한 경우에는 함수 동작 코드(예: 데이터가 배열이라면 인덱스 번호를 바꿔주는 등)를 수정해야 했다.
      - 예) 수정 버튼을 눌렀을 때, 가려야하는 input창의 부모요소를 추가한 경우
        
        export const onEditing = (event) => { event.preventDefault(); const udBtns = document.querySelectorAll('.editBtn, .deleteBtn'); udBtns.forEach((udBtn) => (udBtn.disabled = 'true')); // 기존 const cardBody = event.target.parentNode.parentNode; // 수정 const cardBody = event.target.parentNode.parentNode.parentNode; ... }
  - 반응형 구현하기
    - 모바일, 타블렛, PC 크기에 맞춰서 작업하려고 했지만, 프로젝트 웹사이트를 모바일용으로 하기에는 부족하다고 생각해서 타블렛 크기 까지만 적용되도록 했다.

🎯 문제와 해결

CSS 파일을 적용할 페이지 별로 나누어서 코딩했지만, 요소끼리 클래스 명이 겹치는 경우 내가 원하지 않는 요소까지 스타일링이 덮어쓰어졌다.
- 👉 여러 개 페이지(경로)로 나누어 작업할 경우, 클래스명이 겹칠 수 있기 때문에 선택 범위를 상세하게 지정해주어야 원하는 요소에만 스타일링을 하기가 수월하다.
  
  예시) #mypage-list .mycards .card.commentCard .card-body