# westagram
Westagram - Data 활용
상수 데이터란 변하지 않는 정적인 데이터로,페이지를 구성할 때 UI 구성에 필요하지만 동적으로 변하지 않아 백엔드 API 등을 통해 가져올 필요가 없는 데이터들을 말한다.보통 페이지 상단의 메뉴 드롭다운이나 footer의 내용들은 변하지 않는 정적인 데이터이다. 이 부
Westagram React
사용자 입력 데이터 저장 기능 구현로그인 버튼 활성화 기능 구현댓글 기능 구현댓글 컴포넌트화, Props로 데이터 전달 구현: id와 pw input에 change 이벤트 발생시 event.target.value를 받아 set함수에 저장, input의 value값으로
Westagram 추가구현
ID, PW 유효성 검사 (아이디 '@' 포함, 비밀번호 5글자이상 + 입력했을 때만 버튼 누를 수 있게 설정)댓글 좋아요 / 삭제 기능 (모든 댓글에 적용)미디어쿼리를 사용하여 반응형 웹 구현: id와 pw의 유효성을 각각 체크하는 함수를 만들어 button을 활성,
Westagram Refactoring
코드는 계속 추가와 수정을 거치는 유지보수과정을 거친다. 미래의 나를 위해, 팀원들을 위해 가독성이 좋게 만들고 추후 서비스가 추가 될 상황을 대비해 확장성이 좋게 만들어야 한다.새로운 코드를 만드는 것 보다 코드를 수정할 때가 더 힘든 것같다. 이번 과정에서는 수정을
Westagram 메인페이지
nav 태그 사용하여 nav bar 만들기.flex 사용하여 각각의 div 위치 구성.댓글 입력 후 enter 또는 버튼 클릭시 댓글 추가.
Westagram 로그인페이지
🔥 구현 할 내용 > 1. 로그인 전체를 감싼 border가 적용된 div 태그 사용. instagram 로고는 'westagram'으로 변경 후 폰트 적용. 적절한 type을 사용한 input 태그 사용, placeholder 속성 사용. button 태그 사용.
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
[westagram] bcrypt & JWT
bcrypt & JWT >##### 패스워드 암호화? 회원가입시 사용자로부터 아이디와 비밀번호를 받게 된다. 그리고 DB에 저장하게 된다. 이때 DB에 사용자로부터 입력받은 패스워드 그대로 저장하게 될시 개인정보에 대한 유출이 발생할 가능성이 있다. 그러므로 패스워드를 저장하기 전에 암호화해서 저장을 하게 된다. 이때 일반적으로 단방향 해쉬 함수가 쓰...
[westagram] 인증 & 인가
인증과 인가 인증과 인가란 무엇인가? 인증이란 사용자가 누구인지를 판단하는 것을 의미하며, 인가는 인증이된 사람에 대한 권한을 의미한다. 인가는 인증이 선행되어지고 난 뒤에 행해지는 것이다. 우리가 위코드에 들어오기 위해서는 카드키가 필요하다. 여기서 카드키는 인증에 해당한다. 카드키 를 이용해서 들어오는 사람이 인증된 사람인지 아닌지를 판단할 수 ...
[westagram] 회원가입 & 로그인
회원가입 흐름 회원가입시 클라이언트와 서버사이에 어떤 흐름이 발생하는가? 클라이언트에서 회원가입에 대한 정보가 보내진다. 이메일, 패스워드, 개인정보 등 http통신을 통해 json형태로 데이터가 보내진다. 서버측에서 파이썬이 사용가능한 형태로 데이터를 변환시킨다. json.loads()를 이용해서 딕셔너리 형태로 변환시킨다. 여기서 키값이 올바르게 ...
인스타그램 웹사이트 만들어보기 (Javascript)
Javascript를 이용한 인스타그램 클론 코딩 프로젝트입니다. 로그인 유효성 검사, 댓글, 댓글의 좋아요/삭제 기능 등 간단한 기능들만 구현했습니다.