개발하는 너구리

팀프로젝트 프론트 GibHub 레퍼지토리 https://github.com/wecode-bootcamp-korea/justcode-7-2nd-Justit-front GitHub - wecode-bootcamp-korea/justcode-7-2nd-Justit-front Contribute to wecode-bootcamp-korea/justcode-7-2nd-Justit-front development by creating an account on GitHub. github.com Project Overview 지난번 프로젝트는 e-commerce를 경험해봤기에, 이번 프로젝트는 다른 분야를 모델링하고 싶었다. 모델링할 사이트를 찾던중 점핏이라는 채용사이트를 발견했고, 사이트 내 직무탐색 페이지의 카테고..

Q. 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부) 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때문 num = -121 return false => 뒤집은 모양이 121- 이기 때문 num = 10 return false => 뒤집은 모양이 01 이기 때문 A. const sameReverse = (num) => { const arr = Array.from(num.toString()); //숫자형식의 num을 toString() 메소드로 문자열로 반..

지금 진행 중인 점프잇 클론프로젝트 진행 중 내가 맡은 파트는 '직무탐색'페이지다. 채용사이트를 클론하는 프로젝트이니만큼 카테고리 필터기능이 핵심이라고 생각해서 냉큼 이 파트를 담당한다고 하고... 코딩을 하면서 생각보다 힘들다라는 생각은 들지만 하나하나 코드를 완성해가며 느끼는 성취감은 정말 대단하다 오늘도 카테고리 버튼 활성화 시 해당 카테고리에 포함된 기술스택이 활성화되고, 반대로 카테고리 버튼 비활성 시 기술스택도 비활성되는 로직을 완성하냐고 16시간 가까이 걸렸다...흑... 16시간 대장정의 마침표를 찍고자 블로그를 작성한다 리액트 버튼 클릭 시 버튼 색상 변경 (활성화) 0 ? '' : ' active'} onClick={handleTechOff} > 전체 {cateData.map((item..

팀프로젝트 프론트 GitHub 레퍼지토리 GitHub - wecode-bootcamp-korea/justcode-7-1st-goomeongmarket-front Contribute to wecode-bootcamp-korea/justcode-7-1st-goomeongmarket-front development by creating an account on GitHub. github.com Project Overview 저스트코드에서의 1차 프로젝트가 끝났다. 내가 제안했던 사이트인 마켓컬리가 감사하게도 모델링하고자 하는 프로젝트의 사이트로 지정되었다. 마켓컬리를 제안했던 이유는 e-commerce를 경험해보고 싶었기 때문이다. e-commerce는 장바구니 기능, 찜(관심상품) 기능, 회원가입, 로그인,..

fileInput -비제어 컴포넌트로 사용 에 value prop 지정X - 이벤트 객체의 target.value 값이 아니라, target.files 값을 사용 useRef() - DOM노드는 반드시 렌더링이 끝나야 생성됨 - ref객체의 current값도 화면에 컴포넌트가 렌더링됐을때만 존재 cf) 조건부 렌더링 등으로 해당 컴포넌트가 렌더링되지않으면 ref값이 없다 사용절차) 1. Ref객체 생성 import { useRef } from 'react' // ... const ref = useRef(); //Ref 객체 생성 2. ref prop 사용하기 //ref prop에 앞서 생성한 Ref객체 내려줌 3. Ref객체에서 DOM노트 참조하기 const node = ref.current; //Ref..

제어 컴포넌트 - 의 value값을 리액트에서 지정 ex) - 리액트에서 사용하는 값과, 실제 인풋 값이 일치 htmlFor - 에서 사용하는 속성 for는 JS의 반복문 키워드 for와 겹치므로, 리택트에서 htmlFor 라는 키워드로 사용 onChange, value, 이벤트함수 등록 - 이벤트에 등록하는 함수에는 이벤트객체 e를 파라미터로 받아와서 사용가능 - e.target은 이벤트가 발생한 요소를 가리킴 - e.target.value를 조회하면 현재 에 입력된 값을 알수 있음( 즉, 사용자가 인풋한 값을 알수있음) ex) const handleTitleChange = (e) => { setTitle(e.target.value); }; //이벤트 등록 함수 const [title, setTitle..

Children prop : 기본적으로 존재하는 prop 여는태그,닫는태그 형태로 작성 --> 그 안에 작성된 코드가 children prop값에 담긴다 SCSS - 변수선언 : $변수명: 속성값; 변수 사용 : $변수명 - @import "파일명"; 으로 SCSS파일 연결해 $변수명으로 변수 사용 리액트에서 를 다루는 기본 방법 state를 만들고 target.value 값을 사용해서 값 변경 이때, value prop으로 state값 내려주고, onChange prop으로 핸들러 함수 넘겨줌 + 폼 값을 객체 하나로 처리하기 - 이벤트 객체의 target.name과 target.value 값을 이용해, 값을 변경 -> 객체형 state 하나만으로도 값 처리 가능 ex) const { name, val..

리액트에서 렌더링되지 않는 값 : null, undefined, true, false, ''(빈문자열), [](빈배열) 사용예시) { hasNext && 더보기 } hasNext가 true값이면, 논리연산자&& 뒤 button태그 반환 -> JSX표현식 -> 렌더링 hasNext가 false값이면, 논리연산자&& 앞 hasNext 스테이트 반환 -> false는 렌더링되지 않는 값 -> 렌더링X setter 함수에서 콜백함수 사용 : 비동기 상황에서 state 변경 할때 이전 state값을 사용하려면 setter함수에 콜백함수를 사용 즉, 콜백함수를 매개변수처럼 활용 ex) setItems( (prevItems) => [...prevItems, ...reviews] ) - prevItems = 이전 st..