HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 엘리먼트와 다르게 동작한다. 순수한 HTML 에서 이 폼은 name 을 입력받는다.이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다.리액트

엘리먼트 모음을 만들고 중괄호 {}를 이용해서 JSX에 포함시킬 수 있다.일반적으로 컴포넌트 안에서 리스트를 랜더링한다.이 코드를 실행하면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시된다."key" 는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열

리액트 공식문서 학습의 중요성을 깨닫고 정독 하기로 맘먹었다. 다른 리액트 강의 보기 이전에 필수로 읽어야하는 정석이랄까. 공식 문서 보면서 몰랐던 점이나 기억해야 할만한 것들을 적어보려고한다.프로덕션을 위해 웹사이트를 배포하기 전에 자바스크립트 파일을 압축하여 웹사이

이미지 파일을 서버에 올리고 그 올린 파일을 다시 출력하는 기능을 구현하고 싶었다.일단 assets 폴더에 image 태그를 집어 넣고 이미지를 출력하는 것을 태스트 해봤다.이미지 태그에 상대경로로 이미지를 연결해 주었는데이미지가 보이지 않았다.찾아보니 이미지를 src

1. polling 방식 쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다. refetching 방식 polling 방식처럼 일정 간격으로 update

form Submit 이벤트가 일어날 때 selectbox 의 선택된 값을 보내고 싶어서 'react-select' 라이브러리를 사용해보았다.1) react-select 설치2) import3) 사용하기handleSelectChange 함수에 e 객체의 타입을 명시해줘

오늘은 원티드 프론트앤드 강의 중에 유능한 개발자 분이 오셔서 모의면접을 해주셨다.나는 면접을 직접 참가 하지는 않았지만 혼자서 대답할 수 있는지 테스트해봤는데, 제대로 대답할 수 있었던게 거의 없었던 것 같다.모의 면접때 나왔던 질문들을 정리해보고 하나씩 채워나가면서

프로젝트 할때 주로 쓰이는 colors 는 무조건 변수화 해서 쓰자.디자이너가 바꿔달라고 했을때 한번에 바꿀수 있음😊빨강이라고 해서 다 같은 빨강색이 아니다. 예쁜 빨강색 쓰자. 아래 애플 비주얼 디자인 가이드에 나와있는 색상 참고https://develop

3번째 과제는 메드업 팀 과제였다. 리액트랑 타입스크립트가 아직 낯설고 어려워서 그동안 부수적인 역할을 많이 했어서, 이번에는 제일 어려울것 같은거를 맡았는데, 실수였던것 같다. 일단 팀으로 과제할 때는 내가 할 수 있는게 무엇인지 판단하는 메타인지(?)가 필요한것같

프로젝트 과제에서 비동기 통신을 하기 위해 react-query 를 직접 사용해 보았다. 1. react-query 설치 먼저 package.json 에 가서 reacu-query 가 혹시나 설치 되어있는지 확인. 없으면 터미널에서 아래의 명령어 입력해서 reac

https://codeclimate.com/내 깃 계정을 연결하면 내가 짠 코드에대해서 분석해주고, 평가해준다.https://storybook.js.org/https://www.chromatic.com/내가 만든 컴포넌트를 배포해서 디자인팀과

새로운 프로젝트를 시작하면서 지난주 강의 때, 코드리뷰를 다시 리뷰해보는 시간을 가졌다. 1. return 안에서 3항 연산자 지양하자. 가독성 때문에! 이런 코드를 작성해야 할때, return 안에서 쓰지말고 밖으로 빼버리자. 또다른 예, 위와같은 경우 이렇

오늘은 여태 과제로 만들었던 검색기능을 netlify를 이용해서 배포를 해보았다. netlify를 사용하려면 먼저 가입을 해야한다. 원하는 것으로 가입을 한다. 나는 깃허브의 팀 레포지토리를 올릴것이기 때문에 github 로 가입을 했다. 배포를 맡아서 하기로 했

타입스크립트 지식이 부족하니 매번 프로젝트 할 때마다 시간도 오래걸리고 헤매는 것 같다. 최소한 한번은 쭉 훓고 가야 하는 것같아서, 오늘은 자주 쓰이는 interface 에 대해서 정리해보았다.에러발생!!object 에는 특정 속성값에 대한 정보가 없기 때문이다.에러

새로운 프로젝트에서 리덕스와 리덕스 툴킷을 사용하기 위해서 리덕스에 대해 학습해보았다. 1. Reducx 란? 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 이다. 2. Redux Toolkit 리덕스 툴킷은 Redux 로직을 작성하기 위해 리덕스에서 공식적으

프리온보딩 수업중에 사용했던 React query 에 대해서 조사하고 쓰였던 코드를 보면서 하나하나 분석해보았습니다.

프리온보딩 코스 2번째 과제 중 검색어 입력하고 키보드(위, 아래) 버튼 눌렀을때 이동하도록 하는 기능을 맡았다.검색어를 입력한 뒤 위 아래로 움직이면 이동은 잘 된다.active 되는 item index를 state로 만들었고 arrow up, arrow down 이

노드 모듈에서 가져오는 라이브러리들은 가장 위쪽에두고 import 해오자. 컴포넌트들은 제일 아래에 쓴다.require 쓰지말자. import 쓰기!깃은 소문자, 대문자 변경을 무시한다.create-react-app 으로 만들면 Webpack 에서 auto-pre-fi

컴포넌트를 만들 때 재사용이 가능할 만한 부분이 있다. 그런 것은 여러 조각으로 나눠놓으면 재사용이 가능할 뿐더러 가독성도 좋아진다. 컴포넌트의 개념을 살펴보자.컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다.위의 함수는 데이터를 가진 하나의 "pr

getMoviesApi 에 빨간줄이 생긴다.메세지를 보니 타입에러 인것 같은데..내가 뭘 잘못하고 있는건지 감이 안잡힌다..여기서 문제가 있는건지..데이터는 잘 받아와 졌는데, 화면에 띄우는게 참 어렵다.. 어떻게 타입을 지정해야하는지도 잘 모르겠다. 사실 typesc