Homile

React 프로젝트 구성 #1 (프로젝트 생성) Firebase를 사용하여 React 프로젝트에서 Firestore를 사용할 수 있도록 작업을 시작해보겠습니다. 1. Firebase 로그인 및 콘솔로 이동 구글 계정을 생성후 firebase.google.com 링크에 접속하여 우측 상단에 있는 '콘솔로 이동'을 클릭하여 Firebase 프로젝트를 생성하러 이동합니다. 2. 프로젝트 생성 콘솔로 이동하게 되면 중앙에 프로젝트 추가 버튼을 클릭해줍니다. 프로젝트의 이름을 지정합니다. 애널리틱스를 설정합니다. *애널리틱스: 무제한 무료 분석 솔루션인 Google 애널리틱스를 사용하면 Firebase Crashlytics, 클라우드 메시징, 인앱 메시지, 원격 구성, A/B 테스팅, Cloud Functions..

Firebase? 모바일 및 웹 애플리케이션을 만들기 위해 개발된 플랫폼입니다. Firebase로 플랫폼을 구축 시 자동적으로 서버를 구축해주어 리눅스의 명령어를 알 필요가 없으며, 인증, 데이터베이스, 스토리지, API 등을 구성하는데 조금 더 간편하게 작업을 할 수 있도록 도와줍니다. 이를 통해서 적은 비용으로 좋은 앱을 만들 수 잇습니다. 기능 기본적으로 가장 많이 사용하는 기능만 적어보도록 하겠습니디ㅏ. Authentication 계정 기능을 쉽게 만들 수 있게 해주는 API입니다. SNS 로그인 기능 또한 구현할 수 있습니다. Cloud Firestore SQL 언어를 사용하지 않고, 클라우드에 데이터를 저장하여 사용할 수 있습니다. 실시간 데이터베이스 사용자 기반 보안으로 온/오프라인에서 실시..

📌 어제 한 미디어 쿼리는 재미있었다. 오늘은 웹 페이지에 동적인 효과를 가져올 수 있는 애니메이션 효과에 대해서 학습을 한다. 오늘도 어제와 같이 재미있는 시간이 되었으면 좋겠다. 📗 오늘 학습한 내용 CSS 애니메이션 @keyframes CSS로 키프레임 블록을 만든다 @keyframes 애니메이션이름{ 0% {/* from으로 작성가능 */ CSS속성: 속성값; transform: rotate(0deg) } 50% { CSS속성: 속성값; transform: rotate(180deg) } 100% {/* to으로 작성가능 */ CSS속성: 속성값; transform: rotate(360deg) } } /* 시작 시점에서 0도, 50프로 시점에서 180도, 완료시점에서 360도 회전시킴*/ 애니메이션..

📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다. 📗 오늘 학습한 내용 브라우저 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다. 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다. 웹(Web) = 월드 와이드 웹(World Wide Web) 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다. 웹 페이지 HTML 언어를 사용하여 작성된 문서 형태 웹 사이트 웹 페이지 중 서로 관련된 내용으로 작성된..

📌 공식적으로 이루어지는 첫 솔로프로젝트인데 무엇을 해야할지 아이디어가 항상 고민이 되는 것 같다. 무엇을 할까??? 고민하던 중 API를 사용해보라는 말에 바로 미세먼지 수치를 나타내 주는 프로젝트를 한번 만들어 보자고 생각하여 도전하게 되었습니다. 📗 오늘 학습한 내용 공공 데이터 포털 미세먼지 실시간 정보 API 활용신청 및 활용 axios axios를 활용하여 미세먼지 실시간 정보 API 데이터를 지역별로 가져올 수 있는 작업 StoryBook Styled-components를 활용하여 Story book component 생성 생성 된 UI components를 netlify 사이트를 사용하여 배포 구현화면 부족한점 지역을 입력하는 중 렌더링된 내용 사라짐 검색 후 엔터를 누를 경우에만 반영하도..

📌 오늘은 웹 페이지를 생성할 때 사용자들의 로그인을 쉽게 해주는 SNS 로그인 기능에 대해서 학습을 하는 날이다. 📗 오늘 학습한 내용 소셜 로그인 로직 플로우 사용자가 로그인 요청을 보낸다. SNS Auth서버에서 권한 허락 문구를 화면에 출력한다. Authorization code를 클라이언트에 전달한다. Authorization code: 액세스 토큰을 발급받기 위한 Code 클라이언트에서 웹 서버로 Authorization code를 전달한다. 웹 서버에서 SNS Auth서버로 Access token을 요청한다. Access token: 보호된 리소스에 액세스하는데 사용되는 인증 토큰 SNS Auth서버에서 웹 서버로 Access token을 전달한다. 웹 서버에서 Access token을 클라..

Portals Fragment를 사용하면 깔끔한 코드를 작성할 수 있습니다. React Portals은Fragment와 비슷한 일을 하여 간결한 코드를 작성하는데 사용됩니다. 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법입니다. ReactDOM.createPortal(child, container) 첫 번째 인자 child는 엘리먼트, 문자열, fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식 요소입니다. 두 번째 인자 container는 DOM 엘리먼트입니다. 사용법 일반적인 컴포넌트 렌더링 메서드에서 요소를 반환할 때, 해당요소는 부모 노드에서 가장 가까운 자식으로 연결됩니다. portal의 전형적인 동작 방법은 부모 컴포넌트에 ov..

📌 요즘 날씨가 더워졌다 추워졌다 하는 것을 보니 환절기인듯하다 이럴때 몸관리에 유의해야겠다... 하나더 요즘 몸이 너무 쉽게 피로해진다.. 확실히 체력이 떨어지는 것을 몸으로 직접 체감하고 있다. 체력을늘리자!! 초심을 찾아 더 열심히 공부해보자!! 📗 오늘 학습한 내용 OWASP(The Open Web Application Security Project) 전 세계의 보안 전문가들이 웹의 보안에 대한 표준을 정의하고 이에 대해 기업과 개발자들에게 효율적인 정보를 제공하는 오픈 소스 커뮤니티이다. SQL Injection 간단하지만 강력한 공격기법 DB에서 임의의 SQL문을 실행할 수 있도록 명령어를 삽입하는 공격유형 대응 방안 입력(요청)값 검증 Prepared Statement 구문 사용 Error ..

📌 오늘부터 3일간 로그인관련 내용을 학습을 하게된다. 쿠키... 토큰... 소셜 로그인 관련이다... 이부분은 프로젝트에 사용할 수 있는 부분이기 때문에 열심히해보자!!! 📗 오늘 학습한 내용 HTTPS 프로토콜 HTTP + Secure 요청의 내용을 한번 암호화하기 때문에 유출이 되어도 어떤 내용인지 알 수 없다. 인증서, CA, 비대칭 키 암호화방식을 이용한다. 인증서 데이터를 제공하는 서버가 진짜인지 인증확인하는 용도이다. 인증서의 내용에 서버에 도메인 관련 정보가 있어서 데이터 제공자의 인증을 용이하게 한다. 요청을 받은 서버는 인증서와 함께 응답을 전송하고, 응답을 받은 클라이언트는 인증서에 작성된 도메인과 응답 객체에 작성된 도메인을 비교하여 같다면 데이터를 제공해주는 서버가 진짜라는 것을 ..

React.Fragment란? DOM에 별도의 노드를 추가하지 않고 여러 자식 요소를 그룹화할 수 있습니다. JSX 제한 사항 JSX 코드를 작성할 때 Root 요소가 존재하지 않고 나란히 존재하고 있다면 JSX 문법에 위반하는 행위가 됩니다. 아래의 코드와 같이 JSX는 ReactDOM 요소로 작성이 가능합니다. 한개의 Root 요소 안에는 여러개의 요소가 존재할 수 있지만 Root 요소는 여러개가 존재할 수 없다는 것입니다. // JSX 문법에러 return ( 안녕하세요 여러분!! 만나게 되어 반갑습니다! ); // JSX 문법을 ReactDOM으로 변경한 코드 return ( React.createElement('h2' {}, '안녕하세요 여러분!') React.createElement('p' {..