REACT

💡노마드코딩 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.취업시장만 봐도 react는 거의 기본 스텍이 되어야 할 정도로 많은 기업들이 react를 사용하고 있다. 도대체 왜일까? 어떤 장점이 있기에 meta, nexflix, instagram, tweeter, air

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.React의 statestate는 데이터가 저장되는 곳을 말한다. 이번 포스팅에서는 react에서 값이 바뀌는 데이터를 어떻게 담아줄 수 있는지 복습한다. 이전 포스트에서 구현하고자 했던 기능이다.jsx문법으로

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.React App 내에서 data를 보관하고 자동으로 render하기지금까지는 data를 update할 때마다 반복적으로 render하면서 UIupdate를 했다.이번에는 초기data를 가진 시점에 최초rende

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.state를 관리(upDate)하는 setState 함수는 직접입력하는 것을 제외하고 두 가지가 더 있다.1.setCounter 이전 state를 이용해 current state 계산하기지금까지 사용했던 방식의

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다. unite converter(단위변환기) 만들기 이렇게 작성하는 것이 문제 없어 보이겠지만 react에서는 완전히 틀린 방식이다. 하지만 콘솔에서 에러는 보여지지 않는데 react.production.min

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.props부모 컴포넌트로부터 자식컴포넌트에 data를 전달할 수 있는 방법."save Changes"기능의 btn과 "confirm"기능을 하는 btn을 만든다고 해보자.jsx에서 style속성을 사용하기 위해서

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.React를 사용하기 위해서는 Node가 필요하다.Node가 설치되어있지 않다면 node.js에서 설치하자.Node의 설치여부를 확인하고 싶다면 터미널이나 CMD에서 아래 코드를 작성하면 된다.정상설치가 되었을

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다. state가 변하는 Button을 일단 만들었다.

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.버튼을 클릭했을 때 state가 전달되는 form을 만들었다.onSubmit함수 안에서 단순히 setValue만 실행하는 것이 아니라, List(Array)에 추가까지 하고싶다.javaScript에서는 Array

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다. Coin Tracker 암호화폐들과 그 가격을 List 형식으로 보여주는 것을 목표로 하는 프로젝트. 목표수립 페이지 or 앱에 접속 했을 때 loading 메세지를 보여준다. 코인의 data를 가져오면 lo

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다. ReactRouter Install npm install react-router-dom 강의영상은 @5.3.0였지만 본인은 @6.22.1을 사용하기로 했다. 일단 강의대로 진행하게 됄 때 맞이하게되는 몇가지

💡사용해보면서 괜찮았던 라이브러리를 계속 추가하는 포스팅입니다. 라이브러리 쓰면 괜찮을 것 같다! data바인딩이 끝나고 페이지를 스타일링을 해보기로 했다. 직접 코드로 position을 찍어가면서 애니메이션을 만드는 방법도 있지만, 시간도 오래 걸

Sass공홈의 안내대로 전역으로 인스톨 후 공통 styles.scss를 만들고 임포트 한 결과 화면 가득 붉은 에러가 출력되었다.Cannot find module 'sass'전역으로 Sass를 설치했는데 이런 에러가 출력됐다는 것이 이해되지 않았지만 몇번 구글링 한 결

💡노마드코더 수강이후 개인작업을 하며 직면한 문제의 해결과정을 기록한 포스트입니다.component IndexHeader의 Nav를 클릭하면, PageIndex에서 그에 해당하는 요소로 스크롤 이동PageIndex에서 스크롤을 해도 그에 맞는 Nav가 활성화가 되어야

💡노마드코더 수강이후 개인작업을 하며 직면한 문제의 해결과정을 기록한 포스트입니다.배포된 react프로젝트가 새로고침 되었을 때 404에러가 나오는 이유를 파악.해결책을 찾아 적용한다.로컬에서는 문제가 없던 프로젝트가 배포 이후에는 페이지 라우팅을 한 이후 새로고침을

💡노마드코더 수강이후 개인작업을 하며 직면한 문제의 해결과정을 기록한 포스트입니다.1\. 페이지 이동했을 때 스크롤의 위치가 이동 전 페이지에서의 스크롤 위치와 동일함2\. 해결책을 찾아 적용한다.SPA페이지의 특징 때문으로 보여진다.실제로는 한개의 html파일에서

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다. Vite > Vite? 쉬운 개발환경을 제공하는 프론트엔드 개발툴(tool). 👉🏻Vite는 바이트가 아니라 비트라고 읽지 install 옵션은 위와 같이 React + TypeScript 조합으로 해

Firebase > Firebase? ‘파이어베이스’는 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼을 말하며, “앱을 개발하고, 개선하고, 키워갈 수 있는” 도구 모음으로 정의할 수 있음. 👉🏻읽어보면 좋은 파이어베이스 심층탐구

파이어베이스는 방대한 기능을 갖고 있기 때문에 기본적으로 모든 기능들이 비활성화 되어있다.모든 기능들이 전부 활성화가 된다면 각 구성별로 기능과 설정이 모두 다르기 때문에 정신없을 것이기 때문이다. 따라서 필요한 기능을 하나씩 활성화 하는 방식으로 사용해야한다.각 기능

Create Account 이어가기 CreateAccount를 submit을 할 때 try, catch, finally를 사용하여 예외를 잡아내기로 했다. try에서는 user 생성 및 자격증명으로 로그인을 하고 user페이지(Dashboard)로 redirect했다.

깃헙의 오른쪽 상단 profile > setting click하여 Public profile로 이동scrollDown하여 Developer Settings > OAuth Apps 선택https://github.com/settings/developers 로 이동

SETUP Home(DashBoard)화면에 트윗을 입력할 수 있는 form 컴포넌트인 PostTweetForm.tsx을 추가했다. label htmlFor="file"을 input id="file" type="file"과 연결하고 display=none해줬다. 트윗

Storage 파일을 업로드, 다운로드 할 수 있는 Firebase의 기능중에 하나이다. 스토리지 활성화하기 Build > Storage로 이동하여 시작하기 버튼을 클릭해서 데이터베이스와 마찬가지로 테스트 모드로 생성한다. 스토리지와 데이터베이스는 동일한 모드로 사용

이런게 있다고 한다. 그냥 변수에 타입을 선언한 것 같은데 vue로 치면 return에 data를 명시해준...? 그런 것 같다.리액트 공부하는데 vue같은게 등장할 때마다 비슷하단 생각이 들어서 계속 흠칫하게 됨...이거 안쓰고 데이터 바인딩 해보려고 했는데 계속 오

트윗에서 바로 수정 삭제하는 버튼이 보여지는 것이 아니라 도트버튼을 클릭하면 Nav가 보여지고, Nav를 클릭하면 클릭한 값에 대한 화면이 보여지도록 UI를 만들어 보았다.텍스트 수정까지는 실시간으로 이뤄지도록 작성했지만 아직 이미지수정은 하지 못했다.진짜 트위터처럼