본문 바로가기

개발공부_Blog/HTML-CSS19

API, 다른 앱의 기능이나 데이터를 가져다 쓸 수 있게 해준다. API는 응용프로그램 프로그래밍 인터페이스 쉽게 말해서, 다른 앱의 기능이나 데이터를 가져다 쓸 수 있게 해 주는 방법을 의미한다. 내가 원하는 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공 받을 수 있을지에 대한 규격들을 API라고 한다.ㅇ 인터페이스(Interface) 어떤 기계간의 장치끼리 정보를 교환하기 위한 수단이나, 방법을 의미한다. 인터페이스(interface)는 컴퓨터 시스템끼리 정보를 교환하는 공유 경계를 의미한다, 터치 스크린과 같은 일부 컴퓨터 하드웨어 장치들은 인터페이스를 통해 데이터를 송수신 할 수 있으며, 마우스나 마이크론 폰과 같은 장치들은 오직 시스템에 데이터를 전송만 하는 인터페이스를 제공한다. API의 세 가지 .. 2022. 11. 20.
css - flex의 정렬방식에 대하여! display flex에 대해 정리해봅시다 1 2 3 4 5 display : flex 부모 클래스에 flex 속성을 줘야 나머지 flex 속성을 사용할 수 있다. .box_wrap{ display: flex; } display : flex-direction : 정렬의 방향을 선택 정방향 : row; 정방향 + 역순정렬 : row-reverse; 세로방향 : column; 세로방향 + 역순정렬 : column-reverse; .box_wrap{ display: flex; flex-direction : row; // flex-direction : row-reverse; // flex-direction : column; // flex-direction : column-reverse; } justify-con.. 2022. 10. 24.
간단한데 자주 안써서 까먹는 button에 default style없애기 간단한데 자주 안써서 까먹는 button에 default style없애기 .nav_wrap_mini button{ border: none; outline: none; background-color: inherit ; cursor: pointer; // 마우스 올렸을 때 마우스 스타일 지정 -> 손모양 } 2022. 10. 24.
<textarea> value 속성을 사용한다면 textarea ? 여러줄 텍스트 편집 컨트롤을 나타냅니다. 버튼을 누르면 axios에서 data를 받아서 에 넣어 보여주는 코드를 작성했다. (리액트 코드 생략) axios로 API 호출해서 Data받아오기 return ( 불러오기 {data && } ) textarea에 value속성을 사용했다면 readOnly={ true }를 통해 value의 값을 고정할 것인지, onChange={ } 를 통해 수정할 수 있도록 할 것인지 정해주어야 한다. 2022. 9. 4.
JWT / COOKIE / SESSION 차이점 JWT / COOKIE / SESSION 차이점 Cookie / Session 방식 Session/Cookie 방식 인증은 기본적으로 세션 저장소를 필요로 합니다. 세션 저장소는 로그인시 사용자 정보를 저장하고, 열쇠로 사용할 수 있는 세션 ID 를 만듭니다. Cookie 쿠키는 일종의 서버와 클라이언트가 대화하기 위한 수단. 쿠키는 사용자의 정보를 사용자 컴퓨터 메모리에 저장한다 브라우저가 서버와 연결이 되었을 때 브라우저에서 자동적으로 쿠키를 생성하고, 인증이 필요한 요청에 해당 cookie와 함께 서버에 request 를 보냅니다. 쿠키에 담긴 데이터는 브라우저에서 관리되며, 이름, 값, 만료 날짜, 경로 정보로 구성. Session 서버와 클라이언트의 연결이 활성화된 상태. 클라이언트가 서버와 통.. 2022. 1. 16.
JWT ERROR JWT 에러 로그인 구현을 위해 JWT를 공부하고 기본코드를 따라서 실행시키는 과정에서 에러가 생겼다 token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8') AttributeError: 'str' object has no attribute 'decode' 해결 pyjwt기존 버전에서는 jwt.encode()함수의 리턴값이 '바이트문자열' 자료형이었기 때문에 뒤에 .decode('utf-8')을 붙여 일반 문자열 (str)으로 바꿔줘야 했으나 2.0.0버전부터는 이 함수의 리턴값이 일반 문자열이 되었기 때문에 여기에 .decode('utf-8')을 붙여주게 되면 str값을 두번 출력해라는 명령이 되서 에러가 난 것이었다 JWT .. 2022. 1. 16.
JWT - JSON Web Token 항해99 첫주차 회원가입 / 로그인 페이지 구현 로그인한 사용자는 어떻게 계속 로그인 상태를 유지하면서 권한이 필요한 우리 서비스를 돌아다니는걸까? JWT 는 회원 로그인이 완료 되었을때 발행되는 토큰을 말한다. JWT에는 암호화 된 회원정보가 들어있으며 복호화를 통해 사이트내의 서비스를 사용할 수 있는지 확인 (인가 : Authorizationathon ) 하는데 사용한다. JWT는 JSON Web Token 의 약자로 전자서명 된 URL-safe : URL로 이용할 수 있는 문자로만 구성된 JSON 이다. 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이다 JWT는 서버와 클라이언트 간 정보를 주고 받을 때 Http request heade.. 2022. 1. 16.
css - img사이즈조절 html에서 이미지를 넣으려고 할 때.... box사이즈에 맞춰서 넣어야 되는데... 사이즈가 내 마음대로 되지 않을때 그럴때 화가 난다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너에 꽉 차도록 설정됩니다. 못생겼어. 용납못한다!!!!!!!!!!!!!! // img가 box사이즈에 맞추기 위해 예쁘지 않은 모양으로 늘어남 .blog-list img { width: 100%; height: 200px; } // object-fit을 넣어 cover 비율 맞게 늘어남 .blog-list img { width: 100%; height: 200px; object-fit: cover; } object-fit:cover를 쓰면 가로세로 비율은 유지하면서 컨테이너.. 2021. 12. 20.
HTTP 프로토콜 python requests 파트를 공부하다보니 requests에 대해 찾아보게 됐고 그러다 보니 http까지 들어오게 되었다 컴퓨터분야와는 거리가 멀었던 나로서는... 아직은 낯선 단어들이 많다는 사실!!! 이대로 또 넘어가다간 안되겠다 싶어서 단편적으로 자료를 정리한다 HTTP 프로토콜이란? HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜입니다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되었습니다. HTTP 프로토콜 특징 HTTP 프로토콜은 상태가 없는(stateless) 프로토콜입니다. 여기서 상태가 없다라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로.. 2021. 11. 29.