Review__[Front-end Test: OPENULL]

Jaewon Lee·2021년 3월 18일
0

Review

목록 보기
5/5
post-thumbnail

On.

웁스! 리액트 진짜 오랜만에 한다....하하...

반응형 웹은 말로만 들었지 머리털 나고 처음 만들어서,

어떻게 해야할지 모르고 발만 동동 구르고 있었다.

다행히 같이 공부하는 팀원이 어떤 유튜브 영상을 추천해주셨는데,

그 덕분에 그리드와 미디어 쿼리를 사용해봤다!!

처음해본 반응형 웹이라 허접한 외관일진 몰라도...나에겐 뜻 깊은 첫 반응형!!!!!

시간이 촉박하여 기획을 못했기 때문에, 적을 것이 많지 않지만

지금부터 그 과정을 기록해보겠다!

🤪🤪🤪



시험 진행 과정


1) React 복습

수요일 저녁에 과제를 받고, 당일에는 프로젝트 만들고 리액트 복습하다가 잣다..ㅎㅎ 복습만 해도 새벽 5시....하하... 복습을 하고 프로젝트를 진행하면서, 리액트는 상태주기에 대해 정말 잘 알아야겠다고 생각했다.

모든 것을 이해할 때는 순서가 있다고 생각한다. 어딜가서도 리액트로 작성한 코드를 이해하려면, 상태주기에 대해 잘 알고 있어야 코드가 어떻게 상호작용을 하고 동작하는지 알 수 있다고 느꼈다. (상태주기 열심히 공부하자는 말....ㅎ)

첫날 이렇게 시간을 까먹으니, 당장에 구현에 급급해서 프로토타입 목업도 못하고....후다닥 쫓기면서 기능부터 구현했다ㅠㅠㅠㅠ엉엉 개발은 또 기획하는 맛에 하지 않는가...

그래서 조금 아쉽지만, 열심히 했으니까!라는 말로 위로를 해보면서 마무리해본다....😂


2) 반응형 웹 구현

오프널에서 주신 요구사항을 어느정도 구현하니, 종료 시간이 되었고 일단 제출했다. 아직 반응형이랑 css는 작업 못했는데 말이지....시간은 지났으나 공부 같이하는 형이 자신이 반응형 공부했던 유튜브 영상을 알려줘서, 나는 나름대로 과제를 계속 이어나갔다!

유튜브 영상을 보면서 그리드와 미디어 쿼리를 학습하고, 한 200만년 전에 만져본 flex를 공부했더니 웹 구조를 어떻게 잡을지 느낌이 빡! 와서 바로 적용하러 갔다. 사전에 목업을 했으면 기능을 구현하면서 구조도 잡았을텐데 말이지...뭐..나름 만들어 놓고 섹션 나누는 것도 나쁘지 않았다!

일단 첫 번째로 컴포넌트 위치를 생각해서 그리드로 섹션을 나누었고, 두 번째로 각각의 컴포넌트들을 flex를 이용해 배치해주었다! 하지만 반응형의 꽃은 미디어 쿼리였다! 미디어 쿼리로 브라우저의 max-length를 잡고, 이것 보다 좁아지면 내가 설정한 css대로 웹이 바뀌는데...크...감동..🥺

이렇게 다하니까 아침 6시였나....?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ눈꺼풀에 소한마리는 올라가 있는 것 같아서 바로 자러갔닼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


👉 React과제 DevLog


3) 아쉬웠던 점 😂

  • Proto Type
  • 오름/내림차순 정렬, 검색 기능
  • Life Cycle
  • Header

이렇게 회고 작성하다보면 항상 아쉬운 점이 생긴다는게 아쉽닼ㅋㅋㅋㅋㅋㅋ 그래도 또 하얗게 불 태웠으니 좋게 생각하자!! 프로토타입이랑 생태주기는 질리도록 말했으니 패스하고, 정렬과 검색 기능에 대해 아쉬운점을 정리해보겠다!

일단 정렬은 "이렇게 프론트에서 처리해줘도 되는건가?"라는 생각이 들었지만, 프론트 과제니까!라는 이유로 빠르게 생각을 접었다. 둘 다 아쉬운 부분은 대소문자 구분이였다!

컴퓨터는 당연히 대소문자를 다른것으로 인식하니까 이러한 로직을 처리해주었어야 했는데, 앞서 말했듯이 정신없이 task를 해결하다 보니 잊혀졌다ㅠㅠ

아무튼 어찌저찌 하여 과제를 끝냈는데, 프로젝트를 진행하나 과제를 진행하나 공통적으로 중요한 점은 역시 시간관리 능력이다. 앞으로 언제까지 할 수 있고, 얼마나 끝낼 수 있는지에 대한 약속을 많이 할 텐데 내 능력에 대한 고찰은 필수적이다!

이러한 과제는 여러 의미에서 정말 많은 생각을 하게 되는, 감사한 기회다!



Off.


OPENULL Front-End 과제 전형도 회고 끝!

🤘😎🤘

기본기가 탄탄한 백엔드 개발자가 되는 그날까지 🔥🔥🔥

profile
Communication : any

0개의 댓글