React를 들어가기 전 회고조 내에서 프로젝트를 들어가기 전 작은 프로젝트를 진행해보면 좋겠다는 의견이 나와서 참여하게 되었다. 프로젝트 방향성에 대한 의견을 나누다 다음에 있을 프로젝트에 대비하기 위한 과정이기 때문에 프로젝트를 하기 보다 협업에 대한 대비를 하기로 했다.
협업에 대한 연습 그리고 앞으로 사용하게 될 React를 사용해보는 방향으로 스터디를 진행하기로 결정되었다.
React를 사용하면서
JavaScript를 배울 때 문법적으로 어렵게 느껴지는 부분이 많아서 React를 배우기 전 React는 잘 할 수 있을까라는 생각이 들었다. 그래서 React에 대한 겁을 내고 있어 쉽게 접할 수 없다고 생각했다.
하지만 걱정과 달리 어려움이 없었다.
조원이 웹 사이트를 보고 사이트를 사용하는 유저 입장에서 불편하다고 느낀 점을 개선한 디자인을 바탕으로 코드를 작성했다.
협업 과정
협업을 하는 과정은 다양하다.
1. 사이트의 여러 페이지를 한 페이지씩 나누어 각자 파트를 맡아서 협업을 진행하는 방법
2. 한 페이지에서 분량을 나누어 작업을 한 다음 합치는 방법
우리가 선택한 방법은 2번의 방법이다.
한 페이지를 여러 사람이 작업하다보면 더 많은 오류를 발견할 수 있다. 혹은 구조가 비슷하지만 서로 다르게 작업할 경우 재사용성을 고려한 프로젝트 컨벤션을 정할 수 있기 때문에 2번 방법을 선택했다.
React 들어가기
React로 코드를 작성하기 전 npm start를 하는데 여기서부터 문제가 발생했다. 오류가 발생하고 웹이 보이지 않았다. 발생한 문제는 react-scripts은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다는 문자가 나왔다. 해결방법은 간단했다. npm update...
처음 사용하는 라이브러리여서 처음부터 실행이 되지 않으니 걱정부터 한 것이였다.
무사히(?) 해결한 다음 코드를 작성했다.
작업 과정
React로 만들어야 되는 웹 디자인은 위 사진과 같은 구조로 작업을 진행했다.
공동으로 작업하기 때문에 App.js 파일에 직접 코드를 작성하지 않고 새로운 파일을 만든 다음에 App.js 파일을 연결했다.
구조는 텍스트와 버튼이 한 부분 이미지를 한 부분으로 flex를 이용해서 총 2섹션으로 나누어 작업해보았다.
function Main_ss() {
return (
<section className="section_ss">
<div className="info">
<p className="info_ss">spent most of his time with his grandmother in Provence, was inspired by the local values of the region. Miro's poems, Provençal ceramic works, cherry trees, nostalgic hand-knitted tablecloths are among these sources of inspiration. The colour palette, dominated by white, blue and earthy tones, harmonised perfectly with the wheat fields.</p>
<button type="button" className="btn_ss">SHOP</button>
</div>
<div className="image">
<img src="/images/main_collection1.png" alt='test-img' />
</div>
</section>
);
}
export default Main_ss;jsx 파일만 작업할 경우 텍스트, 버튼, 이미지 순서로 출력이 되었다.
다음은 CSS 파일이다.
img{
vertical-align: top;
max-width: 100%;
}
.section_ss{
display: flex;
padding: 30px 58px; /* padding-top, bottom 30px은 임의로 설정한 값 */
}
.info{
margin-right: 102px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.info_ss{
max-width: 640px;
}
.btn_ss{
margin-top: 65px;
width: 140px;
height: 40.36px;
background: rgba(0, 0, 0, 0.0001);
border: 1px solid #BBA288;
}
@media(max-width: 1057px){ /* 반응형 max-width는 미정이라 임의값 넣어서 작성 */
.section_ss{
flex-direction: column;
padding: 30px 58px;
}
.info{
margin-bottom: 30px;
}
}사용자의 입장이 되었을 때를 생각해서 미디어쿼리도 적용해보았다.
미디어쿼리를 적용하면 아래 방향으로 텍스트, 버튼, 이미지 순서로 보이도록 작업을 했다.
작업을 진행하면서 느낀점
무슨 작업이든 시작해보는 것이 큰 도움이 되었다. 처음부터 겁을 먹고 어렵다 생각하면서 회피하면 어느 방향으로든 해결이 되지 않는다. 도전이 답이다...!!!
React로 작업하면서 큰 어려움은 없었지만 image 링크를 연결할 때 어려움이 있었다. 이 어려움은 다음 회고록에서 더 자세히 이야기 할 생각이다.
아직 다른 조원 분들의 코드를 보지는 못했지만 어떤 오류를 발견해서 같이 해결하는지 서로의 코드는 어떤 식으로 작성했는지 의견을 나누는지 여러 협업 활동을 진행할 수 있다는 점이 기대된다.
