React/React Basic56 [React] forEach(), map(), filter(), reduce(),find(),include() .forEach() 기본형 빈 array를 하나 만들고 forEach함수에 double 함수를 집어 넣는다. 빈 array에 하나씩 결과를 담는다. 함수 안 함수 double 함수를 밖으로 빼지 않고, forEach 안에 익명함수로 들어가서 바로 적용 시켜버린다. Map( ) loop through the array map 함수 안에 다른 함수를 집어 넣어 하나씩 실행되도록 한다. array 작업 시에는 꼭 아이템에 key를 적어줘야 한다. 빈 array 만들 필요없이 바로 map()으로 계산된 함수를 새 array에 담아 버린다. map함수 안에 double 함수 넣기 Filter( ) 기존 array에서 filter()함수에 컨디션을 지정하고 true 인 것만 새 array에 담는다. forEach.. 2022. 3. 14. [React] Mapping Data | 이모티콘 사전 | dl dt dd HTML DOCTYPE html> JSX styles.css font-family: "Montserrat", sans-serif; font-weight: 400; line-height: 1.666; background: #c0d2d4; color: #555; } h1 { font-weight: 900; font-size: 500%; text-align: center; margin-top: 4rem; color: #fff; line-height: 1.2; } h1 span { padding: 5px 15px; background: #2ec2b0; } .dictionary { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 4r.. 2022. 3. 14. [React] Map() | functional programming | Mapping Data to Components 연락처 카드 만들기를 하고 있다. App.jsx 에 있는 코드를 보면 Card 컴포넌트 안에 다른 value에 같은 properties가 계속 반복되어 나오는 것을 볼 수 있다. 좀 더 간단하게 만드는 법은 없을까? 이 때 map() 함수를 사용하면 아주 간편해진다. map( ) map() 함수란? array를 처리할 때 매우 유용한 자바스크립트 함수이다. map() 사용법 arrayName.map(함수) array 이름을 앞에 두고 점을 찍은 후 map() 함수를 뒤에 붙여준다. 그리고서 map() 함수 안에 작업할 함수를 넣어준다. 이 전까지는 함수 안 괄호() 안에 value를 대부분 집어 넣었는데, () 안에 함수도 집어 넣을 수 있다. map() 안에 함수를 집어 넣고 통과하면서 함수가 실행되도.. 2022. 3. 13. [React] DevTools | Avatar 이미지 따로 떼서 관리하기 |DevTools로 디버깅 연락처 카드 만들기를 하고 있다. 아바타 이미지를 따로 떼어컴포넌트로 관리하면 아무 곳이나 원하는 곳에 붙일 수 있게 된다. Card.jsx에서 이미지 부분만 따로 떼서 컴포넌트로 만든다. Avatar.jsx 파일 새로 만들어 이동 여기서 문제가 발생한다. 현 파일에 있는 props는 비어있다. 이전 파일과 연결이되어 오브젝트들을 보내주어야 {props.img}를 읽을 수 있다. 어떻게 하면 이미지 property를 방금 새로 만든 Avatar 컴포넌트에서 부를 수 있을까? 앞에서 한 내용을 복습해 보자. 일단 이미지 property가 기본적으로 어디 있는지 보자. contact.js 파일에 있는 img url 이 이미지가 있는 곳이다. 그 다음은 App.jsx 에서 이 imgUrl을 컴포넌트 안 im.. 2022. 2. 24. [React] Props | 연락처 카드 만들기 반복되는 카드 형태를 간단하게 만드는 법에 대해 알아보자 일단 리액트가 잘되는지 확인하고 Hello World 이효리의 연락처 카드를 하나 만든다 여기서 유재석, 비의 연락처 카드도 만들고 싶다면 html 코드를 사용하면 빨간 박스 코드를 반복 사용하여 만들 수있다. My Contact Lee Hyori 123-345-4567 lee@hyori.com Yoo JaeSuk 493-834-4789 yoo@jaesuk.com Rain 281-384-9374 rain@jihun.com 하지만 이보다 좀 더 간편하게 만드는 방법은 없을까? Card() 함수를 만들어 하나의 카드 템플릿을 만들고 element로 랜더 해본다 이렇게 되면 3개의 카드가 쭉 나오는데 이제는 이 카드 안의 내용을 바꿔줘야한다. html .. 2022. 2. 21. [React] 시작하기 | 맥 node 업데이트 | VScode |npx 1. Node.js 최신 버젼 다운 하기 리액트를 시작하기 위해서는 일단 Node.js 최신 버젼 다운 받아야 한다. (node 업데이트 하기) node.js 설치하는 이유 npm이 필요한데 node.js 설치하면 npm 툴 같이 다운 받아짐 Create React App 이라는 라이브러리 설치하기 위해 1-1. 일단 터미널에서 내가 받은 node.js가 있나 확인한다. 터미널에 아래 코드 입력하여 내 컴퓨터에 있는 버젼을 확인한다. node --version 난 14.17.6 버젼이 다운 받아져 있다. 1-2. Node.js에 들어가서 최신 버젼이 무엇인지 확인하기 현재 안정적으로 돌아가는 것은 16.14.0 버젼이다. 1-3. node.js 업데이트 하기 n 다운받기 sudo npm install -.. 2022. 2. 20. [React]import, export modules | require 와 import 차이 | import 모듈 많이 불러와야 하는 경우 | 계산기 만들기 React를 import 해서 쓰는 이유 이 전 강의들에서 라이브러리를 불러올 때 require를 사용해서 var react = require("react"); 이런 식으로 코드를 썼었다. 이 코드는 import React from "react"와 거의 비슷한 역할을 한다. require 와 import의 차이는 뭘까? Using Node.js require v.s. ES6 import/export https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export require 함수는 자바스크립트가 아닌 node.js에서 온 함수이다. ES6는 모든 브라우저에서 가능해서 import/ export 쓰면 모두가 볼 .. 2022. 2. 18. [React] Components 리액트는 컴포넌트들을 다시 쓸 수 있다는 장점이 있다. 큰 파일을 작게 나누고 함수별로 나눠놓은 컴포넌트를 다시 쓸 수 있다. 한 파일에 코드가 많이 들어가면 그 만큼 내용을 이해하기가 어려워진다. 최대한 잘게 쪼개서 나누는 것이 좋다. 전체 웹사이트를 작은 컴포넌트로 나눠보자. 컴포넌트 만들 때 주의할 점 컴포넌트 만들 때 함수 이름은 파스칼 케이스로 한다. 즉 첫글자를 대문자로 써준다. h1 컴포넌트 만들기 내용을 함수 안으로 옮긴다. 자리에는 heading 함수를 태그 형태로 써준다. 을 chidren이 없으니 셀프 클로징 태그로 바꿔준다. 기계는 이나 을 똑같이 인식하나 다른 개발자들이 보기 편하게 으로 써준다. 혹시 까먹고 안바꾸면 linter가 자동으로 바꿔주긴 한다. Heading.jsx 파.. 2022. 2. 16. [React] CSS Inline Styling for React Elements Inline Styling 사용하는 법 css 스타일링 할 때 조금 덜 사용되긴 하지만 inline styling도 사용한다. React 기본형이 있다. Hello world 글자색을 빨간색으로 바꾸고 싶을 때 html 에서 하던 것처럼 스타일링을 style="color:red"로 하면 에러가 난다 이유는 문법이 틀려서이다. 1. JSX 파일에서 HTML element에 자바스크립트를 집어 넣을 때는 자바스크립트가 들어간다는 신호로 중괄호{ }로 꼭 감싸줘야 한다. 2. 여기에 더해 style properties는 스트링으로 쓰지 않고 자바스크립트 오브젝트 형태로 써줘야 한다. 그래서 또 중괄호를 해주고 그 { } 안에 key:value 페어로 넣어준다. {color: red} 그래서 {{}} 이중 컬리.. 2022. 2. 14. [React] Styling React Elements | Image jsx와 css 이용해 이미지 꾸미기 이미지를 입력해 보자 html 에서 img 태그는 / 클로징 태그가 없어도 용서가 되었지만 js 문법에서는 클로징 태그까지 꼭 같이 써줘야 한다. 방법1 방법2 child 없으면 끝에 마무리 가능 구글에서 이미지 주소를 복사해서 img src에 붙이고 className = "food-img"를 주고 css의 클래스 이름은 캐밥 케이스를 사용한다. css에서 클래스에 크기를 조절한다. 브라우저 확인 img 주소만 따로 빼서 변수로 저장하기 img 주소를 변수로 따로 빼서 저장 한 후 자바스크립트 { }를 이용해서 보여질 수 있다 같은 결과가 나온다. 이미지 자동 변경해서 보여주기 Picsum에 들어가면 랜덤 이미지를 가져 올 수 있다. https://picsum.pho.. 2022. 2. 14. [React] JSX Attributes 사용하기 JSX Attributes class를 --> className 으로 사용하기 html 태그에서 css로 효과 주고자 할 때 class를 사용해서 class ="header" 를 썼다. 하지만 jsx는 자바스크립트 문법이므로 className을 써줘야 한다. 캐멀 케이스를 사용한다. classname(x) className(o) html에서 type을 JS -> JSX로 설정으로 바꿔주기 JSX 내용을 이렇게 작성한 경우 className으로 바꿔도 Unexpected token이라는 에러는 뜬다 이 말은 지금 자바스크리트 파일에서 이런 기호를 쓸 일이 없는데 html 태그가 왜 있냐는 것이다. 이 에러를 없애주기 위해 index.html에서 여전히 text 파일이지만, js가 아닌 jsx로 바.. 2022. 2. 14. [React] { }사용법 | JS expressions in JSX & ES6 Template Literals JSX 문법 형태 앞 포스트에서 말했 듯 자바스크립트 안에 html 문법이 들어갈 수 있도록 하는 것이 JSX 파일이고 React 모듈을 불러와 자바스크립트 안에 있는 html 문법을 찾아내 자바스크립트 문법으로 바꾸는 일을 한다. 또 자바스크립트 안에 있는 html 안에 있는 자바스크립트 문법을 읽는 역할도 한다. JS > html > JS 이 들어가 있는 형태. 예를 들면 다음과 같다. HTML 문법 안에 JS 문법 들어가는 예 1. Hello World 를 프린트 해보자. 2. 변수로 바꿔 { } 사용하기 여기서 Hello Jack으로 말하고 싶다면 변수명을 중괄호로 묶으면 된다. html 문법 안에 자바스크립트 문법이 들어가 있는 상황이다. 3. { } 안 직접 계산도 가능 4. 인풋을 받아서 브.. 2022. 2. 13. [React] JSX | Babel | codeSandbox 사용법 React를 사용할 때는 JSX 문법을 사용한다. JSX 문법 React에서 사용하는 언어이다. 지금까지는 HTML, CSS, JS를 각자 파일에서 따로 코딩하였지만 JSX는 모두 모아 코딩할 수 있다. 자바스크립트는 웹사이트에 기능을 추가하는 scripting 언어이다. codesandbox 사이트 브라우저에 바로 확인하면서 볼 수 있게 codesandbox을 사용해서 코드를 작성해보자. 간단하게 리액트를 시작할 수 있다. https://codesandbox.io/s/introduction-to-jsx-forked-sdjb1?file=/src/index.js 1. 메뉴바에서 Fork를 눌러 깃허브와 연결한다. 또는 프로젝트 새로 만들어 html 내용을 위 처럼 채운다. git forking: 깃허브에.. 2022. 2. 12. [React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지 리액트는 2013년에 처음 생겼다. 그 전엔 html, css, js로 UI를 만들었다. 그리곤 이 언어들이 서버와 연결이 되었다. 하지만 Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 그래서 제이쿼리가 나오게 된다. 쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. dom은 화면 오른쪽 클릭해서 inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. jQuery -> Backbone.js 라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.. 2022. 2. 11. 이전 1 2 3 다음
