본문 바로가기

전체보기335

22.07.19_TIL 📌 공식적으로 이루어지는 첫 솔로프로젝트인데 무엇을 해야할지 아이디어가 항상 고민이 되는 것 같다. 무엇을 할까??? 고민하던 중 API를 사용해보라는 말에 바로 미세먼지 수치를 나타내 주는 프로젝트를 한번 만들어 보자고 생각하여 도전하게 되었습니다. 📗 오늘 학습한 내용 공공 데이터 포털 미세먼지 실시간 정보 API 활용신청 및 활용 axios axios를 활용하여 미세먼지 실시간 정보 API 데이터를 지역별로 가져올 수 있는 작업 StoryBook Styled-components를 활용하여 Story book component 생성 생성 된 UI components를 netlify 사이트를 사용하여 배포 구현화면 부족한점 지역을 입력하는 중 렌더링된 내용 사라짐 검색 후 엔터를 누를 경우에만 반영하도.. 2022. 7. 19.
22.07.18_TIL 📌 오늘은 웹 페이지를 생성할 때 사용자들의 로그인을 쉽게 해주는 SNS 로그인 기능에 대해서 학습을 하는 날이다. 📗 오늘 학습한 내용 소셜 로그인 로직 플로우 사용자가 로그인 요청을 보낸다. SNS Auth서버에서 권한 허락 문구를 화면에 출력한다. Authorization code를 클라이언트에 전달한다. Authorization code: 액세스 토큰을 발급받기 위한 Code 클라이언트에서 웹 서버로 Authorization code를 전달한다. 웹 서버에서 SNS Auth서버로 Access token을 요청한다. Access token: 보호된 리소스에 액세스하는데 사용되는 인증 토큰 SNS Auth서버에서 웹 서버로 Access token을 전달한다. 웹 서버에서 Access token을 클라.. 2022. 7. 18.
[React] Portals Portals Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다. React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다. 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다. ReactDOM.createPortal(child, container) 첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다. 두 번째 인자 container는 DOM 엘리먼트입니다. 사용법 일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다. portal의 전형적인 동작 방법은 부모 컴포넌트에 ov.. 2022. 7. 16.
22.07.15_TIL 📌 요즘 날씨가 더워졌다 추워졌다 하는 것을 보니 환절기인듯하다 이럴때 몸관리에 유의해야겠다... 하나더 요즘 몸이 너무 쉽게 피로해진다.. 확실히 체력이 떨어지는 것을 몸으로 직접 체감하고 있다. 체력을늘리자!! 초심을 찾아 더 열심히 공부해보자!! 📗 오늘 학습한 내용 OWASP(The Open Web Application Security Project) 전 세계의 보안 전문가들이 웹의 보안에 대한 표준을 정의하고 이에 대해 기업과 개발자들에게 효율적인 정보를 제공하는 오픈 소스 커뮤니티이다. SQL Injection 간단하지만 강력한 공격기법 DB에서 임의의 SQL문을 실행할 수 있도록 명령어를 삽입하는 공격유형 대응 방안 입력(요청)값 검증 Prepared Statement 구문 사용 Error .. 2022. 7. 15.
22.07.14_TIL 📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!! 📗 오늘 학습한 내용 HTTPS 프로토콜 HTTP + Secure 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다. 인증서, CA, 비대칭 키 암호화방식을 이용한다. 인증서 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다. 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다. 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 .. 2022. 7. 14.
[React] Fragment React.Fragment란? DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다. JSX 제한 사항 JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다. 아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다. // JSX 문법에러 return ( 안녕하세요 여러분!! 만나게 되어 반갑습니다! ); // JSX 문법을 ReactDOM으로 변경한 코드 return ( React.createElement('h2' {}, '안녕하세요 여러분!') React.createElement('p' {.. 2022. 7. 12.

티스토리툴바