profile
기술블로그 / 일상블로그

리액트 네비게이션

1 .리액트네비게이션 리액트 네비게이션 라이브러리는 리액트 네비게이션을 쉽고 간단하게 관리할수 있도록 도와준다 지원하는 네비게이션의 종류는 세 종류이다 stack 네비게이션 tab 네비게이션 drawer 네비게이션 1-1 내비게이션 구조 리액트 내비게이

3일 전
·
0개의 댓글
post-thumbnail

Dynamic Routing & Path Parameter

보통의 웹 사이트는 전체 아이템이 보여지는 리스트 페이지와 거기서 어떤 아이템을 선택했을 때 해당 아이템의 디테일 한 정보가 보여지는 상세 페이지로 구성됩니다.각각의 카드를 클릭할 때 wanted.co.kr/wd/ 끝에 해당 아이템의 id 값이 추가되어 페이지 이동을

2022년 6월 6일
·
0개의 댓글
post-thumbnail

[React] Advanced Router

🚀 학습 목표 Path Parameter와 Query Parameter 의 차이점에 대해서 설명할 수 있다. useNavigate, useLocation, useParams 훅의 용도가 무엇인지 설명할 수 있다. URL 에서 동적인 부분을 변수로 처리할 수 있고

2022년 6월 6일
·
0개의 댓글
post-thumbnail

1차 프로젝트 회고록

프로젝트 시작 위코드에 들어온지 어느덧 벌써 한달. 이제는 선릉역 10번출구에 매일 가는것도 당연하게 받아들여지고 어색했던 동기들 이름이 이제는 얼굴만 봐도 대부분 알게 되었다 처음과 비교하면 시작했을때 보다 달라졌고 성장한게 분명하지만, 여전히 불안하고 나에 대한

2022년 6월 5일
·
1개의 댓글
post-thumbnail

컴포넌트 반복

자바스크립트의 배열객체의 내장함수인 map함수를 사용하여 반복되는 컴포넌트를 렌더링 할 수 있다.callback:새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지이다currentValue:현재처리하고있는 요소index현재 처리하고있는 요소의 Index값arr

2022년 5월 22일
·
0개의 댓글
post-thumbnail

React-몬스터과제 5단계

SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.필터링 로직 구현 (filter 메소드 활용) 여기서 비교 대상은 monster 객체의 na

2022년 5월 22일
·
0개의 댓글
post-thumbnail

React - 몬스터과제 4단계

파일: Card.jsCard.js 컴포넌트 모양 및 구조해당 이미지 처럼 나오게 컴포넌트를 구조화한다.이미지 주소 (src)https://robohash.org/숫자?set=set2&size=180x180 카드마다 다른 이미지를 보여주기 위해 위 주소의 숫자

2022년 5월 21일
·
0개의 댓글
post-thumbnail

React - 몬스터과제 2단계 / 3단계

파일: Monsters.js데이터를 저장한 state를 자식 컴포넌트인<CardList />에 넘겨주세요. (props 활용)넘겨준 후 CardList.js 에서 props 를 콘솔에 찍어 확인해주세요. (개발 단계에서 확인하는 용도이니 확인 완료 후에는 콘솔을

2022년 5월 21일
·
0개의 댓글
post-thumbnail

React 과제 - 몬스터 1단계

파일: Monsters.js아래 키워드들을 활용해 데이터를 호출 한 후, state에 저장 해주세요!useEffect()fetch() → 호출할 API 주소: https://jsonplaceholder.typicode.com/usersuseState() → u

2022년 5월 21일
·
0개의 댓글
post-thumbnail

Mission 3) Main | 댓글 기능

Mission 3) Main | 댓글 기능 사용자가 댓글 입력 후 enter 를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 댓글 기능을 구현하기 위해서는 배열 데이터 타입을 활용해야 합니다. Array.map 참고해서 시도해주세요. 위 순서대로

2022년 5월 19일
·
0개의 댓글
post-thumbnail

codekata week2 / day3

s는 여러 괄호들로 이루어진 String 인자입니다. s가 유효한 표현인지 아닌지 true/false로 반환해주세요.종류는 '(', ')', '', '', '{', '}' 으로 총 6개 있습니다. 아래의 경우 유효합니다. 한 번 괄호를 시작했으면, 같은 괄호로 끝내야

2022년 5월 18일
·
0개의 댓글
post-thumbnail

mock data

mock: 거짓된, 가짜의이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있습니다.즉, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말합니다.프론트엔드 개발을 진행하려하는데

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[React] Mock Data <상수데이터>

🚀 학습 목표Array.map() 함수를 통해 컴포넌트를 재사용 할 수 있다.Mock data를 만들어 백엔드 API 미완성 상태에서도 차질없이 개발할 수 있다.useEffect 훅에서 fetch 함수로 mock data를 가져올 수 있다.상수 데이터를 javascr

2022년 5월 18일
·
0개의 댓글
post-thumbnail

Mission 2) Login | 로그인 버튼 활성화 (State & Event)

입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.ex. ID - @ 포함 / PW - 5글자 이상삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.위 순서대로 완료 후 Add : Mission 2 -

2022년 5월 14일
·
0개의 댓글
post-thumbnail

Props & Event

props : properties(속성)단어 뜻 그대로 컴포넌트의 속성값입니다.props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체입니다.props를 이용해 어떤 자바스크립트 값이든 모두 자식 컴포넌트에 전달할 수 있습니다.(변수, state 값, ev

2022년 5월 13일
·
0개의 댓글
post-thumbnail

State & Event

state:상태단어 뜻 그대로 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값.state는 화면에 보여줄 컴퍼넌트의 UI상태.state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터가 변경가능.위에서 state는 화면에 보여줄 컴포넌트의 정보라고 했습니다.함수 컴

2022년 5월 13일
·
0개의 댓글
post-thumbnail

Hooks

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수입니다.hook은 class안에서는 동작하지 않는다.대신 class 없이도 React를 사용할수있게 해주는것.Re

2022년 5월 13일
·
0개의 댓글
post-thumbnail

codekata - 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환

String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요. str: 텍스트 return: 중복되지 않은 알파벳 길이 (숫자 반환) 예를 들어, str = "abcabcabc" return 은 3 => 'abc' 가 제일 길

2022년 5월 13일
·
0개의 댓글
post-thumbnail

state

리액트에서는 자료를 잠깐 저장할떈 state를 씁니다.1.import {useState}2.useState(보관할 자료)3.let 작명 ex) let \[a,b] = useState('남자 코트 추천')a는 변수명b는 함수 a = 1 b = 2변수로 담

2022년 5월 12일
·
0개의 댓글
post-thumbnail

JSX

기존의 복잡한 코드에서 보다 익숙한 코드를 사용 할 수 있다jsx안에서는 클래스 네임을 줄때 className을 줘야한다상단에 css파일 Import필수!!변수를 넣을때는 {중괄호}를 쓴다 = 데이터바인딩 3.style 넣을땐 style={}

2022년 5월 12일
·
0개의 댓글