QuickImage Finder

프로젝트를 시작한 이유

• 코딩을 배우면서 내 자신에게 많은 의문이 있었고, 이런 고민이 장벽 처럼 느껴지게 되면서 일단 프로젝트를 진행 해보기로 헀다.

나는 정말 코딩을 할 수 있는가?

• 개발 공부는 하고있고..해왔었지만... 맨땅에 직접 개발을 할 수있는가?

  1. React/Javascript 을 사용하여 코딩을 할 줄 아는가?
  2. FrontEnd 면 API 를 다뤄야하는데 할 수있는가?

무슨 프로젝트인가?

UnSplash,Pixabay, 에서 사진을 검색해서 사진 요청하는 싸이트.

사진을 검색할때 unsplash,pixabay 등 여러 싸이트들에 들어가면서 원하는 사진을 찾아야 하는데 그것이 너무 귀찮다.

그럼 검색 한번에 여러 이미지를 볼 수 있으면 좋지 않을까? 라는 생각에 만들게 되었다.

NETLIFY 배포된 LIVE SITE

DEMO

사용한 스택(Stack) & API

• React
• styled-components
• axios

프로젝트 진행하면서 중요시 했던 부분

1. Clean Code를 연습해보았다.

   코딩을 하면서 느낀것은 내가 오늘 작성한 코드를 나중에 다시 돌아서 본다면 기능이 무슨 기능인지, 코드가 어디서, 어떻게 실행되고 있는지 등 생각보다 쉽게 잊어버린 다는 것이다.

   • 이것을 극복 하기 위해서는 깔끔한 폴더 구조 가 필요하고..나의 코드 naming(이름) 들이 뭔지 쉽게 알아야 한다는 것이다.

그렇기 때문에 api들은 api 폴더의 index.js에 정의하였고..
App.js 안에서 components를 호출하여 index.js에서 render 하는 방식으로 진행하였다.

이번프로젝트에는 css 보다 javascript 기능 구현에 중점을 많이 둬서 styles는 크게 건드리지 않았다.

이번 프로젝트를 하면서 가장 큰 TIL들

• 각 API를 Destructuring 하여 필요한 JSON 들을 가져와 새로운 FUNCTION으로 두가지 API를 동시 호출했다는것.
• Async Await을 사용하면서 코드를 짜보면서 비동기의 중요성을 깨달은것
• React Hooks 로만 코드를 작성하여 state 관리에 대한 이해도가 생긴것.
• 실제 프로젝트를 완성하여 Netlify에 Live server로 배포해본것.

이 프로젝트를 더 발전 할 수 있는 방법들

user 관련:

• 로그인,로그아웃 부재
• 현재는 이미지를 클릭하면 직접 이미지 출처 싸이트로 이동되지만.. 나의 싸이트에서 직접 좋아요, 이미지 다운 등 기능들 구현
• 검색결과가 없을때 404페이지 나 이미지 찾을수 없음 표시 부재

마치며..

1. 코딩을 어렵지만 재미있고..처음에는 어렵지만 하나 하나 분석하면서 구글의 힘을 사용하면 정답은 있다.
2. 프로젝트를 진행할때 처음이 중요하다. 항상 REFACTORING을 하여 더 좋은 코드를 짜야 하는것은 맞지만, 처음부터 폴더의 구조, 코드의 구조등을 잘 생각하고 처음부터 좋은 boilerplate로 시작하면 프로젝트 진행이 수월해진다.