본문 바로가기

전체 글336

의류 쇼핑몰 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.
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.
[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.
의류 쇼핑몰 만들기 5 | SASS 2 | 구글 폰트 연결 | 구글 폰트를 검색해 들어가 원하는 폰트를 찾는다. 원하는 폰트에 Select this style을 클릭하면 링크가 뜨는데 그 링크를 복사한다. index.html 안에 붙여넣기 한다. href를 복사해서 주소창에 넣으면 링크에 같이 오는 내용들 즉 font definition이 css 스타일로 나온다. 이 부분을 참고해서 css, scss에 넣는다. 일단은 전체적으로 일관성을 위해서 index.css 파일을 index.scss 파일로 바꾸고 index.scss에 font-family에 폰트 이름을 추가해 준다. index.js에서도 './index.scss'로 바꿔준다. Sass 더 알아보기 Elements를 보면 head 태그에 3개의 style이 있는 것을 볼 수 있다. 그 안을 보면 우리가 작성한 .. 2022. 5. 11.
의류 쇼핑몰 만들기 4 | CategoryItem 분리 | 이미지 박스를 떼어 내어 컴포넌트로 분리하여 보자. 1. 폴더와 파일을 만든다. 2. App.js 와 category-item 연결하기 3. id는 놔두고 category-item 해당 부분 떼어가기 category-list.jsx 에 붙여넣기 category-list.jsx 코드 정리 한 단계 더 destructuring App.js 정리하기 category 통과 시키기 id도 통과 시키기 모습이 그대로 유지되었다. directory로 박스들 전체 옮기기 directory 폴더와 파일 만들기 App.js에 파일 불러오기 directory.jsx 기본형 만들기 App.js에서 아래 내용을 directory로 옮긴다. directory.jsx defactoring을 해준다. props를 받아와서 아래처럼 .. 2022. 5. 11.
의류 쇼핑몰 3 | 배경이미지 연결하기 이제는 빈 박스 안에 background image를 넣어보자. 오브젝트에 imageUrl을 추가하고 각 이미지 주소를 연결해 준다. 태그를 사용하지 않고, 태그 안에 Inline style을 이용해서 백그라운드 이미지로 넣어준다. 는 셀프 클로즈 태그로 사용한다. style={{ backgroundImage: url(https://photo.jtbc.joins.com/717164705898.jpg)}} 주소를 다이나믹하게 바꿔준다. style={{ backgroundImage: `url(${imageUrl})`}} className을 입력해줘야 이미지가 나온다. 이미지들이 잘 나오는 것을 볼 수 있다. 이미지는 일단 div 태그로 바꿔 놓는다. const App = () => { const catego.. 2022. 5. 11.
[SASS] 리액트에서 시작하기 터미널에서 Sass를 다운 받는다. npm i sass yarn add sass categories.styles.scss 파일을 만든다 App.js에서 import 하기 2022. 5. 10.
CSS vs SASS 다음과 같이 3겹으로 된 부모 자식 태그가 있는 경우 css에서 작업해야 하는 경우 부모 태그를 모두 적어주어 다음과 같이 나타낼 수 있다. 브라우저에는 자식 태그가 위로 가므로 다음과 같은 순서로 보일 것이다. 하지만 SASS를 사용하면 더 편리해진다. nesting이 가능해서 부모 태그 안에 내용을 적어주면 된다. 2022. 5. 10.
의류 쇼핑몰 만들기 2 | Sass 연결 SASS는 nested 형태로 효과를 줄 수 있어 편하다. 1. 터미널에서 Sass를 다운 받는다. npm i sass yarn add sass 2. categories.styles.scss 파일을 만든다 이제는 css 파일을 쓰지 않고 .scss 파일을 쓴다. 3. App.js에서 import 하기 4. categories.styles.scss에 스타일 채우기 .categories-container { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .category-container { min-width: 30%; height: 240px; flex: 1 1 auto; display: flex; align-i.. 2022. 5. 10.
의류 쇼핑몰 만들기 1 | Setting Up 콘솔에서 crown-clothing 이름으로 리액트 설치하기 npx create-react-app crown-clothing 리액트 설치되면 파일로 이동 cd crown-clothing vscode 열기 code . 이제 vscode에서 작업 해보자. App.js 에서 필요없는 보일러 플레이트만 남기고 다른 내용은 삭제한다. 브라우저에 Hello world가 나오는지 보자. localhost:3000에 잘 나오는 것을 볼 수 있다. 카드 탬플릿 기본형 categories-container > category-container > category-body-container 박스를 만들어보자. 를 이용해 다음과 같이 형태를 잡는다. category-container 부분은 5 박스가 필요하다. 오브젝트가 든.. 2022. 5. 10.
[React] Pure vs Impure Functions | Side Effect 리액트 코드 작성이 impure function과 pure function 둘 다 사용한다. 둘의 개념을 이해하고 가도록 하자. Pure function pure function은 함수가 입력받은 파라미터로만 연산되는 경우를 말한다. A function is considered pure when everything that dictates what it returns is completely isolated from what gets passed into it. This is very important because this function return should solely be dependent on the props being passed. 함수를 정의한 후 호출 하면 파라미터로 2와 4가 들어가.. 2022. 5. 8.
Monsters-Rolodex 2-1 | Functional Component 시작 지금까지 class component를 이용해 코드를 작성했었다. 이제는 functional component를 이용해 다시 새롭게 코드를 짜보자. 이 두 메소드의 큰 차이점은 functional component에는 lifecycle이 없다는 것이다. 보일러 플레이트 class component에서 썼던 constructor(), componentDidMount(), render() 등 lifecycle method는 이제 필요가 없다. 대신 function을 사용하고 위에서부터 아래로 순서대로 코드가 실행된다. class method에서는 render() 함수에 든 내용이 UI에 나타났지만 functional method는 return이 되는 부분이 UI에 나타난다 화면에 Hello World 가 나.. 2022. 5. 8.
Monsters-Rolodex 11 | 타이틀 넣기 | 구글 폰트 연결 Monsters-Rolodex 타이틀 넣기 App.js에 h1을 추가한다. 제목이 생겼다. App.css에서 타이틀에 스타일 주기 구글 폰트 연결하기 구글 폰트에 들어가서 Bigelow Rules를 검색한다. (바로가기) 폰트를 클릭한 후 들어가서 select this style을 클릭한다. 나오는 링크를 복사한다. 이 링크를 index.html안 head 안에 붙여넣기 한다. 다시 App.css로 가서 font-family를 추가한다. 잘 나오는 것을 볼 수 있다. 2022. 5. 7.
Monsters-Rolodex 10 | Card 탬플릿 만들기 폴더, 파일 만들기 Card 폴더와 cars.component.jsx 와 card.styles.css 파일을 만든다 파일 서로 연결하기 card-list 에서 Card 연결 card에서 css 연결 jsx 파일 보일러 플레이트 만들기 card-list에서 card에 해당하는 부분 옮기기 Card.component.jsx로 옮기기 Card로 코드를 옮기고 나면 name, email. id로 에러가 뜨는데 destructure를 다시 해줘야 한다. name, email. id는 this.props.monster로 destructuring 하기 monster가 없으니 받아 와야함 card-list 의 map() 함수 안에 든 monster를 Card로 보내줘야 한다. Card 태그 안에 monster를 넣어 .. 2022. 5. 7.
Monsters-Rolodex 9 | img src 연결 이미지 연결하기 CardList에 몬스터 카드에 있는 h1 대신 이미지 카드가 나오게 해보자. 이미지에 alt 넣기 우선은 태그에 alt를 넣는다. Img source는 robohash에서 가져온다 (바로가기) https://robohash.org/1?set=set2&size=180x180 set: robohash에서 제공하는 두번째 세트 이미지들 string interpolation을 사용해서 {``} src를 작성한다. id로 쓰는 숫자 1을 다이나믹하게 바꾼다. 이름과 이메일도 넣어준다 브라우저에 이미지, 이름, 이메일이 나오는 것을 볼 수 있다. code destructure 하기 monster.name 또는 monster.id 등 monster가 계속 반복해서 나오는 것을 볼 수 있다. des.. 2022. 5. 7.
Monsters-Rolodex 8 | CSS | string interpolation App.js에서 App.css 파일을 연결한다. App.css 내용을 채워준다. body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(to left, rgb(205, 217, 249) 0%, rgb(216, 248, 248) 100%); text.. 2022. 5. 7.
Monsters-Rolodex 7 | search-box Component search-box.component.jsx Search-box 컴포넌트로 따로 떼보자. App.js className, placeholder를 property로 빼는 이유는 다른 곳에 이 SearchBox 컴포넌트를 사용했을 때 같은 className, placeholder를 사용하지 않을 것이기 때문에 뺀다. search-box.component.jsx import { Component } from 'react'; class CardList extends Component { render(props) { const { monsters } = this.props; return ( {monsters.map(monster => ({monster.name}))} ) } } export default Card.. 2022. 5. 1.
[React] render() 2번 되는 이유 App.js가 작동할 때 lifecycle의 작동 순서는 다음과 같다. 1. constructor() 맨 처음 실행 2. render() this.state에 들어있는 monsters 빈 array 실행 3. componentDidMount() 그 안에 setState가 콜되면 변화가 생긴 것이기 때문에 다시 render가 실행된다. 4. render() 고로 렌더가 2번 된다. App 컴포넌트 뿐만 아니라 App 안의 다른 차일드 컴포넌트가 있으면 그 컴포넌트들도 아래의 순서를 따른다. 위에서 차근 차근 코드가 실행 되다가 컴포넌트를 만나면 CardList 파일로 가서 constructor() 함수 -> render() -> componentDidMount() -> render() 순으로 setStat.. 2022. 4. 29.
Monsters-Rolodex 6 | Props CardList 컴포넌트에 원하는 property를 적어준다. string, array 상관없다. card-list.component.jsx 파일로 가서 콘솔 props에 뭐가 나오는지 보자. 콘솔 CardList 컴포넌트에 몬스터 리스트가 나오도록 해본다 콘솔에서 리스트 목록이 잘 나오는 것을 볼 수 있다. CardList로 가서 map() 함수 내용을 붙여 넣기 한다. filteredMonsters가 에러가 나는데 props 설정을 해준다. destructuring 하기 this.props를 따로 빼서 destructuring 한다. 2022. 4. 29.
Monsters-Rolodex 5 | Component | App.css List 따로 컴포넌트로 빼기 새 폴더와 파일 만들기 컴포넌트는 재사용 할 수 있기 때문에 따로 폴더를 만들어 관리한다. components 폴더 안 ㄴ card-list 폴더 ㄴㅡ card-list.component.jsx 파일 ㄴ search-box 폴더 card-list.component.jsx 파일 기본 뼈대 만들기 App.js에서 호출하기 몬스터 이름들을 일단 커멘트 아웃 시키고 대신 태그를 넣어준다. 잘 바뀐 것을 알 수 있다. import { Component } from 'react'; class CardList extends Component { render() { return ( Hello ) } } export default CardList; App.css body { margin: .. 2022. 4. 29.

티스토리툴바