완벽한 하루 앱 리디자인

리액트를 활용한 새로운 도전!

연인들의 데이트코스를 추천해주는 완벽한 하루, 처음 도전해보는 리액트를 활용한
SPA 방식을 통하여 사용자에게 긍정적인 반응을 이끌어 낸 앱입니다.

기존 사이트의 노후화 된 디자인을 변형하여 가독성이 높고 브랜드의 아이덴티티 컬러를 활용하여
컨셉에 맞게 디자인 하였습니다.

• 모바일 기기 최적화
• Components를 이용한 리액트 사이트
• Props를 이용한 데이터 작성 후 map()을 이용한 데이터 뿌리기
• Router 와 Routes Path / 를 이용한 URL에 맞는 페이지로 변환
• ScrollToTop함수를 이용한 컴포넌트 변환 시 상단에서 시작
• HashRouter 적용
• styled components를 사용한 스타일 적용

• 신선함에 가려진 어려운 리액트 도전기

새로 도전하는 리액트는 새로운 단어와 처음 해보는 코드로 신선함을 주었지만 신선함에 가려진 어려움이 있었다. 생소한 Props에 Components 등등 알면 쉬울 것 같지만 처음에는 역시나 어려웠다.

너무 어려워서 중간에 포기하고 싶었지만, 네이버의 VIBE와 Instagram, Facebook 등 다양한 리액트를 통한 홈페이지를 보고 도전을 멈추지 않고 끝까지 도전하여 완성을 시켜 너무 뿌듯했다. 하지만 완성했다 해서 멈추는 것이 아닌 더욱 도전하여 리액트 성장 일기를 더욱 채우고 싶다.

• 컴포넌트 인식을 하려면..

첫 리액트 작성 시 컴포넌트를 나누기 위해 .js 파일을 생성하고 연결 시 인식을 못하는 현상 발생. 컴포넌트의 파일은 대문자로 시작해야 하며 카멜방식의 작성법을 인식하지 못하여 컴포넌트의 첫 글자를 대문자로 변경하여 해결하였다.

• Map() 함수? 지도를 보여주는 함수인가?..

Props 로 데이터를 뿌려줄 때 처음 접하는 map() 함수를 보고 의문이 들었다. 리액트 공부하면서 map() 함수는 지도가 아닌 forEach랑 비슷한 배열을 순서대로 순회시켜주는 역할을 하고 있었다.

map() 함수를 이용하어 Data안에 정보를 입력 후 반복되는 디자인과 내용인 곳에 적용시켜 주어 간편하게 작업할 수 있었다.

• 코드도 맞고 데이터 반환도 잘 됐는데 흰 화면만 나와버리네

리액트 실행 시 데이터 반환은 잘 되었었다. 하지만 화면은 계속 흰 바탕에 오류만 나고 있어 자세히 본 결과 화면 List 안에 화살표 함수로 작성하여 줄 바꿈 시 Return 값을 작성을 해주어야 한다는 걸 인식하여 수정하니 문제없이 작동되었다.

• 다 됐다! 근데 이미지는 왜 안보이지?

src 폴더 안에 이미지 폴더를 넣고 빌드를 해도 보이지가 않는 문제가 발생하였다. 여러 방법을 찾아보았지만 해결이 되지 않아 public 폴더에 이미지를 넣고 process.env.PUBLIC_URL을 이용하여 해당 이미지를 보이게 하였습니다.

• React? 한번 도전해볼까?

첫 리액트를 마주하였을 때 정말 어디에 쓰는 것인지 하나도 몰랐다. 이번 과정을 진행하면서 웹에 관해 공부하다 보니 여러 가지 구현해 보고 싶은 홈페이지들이 많았는데 그 중 많이 쓰인 것이 리액트였다. 클릭 시 특정 부분만 변환되고 나머지는 그대로 있는.. 그런 홈페이지

리액트를 몰랐을 때 평소 무심히 지나갔던 홈페이지들은 당연히 CSS와 JavaScript로 구현된 줄 알았지만 리액트 였다는 걸 알게 되고 찾아보니 평소 인터넷을 사용하면서 썼던 홈페이지들이 리액트로 이루어졌던 게 많았다. 배우기 전에는 아무 생각 없이 지나갔던 홈페이지들이 점점 지식이 쌓이면서 어떤 코드를 썼는지 눈에 보이기 시작한다.

점점 흥미가 생겨 리액트를 공부하고 난 후 도전해보고 싶은 욕구가 생겨 만든 작품이다.

• 괜히 도전했나?

여태까지 도전하면서 느낀 어려움 중 단언컨데 최고라고 느낀다. 물론 처음이라 더욱 그렇게 느꼈을 수도 있지만.. Html, CSS 가 리액트에 비해 매우 수월하게 이루어졌다는 걸 느꼈다. 새롭게 들어보는 Props, Components 등등 리액트를 만만하게 생각했던 나를 되돌아보게 한다.

리액트에서 이해가 안 되는 것들도 많고 해결이 안 되는 것도 많아서 이번 작업을 하면서 스트레스를 많이 받았던 것 같다. 정말 포기하고 싶었을 때도 많았고, 이해하지 못한 나 자신을 원망하기도 하였지만 여러 인터넷 검색과 공부를 통하여 해결되지 않았던 문제들을 하나씩 풀어나갈 때 내 마음의 짐도 하나씩 풀려 나갔다.

• 포기하지 않고 끝까지

점점 풀리지 않은 문제들이 하나씩 풀리고 구동도 되고 마음의 짐이 점점 덜어지니 비로소 그때야 리액트에 구조가 보이기 시작하였다. 점점 완성되어가는 나의 리액트 사이트를 보고 흥미를 느끼고 완성되었을 때 비로소 뿌듯함을 느꼈다. 최종적으로 완성하였을 때 잘 작동하는 것을 보고 정말 눈물 없이 볼 수 없는 리액트 성장기였다.

처음 하면 누구나 어려움을 느낄 수 있지만 그 두려움을 이기고 도전해보는 것이 나를 발전시켰다고 생각한다. 비록 리액트의 기초의 기초밖에 안 했다고 생각하였지만 포기하지 않고 끝까지 해결해 나아가는 과정이 다 도움이 되리라 생각한다.