TypeScript와 React로 개발하면서 setState를 props로 전달하는 도중 잘못된 타입을 정의해서 발생한 에러이다.나는 setState를 자식컴포넌트로 props로 전달하면서 다음과 같은 2가지 실수를 저질렀다.setState의 타입을 function t

JavaScript에서 점 세개 라는 재밌는 문법이 존재한다. 일상 생활에서 ""는 축약 또는 함축의 의미로 쓰인다. 예를들면 음... , etc... 등등....🤔 재미있는 사실은, 이 의 의미가 JavaScript라는 언어에서도 거의 비슷하게 쓰인다는 것이다.

Narrowing & Assertion 포스트에서 다뤘던 주제인데, Narrowing과 Assertion을 하기 전에 우선 타입검사가 우선시 된다.타입을 알아야 타입에 따른 동작을 구분하던지 할 테니까...TypeScript에서 타입을 검사하기 위한 방법으로 대표적으로

요즘 난 React로만 개발하다보니 HTML을 직접적으로 제어할 기회가 많이 없었는데,TypeScript를 공부하다보니 문득 getElementsBy나 querySelector로 가져온 데이터들도 타입검사가 필요할 것 같다는 생각이 들었다.JavaScript에서 DOM

Narrowing & Assertion (타입 하나로 지정해주기) 타입을 정확하게 지정하면 코드가 안전해진다. 타입스크립트(TypeScript)로 개발을 하다보면 간혹 *union type을 사용하면서 하나의 변수 혹은 함수에 타입이 한 가지로 확정되지 않는 경우가

타입스크립트에서 type과 intertace는 값의 타입에 대한 구조를 정의하기 위해 사용하지만 약간의 차이가 있다. 프로젝트의 성격을 고려해서 협의 후 둘 중 원하는 자료형을 사용하면 된다.두 가지 방법 다 사용목적이 같으므로 기본문법은 비슷하다.그러나 type은 변

Nodejs 버전충돌 (기존프로젝트에서 사용하던 버전 vs 새로 설치한 버전)무분별한 버전 업그레이드로 인한 에러타입스크립트를 공부하던 중 Nodejs버전을 최신버전으로 유지하고 싶어 개발환경에 별다른 조치없이 Nodejs 공식 홈페이지에서 LTS버전을 다운로드 했다가

타입스크립트(TypeScript)란 \*Dynamic typing을 지원하는 자바스크립트(JavaScript)를 사용하는 개발환경에서 type과 관련된 버그들을 예방하기 위한 언어이다.number를 입력해야 하는 부분에서 string을 입력했을 때와 같은 단순한 실수도

React로 개발하다가 버튼 클릭 시 동작하는 기능을 구현하기 위해 onClick함수에 코딩을 했는데,💻버튼 클릭하기도 전, 렌더링 시 함수가 2-3번 자동실행이 되고, 💻오히려 버튼 클릭 시 undefined또는 동작을 안 하는 경우가 있다.알고보면 간단한 문제인

Axios와 Fetch는 문법도 비슷하고 하는 역할도 동일한데, 토이프로젝트에서 API를 연동하기에 앞서 둘의 차이를 명확히 구분하고 싶어 정리한다.클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하기 위한 문법임사용법과 기능은 비슷하지만 각각의

Redux(리덕스) 사용 중 발생하는 TypeError❓발생하는 이유1\. Redux의 Actions import 시 {중괄호} 빼먹음2\. Redux 저장소(ex. store.js)에 reducer 정의 시 reducers를 "reducer"로 오타👉🏻import

React로 작업 시 프로젝트 규모가 점점 커지고 import할 파일이 많아지면 상대경로 지정이 어려워짐결론 : import component from "../../../component/component... 이렇게 쓰기 싫어서임.src폴더 말고 그냥 기본 폴더에 만

React에서 <img />태그 사용 시 alt 속성을 추가하지 않으면 발생하는 에러 (eslint 에러)간단하다.<img />태그에 alt 속성을 추가하자이미지의 내용을 간결하게 표현한 문자열웹 표준 상 alt를 사용해주는 것이 규칙이지만 생략해도 무관함사

type이 file인 input태그 <input type="file" /> 또는 API 요청과 같은 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사

로그인 성공한 유저가 자신의 글을 삭제(Delete)하는 기능삭제 시 firebase의 데이터도 함께 삭제되어야 함단, 자신이 작성한 글이 아니라면 Delete 버튼 노출되면 안됨 ❗: 로그인 성공 시 자신과 타유저의 글을 열람(Read)할 수 있는 페이지: 내 포스팅

로그인 성공한 유저가 자신의 글을 수정(Update)하는 기능내 포스팅 : CRUD(2) : Create/Read/Update/Delete READ ! 에서 분리한 <Noweet />컴포넌트에서 해당 글 유저라면 Update버튼이 노출되게 구현Update 버튼을

내 포스팅 : 로그인 파일/컴포넌트 설계 및 구현 에서 로그인 성공한 유저가 글을 읽는 기능내 포스팅 : CRUD(1) : Create/Read/Update/Delete CREATE ! 에서 작성한 글이 firebase에 저장되었는데, 그 글을 불러와 메인페이지에 출력

내 포스팅 : 로그인 파일/컴포넌트 설계 및 구현 에서 로그인 성공한 유저가 글을 생성하는 기능Noweet(노윗)이라는 submit 버튼 클릭 시 글 작성이 완료(Create)됨작성한 Noweet은 firebase에 저장되어, firebase에서 확인 가능함: 로그인

: 메인페이지 (로그인 유무 및 초기 계정인지 확인) : state - isLoggedIn, init, useEffect() : 로그인 유무에 따른 페이지 라우팅 : component - <AppRouter />, <Routes> : 로그인이 확인

Twitter(트위터)라는 SNS의 UI 구현백엔드 없이 firebase를 이용하여 실시간 처리로그인 / 회원가입 / 회원탈퇴 (email, SNS계정, Github 인증)게시글 작성 / 수정 / 삭제 등 실시간 처리HTML5CSS3JavaScriptReactfireb