npm install axiosnpm install -g @vue/cli하지만.. 한번에 되면 너무 낭만적이겠죠?주변 동기분들은 이 명령어 하나로 쉽게 설치되고 화면 띄우는데 얼마 안걸렸는데 저는 하루 꼬박걸렸습니다.zsh: vue not found라고 계속 커맨드창에

상위 컴포넌트 ---> 하위 컴포넌트props 전달하위 컴포넌트 ---> 상위 컴포넌트event 발생props속성은 컴포넌트 간에 데이터를 전달 할 수 있는 컴포넌트 통신법이다.props속성을 기억할 때 상위 컴포넌트에서 하위 컴포넌트로 내려주는 속성이라 기억하자pro

Vue 기본 구조 > instance 속성 , API들 > >- el:인스턴스가 그려지는 화면의 시작점 template: 화면에 표시할 요소(html,css등) data: vue의 반응성이 반영된 데이터 속성 methods: 화면의 동작과 이벤트로 로직을 제어하는

이번 프로젝트에서 마지막날 급하게 만들어낸 페이지인 액티비티 페이지...여기서 기능은 페이지네이션/필터링된 데이터 각각받아오기였다.우선 limit을 20을 줘서 각각의 페이지에서 20개의 상품 카드가 나오게 설정하였다처음에는 const userOrder, setUser

바로 코드를 보자!우선 핸드폰 번호를 백엔드에 전송해줘야한다핸드폰번호와 문자가 일치하는지 확인을 위해서 백엔드와 통신하여나의 휴대폰 번호 그리고 sms번호를 백엔드에 보내준다그리고 만약 인증번호가 일치하면 성공 메세지를 받게되어 문자인증을 성공한다.최종적으로 지금까지

링크텍스트클론코딩 동영상 녹화FRONT-END(react)김영재, 김규빈FRONT-END(react-native)박채훈, 한준희BACK-END김원희(PM), 이현주우선 웹페이지 프론트엔드 개발자로 저와 규빈님 딱 둘인점에서 살짝 걱정은 됬지만 오히려 둘이서 하다보니 정

promise chaning을 계속하다보면 코드 가독성이 떨어짐async & await는 promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어주는 APIasync와 await는 새로운 것이 추가된것이 아니라 기존에 존재하는 promise위에 조금더 간

2차 프로젝트가 시작되면서 함수형 컴퍼넌트 클래스형 컴퍼넌트 두개중 하나를 사용하라했다.저는 이번에 함수형 컴퍼넌트에 대해서 공부할 수 있는 좋은기회라 생각됬기 때문에 이번프로젝트는 함수형으로 진행하기로 하였다.2019년도 부터 리액트 훅(hook)을 지원하게 되었다.

주말간 푹 쉬면서 했던 내용 복습을 하다보니 어느덧 2차 프로젝트를 시작하게되었다.1차때 프로젝트를 하면서 전보다 코드의 질도 높아졌으면 좋겠고 조금더 다양한 페이지를 맡아서 해보고 싶었다.그리고 2차때는 여러 기능을 다뤄보면서 로직을 짜는 전반적인 틀을 잡아야겠다

이번 velog또한 1차 프로젝트를 하면서 너무 많이 쓰이고 너무 중요하지만 생각보다 개념이 간단한 것중 map과 reduce를 뽑을것 같다.그러한 이유로 이번에는 map과 reduce를 자세히 알아보려고 한다.map이란 함수는 간단히 설명하면 반복문을 돌면서 배열안에

이번에 1차 프로젝트를 하면서 너무 중요하고 많이 쓰였지만 이해도가 조금 부족했던 것중 저는 fetch라는 메서드를 뽑았습니다.그래서 velog 에서 개념정리 및 복습용으로 작성해 보려 합니다.1차 프로젝트를 하면서 fetch라는 메서드는 처음에 뭔지 잘 몰랐다.그런데

벌써 한달이 지났네요...위코드를 오기전 건설현장에서 오랬동안 일했고 요식업관련해서도 일을 했습니다.일도 재밌고 돈도 괜찮게 벌었던것 같고 항상 즐겁게 살았습니다.위코드를 온이유... 다들 코딩이 좋아서 아니면 컴퓨터 사용하는게 좋아서 많은 이유가 있던것 같습니다.그에

우선 지금 생각하면 2개의 subnav컴퍼넌트를 모두 출력 시키고 호버를 어떤곳에 하냐에따라 한쪽에 display:none;이라는 css속성 만으로도 구현 할 수 있다는 걸 알았지만 저는 javascript로 해결해 보았습니다.코드를 바로 보도록 하자위의 코드에서 st

위에서 보이는 것 처럼 비회원 주문 조회하기를 누르면 숨겨진 div의 내용이 나올 수 있게 구현하였다.생각보다 굉장히 간단하게 처리 할 수 있습니다.코드를 보시면위의 코드에서 showGuestBox의 state값을 false로 boolean값을 주었습니다.위의 코드를

로그인 페이지와 회원가입페이지를 fetch를 사용하여 백엔드와 통신하는 것을 배웠습니다.바로 코드를 보도록하자.위의 코드에서는 state값에 기본적으로 로그인시 필요로 하는 id, pw,그리고 백엔드로부터 정보를 받아 로그인시 localStorage에 토큰값을 저장하기

🦁역시 바로 코드를 보면서 이야기 하는것이 제일 좋은 방법인것 같다!commentList라는 배열 commentValue라는 value값을 선언한다handleCommenmtValue라는 이벤트를 통해 변화하는 value값을 e.target.value를 통해 선언해준다

Call back 함수 >call back 함수란 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 수 매개변수로 전달한 함수가 다시 호출되는 것이다. map ` >위의 코드에서 처럼 map()메서드는 배열내의 모든 요소 각각에 대해 주어진 함수를 호

위스타 그램 클론을 하면서 로그인 페이지 마무리 작업을 하였다.바로 코드를 보면서 정리 하도록 하겠습니다.👉우선 로그인 페이지에 id와 password에 값이 들어올 수 있고 그것을 활용 할 수 있도록 함수를 선언하였다👉위의 id와 password를 비구조화 할당으

🙈React는 Component로 구성된다. component는 한글 해석한 것과 같이 구성요소를 의미한다.이러한 컴퍼넌트는 페이지를 구성하고 여러단위로 쪼개면 component안에 component가 생기므로 부모-자식 구조의 관계가 생성된다.👍컴퍼넌트의 상태👍

LifeCycle API를 사용할때는 언제일까?컴퍼넌트가 우리 브라우져에 나타날때, 업데이트 될 때, 사라질때 우리는 LifeCycle API를 사용합니다.LifeCycle API 사진을 보며 이해해보자출처:http://projects.wojtekmaj.pl/