리액트로 처음 개발해본다..
사실 제대로된 웹 개발 자체가 처음이다.
인턴으로 들어가서 퍼블리싱만 하다 나왔으니...
그래서 진~쟈 오래걸린다 -,-
첫번째 난관: 디렉토리를 어떻게 구성할까
이건 1시간정도 공부해보다가 지금 이게 중요한게 아닌 것 같아서 일단 느낌 가는대로..
component폴더 만들어서 그 안에 새로운 컴포넌트들을 배치시키고 하위폴더로 style폴더를 생성해줬다.(스타일시트 파일용 디렉토리)
구현하다보면 기능별로 나눠야된다고 느껴질 때가 오겠지..
두번째 난관: 뭐부터 해야하지?
우선 라우터셋팅을 해주고 페이지별로 컴포넌트를 구성해봤다. 그리고 이번주까지 완성하기로 한 main페이지 개발을 시작했다.
세번째 난관: 데이터는 어떻게....(뭘 모르는지 모르겠는 단계)
DB에서 데이터를 어떻게 받아와야하는가.. 뭘 모르겠는지 모르는 상태에서 API명세를 보고 뭘 알아가는지 모르게 뭔가를 조금씩 알아갔다.. 10000피스짜리 퍼즐에서 아구가 맞는 퍼즐을 하나씩 맞춰가는 느낌이랄까..
일단 레이아웃부터 맞추고 고민하기로 결정
네번째 난관: 리액트에서 input태그 사용하기
모집공고 리스트 정렬을 위한 라디오버튼을 넣어야하는데 우선 리액트에서 input태그 사이에 자식태그가 들어가면 안된다는 것을 알았다. 라벨태그의 for속성과 인풋태그의 id속성을 맞춘 뒤 라벨태그 사이에 텍스트를 넣어주는 방식으로 라디오버튼에 라벨링을 했다.
input태그 select상태관리 관련 부분 (최신순은 디폴트로 선택되게하고 다른 라벨 클릭할때마다 체크위치 바뀌게하는~)
//...
let [radioState, setRadioState] = useState('latest');
const handleClickRadio = (name) => {
setRadioState(name);
}
//...jsx코드 중 input태그 관련 부분
//...
<form className={style.orderSelector}>
<input
type="radio"
id="latest"
name="checkOrder"
value="latest"
checked={radioState === 'latest'}
onChange={ () => handleClickRadio("latest") } />
<label for="latest">최신순</label>
<input
type="radio"
id="view"
name="checkOrder"
value="view"
checked={radioState === 'view'}
onChange={ () => handleClickRadio("view") } />
<label for="view">조회순</label>
<input
type="radio"
id="bookmark"
name="checkOrder"
value="bookmark"
checked={radioState === 'bookmark'}
onChange={ () => handleClickRadio("bookmark") } />
<label for="bookmark">북마크</label>
</form>
//...다섯번째 난관: 라디오버튼의 디자인이 마음에 들지 않는다.
처음엔 이거때문에 input태그 말고 div박스로 구현해서 onClick이벤트를 넣어줄까 생각했다.div태그 안에 내가 바꾸고싶은 radio버튼 이미지와 라벨을 넣어준 뒤 onClick이벤트가 발생할 때 마다 이미지를 교체해주고 라벨에 맞게 목록을 정렬해주면 되는것 아니냐고~
근데 div를 남발하는게 좀 걸려서 그냥 input태그로 내 자신과 합의봤다. 라디오버튼을 display: none; 처리한다음에 label태그 안에 이미지 넣고 ...뭐 ..해봐야지ㅋ 이거 하려다가 갑자기 내가 하는 고민들을 글로 남겨놔야할 것 같아서 빠르게 쓰고 다시 개발모드
(하고 다시오겠음!)
열받는다!!! 라디오박스 커스텀하는걸 아무리찾아도 맘에 쏙드는 자료가 안나온다. 그냥 input태그 안쓰고 div태그랑 이미지로 직접 만들어야겠다.
라디오버튼 영역 컨트롤하는 부분
let [radioValue, setRadioValue] = useState(['최신순', '조회순', '북마크'])
let [radioState, setRadioState] = useState('최신순');
const handleClickRadio = (name) => {
setRadioState(name);
}라디오버튼 만드는 jsx일부
<div className={style.radioSelector}>
{ radioValue.map(function(name){
return (
<div className={style.radioElem} onClick={()=>handleClickRadio(name)}>
{
radioState === name
?<img alt="LOGO" src="img/circle.svg"></img>
:<img alt="LOGO" src="img/circle_empty.svg"></img>
}
<div>{ name }</div>
</div>
)
}) }
</div>스타일시트
div.radioSelector {
font-size: 14px;
display: flex;
justify-content: end;
align-items: center;
margin-top: 22px;
}
div.radioElem{
display: flex;
align-items: center;
cursor: pointer;
img {
width: 12px;
margin: 0 5px 0 20px;
}
}
이런 모양으루 잘 된다 ㅎ
잠깐 쉬고 이제 모집공고 리스트 만들자!
오케이 모집공고 리스트를 출력시키기 위해 해결할 과제들
- 데이터바인딩
- 데이터 형태
- 테스트를 위한 데이터 생성
- 데이터 저장 위치
데이터를 어떤 모양으로 저장할까
디비에 데이터가 저장되는 형식은 정해져있으니
그걸 내 쪽에서 어떤 모양으로 받아와서 데이터 바인딩을 할지 생각해보자.
우선 모집공고 리스트를 출력하기 위해 서버로 GET메서드를 호출하면
{
code : int, //http code //성공 여부
projectList :
[{
projectIdx : long,
title : string, //프로젝트 제목
stackList : List<string>, //기술스택
description : string, //주제 설명
capacity : int, //인원
view : int, //조회수
bookMark : bool, //북마크 여부
status : int //모집중(0), 모집완료(1), 프로젝트 종료(3)
}]
}이렇게 생긴 json을 보내준다.
졸림..
