인스타그램클론코딩 9

Team Project 2 | 인스타그램 클론코딩 KPT

KEEP(유지하고 싶은 부분) 열정적이며 서로 응원하고 단합하여 문제를 해결해 나가는 분위기 어려운 문제점이 발생 하면 포기하지 않고 서로 맞대어 해결 시간을 가리지 않고 부족한 부분을 채우기 위해 노력함 기대에 못 미치는 결과에도 자신을 깍지 않고 배우면 할 수 있다는 신념 속도가 느려져도 거북이를 뒤쳐지게 하지 않음 누가 봐도 팀원 전원 발전하고 있는 게 보임 모르는 부분에 대해 구글링 을 통해 스스로 해결하고자 하는 자세 PROBLEM(문제점 및 해결방안) 집중을 잘 하다가 옆으로 세는 경향 끊어주는 사람을 정함 ObjectId를 통해 상호작용이 가능한 피드를 구현하려 했으나 실패 BSON 인터프리터를 사용해 JSON 형식으로 데이터 받는 것 시도 팀 전원 오류 발생 으로 미니콘다 다운받아 진행했으..

PROJECTS 2022.05.11

Team Project 2 | Log Out | 로그아웃하면 토큰이 사라지고 로그인 화면으로 이 ! 동 ! | 인스타그램 클론코딩 |

드롭다운에서 로그아웃을 눌러보자 ! 로그아웃 누르면 1. 저장된 토큰을 삭제 시키며 정상 로그아웃 처리 2. 로그인 화면으로 이동 console.log를 사용해서 로그아웃 버튼이 잘 작동되는지는 확인하고 로그아웃의 알람이나 로그인화면으로 이동하는 것 까진 잘 되었으나, 나는 저 !!! 토큰이 삭제가 됐는지 안됐는지 알 수가 없었다. 내 실력으로 한번에 될 것 같지 않았는데, 한번에 되니까 너무 의심스럽더라. 간단하게 토큰이 생성되었는지 삭제되었는지 알 수 있는 방법을 알 게 되어 공유해봄 ! 우선, 로그인시 토큰이 발생되는지 안되는지를 확인하는 법부터 알아보자. 개발자 도구 > Application > Cookies > 로컬PC 누른 상태에서 로그인을 해보자. 그렇다면 아래의 영상처럼 없었다가 토큰이 생..

PROJECTS 2022.05.10

Team Project 2 | Dropdown | 바닐라코드 | 인스타그램 클론코딩 | 🌱

드롭다운 작동 드롭다운을 바닐라 코드로 만들어봄 ! if문과 show, hide를 사용할 줄 안다면 누구나 만들 수 있다. 하지만 나는 어제가 되어서야 정확하게 만들 수 있게 됐다. 구현하지 않음 히스토리 내역 링크 연결(저장,설정,계정 변환) 클릭시 아이콘 색 변화 코딩하면서 어려웠던 점 아이콘 클릭 시, 상단 아이콘'들'이 위로 올라가는 현상 : 상단 아이콘과 히스토리 부분의 태그가 둘 다 태그길래 히스토리 태그를 에서 로 바꿈 히스토리 드롭다운이 숨겨져있지 않고 처음부터 보여져있는 현상 : 아무리 display / visibility / opacity 를 바꿔봐도 상태가 변화가 없었다. 개발자 도구를 이용해 히스토리 드롭다운을 클릭했을때, 작은 삼각형과 네모가 한번에 묶여져 있는 태그가 없었기 때문..

PROJECTS 2022.05.10

Team Project 2 | 회원가입 페이지 | 회원가입 정보 입력시 데이터는 어떻게 저장되나?! 그걸 내가 해냄 | 인스타그램 클론코딩 | 🌱

회원가입 중 ! 정보 입력 후 가입해봅시당. 가입이 되었으면 데이터가 잘 저장되었는지 확인해봅시당. 현재 페이지의 회원가입에 필요한 정보는 이메일 또는 핸드폰 번호 | 이름 | 아이디 | 비밀번호 가 필요하다 이름, 아이디, 비밀번호는 조건문 사용없이 데이터에 저장이 가능하지만, 이메일 또는 핸드폰 번호는 택 1이라는 조건이 있어서 while을 사용하였음 우선 while문을 사용하기 이전에 이메일 과 핸드폰번호의 전역 변수를 만들어주었고 if문 사용을 위해 변수는 공란처리를 해주었다. 간단하게 사용한 함수를 설명하자면, contact_receive : 브라우저에서 이메일 또는 핸드폰 번호를 입력해 사용자가 요청한 데이터 변수. while True: 내용이 true일 경우 1. contact_receive..

PROJECTS 2022.05.05

프론트엔드 소질? 정렬이 어렵다. | 회원가입 화면 UI | 프로젝트⭐️진행상황 |

회원가입 화면 현재 5월 5일 13시 20분 Git update. 팀원 중 하나가 이전 팀프로젝트의 별에 대한 컨셉을 이어가면 좋겠다는 의견을 내서 mov를 배경에 깔려다가 실패. 아쉬운대로 오로라 느낌이 나게 그라디언트 효과를 줌. 요즘에는 색조합표가 있어서 찾으면 금방 나와서 만들기가 쉬움 이제 점심 먹고 DB, API 를 공부를 해야한당.. Js, jQuery는 그 다음 ! - 색상을 고를때 참고하면 좋을 링크- #ffffff - Google 검색 HEX, sRGB : #FFFFFF, AdobeRGB : #FFFEFF. RGB (sRGB), Red : 255, Green : 255, Blue : 255. RGB (AdobeRGB), Red : 255, Green : 254, Blue : 255. w..

PROJECTS 2022.05.05

Team Project 2 | 인스타그램 클론코딩 | 회원가입 UI

백엔드 기술을 들어가기 전에 먼저 메인화면 UI 수정과 함께 [ 회원가입 + 로그인 + 마이페이지 + 모달 + 드롭다운 + (개인정보설정?) ] 화면을 팀원들과 나눠 만들게 됐다. 그 중에 나는 회원가입 화면을 맡았고, 프로젝트가 아예 똑같을 필요는 없다하여 색상을 좀 바꿔봄 MOCK UP대로 만들며 발견한 오타와 실수들을 반영해 만들어 봄 지금 보면 수직정렬이 안되어 있는데, align-contents, justify-contents, position(static, fixed, sticky, center, relative) flex-direction, grid, cloumn? 진짜 많은 코드를 도전해봤는데 막상 포스팅하려니까 기억이 다 안남......... 이제 곧 일출시간이겠다 자고 일어나서 다시 도..

PROJECTS 2022.05.05

Team Project 2 | MOCK UP 만들 땐 피그마, 오늘은 DB 구성 구축까지 ! | 인스타그램 클론코딩 Flask | 팀프로젝트

Figma: the collaborative interface design tool. Build better products as a team. Design, prototype, and gather feedback all in one place with Figma. www.figma.com https://www.figma.com/ 어쩌다보니 내가 만들게된 목업. 피그마를 이용하니 만들기가 진짜 쉬웠고, 링크를 공유해 팀원들과 함께 작성할 수 있어서 더 좋았음 ! 다소 중복적인 기능들을 사용해서 기존의 메인 로그인-회원가입-로그인 화면을 줄였고, 기능들이 포함된 새로운 모달창들도 같은 이유로 목업에는 넣지 않았다. 현재 메인 피드 화면은 만들어진 UI를 사용하기 때문에, db구축으로 값에 대한 전반적인 코..

PROJECTS 2022.05.03

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

저의 노력입니당. 최선을 다했어요. KEEP(유지하고 싶은 부분) 바닐라 코드 팀 프로젝트보다 좀 더 서치능력이 생김 안 풀리는 부분에 대한 집착 : 클론코딩 1px이라도 똑같이 만들고 싶었던 노력 클론 코딩에 대한 이해도와 흐름 파악 Git 사용 PROBLEM(문제점 및 해결방안) - 전체적 로직 이해 부족 홈페이지 규격 최적화 (인스타 홈페이지는 좌우 조절시 좌우만 줄어드는데, 세로도 같이 줄어들음) 슬라이스 적용 후 레이아웃이 망가짐 (픽스됐던 부분 포함) class, id 정리 정렬 : 슬라이스와 픽스 + 반응형 웹 float / fixed / sticky / flex / position / display / 아이콘을 사용하면 깨지거나 사이즈 조절이 안됨 인스타그램 svg를 가져옴 + svg 태그..

PROJECTS 2022.05.02
반응형