본문 바로가기

분류 전체보기364

의류 쇼핑몰 만들기 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.
Monsters-Rolodex 4 | Destructuring | Optimizations 코드 정리하기 1. 함수 vs 익명함수 onChange에 익명 함수가 바로 호출하게 되어있다. onChange 안 event는 업데이트 되지만 안에든 익명 함수가 업데이트 되는 것은 아니다. 함수를 따로 빼서 처음 클래스 초기설정할 때 이 함수를 한번만 만들고 나중에 호출만 하면 된다. class에 attached 되어 있기에 this를 써준다. 2. Destructuring | this.state를 빼기 destructuring 하기 render() 함수 안에 object로 적어준다. this.state를 쓰고 있는 이름들 monsters, searchField를 { } 넣어주고 아래있는 this.state를 지워준다. this을 쓰고 있는 단어를 찾아 똑같이 만든다. 바꾼 후 import { Comp.. 2022. 4. 29.
Monsters-Rolodex 3 | 검색 기능|search(),filter(),includes() 앞 포스트에서 몬스터 이름들이 모두 나오도록 해보았다. 검색창 설치 하기 이제는 인풋박스를 만들고 키워드를 한 자씩 입력하면 해당하는 이름이 걸러져 나오도록 해보자. 1. 인풋 태그 만들기 render 함수 안에 input 태그를 입력해 준다. 인풋 태그가 생겼다. 2. 이벤트 핸들러로 인풋 내용 받기 input 안에 이벤트 핸들러를 넣어 입력 받은 내용으로 검색을 하도록 해보자. searchString 변수를 만들고 입력된 string을 소문자로 바꾸어 변수에 저장을 해둔다. 이 입력된 string이 monsters array에 있는지를 검색해야 한다. 이 때 filter(), include() 함수가 필요하다. 3. searchString 을 state에 담기 searchString은 계속 내용이 바.. 2022. 4. 27.
[JS] 비동기2 | Promises란? | 프라미스 체인닝 Promises 란? 1. 콜백 함수 대신 비동기를 간편하게 처리할 수 있게 도와주는 오브젝트 2. 정해진 기능을 수행시 성공하면 성공의 메세지와 처리된 결과값을 전달해 주고, 실패 시 에러를 전달해준다. 3. network 통신을 하거나, 파일 읽어서 올 때 등 무거운 오퍼레이터를 수행시 프라미스를 사용하면 수행하는 동안 다음 코드들도 수행될 수 있다. 1.state 프로세스가 무거운 오퍼레이션을 수행하는 중인지 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 알려준다. state: pending operation이 수행 중일 때 state: fulfilled / rejected operation 완료 / 실패 2. producer / consumer 차이 producer: 원하는 데이터를 제공.. 2022. 4. 27.
[JS] 비동기1 | 콜백 | 콜백 지옥 이 3가지를 알면 네트워크 통신 편하게 할 수 있다. 1. callback 2. promise 3. async, await Synchronous 자바스크립트는 동기적 언어이다. 이 말은 hoisting이 된 이 후부터 순서대로 코드가 실행된다는 말이다. 장점은 앞 코드 작업이 다 끝나야 다음 코드가 실행되기 때문에 코드의 흐름을 빨리 파악할 수 있다. 하지만 앞 코드 실행이 오래 걸리면 뒤에 있는 코드는 실행되기까지 한참을 기다려야 한다. Asynchronous 코드 순서와 상관없이 자신의 시간표 대로 움직인다. 멀티태스킹으로 실행되기에 코드 흐름 파악은 좀 걸려도 시간이 적게 걸린다. 언제 끝날지 모르는 명령이나 메인 흐름이 되는 작업이 아닐 때 비동기 처리 많이 한다. 서버와 웹브라우저가 서로 통신할.. 2022. 4. 26.

티스토리툴바