웹개발 16

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

DB설계를 위한 ERD 특강 | ERD Cloud? ☁️ | 거북이반🐢 | 이 곳은 이해가 쏙쏙

말보다 행동, 해보면 이해가 쉽다 ! (이 블로그는 작성자의 의견일 뿐, 정답이 아닐 수 도 있습니당...) 프로젝트 기획에 있어서 중요한 3가지 ! ERD + Figma + 기능명세서 Figma는 전의 포스팅을 했듯이 브라우저에 어떻게 띄울 것인가 ERD는 DB 구성을 어떻게 했고, 어떤 시스템으로 진행되는가 기능명세서는 각각의 (아이디, 패스워드, 프로필사진, 좋아요 수 등) DB가 어떤 기능을 하는가 실무에서는 위의 3 가지가 기본적으로 있어야 한다고 한다. Figma에 대해서는 앞의 포스팅에 기재를 했었고, 어제(4일)는 ERD 진행 구조에 대한 간단한 내용과 ERD Cloud 사용법을 배웠다. 진행 구조는 사실상 무슨 말인지 알 것 같으면서도 모르겠던데, 막상 ERD Cloud 를 그려보니 알겠..

STUDY/Python 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

파이썬 문법 기초 19강 🔥 | 스파르타코딩클럽X고용노동부

강의자료에 들어가보면 아래의 문구가 있다. "본 강의의 목적은 파이썬 문법을 보다 체계적으로 이해할 수 있도록, 빠르게 이론을 습득하고 퀴즈로 숙달하게 만드는 데 있습니다. 또, 향후 마주칠 난이도 있는 문법들을 눈으로, 손으로 먼저 경험해보겠습니다. 🔥 " 그래서 이번 주에 프로젝트로 파이썬게임(3개에서 1개로 변동)과 UI클론 2개가 있나보다.... 프로젝트와는 별개로 파이썬 문법 기초강의는 기초적인 문법 + 퀴즈 + 심화 문법/쓰임새들로 되어있다. 수강하면서 제일 중요한 점은 외우려고 하지 말기 ! # 파이썬 기초문법 강의 1-3 print('⭐️⭐️⭐️⭐️⭐️파이썬 기초문법 강의 1-3 | 변수 선언⭐️⭐️⭐️⭐️⭐️️') a = 3 # 3을 a에 넣는다. print(a) b = a # a에 들어..

STUDY/Python 2022.04.26

Team Project 1 | 피드백 | 4월20일 - 4월22일

미니 프로젝트가 무사히 끝났다 !! 금요일에 모든 팀들이 모여 시연영상과 사용한 코드, 시행착오, 해결한 부분 등 발표하는 시간을 가졌었다. AI 지원한 팀은 총 14팀으로 팀당 10~15분 발표 시간을 계획했지만 총 3시간이나 걸렸다. 우리 팀은 다섯번째 순번이라 발표하고 다른 팀들 기획, 코드, 결과물을 보니 시야가 넓어지고 더 좋은 아이디어도 떠오르고 재밌고 각자의 팀 소개에 대한 페이지라 서로에 대해 가볍게 알아갈 수 있다는 점도 좋았음 👍 피드백 이재화 튜터님 : - 깔끔한 디자인과 어느정도의 기능들은 잘 구현했다. - 코드가 길어지는 건 객체지향을 배우면 잘 해결할 수 있다. - 코드가 300줄이 넘어서 주석을 안쓰면 안됩니다! 꼭 써야지 성장할 수 있는 발판이 된다. 권기현 튜터님 : - 메..

PROJECTS 2022.04.25

Team Project 1 | KPT | 4월20일 - 4월22일

💛 notion 💛 https://heady-lan-a0c.notion.site/1-_mini-project_2j2yk-13d5ca60915541b58cbe72b37fd62bf3 💛 git 💛 https://github.com/nicesugi/HappyCoders/tree/main/2J2YK-webpage Keep (유지하고 싶은 부분) 열정적이며 서로 응원하고 단합하여 문제를 해결해 나가는 분위기 아이디어 포용력을 가지고 여러 대안을 같이 찾아보고, 다양한 의견 중에서도 좋아 보이는 의견으로 정해가는 흐름 협업 도중에 흐름이 끊기지 않게 협업 시간에는 업무에 대한 의견만 주고 받는 등의 업무에 대한 발군의 집중력 문제를 포기하지 않고 해결하려는 모습 어려운 점을 서로 나누어 같이 해결하려는 자세 Pro..

PROJECTS 2022.04.25
반응형