우리는 작업을 하면서 컴퍼넌트에서 어떤 컴퍼넌트가 들어올지 모르는 경우가 생긴다. 새로 만드는 프로젝트뿐 아니라 이미 기존에 존재하는 프로젝트역시 마찬가지다. 어떤 자식 엘리먼트가 들어올지 모르는 상황에서 우리는 children을 사용하면 유지보수에 좋은 효과를 불러올

spa 환경에서 간단히 ssr 구현해서 멀티페이지 어플리케이션 만큼 검색엔진 최적화 대응하고 퍼포먼스까지 향상시켜줌 이게 넥스트의 장점임pre-render로 더 좋은 퍼포먼스 가능검색엔진 최적화 (SEO)렌더에 크게 두개있음정적 생서버사이드 렌더링차이점? => html

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

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

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

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

이번 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/

리액트가 나온이유 바로 코드를 보도록 하자 >위의 코드를 해석해보자 +1을 누르면 id가 number인 dom 을 선택하여 속성을 1씩 더해주어라이다. 위의 코드는 간단하고 사용자와의 교류가 없어서 상관없겠지만 이러한 서로의 인터랙션이 자주발생하고 또한 이러한 이벤트

❓what is library 간략: 프로그램을 제작할때 필요한 기능 예시: 자동차 바퀴, 헤드라이트, 에어백❓what is framework 간략: 프로그램 기본 구조(뼈대) 예시: 자동차 프레임❓what is architecture 간략: 프로그램의 주요 구조 설계