[프로젝트] pre-project 중간 점검

🔵 다시 새겨보자 : Pre-Project의 목표

클론 코딩 : Stack Over Flow

처음보는 팀원들과의 협업 및 의사소통

프론트엔드 개발자로서 백엔드 개발자들과의 첫 협업

🔵 진행상황

• 저번주 내내 컴포넌트 및 페이지 레이아웃 구현 (기능 없는 UI들)
• 이번주 월요일부터 기능 구현 시작 !
• 현재까지 로그인, 회원가입, 질문 리스트 READ, 질문 작성, 질문 수정 정도까지 구현! (완벽하지 않지만 하나씩 구현해가며 희열 느끼는 중...)

🔵 앞으로 남은 일들

• 삭제 기능
• 로그아웃 기능
• 답변 작성 +@
• 댓글 작성 +@
• 옵션 기능들 : vote, 채택 등
• dev 브랜치와 main 브랜치 merge
• 리팩토링 : 반복되는 fetch 등
• 배포

🔵 그간의 깨달음들

💡 CSS : 인라인 태그(요소)는 width, height 값을 지정해도 무시한다!!!!!!

애초에 이 인라인 태그들은 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어있기 때문이다. margin과 padding 속성도 상하는 무시하고 좌우만 지정할 수 있다.

이런 인라인 태그와 반대되는 요소는 block 요소이고, 인라인 태그의 성질과 블록 요소의 성질을 모두 가진 것이 inline-block 엘리먼트이다. (display: inline-block처럼 지정할 수 있음)

inline-block 엘리먼트는 inline 엘리먼트처럼 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width, height, margin, padding 속성 지정이 가능함.
(내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따름)

💡 tailwind의 peer, group 직접 사용해보기

tailwind의 peer를 이용해 로그인 폼의 validation test를 하려고 했었는데, 결과적으로는 일단 다른 중요 기능들을 위해 미뤄두기도 했고, js로 작성해보기로 했다.
그래도 처음에 peer를 사용해보는 과정이 정말 새롭고 재미있어서 기록해봄.

//일단 Peer와 관련되지 않은 다른 tailwind 클래스명들은 너무 길어서... 다 삭제해서 올림

<input 
	id="email"
	type="email"
	required 
	className="peer/email"
	onChange={handleEmail}
    value={email}
    placeholder=" "></input>
<p 
	className="hidden peer-invalid/email:block peer-placeholder-shown/email:!invisible">
	Email cannot be empty
</p>

위 코드에서 input에 email이라는 이름을 가진 Peer modifier가 붙어있고, 동일한 레벨의 형제 요소로 p 요소가 있는데, 이 p 요소는 email이 입력되지 않았을 때 input창 아래에 뜨는 경고 문구이다.

p 요소는 기본적으로 hidden인 상태이고, required 요소이며, email이라는 이름을 가진 Peer의 input이 invalid 상태일 때, block으로 바뀌어 영역을 갖게 된다.

peer-placeholder-shown부분은... 아직 input을 입력하기 위해 클릭하지도 않았는데 해당 문구가 떠있는 것을 방지하기 위해 노력을 쥐어짜보며 썼던 코드인데... 사실 해당 에러를 완전히 해결하지는 못해서 결국 Css로 간단한 validation test를 완료하려던 꿈을 이루지는 못했다 😂

group modifier는 tag 컴포넌트를 만들 때 사용했다. (마찬가지로 코드 일부분만 가져옴)

function Tag(props) {
  return (
    <span className="group-hover/tag:bg-[#d0e3f1] group-hover/tag:text-[#2c5877] bg-[#e1ecf4]">
      {props.text}
    </span>
  );
}

위에서 볼 수 있듯이 Tag 컴포넌트 자체는 span 태그로 이루어져 있다.

CreateQuestion이라는 페이지에서는 input으로 입력된 태그들을 받아서 tags라는 상태에 차례로 저장해두고 있고, tags를 map으로 돌려서 li로 뿌려서 div속에 input창과 함께 위치하게 한다.

Tag 컴포넌트 자체에는 x 버튼이 달려있지 않아서 tag 컴포넌트는 x 버튼과 함께 li 속에 들어있게 되는데, 여기서 태그의 li가 hover 되었을 때, 속에 있는 Tag 컴포넌트도 hover 상태가 되어야했기 때문에 상위의 li에서 tag라는 이름의 group을 지정해주었고, Tag 컴포넌트 파일에서 group-hover/tag와 같은 방식으로 background-color 등을 지정해주었다.

{tags.map((tag, index) => (
                  <li
                    key={index}
                    className="group/tag"
                  >
                    <Tag text={tag} />
                    <span
                      onClick={() => removeTags(index)}
                      className="(생략)"
                    >
                      x
                    </span>
                  </li>
                ))}

💡 백엔드 분들이 API를 만들 때 왜 찰싹 달라붙어서 살펴야 하는가 !?

그건 그분들이 만드신 데이터를 우리가 받아서 사용하기 때문이다!

사실 너무도 당연한 이야기지만, 초보 개발자인 나는 초반에 백엔드 팀장님께서 API는 이렇게 저렇게 하면 될까요? 여쭤보셨을 때 '아직...잘... 모르겠습니다..흑흑' 따위의 대답 밖에 할 수 없었다. 분명 그렇게 대답하면서도 이거 분명 나중에 부메랑으로 돌아올 것 같은데... 하는 생각이 들었다.

백엔드 팀이 워낙 일처리를 척척 잘해주셔서 API 명세 작성도 이미 너무 잘 해주셨지만, 아무래도 프론트와 백은 다른 영역이기도 하다보니 프론트에서 필요한 데이터가 담겨있지 않거나, 우리는 배열로 된 데이터가 필요한데 문자열이 ','로 구분된 데이터가 들어있다거나 하는 경우가 있었다.
그걸 발견하고 뒤늦게 고쳐달라고 하는 것이... 뭔가 뒷북 친다는 느낌도 들었을 뿐더러, '내가 UI 제작하는 과정이었더라도 기능적인 부분이나 데이터적인 부분을 함께 고민하고 생각해봤다면 좀 더 좋았겠다'라는 생각이 들었기 때문에 이렇게 반성겸 블로그에도 작성해보기로 했다..

그리고 정말 우리 백엔드 팀원들 짱짱...
해주세요~~~ 하면 넵! 하고 해주신다. 짱이다. 진짜.

💡 Liveshare 사용기

기능 구현을 시작하면서, 아무래도 서버단과의 통신이라던가 다들 처음해보는 일이라 처음에는 프론트 세 명이서 구글밋에 모여서 화면 공유를 해가며 코드를 함께 작성했는데 아무래도 한 명이 작성하고 둘은 보기만 하는 게 셋 모두에게 쉽지 않은 일이라는 걸 깨달았다.

그래서 VsCode Extenstion인 LiveShare를 사용했는데, 참여자가 직접 브라우저를 띄워보지 못한다는 점이 아쉽긴 해도 함께 코드를 작성할 수 있다는 점이 정말 편리하고 좋았다. 앞으로도 페어 프로그래밍을 할 일이 있거나, 팀 프로젝트를 할 일이 있다면 잘 사용할 수 있을듯!

💡 프론트 동료들에게 배운 것들

• 화살표 함수 사용시 화살표 함수의 전달인자와, 함수 내부의 다른 함수에 전달하는 인자가 동일하다면 {(e)=>AddTags(e)}를 {AddTags}로 간단하게 작성할 수 있다.
• 변수를 만들 때 특정한 규칙이 있는, 예를 들어 fetch에서 받아온 데이터로 만든 변수들에는 모두 '$'표시를 붙인다와 같은 방식으로 변수를 구분해 사용할 수도 있다.
• onChange 이벤트 핸들러를 사용할 때 event 객체를 그대로 받아오지 말고, ({target})=> handleChange(target)과 같이 작성하면 좋다. event 객체에도 정말 많은 것들이 담겨져 있기 때문에 필요한 것만 받아오기!