제작했던 위스타그램 클론코딩, 그리고 내 코드!
어차피 개인정보가 담긴 코드도 아니고.. 남들이 보면 저저저 어휴 할 것 같지만ㅠ
코드를 짜면서 많은 생각을 할 수 있었다.
💻 코드가 간결하다고 무조건 좋은 코드는 아냐
위코드 오프라인 기간이 시작되기 전 내게는 약간의 고정관념이 있었다.
짧은 코드가 좋은 코드라는 생각이었다.
우선적으로, 틀릴수도 맞을수도 있다고 생각한다.
하지만 남이 이해하지 못 하는 무조건적인 간결한 코드는 틀린 코드라는 생각을 할 수 있게 되었다.
내가 작성한 코드를 남에게 설명할 수 있고, 심지어 설명없이 다른 사람이 내 코드를 읽을 수 있게 되었을 때 좋은 코드가 된다는 것을 알 수 있게 되었다.
코드 리뷰를 받을 때에도, 동기들과 서로 코드를 나누며 설명을 하고 도움을 줄 때에도, 내 코드는 쓰이는 것에 비해 읽히는 사람들과 그 시간이 훨씬 길었다.
잘 읽히는 코드를 위해서 jsx의 className을 더 specific하고 직관적이게 작성하고, eventHandler 등을 위한 함수명을 최대한 자세하게 작성하면서 좋은 코드가 무엇인지에 대해 다시 한 번 생각해볼 수 있었다.
class명은 누가 봐도 확실하게, 가장 밖에 감싸지는 태그의 클래스는 컴포넌트 네임으로!
우스갯소리로 개발자들이 가장 많이 어려워하는게 클래스명, 함수명 등 이름을 짓는것이라고 하기도 한다.
실제로 코드를 짜며 생각한것은, 진짜 거짓말이 아닐지도 모르겠다는 것이었다(!!)
남들이 봐도, 내가 봐도, 코딩을 모르는 사람이 봐도 이게 무슨 코드겠구나 하고 유추가 가능한 이름을 사용해야하는데 진짜..
그나마 영어를 못 하지 않아 다행이라는 생각을 했었다.
가장 밖에 있는 태그의 클래스명을 컴포넌트명으로 하는 이유는 scss가 꼬이는 일을 방지하고, 다른사람들과의 코드가 꼬이는 것을 방지하기 위해서이다.
scss를 이미 경험하고 왔던 나는 scss가 더 좋고 편했었지만, 처음 접하는 분들은 네스팅을 생소하게 여기는 분들도 계셨었다.
그리고.. 컴포넌트 명으로 해야하는 이유를 굉장하게 느꼈던 사건이 있었다.
멘토님 죄송합니다 감사합니다 사랑합니다,,,,
💻 긴 코드, svg 는 밖으로 빼내서 혼란을 줄이자!
이번 프로젝트를 진행하면서 가장 생소했던 부분은 svg path 코드를 파일 밖으로 빼내 import, export 해서 사용하는 것이었다.
이렇게 svg 코드들을 따로 분리시키고,
요로케요로케 임포트 해서 사용했다!!!
코드를 분리시킬 때 react를 import 하지 않으면, 해당 태그들을 jsx로 인식하지 못 하는 일이 생겨 react를 import시키고 export를 진행했다.
이전보다 확실히 읽기 편한 코드가 되었고, 어떤 SVG인지 변수명에 작성해뒀기 때문에 코드가 없이도 어떤 코드인지 간편하게 알 수 있었다. :)
💻 API를 사용해서 데이터를 받아오자!
HTTP 통신 규약을 지켜 api통신을 통해 백엔드 서버와 데이터를 주고 받을 수 있고, 이번 프로젝트에서 처음으로 백엔드와 통신을 하는 실습을 진행했다.
fetch, Promise를 이용해 받아온 데이터를 가공해 UI에 버튼의 활성, 비활성화를 진행할 수 있었다.
프론트와 백이 데이터를 주고 받을 땐 무조건 "String" 타입의 데이터만 주고받을 수 있기 때문에 JSON.stringify를 통해 object데이터를 string으로 변환시켜 데이터를 넘길 수 있었다.
fetch로 api통신을 요청하고 응답을 받아내고, promise then을 통해 받아온 데이터를 우선 json형식으로 변환시킨다.
변환시킨 데이터를 가공해 원하는 응답을 받아왔을 경우 Login에 성공, token을 저장시킨 뒤 main페이지로 넘어가게 하는 작업이었다.
token은 보통 state가 아니라 localStorage에 저장하는것이 가장 일반적이다 :)
로그인, 회원가입에서는 주로 "POST"타입 메소드를 사용한다.
Promise는 자바스크립트의 비동기적 실행을 위해 사용한다.
자바스크립트는 하나의 코드가 전부 완료되면 다음 코드를 실행하는 것이 아니라, 동시에 여러 작업을 진행하기 때문에 비동기적으로 작동하게 하지 않고 응답을 읽히는 코드를 작성할 경우 데이터가 받아오기도 전에 실행되면서 제대로된 처리를 할 수 없게 되버릴 수 있다.
그렇기 때문에 then을 이용해 데이터를 받아온 뒤 순차적으로 진행될 수 있도록 비동기적 처리를 진행시킨다.
그런데.. 백엔드와 동시에 작업할 때엔 어떻게 확인을 해야하지? 바로! Mock Data를 사용해서 받아볼 수 있다.
MockData 생성해서 데이터 사용하기
MockData는 가짜 데이터 더미라고 생각하면 이해가 빠를것이라고 생각된다.
내가 지금 당장 서버에서 데이터를 받아오지 못 하는 경우, 가짜로 만든 데이터를 받아와 가공해서 사용할 수 있다.
MockData를 사용할 수 있는 방법에는 크게 두 가지 방법이 있는데, js파일에 더미 데이터를 생성하거나 localHost를 통해 페이지가 실행되었을 경우 api를 받아오는 것 처럼 데이터를 받아 사용하는 것이다.
localHost를 사용할 경우, public 폴더에 data 폴더를 생성하고, 내 로컬호스트 api를 baseURL로 사용해서 받아올 수 있다.
더미 데이터를 사용해 이벤트가 일어났을 때 뿐만이 아니라, componentDidMount 메소드에 작성해준 후, setState에 저장시켜 사용하는 것도 가능하다. :)
💻 Input을 동시에 관리할 수 있다구요!?
로그인 페이지에서 이메일, 비밀번호를 작성하는 input 태그 두 개가 있었다.
당연히 Handler를 두 개로 분리해 사용해야할것이라 생각했는데, input태그의 name attribute를 이용해 동시에 관리할 수 있었다.
inputHandler(e){
const {name,value} = e.target;
this.setState({
[name] : value,
});
}이런식으로 작성해주면, input tag에 각각 다르게 작성해준 name을 이용해 각자의 input에 접근할 수 있었고, name과 state명을 일치시켜 더 편리하게 관리할 수 있었다.
💻 조건부 렌더링???
리액트 조건부 렌더링 보러가기
? : 를 통해 if else를 구분지어주는 것은 많이 사용해봤지만, &&를 통해 조건을 결정짓는 방법은 정말 이번 프로젝트에서 처음 사용해본 것 같다.
{followBtn===true && <button>Follow</button>}위 코드는 followBtn이 true값을 가질 경우, 버튼을 보여주라는 조건을 가지게 된다. false일 경우 어떠한 것도 실행되지 않고 무시된다.
더 자세한 내용은 리액트 공식 문서를 참고하면 좋다 :)
프로젝트를 끝마치며 🐋🐋
여기까지는 그래도 알음알음 예습하며 복습하며 이해했던 기초 부분이었기 때문에 하는데에 엄청나게 어려움을 겪지는 않았었다.
하지만, 어떻게 해야 더 깔끔한 코드를 짤 수 있고 리액트의 장점을 더 살려 코딩할 수 있는지에 대해 학습할 수 있었다.
리액트 공부를 하긴했지만 학습 내용을 통해 무언가 웹앱을 코딩한 경험이 매우 적다보니, 강의에서 하는 코딩과 실제 코딩이 많이 달라 중간중간 물음표를 가득 띄웠던 기억이 있다.
즐겁고 유익한 경험이었다.
다른 사람들과 이야기를 나누며 왜 되는지, 왜 안 되는지, 왜 input은 state와 함께 controlled 되어야하는지 공식 문서도 찾아보고, onKeyUp을 사용하지 않는 이유도 찾아보고..
다음부터는 개인이 아닌 팀 프로젝트가 시작된다. 또 떨리기도 하고.. 걱정되기도 하고. :)
열심히, 꾸준히, 지치지 않을 만큼 열정적으로 불태워보고싶다🔥🔥
