"상태 관리가 필요한 이유" 컴포넌트에서 다른 컴포넌트로 값을 넘기는 방법은 2가지가 있습니다! 1) 부모컴포넌트 => 자식 컴포넌트로 props 넘기기 2) 상태관리 라이브러리 (Redux, Recoil 사용하기) 만약 1) 부모=> 자식 컴포넌트로 props 넘기기를 이용하여 꼭대기 Provider1 ==> 마지막 6 로 값을 전달하면 어떤 문제가 발생할까요? A. Traveling Props가 발생! Traveling Props란? 여행하는 Props란 뜻으로 props가 전달=>전달=> 전달=>하게 되어 이리 저리 컴포넌트 세계여행을 떠나게됩니다. 그렇게 되면 코드가 굉장히 복잡해지고 번거로워지고 헷갈리게 되겠죠? 그러나, Recoil과 같은 상태관리 라이브러리를 사용하게 되면, 직통열차처럼 한 ..

//노마드 코더 리액트 마스터 강의 내용을 공부용으로 정리한 것입니다 //챌린저 내용은 전혀 없습니다 APEXCHARTS란? 자바스크립트에서 사용할 수 있는 차트 라이브러리로, 차트를 시각화해서 보여준답니다! 앵귤러, 리액트, 웹 컴포넌트, JQuery, ASP.NET 등 다양한 프레임워크와 통합하여 사용할 수 있어 차트를 시각화하여 사용자에게 보여줄 수 있게 도와줍니다! 저는 react와 연계해서 사용할 것이기 때문에 React-ApexChart - A React Chart wrapper for ApexCharts.js Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visua..

*이는 노마드코더 리액트마스터 강의를 통해 배운 내용을 정리한 개념입니다 * 챌린지 내용은 전혀 없습니다 개요 React Query : 서버 상태 관리를 도와주는 라이브러리! 장점 (1) 캐시를 사용한다 이전 페이지가 돌아왔을 때 다시 로딩되는 것이 아닌, 캐시에 저장되기 때문에 다시 한 번 API를 불러오는 작업이 없다! 한 번만 불러오고 끝! (2) 자동으로 데이터를 가져온다. 가져온 데이터가 업데이트 되면 자동으로 데이터를 다시 가져온다. (3) ★★★★★ 클린 코드 작성이 가능하다.★★★★★ 기존의 api 연동 방식은 fetch를 사용하여 긴 코드를 주저리 주저리 쓰는 것이었지만, react query를 사용한다면, 짧은 코드만으로 api 연동이 가능하다! 예시) 기존 fetch만을 사용하여 암호..

(1) 왜 styled-components를 사용해야할까? (2) styled-components 환경설정하기 (3) styled-components의 기본문법 (4) styled-components에서 props 사용하기 프론트엔드 개발자의 기본소양 html , css, js! 이제 styled-components 안 쓰면 개구린 프론트 개발자라고 합니다 요즘 프론트 트렌드는 한 컴포넌트에 html js css 코드를 다 때려박아서 컴포넌트 별로 관리하는 게 대세라는데요.... 이는 재활용성도 높고 "아 이게 무슨 코드구나!" 읽기 좋고 유지보수에 유리한 코드를 작성할 수 있다고 하는데... 이를 실현시켜주는 게 styled-components! 한 번 배워봅시다 (1) 왜 styled-componen..

로딩화면 없이 웹사이트가 멈춘상태가 유지된다면 유저는 "어? 오류가 났나?" "이 사이트 먹통이네" 라는 생각이 들게 합니다. 로딩화면의 구현은 정말 간단해 보이지만, css 애니메이션도 사용해야하고, setLoding을 구현하는 코드도 필요한 등, 요구사항이 꽤 많은데요~!! 하지만 react에선 이런 로딩화면을 구현해주는 라이브러리를 제공되고 있습니다 그건 바로~! react-loader-spinner! react-loader-spinner를 통해 로딩화면을 구현하는 방법에 대해 알아보겠습니다 (1) 라이브러리 설치 $ npm install react-loader-spinner --save 먼저 npm install을 통해 스피너 라이브러리를 설치해줍니다. (2) 라이브러리 import / 코드 구현..

다들 자바스크립트 예제를 공부하다 [info, ...userArray] 이런 식으로 배열 앞에 ... 이 붙어있는 걸 볼 수 있을거다! 처음 보면 굉장히 당황스러운 문법...~~ 이게 대체 뭘까요?? const food = ['마라탕', '치킨', '불닭볶음면']; const juice = '공차'; (1) 배열 food와 string 변수 juice 선언하였다. 그렇다면 배열과 변수를 합쳐 ['공차', '마라탕', '치킨', '불닭볶음면'] 이 나오기 위해선 어떻게 해야할까요?? 흠,,,,, [juice, food]를 둘 다 써서 합쳐주면 되지 않을까요?! 땡! 변수와 배열을 합친 결과 => ['공차', Array(3)] 로 그저 공차 + 배열로 이루어진 값이 콘솔에 찍혔습니다... 이럴 때 필요한 게..

[노마드 코더 트위터 클론 코딩 강의 내용에 좀 더 살을 붙인 내용입니다. 강의 내용은 4.2 강 Uplodading 부터! ] UUID: Universaly Unique IDentifier-범용 고유 식별자 쉽게 말하면 아이디를 모아놓은 라이브러리라고 생각하면 된다 !! "ID를 부여해주고 싶으면 랜덤함수를 쓰면 되지 않을까?" 이렇게 생각할 수 있지만, UUID 라이브러리를 사용하면 더욱 CHILLL~하게 파일 각각의 ID를 생성할 수 있다~ ID를 생성해주는 기능이 있는데! 로또 생성 프로그램마냥 랜덤함수를 쓸 필요가 없다는 말이다! 따라서, UUID를 통해 데이터에 ID를 부여할 수 있게 된다! 우리는 firebase strorage DB를 연동하여 데이터를 INSERT INTO 한 후, stro..

자... 디지털회로 수업을 들어본 학생이라면 (혹은 그냥 코딩하다) &&, || 를 접해 본 적이 있을 것이다 ???: &&은 둘 다 참일 때, ||은 둘 중 하나가 참일 때 true을 반환하잖아요! &&: 논리곱 연산자 -true && true =>true 반환, true && false => false 반환 둘 다 true일 떄 true를 return! ||: 논리합 연산자 - true || true => true 반환, true || false => true 반환, false || false => false 둘 중 하나라도! true일 때 true를 retrun! 자 그럼 이건 무슨 뜻일까? {isWriter && ( //isWriter={글 작성자 아이디 === 현재 로그인된 아이디} 삭제하기 수..