[WIL 6] 클론코딩

항해99

99일, 주니어 개발자로 입사하기에 충분한 시간

hanghae99.spartacodingclub.kr

---

 

• 진행 날짜 - 2021.04.02 ~ 2021.04.08
• 주특기(Node.js) 목적 - 팀원들과 함께, 백엔드와 프론트 엔드의 역할을 맡아 클론 코딩을 해보자!!!
• 필수 포함 사항

• 유튜브 링크 - 

 

 

• 깃 허브 링크 - 

 

 

WonDongGyun/instagram_clonCording

---

 

항해 99의 여섯번째 주가 밝았습니다!

 

요번주는 클론 코딩 주간이었습니다. 조를 나누어 각 팀마다 클론 코딩할 사이트를 정하고, 클론코딩을 함으로서 주특기 주간에 배웠던 것들을 점검하고, 자신의 실력을 되돌아 볼 수 있었습니다.

 

 

 

 

 

저희 조는 벨로그, 트위터, 유튜브, 인스타그램에서 고민하다가 인스타그램을 클론 코딩하기로 정하고, 역할을 분담하고, API 목록을 만들었습니다. 클론 코딩이기 때문에 와이어프레임은 만들지 않았습니다.

 

각자 실력이 달랐기 때문에 1주일간 만들 수 있는 최소한의 작업량을 생각하며 API 설계를 했습니다. 이렇게 최소화했는데도 마지막 날까지 시간을 짜내서 열심히 달리긴 했지만요. 초보 개발자들은 언제나 자신이 완성 할 수 있다고 생각하는 날의 2배를 해야한다는 말이 정확해 보였습니다......

 

 

 

 

 

 

 

요번 프로젝트에서는 백단(node.js) 과 프론트단(React)으로 나뉘어져서 진행됐기 때문에, 백단 구조를 잡을 때 좀 더 신경써서 잡을 수 있었습니다. 우선 지난 주특기 때 해보고 싶었던 MVC 파일 구조를 잡아서 비즈니스 로직과 쿼리를 분리하여 더 깔끔한 코드를 짤 수 있게 만들었습니다. 

 

그리고 라우터 기능 별로 폴더를 쪼개서 서로 다른 영역을 작업해, git 커밋시 충돌을 최소화 하였습니다. 

 

 

 

 

그 다음 필요한것은 CORS 설정이었습니다. 프론트단과 백단의 AWS 서버가 달랐기 때문에, 프론트단에서 벡단의 API를 호출하기 위해서는 CORS 설정은 필수 였습니다. 그래서 CORS 설정을 하기 위해, nodejs cors 모듈을 받아서 사용하였습니다. 이렇게 하면 프론트 단에서 벡단의 AWS 서버에 접근할 수 있고, 원하는 데이터를 가져갈 수 있습니다.

 

 

 

 

 

인스타그램 하면 떠오르는 것. 그것은 이미지가 아닐까요?

하지만, 이미지를 로컬 컴퓨터에 일일이 저장하기에는 저희 컴퓨터 용량은 많지가 않습니다. 따라서 AWS S3에 이미지를 올리기로 정하고, 필요한 모듈들을 받았습니다.

 

우선, multer 모듈을 사용하여 프론트단에서 보내주는 이미지를 받고, AWS와 multerS3 모듈을 사용하여 S3에 이미지를 올렸습니다. 그리고 데이터베이스에는 해당 이미지의 S3 주소를 저장하였습니다. 

 

이렇게 작업함으로서, 프론트단에서는 필요한 데이터와 S3 주소를 사용하여, 사용자가 작성한 글에 이미지를 띄워 보여줄 수 있었습니다.

 

 

 

 

추가로 데이터베이스에 사용자의 비밀번호를 암호화하여 저장하기 위해, bcrypt 방식을 사용했습니다. 

 

bcrypt는 미국 NSA에서 설계한 암호화 해시 함수로, 기존의 SHA가 해쉬속도가 너무 빠른 탓에 레인보우 테이블을 만들 수 있는 시간이 단축된다는 문제점을 보완한 알고리즘입니다.

그래서 이번 프로젝트에서는 bcrypt로 암호화를 진행하였습니다. 만약, 보안에 더 민감한 곳이라면 scrypt나, Argon2id를 사용해야 합니다.

 

 

 

전체적으로 프로젝트 크기를 줄였지만, multer, S3, bcrypt, CORS 설정을 해보느라 여러모로 기능 개발이 오래걸렸습니다. 하지만, 매번 새로운 기술을 적용하며 성장하는 저의 모습을 보니 뿌듯합니다. :)

 

---

 

😀 배운 점

multer, multerS3, aws, bcrypt, cors, mvc 구조등 여러가지 새로운 모듈들과 파일 구조법을 사용하면서, 전보다 훨씬 간단하고 쉬운 코드를 짤 수 있었습니다. 불과 3주전에는 express도 쩔쩔맸는데, 많이 성장한것 같아요~!

 

😙 느낀 점

점점 성장해 나가는 모습을 보니, 다음주에는 또 얼마나 대단한 프로젝트를 하며 새로운 것을 배워나갈지 기대됩니다. 점점 node js가 재밌어지고 있어요~

 

😭 아쉬웠던 점

새로운 모듈을 시험해보느라, 시간이 지체된 점이 없지 않아 있습니다. 하지만, 이러한 시행착오를 거쳐야 다음번엔 실수를 안하겠죠?