SuperCoding

TO-DO LIST - 49강 사이드 이펙트 처리 - 1 - useEffect ~ 54강 사이드 이펙트 처리 - 6 - forwardRefs ​ 배운 내용 요약 정리 사이드 이펙트 리액트의 역할 UI 렌더링 - 사용자 Input에 반응 - 리렌더링 기본적인 리액트의 사이클을 벗어나는 동작이 발생한다면? 네이버 검색창 자동완성 ​ 검색 창 자동완성 기능 ㄱ 입력 - onChange 이벤트 리스너 & 핸들러 - 리렌더링 ​ 사이드 이펙트 키워드 값이 바뀔 때 서버에서 키워드로 자동완성 된 데이터를 받아왔을 때 ​ useEffect Every time your component renders, React will update the screen and then run the code inside useEffe..

TO-DO LIST - 45강 Big Picture ~ 48강 리액트 심화 - 3 - ref ​ 배운 내용 요약 정리 JSX의 한계 하나의 JSX 안에 두 개 이상의 요소가 있으면 에러가 발생한다. 지난주에는 div를 바깥에 래핑해서 해결했음! ​ div로 감쌌을 때 문제점 리스트 렌더링을 해 주어야 하는 경우 key 값을 추가해 주어야 한다. div가 계속해서 중첩될 수 있다. 너무 div 남발! ​ React.Fragment jsx 문법에서 여러 개의 요소를 가진 component를 감싸줌 빈 태그로도 사용 가능 ​ , often used via ... syntax, lets you group elements without a wrapper node. ​ - createPortal createPort..

이번 주 목표 달성 여부 및 다음 주 목표 설정 강의도 겨우겨우 듣는중.. 하 이번주 강의는 다 듣자 ​ 부족한 점 시간이 없다는 핑계로 프로젝트나 팀장님 업무에 소홀하다. 학기 시작하면 더 정신 없을텐데 1, 2주차에 얼른 해봐야겠다. ​ 스스로 시도해본 것들 개념 복습 정도 ​ 해결 내용 ​ 헷갈리거나 실수한 점 ​ 회고 정신 좀 차리자..

TO-DO LIST - 42강 이벤트 버블링과 캡처링 ~ 44강 데이터 정렬 수강하기 ​ 배운 내용 요약 정리 state 사용자가 화면에서 변화를 느끼는 것들 ​ Event handler 사용자가 어떤 행동을 취하는 것들 ​ 드롭다운 클릭 - Event handler 옵션들이 나타남 - state 하나의 옵션을 클릭함 - Event handler 옵션들이 사라짐 - state 클릭한 옵션이 박스에 표시됨 - state ​ 비슷한 것 묶기 state - isOpen 옵션이 열림 : true 옵션이 사라짐 : false ​ state - selectedOption 옵션이 선택됨: Object 옵션이 선택되지 않음: null ​ Event handler - handleSelect 옵션을 클릭함 Event ha..

TO-DO LIST - 38강 스타일링 - 4 - tailwindcss ~ 41강 Wrap up - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 - tailwindcss (CSS 프레임워크) Utility first CSS Framework HTML과 CSS 파일을 별도로 관리할 필요가 없다. 클래스 명을 고민할 필요가 없다. 디자인이 일관되어 있다. 자유롭게 커스텀이 가능하다. ​ - 디버깅 에러 메시지 확인하기 터미널, 브라우저 콘솔, 리액트 자체의 에러 메시지 ​ - 컴파일 에러 컴파일을 할 때 발생하는 에러 전적으로 개발자 실수 ! ! 빠르게 고쳐랑 Syntax Error Type Error Reference Error ​ - 런타임 에러 컴파일 과정을 마친 후에 사용자에 의해 실행시 에러 ..

TO-DO LIST - 34강 리스트 렌더링 - 3 - 리스트 필터링 ~ 37강 스타일링 - 3 - CSS Modules - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 리액트 컴포넌트(또는 HTML tag)를 재사용해서 map 등의 함수로 여러 개를 만들 때 각각을 구분해 주는 unique key 값이 필요하다. ​ 리스트에 필터 걸어주기 리스트에 상품들을 특정 조건에 따라 필터링해서 보여주기 필터링을 할 때마다 업데이트가 되어야 한다. (예) Filter by year ​ getFullYear() return value: An integer representing the year for the given date according to local time. returns NaN if the da..

TO-DO LIST - 29강 리액트 상태 - 5 - Form 제출 ~ 33강 리스트 렌더링 - 2 - key - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 event.preventDefault() 해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우 ​ a 태그 클릭 시 href 링크로 이동 form의 submit을 누르면 새로 실행이 됨 ​ Two-way binding 만약 form을 제출하고 값을 모두 초기화 해주고 싶다면? Input에 상태를 value 속성으로 넣어준 후 제출을 한 후에 상태를 초기화 해주면 Value에 초기화된 상태가 반영되어 UI에 업데이트 ​ const buttonSubmitHandler = (event) => { event.preventDef..

이번 주 목표 달성 여부 및 다음 주 목표 설정 강의는 다 들었지만 추가적인 공부는 거의 못함.. 다음주 강의도 다 듣자 현아야.... ​ 부족한 점 부족한거 투성이입니다.. 뭐 하나를 꼽을 수가 읎네 ​ 스스로 시도해본 것들 그래도 추가적으로 이해 안 되는 내용들 찾아보고 개념 복습도 조금 했다 ​ 해결 내용 ​ 헷갈리거나 실수한 점 ​ 회고 오잉 이걸 왜 안 올렸었지.. 주말에 그래도 복습도 잠깐 했는데.. 사실 플젝도 참여하고 더 많이 알아봐야 내 공부가 되는건데, 강의도 따라가기가 벅차서...하 난 정말 왜이럴까요 ,,~ 나 이거 환급 받아야 되는데 ...ㅜㅜ 엄마 미안 그래도 열심히 공부할게요..