TIL 16 클론코딩(인스타그램)Input 안에 text 넣어주기(position, absolute)

기존 인스타 화면

기존 인스타그램을 보면 댓글다는 창안에 게시 라는게 있는데 클론코딩 주차중에 이걸 오늘 넣었다. 다른것도 많이 추가했지만 이것에 대해서 써보려고한다.

Input 안에 텍스트 넣기  (placeholder 아님)

클론코딩중인 내 화면

빨간 테두리처럼 input 안에 게시 라는 text 를 넣을려면 정확히는 ‘넣는게’ 아니고 position을 absolute 로 절대값을 줘서 겹쳐도 밀리지 않고 그 위로 뜨게 해준다. 그리고 position의 위치를 오른쪽 끝에 둬야하므로 position 과 같이 쓰는 left 를 전체화면의 70% 로 주어서 해당 위치에 뜨게한다.

이렇게 안쓸때는 연한색으로 클릭을 안하게하고 글을 쓰면 게시가 찍해지면서 클릭할수있게 해주는건 comment_text.length 라는걸 이용한다 value 부분에 넣어주는건데

위와같이 useState로 _onChange 안에 입력 이벤트값 e를 넣어줘서 그값의 target의 value 값이 0 이상이면 찐한 게시가 보이고 그 찐한건 onClick 기능을 갖게했다.

 

 

 

오늘로 클론코딩 2틀이 지났다. 첫날에 api 부분을 설정하고 프로젝트의 스코프를 정할때 확실히 백엔드와 프론트간의 원하는 부분이 다르다고 느꼈다. 백엔드분들이 실력도 좋기도 하거니와 뷰 단을 만들필요가 없어서 기존거를 이미 다 끝내셔서, 좀더 다른 기능을 원하셨다 예를들어 쇼핑몰 사이트를 만들어 장바구니 같은 기능을 추가하고 기존에 CRUD 를 제외한 좋아요,댓글 기능, 자기메인 프로필 화면 등등

하지만 프론트엔드 쪽에서 보이는 화면 뷰 까지 신경쓰면서 데이터 관리를 해야하기때문에 전주까지 기존껄 해봤다곤해도 디자인이 달라지기때문에 소요하는 시간이 많아질수도 있어서 기능구현하는데 많은 투자를 못할수도 있다. 따라서 CRUD 를 기본 스코프+좋아요,댓글 까지 가져가되 완성하면 추가 기능이나 페이지를 넣기로했다. 

 

하루동안 와이어프레임을 그리고, 최하위 컴포넌트를 기존에 쓰던거를 쓰되 현재 프로젝트에 필요없으면 지우고 필요하면 추가하기로하였다. 그렇게 큰 틀을 만들어서 끝내니 저녁7시 정도였고 그때부터 제대로 파트를 나눠서 진행하기로했다. 그런데 진행하다가 이미 말을 맞춘 최하위컴포넌트안의 데이터변수를 임의적으로 팀원분이 바꾸셔서, 그거를 깃허브에서 merge 하는부분에서 많이 어려움을 겪었다. 

 

솔직히 혼자안풀리면 해결하기위해 혼자 노력해야하지만 협업이란건 누군가와 마춰가야하는건데, 잘되는부분이 변수하나로 다 고쳐야하는 상황까지오고 conflict 까지오니 솔직히 멘탈이 많이 나갔었다 그땐 새벽 3시를 지나고있었다. 

 

아침에 일어나서도 프로젝트에 대한 스트레쓰와 풀리지않는 문제였기때문에 마침 정창길 매니져님 과의 상담 신청이 가능하여 그냥 이런저런 이야기를 듣고 현업에서 느낄수있는 고충을 미리 더 경험하고 간다고 생각하면 좋다고 이야기해주셨다. 그리고 이런 변수문제같은경우는 어떻게 보면 코드컨벤션을 잘 맞추지 못했기때문에 일어난거기때문에 그걸 잘쓸수있는 프로그래밍을 쓰는걸 추천해주셨다. 지금 겪기때문에 앞으로 프로젝트를 할때 한번더 체크를 할수있으니 걱정말고 얻어 간다고 생각하라고 하셨고, 앞으로 있을 실전프로젝트에서도 재밌게 할수있을거라고 조언해주셨다. 그렇게 상담을 맞추고 나서 마음을 다잡고 프로젝트를 좀더 빠르게 정신차리고 해야겠다라고 느꼈고, 생각보다 빠르게 뷰 부분을 어느정도 잡을수있었고 그래서 api를 통해 백엔드분들에게 데이터를 받아 적용하기까지했다.

 

백엔드분들이 실력이 너무 좋아서 든든하였고 편하게 데이터도 넘겨주시고, 포스트맨에 설정도 다해주셔서 미리 어떤게 안되고 되고 추가할게 있는지 알게 되었다. 그렇게 해서 오늘 완성한 부분은 로그인,회원가입, 메인화면 디자인+ 데이더받아서 유저아이디, 댓글수,좋아요 갯수, 등등 완성할수있었다.

 

내일은 수요일인데 최대한 CRUD 를 끝낼려고 생각중이다.

현재 진행상황