본문 바로가기

HMWK122

[React] 상품목록 Component 로 만들어 반복문 돌리기 💡 실습 포인트! 💜 상품목록 Component 로 만들어 데이터바인딩하기 // data.js 파일의 상품 데이터 export default [ { 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 States", price : 130000 } ]; import Data from './data.js'; function App() { let [shoes, setShoes] = use.. 2022. 3. 23.
[React] import/export 사용해보기 💡 실습 포인트! 쇼핑몰 레이아웃 디자인하기 포스팅에서는 하드코딩을 했었는데, 이번에는 데이터바인딩을 해주었다. 브라우저에 렌더링되어 보여지는 화면은 동일하다. 💜 상품 데이터 미리보기 [ { 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 States", price : 130000 } ]; 데이터 바인딩을 하기 위해 샘플 상품 데이터를 준비했다. 각 상품 정보를 object 자.. 2022. 3. 23.
[React] 쇼핑몰 레이아웃 디자인하기 💡 실습 포인트! 💜 쇼핑몰 레이아웃 PC 화면 💜 쇼핑몰 레이아웃 모바일 화면 💜 Navbar 만들어보기 🤍 React Bootstrap 에서 Navbar Components 검색하기 React Bootstrap 공식사이트로 들어가서 Components 메뉴에서 navbar 라고 검색하면 샘플들이 많이 나온다. 그러면 마음에 드는 navbar 의 HTML 코드를 복사하여 JavaScript 파일에 붙여넣어주면 디자인은 끝! 세부 내용이나 디자인만 손보면 예쁜 Navbar 를 만들 수 있다. 🤍 원하는 디자인의 Navbar HTML 복사-붙여넣기 function App() { return ( Shoes shop Home Link Action Another action Something Separated .. 2022. 3. 23.
[React] yarn 과 React Bootstrap 라이브러리 설치하기 💡 실습 포인트! 새롭게 shop 이라는 프로젝트를 생성한 후 본격적으로 코드를 작성하기 전에 yarn 과 React Bootstrap 을 설치해보았다. 아직은 이런 과정들이 익숙하지 않아 후에 참고할 겸 다시 복기할 겸 정리해보았다. 💜 yarn 설치하여 사용해보기 🤍 yarn 이해하기 yarn 은 npm 이나 npx 를 대체해서 사용 가능한 도구로, npm 보다 설치속도가 훨씬 빠르며 안정적이다. 설치만 일단 해두면 npx create-react-app 프로젝트명 이라고 터미널에 입력해도 자동으로 yarn 이 구동되어 속도가 빨라진다. npm install 이라는 명령어 대신 yarn add 라는 명령어를 사용할 수 있고, npm run start 대신 yarn start 를 사용할 수도 있다. 🤍 .. 2022. 3. 22.
[React] 블로그 글발행 기능 만들기 💡 실습 포인트! 오늘은 블로그 글발행 기능을 만들어보았다. 매번 짧은 강의에 필요한 내용만 이해하기 쉽게 담아내는 강의력도 강의력이지만, 강사님이 하시는 말씀이나 강의노트가 너무 웃겨서 공부하며 코드 작성하는 게 재미있다. 다행히도 30초 생각해보고 "아 모르겟넹 잇힝~" 하는 일은 없었고, 코드작성하고 브라우저에서 직접 확인하는 데까지 10분 정도 걸린 것 같다. MongoDB 다루는 방법도 전체적으로 한번 공부했으니 나중에는 이렇게 '등록하기' 버튼을 통해 전송된 데이터를 DB 에도 저장하고 불러올 수 있지 않을까. 💜 사용자가 입력한 글을 변수에 저장하기 🤍 사용자가 input 에 입력한 데이터를 state 로 저장하기 사용자가 input 에 입력한 데이터는 중요한 데이터이기 때문에 state 에.. 2022. 3. 22.
[React] 추천 버튼 기능 오류 수정하기 💡 실습 포인트! 이전에 추천 버튼을 클릭하면 버튼 옆에 숫자가 카운트되어 보여지는 기능을 만들었다. 그 때는 강사님이 예제로 하나의 게시글에만 기능 추가하는 것을 알려주셨는데, 그 때 다른 게시글에도 해당 기능을 추가해보려 시도를 하기는 했었다. 하지만 공부량이 부족해서인지 내가 당장 구현할 수 있는 방법은 첫번째 게시글에 사용했던 방법처럼 useState() 를 새로 만들어서 다른 게시글에도 적용하는 것이었다. 이러한 방법은 지금 당장에는 사용할 수 있겠지만 데이터가 많아지는 경우에는 무수히 많은 useState() 가 필요해지기 때문에 확장성 등에서 문제가 발생할 수 있는 좋지 않은 코드가 되므로 공부를 좀 더 한 다음에 시도를 하려고 보류해둔 상태였다. 그러고나서 데이터바인딩하는 방법까지 배운 후.. 2022. 3. 22.
[React] props 를 응용한 상세페이지 만들기 💡 실습 포인트! 모달창이 열려있을 때 게시글의 제목을 클릭하면, 모달창의 제목 부분을 게시글의 제목으로 데이터바인딩을 해서 마치 상세페이지를 여는 듯한 효과를 주었다. 💜 props 이해하기 🤍 기존 모달창 다시 보기 기존 모달창을 다시 보면 제목, 날짜, 상세내용이 하드코딩되어있는데, 그 중 제목 부분이 데이터바인딩되어 보여야 하는 것이다. 🤍 props 이해하기 // 코드에서 App Component 와 Component 의 구조를 보여주기 위해 // 불필요한 코드는 임의로 제외했다. function App() { let [title, setTitle] = useState([ '[React] React 설치와 개발환경 셋팅하기', '[React] JSX 를 이용해 HTML 페이지 제작해보기', '[.. 2022. 3. 21.
[React] React 에서 반복문 활용하기 💡 실습 포인트! 이때까지의 실습에서는 위와 같이 게시글 리스트를 브라우저에 나타내기 위해 list 라는 className 을 가진 div 태그들을 각각 하드코딩을 했었다. 하지만 데이터의 양이 늘어날수록 하드코딩을 하기도 힘들거니와 파일 내의 코드가 너무 길어져 가독성이 떨어진다. 따라서, 반복문을 활용하여 코드의 길이를 줄이고 확장성을 더해주었다. 💜 map() 함수 활용하기 React 에서는 중괄호를 활용하는 JSX 문법을 사용하는데, 중괄호 안에는 변수와 함수만 들어갈 수 있기 때문에 for 문을 직접적으로 넣어서 사용할 수 없다. 하지만, array 자료형에 붙일 수 있는 map() 이라는 내장함수를 활용하면 반복문을 사용한 것과 같은 효과를 줄 수 있다. 🤍 map() 함수 알아보기 map().. 2022. 3. 21.
[React] 클릭하면 동작하는 UI (모달창) 만들어보기 💡 실습 포인트! 오늘은 클릭하면 동작하는 UI, 그 중에서 모달창을 구현해보았다. 강의에서 모달창을 디자인해놓고 클릭했을 때 모달창을 여는 방법을 알려주신 후, 과제로 버튼을 한 번 더 눌렀을 때 닫히게 해보라고 하셨다. 나는 오늘 활용했던 삼항 연산자를 가지고 코드를 작성했고, 강사님은 느낌표(!) 기호만을 가지고 더 쉽게 만드는 방법을 알려주셨다. 느낌표(!) 기호의 쓰임을 잘 알고 있다고 생각했는데, 아는 것과 잘 활용하는 것은 별개의 문제임을 다시금 깨달았다...ㅎㅎ 💜 상세페이지 겸 모달창 UI 만들기 🤍 HTML 및 CSS 코드 작성하기 HTML 제목 날짜 상세내용 CSS .modal { margin-top: 20px; padding: 20px; background-color: #eee; }.. 2022. 3. 20.
[React] React 에서 state 사용해보기_2 💡 실습 포인트! 💜 첫번째 글제목 바꾸기 버튼 및 기능 만들기 💜 가나다순으로 정렬하기 버튼 및 기능 만들기 💜 첫번째 글제목 바꾸기 버튼 및 기능 만들기 let [title, setTitle] = useState([ '[React] React 설치와 개발환경 셋팅하기', '[React] JSX 를 이용해 HTML 페이지 제작해보기', '[React] React 에서 state 변경해보기' ]); 본격적으로 기능을 만들어보기 전에 기존의 useState() 함수를 살펴보자면 위와 같다. 🤍 첫번째 글제목 바꾸기 버튼 만들기 첫번째 글제목 바꾸기 적당한 위치에 "첫번째 글제목 바꾸기" 라는 버튼을 만들어주었다. onClick 내에 함수 코드를 적기에는 코드가 길어서 changeTitle0 함수를 따로 만.. 2022. 3. 18.
[React] React 에서 state 사용해보기 💡 실습 포인트! 💜 React 에서 state 사용해보기 🤍 state 를 만들어서 데이터 저장해보기 React 에서는 변수말고도 state 라는 것을 사용하여 데이터를 저장하여 사용할 수 있다. state 를 사용하기 위해서는 일단 state 를 사용할 파일 상단에 다음과 같이 코드를 넣어주어야 한다. let [value, setValue] = useState(initialValue) 그리고 useState() 함수는 위와 같은 형태로 사용한다. useState() 함수는 state 를 하나 만들어주는 함수이며, useState() 의 소괄호 안에 저장할 데이터를 넣으면 state 에 데이터를 저장할 수 있다. useState() 함수를 사용하면 array 의 형태로 [데이터1, 데이터2] 와 같이 .. 2022. 3. 18.
[React] React 에서 Font Awesome 사용해보기 💡 실습 포인트! Font Awesome 은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리에 해당한다. 일반적인 HTML 파일에서 코드를 작성할 때와 Font Awesome 사용 방법이 다른데 터미널에서 패키지 설치할 때 매번 검색하기 힘들 것 같아서(...) 내가 보려고 포스팅을 해본다. 💜 터미널에서 Font Awesome 패키지 설치하기 🤍 Font Awesome 의 SVG 기반 아이콘을 활성화하기 위한 기본 패키지를 설치한다. (필수) npm i @fortawesome/fontawesome-svg-core 🤍 Font Awesome 아이콘에 대한 패키지를 설치한다. Font Awesome 에는 Solid, Regular, Light, Brands 와 같은 카테고리나 유/무료 여부에 따라.. 2022. 3. 18.

티스토리툴바