본문 바로가기

분류 전체보기364

[캐나다 대학 일지] 4. Math 20 시험 준비 중 4. Math 20 시험 준비 중 2022년 8월 15일 NAIT College에 들어가는 또 하나의 입학 방법은 1. Math 20 2. English 20 3. 공인 영어 점수 이 3 조건을 만족해서 입학하는 방법이 있다. 고등학교 졸업한 지가 까마득해서 위 과목 점수들을 새로 만들어 제출해야 한다. NAIT에서 제공하는 방법으로 지금 내가 선택할 수 있는 방법은 1. Academic Upgrade 수업 2. High School Equivalency 시험 2가지가 있다. 1. Academic Upgrade 과정을 듣기 (보기) 이 과정은 한 과목당 $714이다. Math 20 수업을 듣기 위해 Math 10 prerequisites 시험을 봐야한다면 한 시험도 $300을 지불해야 한다. Englis.. 2022. 12. 30.
[캐나다 대학 일지] 3. 날아가버린 오픈 스터디의 기회 3. 날아가버린 오픈 스터디의 기회 2022년 8월 13일 내가 선택할 수 있는 NAIT의 입학 조건은 2 가지이다. 1. Math 20, English 20 + 공인 영어 점수 또는 2. 오픈 스터디 3과목 + 공인 영어 점수 일단 그럼 오픈 클래스 3과목을 들으면 입학이 된다고 하니 어차피 학교 입학하면 들어야하는 오픈 클래스 3과목을 듣기로 하였다. 하지만 내 맘대로 수업을 들을 수 있는 건 아니었다. 오픈클래스 수강 신청을 오픈하는 날 사이트에 접속해서 예약을 해야했다. 예약 전 날 밤 11시 30분 경 사이트가 공사중이라 그냥 아침에 예약하려고 잠을 잤다. 이 때는 몰랐다. 모든 학생들이 부릉부릉 수업 예약하려고 클릭 준비 중이었다는 것을.. 아침 8시 반에 일어나서 사이트에 들어갔다. 왓 뜨 .. 2022. 12. 30.
[캐나다 대학 일지] 2. 학교 정하기- 어디로 가야 하나 2. 학교 정하기- 어디로 가야 하나 2022년 8월 7일 글 지금 내 상황에서 어느 학교로 가야할까? 내가 원하는 조건은 1. 에드먼튼에서 2. 저녁 오프라인 수업 또는 온라인 수업을 진행하는 곳 3. 풀스택을 가르치는 곳 4. 리액트 수업이 있는 곳 풀스택 또는 웹개발등으로 검색해서 코스들을 알아보았다. 온라인을 제공하는 여러 프라이빗 컬리지들이 나왔다. 개발 언어가 계속 진화하기에 그에 맞춰 커리큘럼을 빨리 바꿔줘야하지만, 가르치는 내용이 조금 올드하거나 빈약해 보였다. 웹개발이라면서 워드, 엑셀 등을 넣어 커리큘럼을 짠 학교도 있었다. 학교를 알아보면서 기왕 학교 가는거 단기 코스 말고 소프트웨어 전공으로 좀 더 깊이 공부하는 것이 좋겠다는 생각이 들었다. 여러 학교를 알아보고 학교 3곳을 추렸다.. 2022. 12. 30.
[캐나다 대학 일지] 1. 캐나다 컬리지를 가기로 했다 1. 캐나다 컬리지를 가기로 했다 2022년 7월 26일 글 캐나다로 이민 올 때 '캐나다에서 대학 가기'가 내 버킷 리스트에 있었다. 막 캐나다에 왔을 땐 무엇을 배워야 할 지 판단이 서지 않았다. 영주권을 받으면 학비가 확 줄어들어드니 영주권을 따면 그 이후에 가기로 했다. 하지만 영주권을 따고 곧 아이가 생겼다. 첫 째가 2살이 넘어갈 때 둘 째 아이를 가지게 되고, 어느 덧 두 아이의 엄마가 되어 정신없이 지내다보니 나이도 훌쩍 먹게 되었다. 아직도 과자, 아이스크림을 좋아하고 아직 철이 없는데.. 40 이라는 나이가 되었다. 요즘 다시 끔 '학교를 가야하나?' 하는 기로에 섰다. '이미 늦은 건 아닐까?' ' 지금 준비해서 2년제 학교를 졸업 한들 취업은 될까? ' 영주권을 받아 학비가 싸지고,.. 2022. 12. 30.
[일상] 프랜즈 쉐도잉 하는 하루 2020, 3, 11 글 쉐도잉 첫째날. 다 끝난 후 몸이 아프네요. 역시 공부는 해본 사람이 잘하는 걸까요? 특히 눈이 맵고, 코 뒤가 건조합니다. 예전에 공부 했던 내용인이라 대충 내용은 알아서 그냥 지나갑니다. 우선 진도를 나가서 성취감을 느끼고 싶습니다. 지금 단계에서 표현을 메모하거나 하진 않습니다. 너무 많이 하려다 보면, 또 오래 못할 거 같아서요. 그럼, 내일도~~!! 2020, 3, 12 글 쉐도잉 2일차입니다. 역시도 오늘 몸이 피로합니다. ㅎ 눈이 매운 이유를 알고 싶습니다. 마음이 너무 앞선 나머지 눈으로 레이져를 쏘는지 코와 눈부위 통증은 여전합니다. 또 저도 모르게 등이 굽어지고, 거북목이 되면서 a hump가 되는 것 같네요. 2일차는 예전에 대충 공부했던 부분이라 이해 안되는.. 2022. 12. 30.
의류 쇼핑몰 33 | Cart Icon | Dropdown Cart icon 설치하기 assets 폴더에 아이콘 svg를 입력한다. components에 cart-icon 폴더, 파일 만들기 cart-icon 내용을 채워준다. import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg'; import './cart-icon.scss'; const CartIcon = () => { return ( 0 ) } export default CartIcon; cart-icon.scss .cart-icon-container { width: 45px; height: 45px; position: relative; display: flex; align-items: center; justify-con.. 2022. 7. 1.
의류 쇼핑몰 32 | product-card 만들기 shop 컴포넌트에서 따로 product-card를 만들어 보자. component에서 product-card.jsx, scss 파일 만들기 ProductCard 내용을 채운다. import './product-card.scss'; import Button from '../button/button' const ProductCard = ({ product }) => { const { name, price, imageUrl } = product; return ( {name} {price} ADD TO CARD ) } export default ProductCard; Shop에서 ProductCard 쓰기. import { useContext } from 'react'; import { ProductsCont.. 2022. 7. 1.
의류 쇼핑몰 31 | products.context.jsx 만들기 context 폴더에 products.context.jsx 파일을 만든다. products.context.jsx 파일 index.js에서 Provider로 감싸주기 shop 으로 가서 shop-data.json에서 바로 받아오던 것을 지우고 context로 받아와 본다. 데이터를 그대로 볼 수 있다. 2022. 7. 1.
의류 쇼핑몰 30 | shop-data.json src 폴더 안에 shop-data.json 파일을 만들고 내용을 넣었다. [ { "id": 1, "name": "Brown Brim", "imageUrl": "https://i.ibb.co/ZYW3VTp/brown-brim.png", "price": 25 }, { "id": 2, "name": "Blue Beanie", "imageUrl": "https://i.ibb.co/ypkgK0X/blue-beanie.png", "price": 18 }, { "id": 3, "name": "Brown Cowboy", "imageUrl": "https://i.ibb.co/QdJwgmp/brown-cowboy.png", "price": 35 }, { "id": 4, "name": "Grey Brim", "imageU.. 2022. 6. 30.
의류 쇼핑몰 28 | Auth Listener 하나의 listener 안에 authentication 관련 코드를 모아보자. 일단 이 전에 한 코드를 지워준다. sign-in-form에 있는 setCurrentUser를 지워준다. sign-up-form에서도 useContext 관련을 지운다. 이제 context value가 업데이트 될 때마다 계속 re-run 할 필요가 없어졌다. 자동으로 performance가 좋아졌다. navigation에서도 매뉴얼로 설정해 놓은 이제 sign out을 하면 onAuthStateChangeListener가 catch하기 때문에 signOutHandler 버튼이 필요가 없다. onClick 했을 때 signOutUser만 호출해주면 된다. 이제 context로 돌아와서 listner에서 sign-in 되면 se.. 2022. 6. 29.
유데미 리액트 강의 35% 진행 중 | context 까지 공부 중 | 유데미로 리액트 강의를 듣고 있다. 이 강의를 듣기 전 안젤라유의 풀스택 강의에서 10시간의 리액트 강의를 들었었다. 지금보니 그 강의는 기초 중의 기초를 다룬 내용이었다. 현재 듣고 있는 강의에서 클래스 컴포넌트로 간단한 앱 만드는 것을 배우고 구글 파이어베이스로 auth와 sign-in, sign-up 등을 배웠다. 지금은 context를 배우고 있다. 솔직히 이 강의는 여러 번 돌려 들어도 한 번에 잘 이해되지 않는다. 구글링을 하거나 다른 유튜버의 영상을 찾아 보고 이해하고 있다. 2022. 6. 21.
[React] Context | UseContext Hook 실행 다음과 같이 기본 화면이 있었다가 버튼을 누르면 화면이 어둡게 바뀌는 웹 페이지가 있다. Props를 사용하는 경우 위 웹 페이지를 props를 사용해서 코드를 짜보면 다음과 같다. App.js isDark, setIsDark를 useState에 저장하고 기본값을 false로 설정한다. import React, { useState } from "react"; import "./styles.css"; import Page from "./components/Page"; export default function App() { const [isDark, setIsDark] = useState(false); return ( ); } Page.jsx import React from "react"; import H.. 2022. 6. 20.
[콘솔] paint flashing 더보기 -> more tools -> Rendering 을 누르면 paint flashing이 실행된다. paint flashing에 체크를 한다. 2022. 6. 20.
의류 쇼핑몰 25 | Context 2 | context에 데이터 입력과 출력 context 파일 만들기 언제든 유저가 sign-up, sign-in 했을 때 들어온 user 데이터를 context에 담아야 한다. src 폴더에 context 폴더, 파일을 만든다. context를 만들기 위해 리액트에서 createContext 메소드를 불러온다. userContext의 이름으로 storage 역할을 하는 context를 만들어 export 한다. default value는 일단 null로 하고 뒤에서 자세히 보자. 이제 functional component 를 만든다. Provider component로 value를 쓰길 원하는 모든 컴포넌트를 감싸줘야 한다. 전달하고자 하.. 2022. 6. 18.
의류 쇼핑몰 24 | Context 1 | 쓰는 이유 sign-in 할 때 user object를 왜 킵해야 할까? profile 페이지에서 회원 정보 수정하거나 유저의 return 페이지나 history 페이지를 보려면 user object가 필요하다. 그럼 어떻게 sign-in, sign-up에 있는 user data를 떠서 다른 페이지에서 사용할 수 있을까? user data를 다른 컴포넌트에서 사용하는 방법은 2가지가 있다. 1. props drilling - 안씀 2. Context - 이 거씀 리액트 컴포넌트를 생각해 보자. 컴포넌트 트리에서 user data를 받는 페이지는 sign-in과 sign-up 페이지이다. 이 user data를 사용하는 페이지는 user profile, returns, history에서 user data가 필요하다.. 2022. 6. 18.
의류 쇼핑몰 23 | Authentication 끝 | 로그인시 에러처리 | Authentication Styles 에러 발생 1. Sign In 시 비밀번호가 틀리긴 경우 Sign In 시 비밀번호가 틀긴 경우에는 콘솔 error.code에서 auth/wrong-password 메세지가 뜬다. 그러면 error.code가 auth/wrong-password가 같은 아닌지에 따라 에러인지를 체크할 수 있다. 잘못된 비번을 입력하였더니 alert 창이 떴다. 2. 이메일이 없는 경우 회원가입이 안된 이메일을 입력한 경우 auth/user-not-found 에러가 뜬다. 3. switch / case로 간단히 적어주기 if/else if 로 쓰는 방법도 있지만 switch / case로 적어준다. break가 읽히면 그 뒤 코드를 보지 않고 나간다. 에러 코드 전체 리스트는 아직 구글에서 제공하고 있지 않고 있다. 구글 .. 2022. 6. 17.
의류 쇼핑몰 22 | 새 sign-in-form authentication 파일 만들기 이 전에 만들었던 sign-in 은 내용이 authentication에 더 가깝다. 폴더와 파일명을 바꿔준다. sign-in에서 Authentication으로 이름을 바꿔주었다. App.js에도 path, element 와 import 의 이름을 바꿔준다. navigation 파일에서도 내용을 바꿔준다 http://localhost:3001/auth 으로 route를 바꿔주면 이 전 모습 그대로 나오는 것을 볼 수 있다. 새 sign-in 파일 만들기 이제 sign-in 컴포넌트를 만들어보자. 1. sign-in-form 폴더와 파일을 만든다. 2. 모습은 sign-up-form과 상당히 유사하므로 이 sign-up-form 폴더와 파일을 복사해서 컴포넌트로 붙여넣.. 2022. 6. 17.
의류 쇼핑몰 21 | 버튼 컴포넌트, 스타일 버튼을 컴포넌트로 만들어 사용해 보자. component에 button 폴더와 파일을 만든다. button.jsx 파일 내용을 채운다. Button 탬플릿을 만들고 그 안에 세부적인 변경 사항은 children을 만들어 변경한다. 버튼 안에 children을 넣는다. 우리는 3 가지 버튼 타입이 필요하다. - default button - Inverted button - google sign in button 위 3 개의 버튼 타입 class를 만들어 오브젝트에 저장해준다. const BUTTON_TYPE_CLASS = { google: 'google-sign-in', inverted: 'inverted ' } BUTTON_TYPE_CLASS를 정하고 buttonType 클래스를 호출한다. buttonT.. 2022. 6. 17.
의류 쇼핑몰 20 | Input을 탬플릿으로 만들기 Sign-up-form 에 있는 input 부분을 따로 떼서 탬플릿으로 만들어 보자. components 폴더 안에 form-input 폴더와 jsx, scss 파일을 만든다. sign-up-form.jsx에서 첫 번째 input 세트를 form-input.jsx로 옮긴다. [방법 1 ] 기본 props 사용 form-input.jsx 로 내용을 붙여넣기 했다. input의 attribute를 일일이 적었다. sign-up-form 에서 FormInput 태그로 바꿨다. [방법 2] ...otherProps 사용 - 간단 ! sign-up-form 에서 FormInput 태그를 그대로 쓰고 input-form을 더 간단하게 만들 수 있다. label은 다른 태그라 따로 써주고, spread operato.. 2022. 6. 16.
의류 쇼핑몰 18 | Sign Up 1 | 이메일 sign-up-form 만들기 Email provider 추가 Firebase Authentication에 가서 Email provider를 추가한다. Email/Password 를 Enable로 체크해준다. sign-up-form 만들기 sign-up-form 폴더와 파일을 만들어 준다. components 폴더 안에 sign-up-form 폴더와 파일을 만든다. 다음과 같이 sign-up-form.jsx에서 보일러 플레이트를 만든다. 이 sign-up-form을 sign-in에서 import하여 같은 페이지에서 보이도록 한다. sign-in 과 sign-up이 같은 페이지에 있다. 이제는 sign-up 내용을 채운다. form 태그를 써서 4개의 input을 받을 것이다. required는 빈 칸으로 남겨 놓으면 안되고 꼭 내용을.. 2022. 6. 11.
의류 쇼핑몰 17 | Redirect 구글 로그인 앞에서 연습으로 만들어본 users collection을 지운다. collection을 없앤 상태에서 Authentication에서 user도 지워서 초기화된 상태에서 구글 사인인을 redirect로 연결해보자. SignInWithRedirect 연결하기 이 전까지는 popup으로 로그인 페이지가 나왔었는데, 이제는 redirect로 새 페이지가 열리며 로그인 페이지가 나오도록 해보자. provider는 정확히는 google provider 이기 때문에 googleProvider로 바꿔주자. 이제는 sign-in 페이지로 가서 SignInWithGoogleRedirect을 import 한 후 Sign-in component로 가서 Sign in with Google Redirect 버튼을 새로 만든다. .. 2022. 6. 11.

티스토리툴바