본문 바로가기

분류 전체보기364

의류 쇼핑몰 15 | 구글 계정으로 로그인 | Authentication with Firebase Firebase api와 내 웹이 교류하여 구글 계정으로 로그인을 해보자. 구글 로그인 버튼 만들기 일단은 routes 폴더에 sign-in.jsx 을 파일을 만든다. 구글 로그인 버튼을 추가하였다. 만든 화면은 다음과 같다. 이제는 Google Sign In 버튼을 눌렀을 때 구글 api가 연결되어 구글 로그인 페이지가 뜨도록 해보자. 1. firebase 와 내 웹 연결하기 1. firebase에서 내 웹 instance 만들기 firebase와 내 웹을 연결해야 한다. firebase에서 config를 받아와 내 웹 코드에 붙이면 된다. 1. 내 app 등록을 한다. 구글 firebase 프로젝트 안으로 들어가서 버튼을 누른다. 원하는 이름을 입력하고 Register app 버튼을 누른다. Host.. 2022. 6. 6.
의류 쇼핑몰 14 | Authentication Flow | UI - Google -Firebase Firebase는 email과 password authentication도 제공하지만 Google sign-in authentication도 제공한다. UI와 서버의 관계는 다음과 같다. 웹사이트에서 이메일과 비번을 새로 등록해 회원가입을 하지 않고 사용 중인 지메일로 로그인을 하는 것이다. 보통 서버와 UI의 관계는 이러하다. 한 유저가 로그인을 했을 때 그 유저의 개인 정보, 카드 정보가 든 data를 서버에서 주게되는데 그 유저가 맞는지 확인하는 절차가 아주 중요하다. 그래서 Authentication이 중요하다. 이미 가지고 있는 구글 이메일로 어떻게 Authentication이 되는지 살펴보자. 구글 로그인으로 웹사이트에서 로그인 하면 구글 서버에서 자체 Authentication을 돌려서 본인.. 2022. 6. 6.
의류 쇼핑몰 13 | sign-in 페이지 만들기 1. sign-in 파일 만들기 router 폴더 안에 sign-in 폴더와 파일을 만든다. sign-in.jsx 에 보일러 플레이트로 만들어 준다. 2. path 설정 App.js에 가서 Route path를 설정해준다. 3. link 걸기 이제 navigation.jsx로 가서 Link를 걸어주어야 한다. 결과 보기 sign in 버튼을 클릭했을 때 해당 페이지로 잘 가는 것을 볼 수 있다. 2022. 6. 6.
의류 쇼핑몰 12 | Firebase 시작 | Firebase에 로그인을 하면 현재 사용하고 있는 프로젝트들이 나온다. + 버튼을 눌러 이름을 입력하고 새로운 프로젝트를 생성한다. Google Analytics는 지금 프로젝트에서 필요없으니 disable 해놓는다 다 되었다. build 메뉴 안 Authentication과 Firestore Database 이 2가지를 집중해서 사용하게 될 것이다. 다음은 로그인시 구글로 연결이 되도록 해보자. 2022. 6. 6.
의류 쇼핑몰 11 | Routing 5 | Logo Styles 진짜 Logo 로 바꿔보자. assets 폴더를 만들고, 폴더 안으로 이미지를 드래그 드랍해서 폴더 안으로 넣는다. svg 이미지를 누르면 html 로 되어 있는데, 화면 사이즈에 상관없이 항상 이미지의 깔끔한 라인을 유지한다. 이미지를 Navigation으로 import 해온다. 이미지가 생겼다. 이미지를 클릭하면 home으로 간다. index.scss에 전체적에 적용시킬 내용을 적어준다. 태그는 색과 밑줄이 있는 것이 기본형이다. 밑줄을 없애고, 검은색 글자로 바꿔야 한다. 색상이 바뀌었다. 또 box-sizing을 border-box로 설정해준다. navigation.scss .logo { width: 60px; } .navigation { height: 70px; width: 100%; displ.. 2022. 6. 6.
의류 쇼핑몰 9 | Routing 3 | Navigation Bar | index 지금은 한 페이지에 모든 내용이 나오고 있다. Navigation Bar 를 이용해서 한 페이지에 해당 내용만 나오게 해보자. App.js에 Navigation component를 만들어 준다. Navigation을 가장 부모 태그로 만들고 path는 / 로 지정해준다. Navigation component에 Outlet로 자식 태그의 위치를 지정해 준다. 일단 Outlet을 import한 후 Outlet을 h1 아래에 위치시킨다. 안의 path도 일단 home과 shop으로 이름을 바꿔주고, 서로 silbling으로 만들어 준다. localhost:3000/ 로 가니 Navigation component가 나오고 localhost:3000/home 로 가니 부모 Navigation과 home이 같이 나.. 2022. 6. 5.
의류 쇼핑몰 8 | Routing 2 | Outlet | Nested Route App.js에서 Route를 Shop으로도 연결되도록 해보자. 일단 간단하게 Shop component를 만들고 Route를 설정해 준다. 주소창에 localhost:3000/shop을 넣으면 Shop component에 입력한 내용이 나온다. Nested Route Home Route 안에 Shop Route를 넣어 nested Route로 바꿔준다. 예를 들어 home 안에 shop(/없음)이 들어가면 url 주소는 localhost:3000/home/shop 이렇게 되어야 해당 페이지로 갈 수 있다. 하지만 home component가 나오고 shop페이지는 나오지 않는다. nested route에서 parent component는 없어지지 않고 그대로 있는다. 또 자식인 shop component.. 2022. 6. 5.
의류 쇼핑몰 7 | Routing 1 시작 Routing 란? https://www.crown-clothing.com 웹사이트에서 navigation bars 또는 side panel을 만들어 어떤 페이지를 렌더할 지 정한다. 바에 있는 버튼을 누르면 https://www.crown-clothing.com/route-1 route 1을 적어주면 그에 해당하는 컴포넌트들이 보이게 한다. 항상 있는 컴포넌트들 중에 어떤 컴포넌드를 렌더해 페이지에 보이게 할 지 정하는 일을 routing이라고 한다. sub-route도 가능 route 안에 sub-route로 또 연결을 해야 할 수 있다. 라우팅 라이브러리 routing에서 2 개의 유명한 라이브러리가 있다. 1. React Router 2. Reach Router 이 둘 중에 React Route.. 2022. 6. 4.
React and ReactDOM | HTML안에 리액트 코드 바로 작성해보기 pure react pure-react 폴더를 만들고 그 안에 index.html을 만든다. vs code에서 열어보자. html 파일에서 html을 치면 html:5가 뜬다. html:5를 눌러 보일러 플레이트를 완성한다. div 태그에 id를 root으로 하고 React is NOT rendered 문구를 넣는다 터미널로 html 을 열어보면 html이 브라우저가 열린다. 여기서 React와 ReactDOM 라이브러리를 불러온다. React Library는 엔진이다. 무엇을 렌더링하고 어떻게 렌더링 할 것인지 결정한다 ReactDOM도 우리가 무엇을 렌더하려고 하는지 정한다. React는 ReactDOM을 써서 브라우저에 React Native면 Native element를 써서 폰에 React VR.. 2022. 6. 1.
DOM and Virtual DOM 다음은 리액트로 만들어진 사이트이다. re-render를 했을 때 왜 좋은 선택인가 이 사이트 Elements를 살펴보면 html 태그들로 구성되어 있는 레이아웃을 볼 수 있다. 이들을 DOM tree 라고 한다. Document Object Model Tree 이다. App 안에 3개의 children이 있다. 이 3 children 끼리는 sibiling 이다. card-list 안으로 들어가면 많은 children들이 들어있다. html으로 된 Real DOM tree 로 나타내면 다음과 같은 형태로 나타낼 수 있다. 여기서 내용을 추가하거나 변경을 하고자 할 때 real DOM에서 직접하는 것은 어렵다. 변경할 내용을 DOM에서 뽑아내 내용을 변경하거나 DOM에서 바꾸는 과정은 computatio.. 2022. 5. 31.
React v18: Strict Mode | render 4번 되는 이유 | StrictMode Changes Index.js를 보면 strict mode가 생긴 것을 볼 수 있다. 는 이제 곧 deprecated 되거나 이미 deprecated 된 메소드를 찾아서 콘솔 로그에 warning을 준다. 그래서 이제는 render가 더 늘어나는 이유 예를 들어 input에 타이핑을 했을 때 render가 기본으로 2번 된다. 하지만 strictMode가 적용되면 문제가 있나 잡아내는 과정을 한 번 더 하기에 render가 4번씩 된다. 좀 더 보기 편하게 chrome extension으로 React Developer Tools를 연결한 후 콘솔을 확인하면 render가 4 번 된 것을 알 수 있다. 1, 3번 째는 App.js에서 된 것이고 2, 4번 째는.. 2022. 5. 31.
Monsters-Rolodex 2-4 | destructuring | 끝 props 자리에 바로 destructring할 수 있다. card-list.jsx 파일 props를 생략하고 바로 filteredMonsters만 보이게 할 것이다. 자바스크립트 { } 를 써서 filteredMonsters를 argument 자리에 바로 넣어준다. return도 삭제한다. import Card from '../card/card'; import './card-list.css'; const CardList = ({ filteredMonsters }) => {filteredMonsters.map((monster) => { return ( ) })} export default CardList; search-box.jsx 정리 import './search-box.css'; const Sear.. 2022. 5. 31.
Monsters-Rolodex 2-3 | useEffect | Fetch API 외부 API에서 몬스터 이름을 불러와 useState를 사용해 array 안에 담는 작업을 해보자. 외부 API를 불러오기 위해 fetch 함수를 이용해 데이터를 불러온다. 아래 처럼 fetch 함수를 바로 사용해서 데이터를 불러오면 문제가 발생한다. render가 얼마나 일어나고 있는지 콘솔로그로 확인하면 render가 끝없이 일어나는 것을 볼 수 있다. 이유는 fetch로 외부의 데이터를 불러오는데 매번 불러올 때마다 리액트는 렌더를 다시 한다. 그 때마다 데이터를 새로 저장하여 가리킨다. 이미 똑같은 데이터가 있다하더라도 같은 메모리로 보지 않는다. 값이 같은 게 중요한 게 아니라 같은 곳을 포인팅하고 있어야 하는데 그렇지 않다는 것이다. 더 문제는 fetch 함수 자체만 따로 isolate해서 렌.. 2022. 5. 29.
컴퓨터 프로그램 끄기 window -> Task Manager window bar에서 window 누르고 Task Manager 로 가서 해당 프로그램을 끊다. 2022. 5. 29.
Monsters-Rolodex 2-2 | useState 설치 useState를 사용하여 input에 입력한 내용이 setState에서 받도록 해보자. setSearchField 에서 searchField가 아닌 searchFieldString을 넣는 이유는 searchField는 useState에서 이미 기본값으로 설정이 되어 있다. setState에 넣어봤자 같은 값을 가지고 변화가 되지 않는다. input으로 들어온 searchFieldString을 setState에 넣어야 계속 변화를 감지하고 re-render를 한다. 일단 input에 아무 것도 입력하지 않고 console.log에 searchField를 나오게 하면 기본으로 입력되어 있는 abc가 나온다. searchFieldString --> searchField 값이 이동하고 console.log에 .. 2022. 5. 29.
[JS] 비동기3 | async, await async, await asynchonous인 Promise를 좀 더 간결하게 만들어 synchronous인 것처럼 만들어주는 API 이자 Syntactic Sugar이다. 모든 경우 async, await이 좋은 게 아니라 Promise를 써야 좋은 경우도 있긴하다. Syntactic Sugar 새로운 코드가 아니라 기존의 코드를 좀 더 간편하게 쓸 수 있게 하는 코드를 말한다. ex) class: proto 타입을 더 보기 편하게 만들어 주는 역할 백엔드에서 네트워크와 연결해 오기 까지 10초정도 걸리는 함수가 있다고 가정해 보자. 실행 되었을 때 'Jane' 유저의 이름을 반환해 준다. 함수를 호출하고 콘솔에서 출력을 해보자 이렇게 동기적으로 처리를 하면 네트워크에 연결되는 10초 동안 다음 코드는.. 2022. 5. 22.
프리티어 때문에 줄바꿈 안될 때 줄 바꿈 해서 여러줄로 적어놨는데 저장 버튼 누르면 한 줄로 붙어 버리는 경우 커멘트 아웃 마크를 옆에 써주면 내용이 아래로 내려간다. 2022. 5. 22.
[React] Object 특징 object는 메모리에 포인팅을 한다. 변수 obj1은 {name: 'Jane'} 오브젝트를 포인팅하고 있다. obj2 변수를 만들어 obj1으로 설정하면 obj1이 포인팅하는 오브젝트에 obj2도 같이 {name: 'Jane'}으로 포인팅하고 있는다. strict equality 를 써서 같은지 물어보면 같다고 나온다. 이 두 포인터가 같은 메모리에 포인팅하고 있는가? 라고 묻는 것이다. obj 1이 이름을 바꿔도 obj2도 같은 이름으로 동시에 바뀐다. 벨류가 변해도 메모리는 같은 곳을 포인팅하게 된다. 메모리가 새로 생기는 경우 1. obj3는 obj1과 모양은 같지만 메모리를 따로 써서 만든 경우 이 둘은 같은 메모리가 아니기에 같지 않다고 나온다. 2. obj 4에 벨류를 직접 입력하여 메모리를.. 2022. 5. 18.
[React] Lifecycle Method 라이프 사이클 Lifecycle Method 라이브러리, 프레임워크들은 라이프 사이클을 가지고 있는데 라이브러리가 동작하는 순서를 의미한다. will 접두사가 붙은 함수는 어떤 작업을 처리하기 직전에 호출되는 함수 예를 들어 혹시 마운트 되기전 해야 하는 작업이 있으면 componentWillMount() 에 내용을 넣어준다. did 접두사가 붙은 함수는 어떤 작업을 처리한 후에 호출되는 함수이다. 컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount 3가지로 분류된다 1. Mount 페이지에 컴포넌트가 최초 심어지는 것을 말한다. 컴포넌트 라이프에서 딱 한 번만 일어난다. 같은 앱 컴포넌트가 있더라도 같은 것이 아니라 새 인스턴스가 생성된 것이다. Mounting is the first time a.. 2022. 5. 18.
독학의 단점은 시간 관리의 어려움. 차라리 학교를 갈까? 느슨해졌다. 공부 속도는 더뎌졌다. 그냥 이렇게 고민하고 아무 것도 안하는게 많은데 차라리 이 시간에 학교를 갈까? 1년 짜리 코스라도 빨리 듣는게 낫지 않을까? 지금 이대로라면 1년 후라도 별반 달라질게 없을 것 같은데 바싹 학교 가서 졸업증이라도 따야할까? 하지만 2년제 또는 단기 과정을 알아보았지만 내가 원하는 과정을 가르치는 곳은 없다. 온라인 코스가 제공되어야하고, 프론트 엔드 중심으로 react는 기본이고 node.js 까지 가르치는 곳을 찾았지만 그런 곳은 없다. php를 가르치거나 소프트웨어 중심으로 C#, java 를 가르치는 곳은 있다. 그럼 백엔드로 가야하는 걸까? 프론트엔드가 하고 싶은데.. 그냥 유데미 강의를 잘 따라가면 되긴 할 것 같기도 하고, 아직은 고민 좀 더 해봐야겠다. 2022. 5. 18.
의류 쇼핑몰 만들기 6 | package-lock.json vs yarn.lock npm을 사용하면 package-lock.json yarn을 사용하면 yarn.lock 이 lock file안에서 모든 dependency들을 볼 수 있다. yarn을 사용하면 둘 다 생기는데 둘 다 가지고 있을 필요가 없으니 package-lock.json을 삭제하면 된다. 2022. 5. 12.

티스토리툴바