React

=> UI를 개발할 때 사용되는 라이브러리=> 한 페이지에서 변경될 내용만 바뀜=> 속도 및 유지보수에 수월함=> 자바스크립트=> 브라우저 밖으로 나온 자바스크립트Node.js를 설치한다. (https://nodejs.org/en/download)=> LTS의

cmd창을 열어 cd 경로를 입력하여 경로 설정=> 위의 경우에는 cd desktop을 입력하여 위치를 바탕화면으로 잡아줌npx create-react-app 프로젝트명을 입력하면 열심히 Install하는 중이라고 뜰 것인데,Install이 끝나고 나면 아래의 이미지처

node 버전 확인은 터미널에 node -vnpm 버전 확인은 터미널에 npm -version3\. 설치가 끝나면 터미널창에 "Happy hacking!"이라고 뜸

1. Ctrl + , 혹은 좌측 하단 설정 클릭하여 "workspace" 검색 2. Live Server Config에 들어가서 "settings.json에서 편집" 클릭 3. setting.json에 아래처럼 추가로 작성 후 저장 4. 저장한 이후 확인해보면 아래 이미지처럼 자동완성 기능을 사용할 수 있음!

함수 밑에 export default 함수명 > => 모듈은 기본 내보내기 딱 하나만 가능함수명 앞에 export 입력=> export default로 기본 내보내기를 한 경우=> 함수명 앞에 export를 사용한 경우=> 두 개 이상의 함수를 가져오는 경우 ,을 사용

보통 함수에서의 매개변수라고 할 때는 위의 코드에 있는 name, age를 떠올리게 되는데,이런 식으로 값을 전달할 수 있는 매개변수는 Props를 이용하여 넘겨줄 수 있다.아래는 App.js의 코드인데, 컴포넌트 이름은 PropsEx로 해보았다.위 이미지처럼 사용한다

우선 보다 빠른 이해를 위해 아래의 이미지처럼 제일 윗라인에 객체 하나를 생성하여 console로 찍어 확인해보았다. 아래는 console 결과 그런데 만약 이 user라는 객체에서 userId라는 걸 변수로 가져오고 싶은 경우, 당연하게도 이렇게 넣은 뒤 co

보통 배열이 있고, 그 배열에 있는 값들을 출력해보고 싶다고 가정했을 경우 for문을 많이 떠올리게 되는데,Map함수를 사용하면 이러한 for문을 대신하여 깔끔한 코드로 작성할 수 있다.연습을 위해서 우선 상단에 배열을 하나 만든다.그리고 우선 for문을 이용해서 한

지난 번 공부했던 map함수에 이어 하나만 더 연습을 해보기로 하였다.저번에 하던 것에 이어, menus라는 배열을 하나 더 만들었는데,오늘 메뉴는 치킨!, 사이드 메뉴는 맥주!이런 식으로 출력결과가 나오도록 map함수를 사용하여 작성해보면..이렇게 작성해볼 수 있다.

이렇게 붙여넣고 기다리다보면 아래 이미지처럼 설치가 완료된다.

분명 GlobalStyled와 관련된 글과.. reset-css에 대해서 포스트를 작성하였다고 생각했는데 꿈을 꿨나..? styled components에 대한 글밖에 보이지 않아 급하게 작성하게 되었다.......^^우선 GlobalStyled의 쓰임새는 공통으로 사

JSX 문법 안쪽에는 class 속성을 사용할 수 없고, 대신해서 className을 사용할 수 있다. 위에서는 class명을 box라고 넣어주었다. 이후에는 별 다를 것 없이 css 파일을 만들어 해당 class에게 속성을 추가해주면 된다. 따로 css파일을 만들

Styled components에서 img태그를 사용하려니 src의 위치를 어디에 잡아야할지 고민 중일 때에는위의 빨간 박스처럼 src를 넣어보자.우선은 props 안쪽으로 경로를 넣어 전달해줄 준비위의 경우는 bgUrl이라는 이름으로 사용!백그라운드의 url 경로가

클릭을 할 때마다 숫자가 증감되는 이벤트를 만들어줄 것인데, 여기에는 react Hook의 useState를 사용할 예정이다.useState는 return 윗쪽에 배열로 비구조화할당을 이용하여 작성한다. 이때, react에서 useState를 import해와서 사용하면

앞의 Event부분은 클릭할 때마다 Box의 배경색이 바뀌는 것이 아니라 일회성으로 한 번 클릭했을 때에 색이 바뀌는 것만 가능했다면, 이번에는 조건문을 사용해서 클릭할 때마다 색이 바뀌도록 해줄 것이다.우선 useState를 하나 더 추가해주고, 이 값의 조건에 따라

매 프로젝트 때마다 라우터를 사용하는데, 이번에도 라우터를 설치하여 사용하게 될 일이 있어 추후에 기억이 나지 않는 경우를 대비해 글을 적어보았다.이후에 <BrowserRouter> 혹은 <HashRouter>을 사용할 수 있는데, 해당 글에서는 HashRo

React는 SPA(single Page Application)로 검색 최적화(SEO)가 어려운데, 이를 보완해주기 위해 Helmet을 설치하여 사용하게 되었다. 처음에는 그냥 react-helmet을 사용하였으나, 오류가 생겨 react-helmet-async를 사용

매번 사용되는 padding이나 margin값, 혹은 포인트 색상이 헷갈리는 경우에 사용하기 좋은 방법이다.GlobalStyled에서 아래와 같이 작성해두고해당 속성값이 필요한 부분에 사용해주면 된다!

원래 프로젝트를 하며 이미지 경로를 잡을 때에 외부 링크를 통해 경로를 잡아뒀었는데,어느날 들어가보니 이렇게 이미지가 다 깨져 보이는 상황에 놓여버렸다.외부에서 링크를 끌어다 와서 사용하는 방법이 한계가 있다는 것을 느껴 프로젝트에서 자체적으로 이미지를 관리하는 편이

포트폴리오를 제작하다보니, 각 포폴 작업을 올리는 플랫폼이 각기 달라서 아이콘을 다르게 지정해줘야 하는 경우가 생겼다. 배열을 사용하고 있었기 때문에 당연히 map함수를 이용했는데, 아이콘 이미지를 public 경로로 가져오는 경우라면 쉽게 배열 안에 이미지 경로를 넣

앞의 글에서 필요한 아이콘을 사용하기 위해서 props를 사용하였는데, 이후 새로운 오류가 생겨서 해결해보고자 글을 작성하게 되었다.React does not recognize the imgStyle prop on a DOM element. If you intentio

이전에 제작했던 오리 mbti에서 결과창으로 넘어가야 하는 상황에 버튼을 누르지 않고 기다리는 사용자가 정말정말 많았다... 그래서 "눌러서 결과보기"라는 텍스트를 좀 더 눈에 잘 띄게 만들기 위해 animation을 이용하게 되었다.해당 텍스트가 들어있던 TxtBox

오리 mbti 프로젝트 ver2를 제작하면서 앞서 얘기가 나왔던 결과 페이지로 자동 이동 기능을 구현하던 중에.. result 페이지로 이동하는 버튼을 자동으로 클릭되게 만들어야 했어서 한 2~3일?? 정도를 잡아먹은 것 같다ㅜㅜ..! 중간에 포기해야하나 고민했으나 끝

모바일용 햄버거 메뉴를 만들고, 이 버튼을 클릭했을 때 메뉴가 나오면 뒷배경 스크롤이 되지 않도록 하고싶어서 찾아보던 중에 모달창을 열고 닫는 핸들러 안에 document.body.style.overflow를 넣어 스크롤이 되지 않도록 만들 수 있다는 기쁜 소식을 듣고

평소에도 잘 이용하던 swiper을 react 프로젝트에서도 사용하기 위하여 정리하였다..!우선 swiper 홈페이지에 들어가서 react 아이콘을 클릭하면 나오는 문서를 참고하자.npm i swiper을 통하여 스와이퍼를 install해준다.네비게이션, 페이지네이션,

swiper를 사용해서 슬라이드를 간편하게 구현할 수 있다는 것을 알게된 이후로 정말 애용했는데, 생각해보니 글로 남긴 적은 한 번도 없었던 것 같아서 이번에 신규로 프로젝트를 진행하며 스와이퍼 쓸 일이 생겼길래 이때다 싶어서!?! 한 번 기록해보려 한다..!swipe

차트식 그래프를 출력해봐야하는 일이 있어서 찾아보던 중,개인 커스터마이징도 잘 되고 사용법도 어렵지 않은 라이브러리라고 생각하여 rechars를 사용해보게 되었다.터미널을 열어 npm install recharts 입력하여 설치차트를 출력해줄 컴포넌트로, DietCha

프로젝트를 진행하다 보니, 로그인과 회원가입 페이지에서는 굳이 Header과 Footer을 보여주지 않는 편이 깔끔해보이고 좋을 것 같다는 말씀을 해주셔서 찾아보니, React-router-dom에 "Outlet"이라는 것을 알게 되었다.우선 MainLayout.js라

로딩에 꼭 사용하게 되는 스피너..이번에도 사용하게 되어 기억해두기 위해 글을 작성하였다.우선 react-spinners를 설치하기 위해 npm i react-spinners 명령어를 터미널에 입력해주자.React Spinners 홈페이지에 들어가 사용할 로딩 애니메이