리액트로 처음 개발해본다..
사실 제대로된 웹 개발 자체가 처음이다.
인턴으로 들어가서 퍼블리싱만 하다 나왔으니...
그래서 진~쟈 오래걸린다 -,-
이건 1시간정도 공부해보다가 지금 이게 중요한게 아닌 것 같아서 일단 느낌 가는대로..
component폴더 만들어서 그 안에 새로운 컴포넌트들을 배치시키고 하위폴더로 style폴더를 생성해줬다.(스타일시트 파일용 디렉토리)
구현하다보면 기능별로 나눠야된다고 느껴질 때가 오겠지..
우선 라우터셋팅을 해주고 페이지별로 컴포넌트를 구성해봤다. 그리고 이번주까지 완성하기로 한 main페이지 개발을 시작했다.
DB에서 데이터를 어떻게 받아와야하는가.. 뭘 모르겠는지 모르는 상태에서 API명세를 보고 뭘 알아가는지 모르게 뭔가를 조금씩 알아갔다.. 10000피스짜리 퍼즐에서 아구가 맞는 퍼즐을 하나씩 맞춰가는 느낌이랄까..
일단 레이아웃부터 맞추고 고민하기로 결정
모집공고 리스트 정렬을 위한 라디오버튼을 넣어야하는데 우선 리액트에서 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을 보내준다.
졸림..