전체태그 보기

#react (276개의 포스트)

[생활코딩 React] ⑧ 수업을 마치며
chez_bono
🔗 생활코딩 React immutable - 불변성 - immutable-js - 배열과 객체의 대체재 - 모든 연산이 원본이 복제된 결과 리턴 router - 페이지 전환을 할 때마다 네트워크 로딩을 하지 않는 장점이 있지만, url로 페이지를 찾아올 수 없다는 단점 - react router - url에 따라 컴포넌트가 실행될 수 ...
[생활코딩 React] ⑦ Update & Delete 기능 구현
chez_bono
🔗 생활코딩 React 1. update 구현 - CreateContent.js를 복사해서 UpdateContent.js 생성 - Content 생성하는 부분을 getContent() 함수로 분리 - 제목, 내용 가져오는 부분을 getReadContent() 함수로 분리...
minkb01
개요 이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :) 이번 글에서는 구조가 되게 많이 바뀌었어요. 기존에 matrix라는 배열을 통해 빙고판을 관리했는데 matrix 배열이 state값도 아니다 보니, 값을 건드려도 리렌더링이 되지 않더군요. 그래서 상태관리를... 하기로... 했습니...
blog - useQuery & useMutation
dvmflstm
Backend에서 구성한 query와 mutation을 react에서 사용하는 방식은 크게 두 가지이다. 1. Query, Mutation 태그 이용 2. useQuery, useMutation Hook 이용 2번은 apollo/react-hook에서 제공하는 custom hook인데, 나는 이 프로젝트에서 hook을 적극적으로 활용할 ...
geonhwi

[개발일지] 191119

2일 전0개의 댓글
CollapsibleTab
dev_glennn
react.png 🎥 생활코딩 YouTube 1. Update 구현 " Nav Update 클릭 👉 contents 영역 : 해당 form 으로 변경 👉 내용 변경 후 button 클릭 시 변경 " - CreateContent.js를 복사하여 UpdateContent.js 생성 1) form " TOC.js내의 카테...
dev_glennn
react.png 🎥 생활코딩 YouTube 1. Create 소개 👀 React를 사용해서 어떠한 방식으로 Create 할 것인가? 🖐 정적으로 출력되어있던 메뉴들을 동적으로 추가해보자! 1) mode 변경 기능 " 아래 사진과 같은 controll Button을 생성하여 클릭시 mode 를 변경해주자 " ![we...
yeonseo07
부제 : 모달을 만들다 생긴 일 에어비앤비 클론코딩을 하면서 인원수를 선택하는 모달, 숙소타입을 선택하는 모달 등 유사한 모달창을 만들어야 했다. 코드의 재활용을 고려하는 므찐 개발자가 되고 싶었다. 그래서 하나의 모달 컴포넌트 프레임 안에 다른 내용을 담을 수 있어야 했다. 첫번째로 찾은 방법은 composition이다. 컴포넌트안에 컴포넌트를 담...
dev_glennn
react.png 🎥 생활코딩 YouTube 1. 이벤트 state,props 그리고 rendor 함수 - 🎁 이벤트 ? : 애플리케이션을 역동적으로 만들어주는 기술 👉 props, state, event 삼자가 서로 상호작용하면서 애플리케이션의 역동성을 만들기 때문에 같이 생각할 것!...
dev_glennn
react.png 🎥 생활코딩 YouTube 1. State 소개 📒 Props와 State 📗 Props 📙 State :-::-: props are read-only state changes can be asynchronous props can not be modified state can be modi...
dev_glennn
react.png 🎥 생활코딩 YouTube 1. 리액트가 없다면 🙄 리액트를 사용하는 이유 : 태그를 이름으로 재사용 할 수 있어 대량 생산이 가능하고 가독성이 높다. 2. 컴포넌트 만들기 1) 컴포넌트 생성 - JSX -유사 JavaScript 임 -React는 JSX를 JavaScript Code로 변환...
dev_glennn
react.png 🎥 생활코딩 YouTube 1. 공부전략 📕 Coding : 개발 환경 설정 및 코드 작성 📗 Run : 작성된 코드를 실행하여 결과 확인 📘 Deploy : 소비자에게 전달 2. 개발환경의 종류 1. 온라인 플레이 그라운드 - 웹에서 바로 코딩하여 결과를 확인할 수 있음 - 예) C...
[생활코딩 React] ⑥ Create 기능 구현
chez_bono
🔗 생활코딩 React 1. 베이스 캠프 - props - read-only - 컴포넌트 안에서 변경 불가 - 이벤트를 통해 변경 가능 - state - 비동기식 - setState()로 변경 가능 2. create 구현 1) 소개 - CRUD(Create Read Update Delete) - 동적으로 요소를 추가하는 기능 구...
[생활코딩 React] ⑤ 이벤트
chez_bono
🔗 생활코딩 React 1. 이벤트, state, props 그리고 render 함수 - 이벤트, state, props가 상호작용하면서 애플리케이션에 역동성 부여 - props나 state가 수정되면 해당되는 컴포넌트의 render 함수가 재호출됨 👉 화면이 다시 그려짐 🤷‍♀️ 이게,,,뭐죠,,,?...
[생활코딩 React] ④ state
chez_bono
🔗 생활코딩 React 1. State 소개 - props - 사용자가 컴포넌트를 사용하는 입장에서 중요 - 컴포넌트의 동작을 바꾸고 싶을 때 제공하는 문법적인 정보 - state - props의 값에 따라 내부 구현에 필요한 값 👉 state는 다양한 동작을 하는 컴포넌트 제작에 필수 2. State 사용 - 외부에서 ...
hyksmine

Life Cycle

5일 전0개의 댓글
1f14f230cfa0db741e517d94100322db.jpg LifeCycle 컴포넌트 life cycle에 따라 각자 Method가 호출됨 Mounting: 컴포넌트가 mount 되었을 때 , 아래의 순서대로 method가 호출 (1) constructor 컴포넌트가 mount 되기전에 실행되어야 할 부분을 실행되게끔 하는 역...
Github Action을 이용해서 React 프로젝트 S3에 배포하기
loakick
Github Action Action은 기존에 있는 서비스 Circle CI, Travis CI, Jenkins와 같은 빌드/배포 자동화 서비스입니다. 기존 서비스에 비해 매력적인 부분은, Github 내에서 소스 코드 관리부터 배포 자동화까지 한번에 처리할 수 있다는 점입니다. Github Action은 원래 베타 버전이었는데, 2019년 11월 15일...
minkb01
개요 이 글은 강좌가 아닙니다. 부족한 부분이 있더라도, 너그럽게 봐주신다면 감사하겠습니다. 피드백 언제나 환영입니다 :) 시작하기에 앞서, 저번 글에서 interface와 type의 차이에 대해 알려드리기로 했었어요. type - Type은 새로 정의된 타입이 아님 - extends, implements 불가능 interface - Interfa...
Storybook 작성하기 #3 - 스냅샷 테스팅
wlsdud2194
지난 포스트에 이어 이번 글에서는 Storybook에서 스냅샷을 이용하여 컴포넌트 테스트 자동화를 해보겠습니다. 🖼️ Snapshot Testing? snapshot 테스트 케이스는 UI component를 렌더링한 뒤, 스크린샷을 찍고, 테스트 부근에 저장된 레퍼런스 이미지와 찍은 것들을 비교합니다. 만약 이전에 찍었던 이미지와 테스트했을 때와의...
Storybook 작성하기 #2 - 활용하기
wlsdud2194
지난 글에서 간단하게 Storybook이 무엇이고 어떤 기능을 제공하는지 알아보았습니다. 이번글에서는 React.js에서 Storybook을 어떻게 적용하고 사용하는지 간단한 투두리스트를 만들면서 알아보려고 합니다. 📙 Storybook-cli 설치 및 시작 먼저 간단하게 create-react-app을 이용하여 프로젝트를 생성하겠습니다. 이제 ...