# westagram
westagram-Login
로그인 화면 HTML내용이다.유효성 검사를 하기위해 disabled 속성을 넣어서 비활성화 시켰다. 비활성화 시에 색을 다르게 하여 특이점을 나타내기위해 opacity값을 css내부에 따로 할당하였다.아이디인풋,패스워드인풋,로그인버튼 각각 가지고있는 클래스명을 할당하는
BE_Westagram project_11.4
깃허브 클론하기폴더 만들기 : mkdir chuljin폴더 들어가기 : cd chuljinpackage.json 만들기 : npm init -ypackage.json에서 내용 넣기
[TIL #29] - westagram 로그인 페이지 (React)
모든 웹사이트를 방문해서 로그인 페이지를 들어가보면 거의 다 위의 사진같은 형식으로 되어있을 것이다. 물론 위치나, 디자인 등등은 각각의 웹페이지의 특성과 스타일에 맞게 다르겟지만, 기본적으로 두개의 입력값을 받을 <input> 창이 있을것이다. 이 입력창에는 각
Westagram 콘솔 안찍어서 3시간 날린 썰 feat. Callback function, keyup("E"nter)
Callback 함수를 이용하여 Enter 키가 눌릴 시 댓글이 기입되는 기능을 만들고 싶었다. 그리고 아래와 같은 Javascript 가 나왔다.기입된 코드에는 콘솔이 찍혀있다... 코드를 작성하기 시작한지 3시간 전 나는 저것을 기입 했어햐 했다... console
인스타그램 클론 코딩 - REACT 팀 프로젝트
HtmlㆍCssㆍJavascript를 이제 막 배웠는데!! React로 Refactoring을 하라니! 이거 가능 한거야? ㅠㅠ 🐥 ???? 결과! 물론 가능하다! 왜? 혼자가 아니기 때문! 고마운 팀 동료들에게 감사를 전한다. 불과 일주일전에 작업한 페이지와 지
인스타그램 클론 코딩 - 메인 페이지 JS
다음으로 메인페이지를 클론 연습하였다. 🐥HTMLㆍCSSㆍJAVASCRIPT 기술을 사용하였다.레이아웃이 조금씩 복잡해지니 flex 개구리 잡기 연습을 더 해봐야겠다.Javascript 또한 Event DOM에 접근하여 사용하는게 너무 어려웠다.계속 이벤트 돔에 대해
[westagram] bcrypt & JWT
bcrypt & JWT >##### 패스워드 암호화? 회원가입시 사용자로부터 아이디와 비밀번호를 받게 된다. 그리고 DB에 저장하게 된다. 이때 DB에 사용자로부터 입력받은 패스워드 그대로 저장하게 될시 개인정보에 대한 유출이 발생할 가능성이 있다. 그러므로 패스워드를 저장하기 전에 암호화해서 저장을 하게 된다. 이때 일반적으로 단방향 해쉬 함수가 쓰...
[westagram] 인증 & 인가
인증과 인가 인증과 인가란 무엇인가? 인증이란 사용자가 누구인지를 판단하는 것을 의미하며, 인가는 인증이된 사람에 대한 권한을 의미한다. 인가는 인증이 선행되어지고 난 뒤에 행해지는 것이다. 우리가 위코드에 들어오기 위해서는 카드키가 필요하다. 여기서 카드키는 인증에 해당한다. 카드키 를 이용해서 들어오는 사람이 인증된 사람인지 아닌지를 판단할 수 ...
[westagram] 회원가입 & 로그인
회원가입 흐름 회원가입시 클라이언트와 서버사이에 어떤 흐름이 발생하는가? 클라이언트에서 회원가입에 대한 정보가 보내진다. 이메일, 패스워드, 개인정보 등 http통신을 통해 json형태로 데이터가 보내진다. 서버측에서 파이썬이 사용가능한 형태로 데이터를 변환시킨다. json.loads()를 이용해서 딕셔너리 형태로 변환시킨다. 여기서 키값이 올바르게 ...
인스타그램 웹사이트 만들어보기 (Javascript)
Javascript를 이용한 인스타그램 클론 코딩 프로젝트입니다. 로그인 유효성 검사, 댓글, 댓글의 좋아요/삭제 기능 등 간단한 기능들만 구현했습니다.
[Project] Westagram 회원 가입 & 로그인
Client와 Server 간 요청과 응답을 할 수 있는 회원 가입과 로그인을 실제로 구현해 보자
[Westagram]#4 로그인 기능 구현
사용자 계정(이메일)과 비밀번호로 로그인계정이나 패스워드 키가 전달되지 않았을 경우{"message": "KEY_ERROR"}, status code 400계정을 잘 못 입력한 경우 {"message": "INVALID_USER"}, status code 401비밀번호
[Westagram]#3 회원가입 기능 구현
이메일이나 패스워드가 전달되지 않을 경우{"message": "KEY_ERROR"}, status code 400 반환 Email validation - 이메일에는 @와 .이 필수로 포함(조건이 만족되지 않은 경우 에러 반환)Password Validation - 비밀
[Westagram]#2 모델링
models.py회원가입 기능 구현을 위한 테이블이름 last_name, first_name이메일 email : 다른 유저와 중복없게 하기비밀번호 password연락처(휴대폰) phone_number email = models.CharField(max
[Westagram]#1 django 초기세팅
westagram 이라는 이름의 가상환경 생성IP허용주석처리(admin, csrf, auth)westagram/urls.py 수정my_settings.py 생성 (DATABASES, SECRET_KEY)장고 설정에 존재하는 내용 중 SECRET_KEY, DATABASE
[Project] Westagram Kickoff (1. 모델링)
지난 편에 이어, Django를 사용하여 모델링을 하고, MySQL에 database table을 만들어 보자
Westagram kickoff_guide
👉 Westagram : instagram의 mini버전브랜치feature/mainfeature/signinfeature/singup레파지토리를 직접 생성할지(이번 과제에서는 멘토님이 주소부여)이미 만들어진 코드를 클론을 받을지팀원 중 한명이 초기환경 셋팅완료 후 P
Assignment #1 | Westagram [Mission 10] 팔로우(follow) 기능 구현
follow 관련 기능은 유저들 사이에서 일어나기 때문에 users app 사용Follow class는 User와 User 사이의 중간 테이블로 from_user, to_user 두가지 attribute 모두 User class를 ForeignKey로 갖음따라서 rel