프론트엔드 조원분들과 사다리타기!! 로 정한 결과
마이페이지 화면 구현을 맡게 되었다.. (+사이드바) 아마 추후에 이 기능 구현도 하게 될 듯..
며칠 동안 걸쳐서 완성했는데, 사실상 css와의 싸움이었지만
막상 css나 구조짜는 건 한 번 물꼬트기 시작하니 금방 금방 만들어 냈는데,
계속해서 eslint, prettier 에러가 나는 것이다.
진짜 얘네 때문에 너무너무 애먹음. ㅠ_ㅠ 심지어 후반에는 tsconfig.json 오류가 계속 났는데, 이건 실행에 문제도 없고 구글에 나오는 모~~든 영어로 된 것까지 다 찾아봤는데도 해결이 안돼서 ㅠ 추후에 얘네 셋에 대한 공부가 필요할 듯싶다.
바보 같았던 부분을 몇 개 꼽자면,,
변수를 지정했는데도 읽지 못하는 eslint 오류가 있었다.
찾아보니 이런 오류가 종종 발생한다고..
is assigned a value but never used no-unused-vars ~~~ 에러가 난 코드 옆에 주석으로 //eslint-disable-line no-unused-vars 달아주면 된다고! (혹은 윗 줄에 next-line 으로)
근데 내 문제는 이것이 아니었다.
다름아닌.. 변수를 소문자로 지정해줘서 였다구 _^__
정신차려~~~
justify-content : center;display 속성이
flex로 설정되어 있으면,
text-align속성을 지정해도 가운데 정렬이 되지 않는다.
이때는 위와 같이justify-content속성을 설정!
너무나도 기본적인 css인데도, 헷갈려하는 나야 나...
결국엔 블로그에 정리하기까지 오고 말았다 이젠 다시 까먹지 말아야지.
(+ margin 상우하좌)
리액트로 수평선 만들기
const HorizonLine = () => {
return (
<div
style={{
width: '100%',
textAlign: 'center',
borderBottom: '1px solid #aaa',
lineHeight: '0.1em',
margin: '10px 0 20px',
}}
></div>
)
}
마이페이지
+ 좌측 사이드바
우리가 구현하기로 한 프로필의 목록을 화면정의서 보고 만들었다.
상단바는 팀원분께서 만들어주셨구,
원래는 사이드바를 메인페이지 맡으신 분께서 해준다 하셨는데,
몸이 아프셔서 내가 맡게 되었다.
사이드바의 아이콘은 mui/icons 를 이용했고
나머지 버튼들은 react-bootstrap 을 이용했다.
그리고 이미지소스 넣을때 alt 속성까지 (빈칸도 괜찮음) 넣어야 하는 것을 배웠당 그래야 오류가 안나더라
<img src="~~.jpg" alt=" " />마이페이지 수정화면
public information 내에 있는 모든 form 들은
react-bootstrap 이용했다.
컴포넌트, 페이지
git으로 협업하기!👍🏻
git 이 너무너무 어려워서 팀원들을 좀 귀찮게 굴었다..
하지만 그냥 대충했다가 날려버리거나 다른 팀원들에게 더 큰 피해를 주는 것보단 나으니.. 메모하고 메모하고 또 메모..
git add . (폴더 내에 있는 파일 전부) ||
git add 파일이름.Js (해당 폴더에서 이용) ||
VS code에서 변경사항 있는 파일 스테이징하기 < 제일 편함!
git status 로 내가 작업한 브랜치에 스테이징하고 싶은 파일이 잘 들어 있는지 확인하기
git commit -m "제목: #이슈번호 내용"
git push origin(현재 내가 위치한 곳) [현재 내가 위치한 브랜치]만약에 내가 위치한 브랜치가 feat/fe/10-Main 이라고 치면,
git push origin feat/fe/10-Main
(혹은 -u 추가하고 다음부터는 git push만 해도 됨.)이 상태에서 깃허브를 열어주어서
main이 아닌 dev에 pull request -> merge !
그리고 조금 더 어려웠던 pull...
일단 내 로컬스토리지 깃 가장 최상위 폴더(.github)에서 터미널 실행하고,
git pull origin dev 하면 올라간 파일들이 다 내 로컬로 들어오게 된다.
이때 App.js같은 공용 파일은 조심조심 할 것~~
그리고 git pull 오류는 여기에 정리해놨다 !
기능 구현이 너무너무너무 걱정되지만...
css는 사실 그냥 맛보기로 즐거웠다 정도지만.. ㅎ_ㅎ
어떻게든 되겠지! 할 수 있다!!
