일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 정보처리기사 실기
- 리액트
- Redux
- Node.js
- spring boot
- frontend
- 스프링부트
- spring
- security
- Front-End
- TypeScript
- 정보처리기사
- 백엔드
- JavaScript
- 프론트엔드
- React
- 자바스크립트
- 타입스크립트
- useState
- 수제비
- 웹개발자
- JWT
- 큐넷
- VUE
- It
- JS
- TS
- spring boot security
- 백엔드개발자
- Authentication
- Today
- Total
목록React (26)
솔적솔적

사이드 프로젝트 '같이행' 퍼블리싱 작업 중 프로필 수정 클릭 시 모달이 나오는 형태인데, 이런 에러가 나왔다. 해석하면 보통 한 요소를 다른 요소 안에 중첩하려고 할 때 발생하고. HTML은 이러한 중첩을 허용하지 않는다고 한다. 추측되기론, EditProfileModal.tsx 안에 있는 button요소가 중첩되어 에러를 내는 것같다. 혹시 이전에 만든 공통 컴포넌트에서 전달하는 props 타입이 이상한 것이 아닐까 먼저 확인해보기linkText의 타입은 이상이없는 것같고, 사실, button이 중첩된다하면 간단히 button인 태그를 다른 태그로 바꾸면된다.허나! 직접 DOM 이벤트를 사용하는 경우 TypeScript가 정적분석하기 어려워 핸들러의 타입을 추론하지 못해, 빨간줄이 팍!나올..

월간CS에서 1주차 react, next 배포, 배포 자동화 A부터 Z까지 수업을 참여하였습니다. 직접 실습하며 배웠던 내용, 실습 중 막혔던 부분과 해결과정들을 적어보려합니다. 👉 CI/CD란? 링크 클릭 👉 GitHub Flow 전략에 대한 이해 링크 클릭 👉 GitHub Action에 대한 이해 링크 클릭 🍖 CloudFront, S3 배포하기 👉 aws cli 링크 클릭 👉 terraform 링크 클릭 🍖 terraform이란? 클라우드 인프라스트럭처 자동화 도구 인프라를 구축, 변경, 버전관리위한도구로 코드로 인프라를 관리할 수 있게 한다. 🍖 Github Action github action용 폴더를 만들고 꼭! .github > workflows > .yaml 순으로 생성해야한다. deplo..
뷰말고도 리액트, 앵귤러도 똑같이 웹앱을 만들 수 있다. 리액트를 사용하는 개발자가 많은데 왜 뷰를 사용할까? 1. 쉽다.. 뷰.js를 쓰는 이유는 쉽다는 것. 그러면 기능이 떨어지는 거아니냐? 아니다. 다 똑같은 결과물을 낼 수 있고 그 만드는 과정이 쉽다는 것이다. React의 state변경, for변경, if 사용들을 보면 알 수 있다. 2. 개발할 때 방법이 정해져있다는 것 HTML을 내가 반복적으로 여러개 생성하고 싶다면? 리액트로는 map을 사용할지, forEach를 사용할지, 그냥 일반 for을 사용할지 반복문을 컴포넌트 render()바깥에서 사용할지 안에서 사용할지 자율적으로 판단하여 사용할 수 있다. vue.js는 그렇지 않다. html 여러개를 생성하고 싶다면 이 v-for만 사용하면..
리액트가 업데이트되고 나서 사용할 수 있는 신기능이 있다는데, 그것을 오늘 사용해보려한다. | 1. batch 기능 state변경함수들이 쭉 작성이 되어있다면 state변경이 일어날 때마다 재랜더링이 일어나는데 연달아서 여러개가있다면 재랜더링이 맨 마지막것만 재렌더링 1번만 일어나게하는 것이다. 이게 batch이라고 하는데, 예외가 있다. ajax요청, setTimeout 등의 내부코드라면 batch이 일어나지않았는데, 리액트 17버전에는 배칭이 일어나지않는다. 리액트 18버전이후에는 코드가 어디있던간에 잘 일어난다는 것. | 2. useTransition 동작이 느린 컴포넌트들을 빠르게 동작할 수 있게하는 것이다. import {useState} from "react"; function App2(){ ..