React30 2021.07.24 React styling 2021.07.24 React styling_정리노트 ㅎㅎㅎㅎ 오늘은 9장 정리 웃는 이유는 내가 유일..하게 재밌었던 부분이 스타일 컴포넌트였기 때문..^^ ㅎ 그냥 css 만 사용해서 그런지 몰라도 오늘은 모르는거 위주로 정리! 리액트 스타일링 방식 CSS Sass CSS Module styled-component 생각보다 많이..^^ 다양하네...ㅎ.. https://korinkorin.tistory.com/48?category=974678 2021.02.04 React Style 적용,Styled Components 정리 2021.02.04_React Style 적용, Styled Components_정리노트 드디어 프로젝트가 시작됨 ㅊㅊㅊㅊ 근데 아직 쓰면서도 많이 헷갈리는 것 같다. 오늘은 그.. 2021. 7. 24. 2021.07.23 React Hooks 2021.07.23 React Hooks_정리노트 오느른~~~~~ 리액트를 다루는 기술 8장이다 8장 !! 나름 꾸준히 보는즁 ㅎㅅㅎ 드디어 나타난 함수형 컴포넌트에서 생긴 Hooks 들을 정리할 예정 제일 궁금했던 곳인만큼 걱정 반 + 기대반으로 정리 시작! Hooks 리액트 16.8v 부터 새로 도입된 기능. 함수형 컴포넌트에서도 상태 관리를 할 수 있으며, 렌더링 직후 작업을 설정하는 등, 기존의 클래스형 컴포넌트에서만 가능했던 기능들을 이제는 함수형에서도 할 수 있게 되었음! 책에서도 새로운 리액트 프로젝트를 팠으니 나도 똑같이 새로 생성하고 하기 $ yarn create-react-app hooks-tutorial 6개의 Hook 과 함께 커스텀 Hook 사용하는 것까지 ㄱ ㄱ useState .. 2021. 7. 23. 2021.07.19 React Life Cycle 2021.07.19 React Life Cycle_정리노트 오늘도 역시 7장 정리! 오늘은 라이프사이클 ( 수명주기 ) 정리..! 렌더링 되는 시점을 제어하는거구.. 어렵지만 책따라서 차근차근 해볼 예정 모든 리액트 컴포넌트에는 라이프사이클이 존재. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남. 그렇기에 프로젝트를 하다보면, 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트 하기 전 후로 어떤 작업을 처리해야할 수도 있다. 또, 불필요한 업데이트를 방지해야할 때가 오는데, 이 때 라이프사이클 메소드를 통해 처리한다. 함수형은 새로 생긴 Hooks 에서 처리하기 때문에 오늘은 전반적인 흐름을 클래스형 컴포넌트를 이용해서 정리.. 2021. 7. 21. 2021.07.19 React Component 반복 2021.07.19 React Component 반복_정리노트 오느른~~~~ 자바스크립트 map 문법 위주의 컴포넌트 반복 정리노트! 오늘도 리액트를 다루는 기술 6장임 ㅎㅅㅎ map 함수 배열에서 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환! arr.map(callback, [thisArg]) 형태는 이렇게 쓰고, 함수니까 각각 파라미터의 역할을 정리하면, callback 새로운 배열의 요소를 생성하는 함수 callback 함수 파라미터 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 thisArg callback 함수 내부에서 사용할 this .. 2021. 7. 19. 2021.07.16 React ref 2021.07.16 React ref_정리노트 오늘은 5장 정리! http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com ref refrence 줄임말. html 에서 id 선택자를 이용해 특정 id 를 가진 요소에 DOM 작업을 하는 것처럼 리액트에서도 ref 작업이 가능하다. DOM 이 먼지 모른다면 이렇게 또 글 홍보 ㅎ https://korinkorin.tistory.com/38 2020.11.27 nav bar active 활성화 기능.. 2021. 7. 16. 07.13 React event handling 07.13 React event handling_정리노트 이제 본격적으로 저번 3장에서 잠시 온클릭으로 맛본거대로 여기 4장에 있는 이벤트 핸들링 정리하겠음! http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com event 사용자가 웹 브라우저에서 DOM 요소와 상호 작용 하는 것. 클릭을 했을 때는 onclick 이벤트, 마우스 커서를 올렸을 때는 onmouseover, html form 요소에서 값이 바뀔 때 onchange 이벤트 등등이.. 2021. 7. 14. 2021.07.11 React props,state 2021.07.11 React props,state_정리노트 홀홀 분명 예ㅔㅔㅔ전에 똑같은글을 봤다는 기억이 난다면 모두 지우시게 예전에 제일 열심히 정리하고 제일 기본적이면서 필수적인 컴포넌트 기능이라고 생각하는 만큼, 아예 밀어버리고 다시 적을거임 . 모르거나 헷갈리면 또 혼자 토닥토닥하면서 또 적고 또 적기. 오늘도 마찬가지로 http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com 책을 보고 공부한 것 위주로 개념정리! 컴포넌트에서 뺄 수.. 2021. 7. 12. 2021.07.06 React ? 2021.07.06 React ?_ 정리노트 그간 올해초에 썼던 리액트 글은 싹 밀었다... 그냥 프로젝트를 하기위한 개념 이고 사실상 거의 실패했다고 봐도 무방.. ( 07.07 수정사항 : ㅎ......근데 내가 이미 정리해놓은 개념들이 좀 있어서 몇개는 부활시킬 예정..^^ 벌써 한 3개부활시킨듯 ) 이번에는 책 사서 완독을 목표로 방학에 스터디하게 되었음. 그래서 첫 시작부터 차근차근 다시 하기로 결정! http://www.yes24.com/Product/Goods/62597469 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 w.. 2021. 7. 6. 2021.05.07 drf & react 연동하기 2021.05.07 drf & react 연동하기_정리노트 나름 빠른..시간안에 온게 맞겠지..? ㅎ.. 진짜 근데 핑계를 대자면..^^ 난리 부르스를 통해서... 해냈다.. 정말 ...ㅠ.. 그 전에 PostMan 이라는 걸로 내 API 테스트 하기. PostMan 이란 ? 개발한 API 를 테스트 하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼! 쨋든 여기서 테스트 하는 과정에서 어어..^^ 거부당했다...ㅎ 그래서 permission 이 거부 되어있는 부분이 어딨냐면, views.py 역시 직관적이야.. 인증된 사용자만 보여줘라! 라고 되어 있기 때문인 것 같군 음 여깄군..! 기본적으로 엄격하게 인증된 사용자만 허용되게 해놓았으니 postman 에서 거부가 뜬 것!! 그러니 .. 2021. 5. 7. 이전 1 2 3 4 다음
