☠️문제점이 산더미인 K.P.T☠️ | 딸랑 1면 만드는데 이렇게 힘들고 고될 일이니? | 4동안의 인스타 데스크탑 UI 클론 페이지

진행이 어떨지 보시면 될것같습니당,,

 

저의 노력입니당. 최선을 다했어요.

 

 

 

KEEP(유지하고 싶은 부분)

• 바닐라 코드
• 팀 프로젝트보다 좀 더 서치능력이 생김
• 안 풀리는 부분에 대한 집착 : 클론코딩 1px이라도 똑같이 만들고 싶었던 노력
• 클론 코딩에 대한 이해도와 흐름 파악 
• Git 사용

 

PROBLEM(문제점 및 해결방안)

 

- 전체적

• 로직 이해 부족
• 홈페이지 규격 최적화 (인스타 홈페이지는 좌우 조절시 좌우만 줄어드는데, 세로도 같이 줄어들음)
• 슬라이스 적용 후 레이아웃이 망가짐 (픽스됐던 부분 포함)
• class, id 정리
• 정렬  :  슬라이스와 픽스 + 반응형 웹
  
  • float / fixed / sticky / flex / position / display / 
• 아이콘을 사용하면 깨지거나 사이즈 조절이 안됨 
  • 인스타그램 svg를 가져옴 + svg 태그 공부
• 검색창 돋보기( svg )가 검색창에 들어가지 않음
• import css시 link 연결이 안됨

 

 

- footer

• 홈페이지 정보 링크가 2줄로 안 됨
• 리스트 중 Top accounts 띄어쓰기 안 됨
• Language 부분 : select-option  를 onclick 기능 구현 

 

 

- main

• @media 사용으로 display: none;  사용시 될때가 있고 안될때가 있음
• 슬라이드 next, pre 버튼 누를 때 이동이 안됨 >
  • 중간중간 console.log 확인해서 인식이 안되는 부분을 찾기 
  • ('.prev') > ('#spanprev')         id 인식을 못해서 class로 진행함

• 슬라이드 : 사진 사이즈 맞추기 / 슬라이드 1번 당 1개의 사진이 아닌 쭈욱 이어져서 나오는 느낌
• 좋아요*댓글*디엠 사이의 간격 조절 실패
• 스토리 부분 슬라이스 적용 실패 : 인스타그램 홈페이지는 스토리가 완전한 타원이 아닌 반원이 나올때가 있는데, overflow: hidden 해보니 반원이 안나오고 아예 사라짐 > 슬라이드랑 바꾸면 될 것 같음

 

TRY(다음을 위한 노력)

• 레이아웃 > html > 픽스 > css > 규격 최적화 순서로 해보기
• 코드 주석
• 데드라인 지키기
• 시간을 정하고 그 안에 코드를 짤 수 있도록 해결할 수 있도록 > 소요시간도 줄이고 꼼꼼하게 할 수 있는 장점
• 코드 정리
• 지식 쌓기.. 

!! 이전 프로젝트의 중복점은 순서 / 코드 정리 / 주석 / 객체지향

FEEL(느낀점)

• 목 금 토 일 월 102시간이라는 시간이 있어도 시간 분배를 하는 것이 중요
• 해결이 안되는 부분으로 시간을 많이 투자하고 있다면 잠시 손을 떼고 다른 부분 시행
• Git 활용하면 어떤 부분이 고쳐졌는지 확인이 가능하지만 내 컴퓨터는 그렇지 않다는 것
• 중간점검시 복사 붙여넣기로 따로 연동되지않는 저장본 만들어두기
• 되돌리기 Ctrl+Z는 스.타.카.토 ^^ 윤슬기 스타카토 명심하자
• 코드의 부모 자식 사이의 불화는 애초에 만들지 않기
• 기능 구현을 하려면 로직 이해가 필요함 : 많은 코드를 쳐봐서 감도 익히고 눈에도 익숙해질 필요가 있음
•  
• 기대한 결과물이 안나오더라도 괜찮음 : 내일의 내가 할 것이니 오늘의 나는 최선을 다하기
• 타인의 도움을 받을땐 해볼만큼 해본 후에
• 처음부터 완벽한 완성본은 기대하지 말자 : 디테일 신경쓰다 데드라인 못지킴