React

Single Page Application 을 Vanilla js보다 짧고 편리하게 구현 가능.html을 함수, array, object 같은 곳에 보관하고 재사용할 수 있어서 큰 프로젝트일 수록 html 관리가 용이함.React Native를 쓰면 같은 리액트 문법으

구글에 Nodejs 검색하고 공식홈페이지 다운로드 들어가서 LTS버전 설치Visual Studio Code (이하 VScode) 편집기 사용할 것임.본인은 작업용 폴더들을 C드라이브에 모아서 관리하기 때문에 c://react 폴더 만들어줌.VScode에서 react 폴

저번 글에서 띄운 미리보기 띄운 상태에서 진행해야 실시간으로 체크 가능.리액트는 html 인듯 아닌듯 애매한 문법을 사용하는데 이걸 JSX 라고 한다.App.js 를 깨끗한 상태로 수정해주자.이제 컨셉이 블로그이니까 나름의 Nav를 만들어주자.저장해주면 Nav가 깔끔하

리액트에서 중요하거나 가변성이 있는 데이터는 일반 변수에 넣지 말고 state 를 만들어 담아준다.

\* 콘솔에 사용 안 한 변수가 있다고 warning이 잔소리를 한다 ? \--> \`/ eslint-disable \*/\` 를 js 파일 제일 위에 추가해주면 해결됨.하트를 누르면 0에서 1씩 증가하도록 만들어보자.아래와 같이 제목 부분에 하트와 좋아요 개수를 추가

위 처럼 return문 안에있는 html을 사용할때는 최상위 태그는 반드시 하나여야 한다.이렇게 fragment 문법으로 빈 태그로 감싸줘도 된다.그럼 이제 게시글 제목을 클릭하면 목록 아래에 게시글 상세화면 뜨도록 해보자.일단 상세화면 디자인부터 하기..modal{

저번에 jsx에서 for 반복문을 사용할 수 없다고 했다.{ } 안에서 map() 을 대신 사용하여 반복시켜주자.posts의 요소 개수만큼 반복하여 태그들을 뽑아준다.posts.map(~) 의 결과는 array이고 그 array 를 { } 안에 넣어주면 html이 알아

저번에 만들 Modal이 보여질때 클릭한 게시글에 해당하는 title과 date를 보여주고 싶다면?props를 이용해 부모로부터 자식에게 state를 물려줘야 자식이 state를 사용할 수 있다.그리고 선택한 게시물의 고유번호를 알아야겠지?그러면 selected 라는

우선 state 정의하는 곳에 입력값을 저장할 state 를 생성해주자.그리고 {modal~} 위에 글을 입력할 input 태그를 만들어주자.onChange~ : input 태그에 값이 변할 때 마다 input state 값을 저장해준다.addPost : 글을 입력하고

좋아요 숫자 뒤에 버튼을 생성해서 삭제하는 기능을 구현해보자.이젠 아주 간단하쥬?

VScode에서 c://react 폴더를 연다.터미널에서 npx create-react-app shop shop 폴더가 생성되었으면 그 폴더를 연다.터미널에서 npm start

db랑 연동하여 데이터를 갖고 오는 방법은 사용하지 않고 직접 데이터를 만들어 삽입해보는 방식으로 진행할 것이다.src 폴더에 shoes.js 파일을 만들고 그 안에 아래코드를 넣어준다.shoes 변수를 export 해주는 파일이다.App.js 파일로 와서 import

상품 목록을 통으로 Component 로 만들어준다.기존의 상품 목록 태그를 통으로 아래코드로 바꾸면 끝.컴포넌트를 파일로 따로 빼볼까?Shoe.js 파일을 생성하고 그 안에 function Shoe(props)~ 를 그대로 넣어준다. export는 당연히 붙여주고.A

미리보기 종료하고 터미널에서 아래 명령어 입력.npm install react-router-dom라우터 설치 됨.npm start 입력.index.js 파일로 가서추가된 코드 적용해준다.App.js 파일에서Link 👉 태그를 누르면 그 주소에 해당하는 페이지를 보여준

상세페이지가 보여줄 html을 담기 위해 Detail.js 파일을 생성한다.아래 코드를 넣어준다.그리고 App.js에서 아래코드로 변경한다.Detail Component를 적용한 모습이다.이처럼 path가 "/"인 부분도 깔끔하게 하기 위해 Component를 만들어

style을 css 파일을 사용하지 않고 간편하게 이쁘게 만들기 위해 라이브러리가 하나 필요하다.우선 터미널에 npm install styled-components 를 입력하여 설치를 하자.이런식으로 style 적용된 Component를 직접 만들고 사용을 할 수 있다

Component 안에서 return() 전에useEffect() 의 기본은 해당 Component가 mount 될 때, update 될 때 실행해준다. mount, update 될 때 렌더링을 마친 후에 안에 있는 코드를 실행해준다.기본적으로 state가 변경될 때

xmlHttpRequestfetch()axios(외부라이브러리)3번을 사용하여 진행해보자.npm install axios 말안해도 알겠쥬?App.js 파일에 다음과 같은 버튼을 추가한다.state shoes 도 배열이고, axios로 갖고온 result.data 도 배

👉 react-bootstrap 에서 Nav 를 import 하고 사용하였다.그리고 tab state 를 만들어 탭을 누르면 변경해주고 그에 해당하는 내용을 Tab Component 를 이용하여 보여주도록 하였다.👉 props를 변수로 넣어주는 대신에 {tab}을

App.css 에 다음 코드를 추가해준다.👉 className="start" ===> className="start end" 으로 변하면서 애니메이션 효과를 주는 코드이다.Detail.js 에서 Tab Component를 다음과 같이 수정한다.👉 fade 자리에 e

props 의 회귀적 특성이 여러 Component들이 중첩이 되어있을 때는 state를 넘겨주는데 매우 번거로운 과정의 원인이 될 수 있다.그 대체법의 하나로 Context API 를 사용하는 것이다.상위 Component에 import코드 부분에 아래코드로 보관함을

routes 폴더 안에 Cart.js 파일을 생성하여 다음 코드를 작성한다.기본 테이블 레이아웃이다.App.js 파일에 적당한 위치에 다음 코드를 추가한다.이제 /cart 페이지로 접속하면 테이블 구조를 볼 수 있다. const user = createSlice({

👉 조건식이 true면 내용이 남는다.조건식이 false면 false가 남는다. (자바스크립트 개념, boolean과 자료형의 비교)false가 남으면 HTML로 렌더링하지 않는다(삼항연산자의 null과 같음)

서버나 데이터베이스가 없을 경우 데이터를 반영구적으로 저장하는 방법은 localStorage를 사용하는 것이다.브라우저를 껐다 켜도 정보가 남아있고 안쓰면 직접 지워줘야한다. 이와 다르게 session은 브라우저를 껏다키면 사라진다.localStorage.setItem

현재 내컴퓨터에는 nodejs가 설치가 되어있는 상태이다.nodejs 에서 만든 서버를 통해 쇼핑몰 사이트를 연동시켜보자.nodejs 설치작업 폴더 만들고 vscode로 열기server.js 파일을 만들고 다음 코드를 적는다.app.listen(8888, functio