목록Frontend (11)
미니는 밍기적
1.먼저 유저가 이메일을 입력합니다. -Email Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다. -함수에서 Email Input의 value를 setId를 통해 업데이트 합니다. 2.유저가 비밀번호를 입력합니다. -Password Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다. -함수 안에서 Password Input의 value를 setPw를 통해 업데이트 합니다. -Button을 클릭하면 onClick 이벤트 핸들러에 연결된 함수가 실행됩니다. 3.함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보냅니다. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 줍니다. 4. 응답의 결과에 따라 M..
해당 api를 호출하면 아래 같은 결과값을 반환함 백엔드는 이 api를 프론트에게 제공 이때! 백엔드는 url(웹 상에서 서비스를 제공하는 각 서버(컴퓨터)들에 있는 자원(파일)의 위치)만 띡하고 넘기는 것이 아니라 api를 어떻게 사용하는지 api 명세서 정리 (post, put, get 등) 프론트는 백엔드가 보낸 api 명세서를 확인한 후 html, css, js 사용하여 일반적인 사용자가 볼 수 있도록 하는 사용자 인터페이스인 ui 개발 1. 예를 들어 원래는 3개의 포켓몬만 있고, 나머지는 유저들이 올리는 것이라고 가정 -> 스펙이 추가되는 웹 화면 그러면 백엔드 개발팀은 포켓몬을 등록할 수 있는 등록 api 개발 [서버측] 그러면 프론트 개발팀은 사용자가 포켓몬을 등록할 수 있도록 백엔드가 개..
우선 글을 들어가기에 앞서, 프론트와 백엔드 간의 통신 [ 로그인 방식 ] [ HTTP 통신 방식 ] 웹에서 데이터 교환 -> FrontEnd에서 ID와 Password를 입력하여 BackEnd로 데이터를 보낼 때, fetch나 axios같은 HTTP 비동기 통신 라이브러리를 사용 서버와 클라이언트가 항상 연결되어 있는 것이 아니라! 클라이언트가 요청(request)을 보내면 순간 연결이 되고, 서버가 응답(response)을 보내면 통신은 종료된다는 것이다. -> 상태를 저장하지 않아 자원 낭비를 방지한다는 장점 1. session 방식 > 서버에서 사용자의 세션 데이터를 저장해서 로그인 기능을 구현하는 방법 프론트와 서버 각각의 역할 [프론트] 프론트 쪽에서 로그인 페이지에서 아이디, 비번을 서버로 ..