FrontEnd/React.js24 [ReactJS] Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) 1시간 이내로 끝나버린 과제여서 난이도 설정이 조금 아쉬웠다. 그래도 이렇게 토이 프로젝트를 통해 배운 내용들을 복습 하니 너무 좋았다. 리액트라는 걸 활용해 이렇게 뭔가 만들어 냈다는 것이 너무나 뿌듯하고 좋았던 과제였다. 아래는 해당 과제의 핵심(?)인 검색 기능 ! import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import .. 2022. 8. 12. [React.js] 나의 this만 undefined가 아닌 이유 리액트 클래스형 컴포넌트를 공부하고 있습니다. 위코드에서 함수형 컴포넌트를 기준으로 리액트를 배우는 중입니다. 그런데 자꾸 공부하면 할수록 클래스형 컴포넌트도 배워서 좀 더 리액트에 대해 잘 알고 싶다는 생각이 들었습니다. 공식문서를 보면 대부분이 클래스형 컴포넌트, 함수형 컴포넌트 2가지를 병행해서 설명해주고 있는데, 그것이 클래스형 컴포넌트를 기준으로 배운 사람을 위함일수도 있지만, 함수형 컴포넌트만으로는 설명이 안되는 부분이 있어서 일지도 모르겠다는 생각을 했거든요.... 생활코딩에 클래스형 컴포넌트 리액트 강의를 보다가... 그래서 생활코딩 리액트 (클래스형 컴포넌트) 강의를 보고 있습니다. 그런데 강의에서 this바인딩에 대해 알려주는 부분에서 저의 this와 egoing님의 this가 다른 것.. 2022. 8. 11. [React.js] 인풋 태그 위 이미지 태그 없애기 인풋태그에 값 적으면 그 위 이미지, 글자 없애기 과제 아닌데 팀원들끼리 막 아이디어 내면서 재밌게 개발했습니다. ㅋㅋㅋ 이것저것 많이 했는데, 포스팅 하면 좋을만한 개발건, 리팩토링건이 있어서 기록으로 남깁니다. 말로 설명하는게 어려워서 그냥 코드 위주로 이야기하겠습니다. ㅎㅎ 위 코드처럼 인풋창 위에 이미지, placholder가 있습니다. 인풋창에 밸류값이 주어지면 해당 이미지와 글자를 없애보았습니다. 글자는 placeholder로 넣어주면 인풋입력할 때 자동적으로 사라집니다 여기에 좀 어울리게 색을 넣기 위해 &::placeholder { opacity: 0.5; }를 넣어줬습니다. 이미지는 useState를 활용해 Change이벤트가 발동하면 hasValue State가 true로 바뀌고, 이를.. 2022. 8. 4. [React] img태그 src public 폴더에서 가져오기 서론 넣고 싶은데 그냥 본론만 넣겠습니다 아 서론 생각났어요!!!!! React 과제 설명에서 public 폴더에 images 폴더 만들어서 이미지 다 넣으라고 하고, img태그는 src값을 '/images/이미지 파일이름'으로 지정하면 된다고 설명이 되어 있었다. 하지만 이 방법은 src폴더 내에 images 폴더가 있을 경우에는 가능한 방법이지만, public 폴더에 있다면 적용이 불가능한 방법이었다. 자료가 잘못되어 있는건지, 의도적으로 구글링과 공식 문서 등을 통해 문제해결하는 과정을 겪게 만들려는건지 나는 알 수 없지만, 어쨌든,,, 구글링과 공식문서를 통해 문제를 해결했다. 해결 방법 HTML 문서 안이라면 아래와 같이 '%PUBLIC_URL%'이 퍼블릭 폴더의 경.. 2022. 8. 1. 이전 1 2 3 다음
