저번 글에 이어서 포트폴리오를 쭉 만들어보자
전에 만든 방명록보다 퀄리티를 높일 방법
퀄리티를 높이기위해 나는 내 코드를 조금 더 읽기 쉽고 다른곳에서 다시 사용할 수 있게 분리해주는걸 좀 더 노력해봤다.
이번 사이트도 방명록과 비슷하기 때문에 자주 쓰일것 같은 함수가 몇 있었다.
그중 이미지를 업로드하기전 미리볼 수 있는 함수와
이미지를 업로드시키는 함수인데
이녀석들은 코드도 꽤 긴편이고 사용되는곳이 한 3~4군데가 있었다.
나는 이녀석들을 따로 다른 js파일로 함수를 제작해주기로했다.
근데 이녀석들을 다른 js파일에서 함수로 제작하는데 꽤 많은 에러들에 부딪혀버렸다.. 이정도로 어려울일인가 싶더라
혼자해보다 도저히 안되겠어서 구글링도해보았고 여기저기 질문도 남겨보았는데 커리어리 사이트에서 큰 도움을 받았다!
일단 기본적으로 내가 분리시켜주려했던 코드의 분리전 모습을 보면
- 함수 분리전의 코드모습
대충 이정도인데 이곳에서 필요한건 스토리지에 업로드 된 후 이미지의 경로인 저 url이 필요한것이었다.
- 함수 분리후의 코드모습
코드가 확실히 줄어들었다.
중간중간 조건문으로 회원가입의 에러를 확인할 코드들이있어 이정도만 캡쳐해왔는데 확실히 코드를 작성하는데 코드량이 확실히 많이 줄어들었다.
둘 다 모두 회원가입을 하기위한 페이지이고 둘 다 스토리지에 업로드 후 url을 가지고 유저정보에 업데이트와 데이터베이스에 추가하는 코드이다.
- 이걸 만들면서 겪었던 에러가 너무많아서 여기 적을 순 없다..
정말 수많은 에러를겪고 처음보는 에러도 겪어보고 이런저런 방법을 모두 사용을 해보았는데 내 머리로는 해결 할 수 없었다 ㅋㅋ..
그래서 커리어리에 다른분의 도움을 받을 수 있지않을까? 하고 질문을 남겨보았는데 정말.. 최고의 도움을 받았다..ㅠㅠ
- 일단 분리해준 함수를 먼저 둘러보면
Promise객체를 사용하는 방법이었다. 나는 Promise 객체를 분명 인강에서 듣긴했었으나 이해가 제대로 되지않아 일단 넘어갔었는데 그게문제였나보다..
리턴값으로 프로미스객체를 만들어 reslove와 reject에 성공값과 실패값을 넣어 뱉어주는 느낌인것같은데 위 처럼 함수를 만들어 사용하니 밖에서는 resolve값인 성공했을때의 url이 뿅 나타나는것이었다.
내가 제대로 이해한걸지는 잘 모르겠다..
내가 부족한것이 무엇인지 확실히 하나 느꼈으니 Promise를 좀 더 공부해봐야겠다.
그리고 이미지 미리보기 또한 Promise를 사용하여 해결이됐는데
- 이미지 미리보기를 분리해준걸 살펴보면
이러한 모습이다. 여기서도 Promise를 사용하여 resolve값을 받아오는걸 사용하게됐다. reader.result값이 필요한거였는데 혼자했었을땐 저 값을 받아오질못해서 이방법 저방법 생각나는대로 다 해봤었는데 진짜 공부한 이후로 최고로 많은 에러를 경험했다.
미리보기는 이렇게 사용할 곳에서 async로 함수를만들어 이미지파일을 넘겨주고 그 값으로 받는 reader.result값을 state에 넣어 사용했다.
정말 깔끔하게 작동하는걸보고 오늘 너무너무 기뻤다..
이 함수들을 분리해주려 거의 이틀동안 고생했기때문이다..ㅠ
이제 함수도 분리했으니 다시 작업을 이어갔다.
내가 원하는대로 함수도 분리해냈으니 코드량도 줄었겠다.
글 작성페이지는 오늘 끝을내놓았다.
당연히 글 작성페이지의 input과 뭐 모든내용들이 수정하기와 같을것이니 Create로 분리해서 만들어줬다.
Create에 props로 이미지파일을 받아오는 함수와 글 작성하기를 눌렀을 때 데이터베이스에 글이 올라갈 함수도 보내주었다.
- props로 보내줄 함수들을 미리 살펴보면
이정도 밖에 되지않는다.
여기서 정말 기분이좋았다. 내가 원하는대로 이미지업로드 할 함수를 분리해줬기에 코드가 굉장히 깔끔해졌기 때문이다.
앞으로 갈수록 더 나는 내 코드를 줄일 방법을 생각할거같다.
(이게 내 성장에 도움을 줄거라 생각한다.)
이제 Create컴포넌트를 한번 살펴보면
html태그들이 거의 대부분이어서 이정도의 느낌이다 정도만 봐도될거같다.
input의 type이 file인 녀석에게 props로 받아온 함수에게 파일을 넘겨주고
버튼에게는 props로 받아온 클릭했을 때 데이터베이스에 올려줄 함수를 넣어줬다.
(수정페이지에서는 데이터베이스에 올리는게아닌 업데이트를해줄것이다.)
그 외에는 뭐 그냥 input들이라 설명할 필요는 없을것같다.
그리고 여기서도 되게 기분좋았던게
이미지 미리보기 함수가 고작 5줄밖에 되지않는다.
여기서도 정말 기뻤다.
나중에는 저 input들의 코드도 줄일 방법이 있는지 생각해봐야겠다.
(input사용하면 항상 너무 지저분하다.)
그리고 input의 값은 리덕스툴킷에서 관리해주기로했다.
수정할 때 필요할것같아서 이게 더 나을것같았다.
최종적으로 작동이 잘된다.
여기서 보니 이미지크기가 지멋대로였네..
CSS좀 고쳐줘야겠다.
오늘 마무리
오늘은 커리어리에서 좋은분의 도움으로 함수도 깔끔하게 분리해줬고 그걸 사용하여 회원가입 페이지와 글작성 페이지에서 코드량을 확 줄일 수 있었다.
내가 부족한게 뭔지 좀 느끼게되는 에러테러였지않나싶다..
지금 자바스크립트가 부족한듯하여 딥다이브 자바스크립트 라는 책을 읽어보기 시작했다.
3월을 취업목표로 잡고있으니 그 전까지 내 실력을 보충해놓아야겠다.
- 지금 이 비슷한작업이 무려 세번짼데
방명록 사이트를 두번이나 만들었었고 지금 또 그와 비슷한 기능을 사용하는 페이지를 만들고있는데
만들어 볼 때 마다 코드가 조금씩 바뀌는것이 내 숙련도가 올라가는게 아닐까 하고 생각하고있다.
전에 만들었을때 회원가입의 코드량과 현재 만들고있는 사이트의 회원가입 코드량의 차이가 나는걸 보고 조금 뿌듯함을 느끼는것같다.
심지어 이번에는 회원가입에 email과 password 그리고 nickname을 담아줄 input에 이메일이 아닌것과 패스워드의 길이 닉네임의 길이 가 맞지않을 때 에러또한 검사를 해주었는데도 코드량이 적은게 맘에든다.
또한 글 작성페이지도 코드량이 많이 줄어들었다.
한 10줄~15줄 정도 차이가나는듯한데 이게어딘가싶다
오늘 이후로 자바스크립트 공부를 좀 더 깊게 파둬야겠다.
(오늘 사용해본 Promise는 정말 최고였다.)
- 그리고 글을 쓰는것에도 좀 더 노력을 기울여야겠다.
종종 찾아보는 개발바닥 유튜브를 보고 글을 쓰고 내 기록을 남기는것에 좀 더 노력을 기울여야겠다 라고 생각이들었다.
앞으로는 글을 작성할 때 좀 더 열심히 작성해야겠다.
