전체 글 (80) 썸네일형 리스트형 [Vue.js 프로젝트] 중고거래 플랫폼 만들기 #1. 프로젝트 소개 - 중고거래 플랫폼 사과마켓 - vue.js 공부 후, 해당 기술을 적용해보고자 만들었습니다. #2. 구현기능 1. 로그인 2. 게시글 CRUD 구현 3. 좋아요 기능 구현 - 좋아요 클릭시 게시글에 카운팅되기 - 마이페이지 > 위시리스트에 좋아요한 게시글 저장하기 4. 게시물 검색 및 최근 검색어 기능 구현 5. 마이페이지 > 유저 닉네임 및 프로필 사진 변경 및 저장 6. vuex 사용하여 전역으로 함수 관리하기 7. localStroage를 사용하여 유저 및 게시글 정보 저장하기 - localStorage에 저장하기 어려운 사진첨부의 경우,createObjectURL을 사용하여 구현 1. 로그인 로그인 시 setItem을 사용하여, 'userInfo'를 localStroage에.. [React 토이프로젝트] React 사용해 메모앱 만들기 #1.목표 - React.js를 학습한 후, 잘 할수 있는지 확인해보고자 제작 - 배운것들을 최대한 적용시켜보자. - Styled-component를 사용한 스타일링 - useState, useEffect 훅을 적절하게 사용해보기 - Router를 이용하여 SPA를 구현하자 - Redux를 사용하여 전역 데이터를 관리해보자 #2. 작업기간 - 23.07 ~ 23.08 (6일) #3. 사용기술 React(Router, Redux, Styed-Components) uuid4, moment #4. 폴더 구조 Componets - 화면 구성요소하는 모듈들을 담아놓은 폴더. images - 제작에 필요한 이미지를 담아놓은 폴더 pages - Router를 통해 생성된 page들을 담아놓은 폴더 styles - G.. [React] props : 부모 state 자식에서 사용하기 (사실은 부모의 모든것) #0. props 왜씀? 부모 컴포넌트에 있는 변수, state, 함수 등은 자식 컴포넌트에서 그대로 사용할수 없다. 부모의 컴포넌트 안에 저장된 값이므로 자식으로 따로 상속이된다거나.. 그런게 없다. 그래서, 이경우 자식으로 전달하고 싶은 데이터를 직접 보내줘야하는데, 이때 사용하는 것이 props다. import React from 'react'; import {useState} from 'react'; // 부모컴포넌트 export function App(props) { // 전달하고자하는 값들 const name = '김시선'; const [age, setAge] = useState(20); const addAge = function () { setAge(age+1); }; return ( Hel.. [React] JSX에서 반복문 어떻게 씀? : map 쓰셈 React에서 반복문을 사용하고 싶을때는, map을 사용하는게 가장 간단하다. #1. 간단한 사용설명 다음과 같은 형식으로 쓰는데, function의 첫번째 파라미터는 어레의 각각 요소들이 들어간다. 그래서.. 반복하고싶은어레이.map(function(어레이요소){ return( {어레이요소} ) }) - 다음과 같이 각각의 어레이 요소들이 출력된다. [1,2,3,4,5].map(function(어레이요소){ return( {어레이요소} ) }) // 1 // 2 // 3 // 4 // 5 - 두번쨰 파라미터도 추가할수있는데, 두번째는 0부터 시작하여 1씩 증가하는 정수가 들어간다. - 반복문을 사용하는경우, 각 요소에 고유한 key값을 넣어주지 않으면 에러가 나는데, 두번째 파라미터를 사용하면 키도 쉽.. [React] Component : 코드가 너무 길어질때 사용하면 깔끔해진다. 리액트에서는 코드가 너무 복잡하거나 길어질때, 하나의 컴포넌트를 담아 깔끔하게 코드를 짤 수 있다. - 만약 다음과 같은 코드에 안의 글이 너무 많아서, 간단하게 줄이고 싶을때 쓰면된다. import React from 'react'; export function App(props) { return ( Hello React. 안녕하세요 저는 아주 긴 콘텐츠예요. 너무 길어서 컴포넌트를 분리했답니다. ); } #1. 컴포넌트 생성하는 방법 1. 컴포넌트 생성 - App이란 함수 바깥에 (지금 메인 함수 바깥에) 새롭게 만들고 싶은 함수를 쓴다. - 형태는 App 과 같이 아래와 같은 형태로 쓰면 된다. - 컴포넌트 생성시 주의할 점은, retrun() 안에는 하나의 태그로만 감싸져야 한다는점! 두개의 태그.. [React] JSX에서 if문 어떻게 씀? 삼항연산자 JSX(리액트 html같은애)에서 조건에 따라 다른 화면을 보여주고싶은데.. if문은 왜 오류가나지..? 리액트 JSX에서는 if문이 아닌 삼항연산자를 써야한다. 삼항 연산자는 ? 앞에 조건식을, 이것이 참이면 : 의 왼쪽이 출력, 거짓이면 오른쪽이 출력되는 형태의 if문이다. 식 ? 참 : 거짓 JSX에서 해당 식을 사용하면 {}안에 넣어서 다음과같은 형태로 사용한다. 첫번째 조건식, 1 === 1 은 참이니까, 참이 출력된다. 두번째 조건식, 1 === 2 는 거짓이니까, 거짓이 출력된다. 조건식이나, 참이나 거짓일때의 코드가 너무 많아진다면 ()로 묶어주면 된다. import React from 'react'; export function App(props) { return ( { 1 === 1 ?.. [React] useState3. array/object로 저장된 state, 변경했는데 왜 적용 안됨? # 결론만 말하면.. - let array카피본 = [...원본어레이] 형태로 대입해준 뒤 수정해야한다. // 1. 어레이카피본에는 주소값만 저장되는 꼴. 재랜더링 되지 않는다. let 어레이카피본 = 원본어레이; // 2. ...은 원본어레이의 값을 그냥 꺼내주는 키워드인데, // 원본어레이 값을 펼쳐서 재정의 해준거라 생각하면 됨 let 어레이카피본 = [...원본어레이] ... 이 뭔지 궁금하다면 아래 글 참조 더보기 https://isfpp.tistory.com/129 # array, object - 일단 재랜더링 되지 않을땐 js의 문제 - js 에서 array랑 object는 변수를 저장할때, 우항에 있는 값이 바로 저장하는게 아니라, 우항의 있는 값이 저장된 메모리 주소가 저장되고, 그 값은.. [React] useState2. 클릭이벤트를 걸어보자. #0. React 에서는 왜 변수에 데이터 저장안하고 굳이 state씀? - 일반 변수와 달리, state데이터는 변경시, 재랜더링이 일어나, 변경 사항이 바로 화면에 적용되기 때문이다. #1. 예제 - 버튼을 클릭하면 +1씩 되는 좋아요 버튼을 만들어보자. - state만 변경하면 변경사항이 적용되는지 확인할것. * 실습 전 알아두어야 할점 1. 클릭이벤트 onClick={} 을 이용해서 넣기 - {}안에는 반드시 함수가 들어가야한다. - 그러니까, onClick={함수명} 또는 onClick={() => {코드..}} 형태로 작성해야한다. 2. state 변경하는 방법 - state변수를 변경하고 싶다면, 항상 state변경함수(새로운state) 의 형태로 변경해야한다. let [like, setLi.. 이전 1 2 3 4 ··· 10 다음
