일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 코딩
- 에러
- 자바스크립트
- rn
- 개발자
- 변수
- wil
- API
- 프론트엔드
- 타스
- 타입
- PROJECT
- NEXT
- 함수
- 내일배움캠프
- type
- JavaScript
- 온라인
- JS
- 내일배움
- 프로젝트
- 리액트
- native
- Firebase
- Redux
- 알고리즘
- trainning
- react
- 부트캠프
- K-Digital
- Today
- Total
목록react (61)
Frontend 개발자 - hyo.loui

리액트 이 녀석.... 간만에 휴먼에러를 만났다 아주 간단한 코드였고, 콘솔에 에러도 안나고, 문제 없을리가 없는데 의도한 children 이 나오지를 않았다... 도대체 왜!!! 도대체 뭐가 문제일까.. 한참을 고민하던 중 수많은 에러를 겪어 많은 내공이 쌓인 '에러개발자' 분께 질문했다 역시나 겪은 에러였고ㅋㅋㅋㅋㅋㅋㅋ 자동완성으로 children 의 앞글자가 대문자 Children 으로 들어온 문제였다.... 에라잇ㅠㅠ 🎈해결 방법 : { Children } => { children } 대문자 없이 소문자로! dram26 (박다영) - velog dram26 (박다영) - velog WIL_나는 할 수 있다는 용기 투두리스트 껌이라고 생각했는데, 그거하나 제대로 못해내는 자괴감 하지만 계속해서 반복..

useEffect useState와 같이 리액트에서 제공하는 hook 이기 때문에 import를 해야 사용이 가능하다 핵심기능 : component가 렌더링 될 때 바로 실행이 된다 동작 방식 : 화면에 컴포넌트가 보여졌거나 사라졌을때 무언가를 실행한다. 정확히는 component가 화면에 mount, unmount 되었을 때 실행이 된다. (react lifecycle) 의존성 배열이 없는 상태라면 value 가 바뀔 때 마다 (input에 타이핑하여 onChange가 일어날 때) 실행되지 않는다 하지만 여기서 배열에 value 를 넣어주면 전과 같이 value가 바뀔 때 마다 콘솔에 'hello useEffect' 가 출력된다

useState 동작 방식 1. 일반 업데이트 방식 onClick 을 실행했을 때 setNumber가 각각 4번 실행하지 않고, batch 처리되어 1회만 실행함 리액트에서는 명령을 하나로 모아 최종적으로 1회만 실행 => 버튼 누를 때마다 0, 1, 2, 3, 4... 2. 함수형 업데이트 방식 명령을 모아 순차적으로 각각 한번씩 실행 시킴, setNumber가 4번 함수형으로 실행되어 최종적으로 4회를 실행 시킴 => 버튼 누를 때마다 0, 4, 8, 12, 16... == useState 로 원시데이터가 아닌 데이터를 변경해야 할 때는 불변성을 유지해야 함

❤️🔥WIL: Weekly I Learned 이번 주 한 일 티스토리 포스팅 = 매일 TIL 일지 (50개 달성) 리액트 미니 프로젝트 - Todo-list-app 완성 리액트 기초강의 수강 - 완료 리액트 심화강의 수강 - 진행중 Project review 프로젝트는 내 실력이 얼마나 늘었는지, 이해 못한 부분이 어느부분인지를 판단하는 좋은 척도가 될 수 있다. 물론 쉽지 않다, 그런데 완성 후의 느낌은 지금까지 느낀 전율과는 전혀 다른 도파민이 나온다. 뭐랄까 내가 만들어낸 창작물이다 라는 생소한 느낌? 이번 미니 프로젝트는 시간적으로 너무 촉박했다 예비군 동원 훈련으로 인해 캠프 결석이 발생했고, 부랴부랴 진도, 과제를 따라가느라 완성도 높은 작업이 이루어지지 못했다😢 프로젝트 리뷰에서 다른 수강..

❤️🔥TIL : Today I Learned Component : 컴포넌트 - 컴포넌트는 UI를 재사용이 가능하도록 개별적인 여러 조각으로 나눈다. - 컴포넌트는 개념적으로 'JavaScripts - 함수'와 유사하다. 'props'라는 입력을 받아, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. - Element는 일번 객체(plan object)로 React 앱의 가장 작은 단위이며, 컴포넌트의 '구성 요소' 다 - 컴포넌트를 선언하는 방식에는 우리가 주로 사용하는 함수형 컴포넌트, 클래스형 컴포넌트가 있다. 함수형 컴포넌트 : function component function isComponentName(props) { let javascriptArea; return JS..

❤️🔥TIL : Today I Learned 구조 분해 할당 - 자바스크립트 표현식 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. (출처: MDN) 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b..

❤️🔥TIL : Today I Learned 배열 메서드 forEach() map() filter() reduce() forEach() 오직 Array 배열에서만 사용 가능한 메서드 (ES6부터는 Map, Set 등에서도 지원) forEach 구문의 인자로 callback 함수를 등록할 수 있으며, 배열의 각 요소들이 반복될 때 callback 함수가 호출 callback 함수에서 배열 요소의 인덱스와 값에 접근가능 (아래 코드에서는 item 에 해당) array의 길이(length)가 5라면 1, 2, 3, 4, 5 까지 순서대로, 하나씩 접근하여 반환 const items = ['사과', '바나나', '복숭아']; items.forEach(function(item) { console.log(item..

❤️🔥WIL: Weekly I Learned 티스토리 포스팅 = 매일 TIL 일지 fanpick 프로젝트 = 발표 및 KTP 회고 모던 자바스크립트 = 기초, 브라우저 정독 JS 심화 = 강의 3회 정주행 Weekly review 티스토리 포스팅 내용에 들어가는 내용에 핵심적인 부분만 담고 나머지 공부한 내용은 따로 포스팅 해야겠다 다른 팀원들의 TIL 을 보고 난 후 현재까지 작성했던 TIL 은 내용모두를 상세하게 적어 효율적인 공부를 하지 않는 것 같다고 느꼈다 TIL 은 오늘 공부한 내용의 핵심만을 요약하여 작성하고 해당 하는 카테고리의 키워드 중심으로 배운 내용을 코드에 작업하는 방법, 작업 내용을 중심으로 작성 하도록 시도 해야겠다! WIL 또한 LEARN 이기에 배운 내용적인 부분을 다시한번..