개발자연습노트

코드 짜다가 실수해서 2일 전으로 돌아가고 싶으면 어쩌죠? 파일저장만 주구장창 했으면 다시 돌아갈 수는 없습니다.  해결 방법이 2개 있는데- 매일매일 손수 파일 복사본을 만들어두거나 - git 쓰거나 둘 중 선택하면 됩니다.      git의 commit 기능을 쓰면 쓰면 파일의 현재상태를 매일매일 기록해둘 수 있습니다.정확히 말하면 파일의 스냅샷을 저장해줍니다. 그럼 원할 때 쉽게 되돌아가거나 그럴 수 있음 오늘은 파일의 현재상태를 기록해줄 수 있는 git commit 명령어를 알아봅시다.       일단 작업폴더에서 git을 이용하고 싶으면 거기서 터미널을 열어서 git init 부터 입력하고 시작하면 됩니다. 이제 git이 여러분이 파일생성하는거, 코드작성하는걸 추적하기 시작합니다.  파일 하나를..

코드를 짜든 디자인을 하든 레포트를 쓰든파일 변경내역을 보존하고 관리하는 과정이 필요합니다. 그러고 싶을 때 프로그래머들은 git을 사용합니다.이거 쓰면 위 사진처럼 파일 복사본을 귀찮게 만들지 않고도 깔끔하게 버전관리가 가능합니다.  git은 리눅스 만든 아저씨가 2005년에 만든 간단한 프로그램인데그때랑 다르게 시대가 많이 바뀌어서- 예전처럼 git checkout 파생명령어 20개 외울 필요없이 신 문법 switch, restore 등을 사용해서 - 복잡한 Vim + Git bash 말고 깔끔한 VSCode 에디터로  쉽게 배워봅시다.      git & 코드에디터 설치   1. 구글에 visual studio code 검색해서 설치합시다.코드 짤 에디터같은거 준비하면 됩니다. 싫으면 그냥 윈도우 ..

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..