개발자연습노트

Detail 페이지 후 2초 후에 박스가 사라지게 해보라고 했습니다. 동적인 UI 같은거라 그런거 만들 땐 1. UI 상태를 저장할 state 만들고2. state에 따라서 UI가 어떻게 보일지 작성하라고 했으니 그거부터 해봅시다.  function Detail(){ let [alert, setAlert] = useState(true) return ( { alert == true ? 2초이내 구매시 할인 : null } )}그랬습니다.이제 alert라는 state를 true로 바꾸면 노란박스가 보이고false로 바꾸면 안보임  그럼 이제 Detail 페이지 접속 후 2초 후에 저걸 안보이게 처리하려면 useEffect와 setTimeout 이런거 쓰면 될..

오늘은 Lifecycle 어쩌구랑 useEffect라는 함수에 대해 알아봅시다. 어딜 들쳐봐도 다들 어렵게 가르치는 Lifecycle 이라는 개념이 있는데 실은 별거아닙니다.이걸 배우는 이유는 componentDidMount() 이런 유용한 Lifecycle 함수들을 쓰기 위해서 배우는겁니다.요즘 사람들은 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용하기 때문에 우리도 그걸 배워봅시다.     컴포넌트의 인생  여러분이 만들어쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다.컴포넌트도 인생이 있다는겁니다.   컴포넌트는1. 생성이 될 수도 있고 (전문용어로 mount)2. 재렌더링이 될 수도 있고 (전문용어로 update)3. 삭제가 될 수도 있습니다. (전문용어로 unm..

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데1. class 만들어놓은걸 까먹고 중복해서 또 만들거나2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나3. CSS 파일이 너무 길어져서 수정이 어렵거나이런 경우가 있습니다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다.     일단 설치부터 해봅시다 터미널 열어서 npm install styled-components해주면 됩니다. import styled from 'styled-components'그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다.Detail.js 파일 위에 ▲ 위처럼 입력해서 import 해오십시..

상세페이지에 상품명 넣어봅시다 임시 글자들만 들어있으면 밋밋해서 그렇습니다.그래서 shoes 라는 state에 있던 상품정보들을 Detail 컴포넌트에 꽂아넣어봅시다.근데 안타깝게도 shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송하면 쓸 수 있겠군요.   }/> 그래서 App.js 안에 쓰는 곳에서 일단 props 전송하고   (Detail.js) {props.shoes[0].title} {props.shoes[0].content} {props.shoes[0].price}원 주문하기 Detail 컴포넌트는 props 파라미터 등록해서 shoes를 자유롭게 사용했습니다.props.shoes[0]...

오늘은 navigate() 함수와 간단한 프로젝트에선 쓸데없는데 가끔 쓰는 nested routes라는 기능을 배워봅시다./detail 접속시 html 이쁜거 보여달라는 저번시간 숙제는 어떻게 했냐면 고작 컴포넌트 만드는 것인데 알아서하십쇼  src폴더 안에 routes폴더하나 만들고 그 안에 Detail.js를 만들었습니다.파일 어디다 보관할지는 본인 맘입니다. function Detail(){ return ( 저번강의에서 준 html 코드 )}export default Detail그리고 이런 코드를 채워넣었습니다.이제 다른 파일에서 Detail 컴포넌트를 가져다쓸 수 있겠군요.   import Detail from './routes/Detail.js'function App(){ return..

페이지를 나누고 싶으면 일반 html css js 사이트는 그냥 html 파일 여러개 만들면 그게 하나의 페이지인데 근데 리액트는 html 파일을 하나만 사용합니다.그래서 리액트에선 누가 다른 페이지 요청하면 그냥 내부에 있는 를 갈아치워서 보여주면 됩니다. 근데 직접 코드짜면 귀찮으니 react-router-dom 이라는 외부 라이브러리 설치해서 구현하는게 일반적이라 그렇게 해봅시다.      react-router-dom 설치하려면  외부라이브러리라서 설치 셋팅하는 법은react-router-dom 홈페이지 들어가서 그대로 따라하면 되는데 그냥 알려드리자면  터미널 열어서 npm install react-router-dom@6 입력해서 설치합니다.  셋팅은 index.js 파일로 가서  import ..

숙제1. html 긴 부분 컴포넌트로 만들어보기  부분이 길고 복잡하고 자주 등장해서 컴포넌트로 만들어볼 것입니다. 다른데서 사용할 일이 없으면 굳이 컴포넌트화 하는게 필요없을 것 같은데연습삼아서 아무튼 해봅시다.   function App(){ return ( (생략) )}function Card(){ return ( 상품명 상품정보 )}그래서 밑에 Card 라는 컴포넌트를 만들고 거기에 축약할 html을 담았습니다.그리고 라고 쓰면 잘보일텐데 근데 실제 데이터 꽂아넣는건 다시 해야겠군요.      숙제2. shoes에 있던거 ..

오늘 필요한 상품데이터 상품데이터를 3개 준비해왔는데 이걸 html에 보여줍시다. 하단 자료를 state에 보관해놓고 html에 데이터바인딩해보도록 합시다. 실제 서비스였으면 서버 이런데서 받아왔겠지만 서버가 없으니 대충 서버에서 보낸 것이라고 생각합시다.  [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the..

리액트는 원래 좀 자유롭습니다. 이미지 넣는 법도 서너개 있습니다.    강의에서 사용하는 신발 이미지 URL  https://codingapple1.github.io/shop/shoes1.jpghttps://codingapple1.github.io/shop/shoes2.jpghttps://codingapple1.github.io/shop/shoes3.jpg     대문만들기 심심하니까 메인페이지에 큰 사진 하나 넣어봅시다. 하나 넣고 css 파일에서 디자인넣으면 될 것 같은데   (App.css).main-bg { height : 300px; background-image : url('./bg.png'); background-size : cover; background-position : cen..

이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 build용 파일을 생성하신 후 그걸 올려야합니다. 왜냐고요? 웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있습니다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣습니다. 그래서 리액트 프로젝트를 build 라는걸 하시면 브라우저 친화적인 HTML CSS JS 파일로 바꿔줍니다.그리고 그걸 어딘가 서버에 올려야 사용자들이 여러분의 사이트를 구경할 수 있는 것임  우리도 build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 해보도록 합시다. 빨리 github.com 들어가서 계정을 먼저 ..