profile
프론트엔드 개발 공부중입니다.

리액트 CRA로 초기세팅

1. CRA (Create React App) 시작 CRA 프로젝트를 만들기 위해서 먼저 원하는 폴더로 이동! > cd porjetct_folder 프로젝트 폴더를 생성한다.(영어 권장) > npx create-react-app [원하는 프로젝트 이름] 터미널에서

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

[TIL] React Navigation 적용하기

1. Stack Navigator 라이브러리 설치하기 리액트 네비게이션의 스택 네비게이터(stack navigator)는 스크린 간 전환과 navigation history를 관리할 수 있도록 해준다. 지금까지 설치한 라이브러리 들은 네비게이터를 위한 블록과 기반이라

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

[TIL] React Navigation 라이브러리 설치

리액트 웹 앱에서 react-route-dom과 비슷한 역할을 하는 리액트 네이비트의 리액트 네비게이션!리액트 네이티브 앱의 네비게이션과 히스토리를 쉽게 관리할 수 있는 라이브러리중 하나이다.네비게이션 navigation 을 쓰기위해서는 네비게이터 navigator 가

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

[TIL] React Native에서 useReducer 실습 <2>

1. useReducer로 rgb(0,0,0) 바꾸기 >버튼을 클릭하면 컬러를 진하게 또는 연하게 하도록 state를 관리하기 먼저 버튼 컴포넌트를 만든다 ColorCounter 컴포넌트를 이제 SquareScreen 컴포넌트에서 불러온다. 이제 ` 컴포넌트 안

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

[TIL] React Native에서 useReduce 실습 <1>

⬆︎useState를 사용하여 만든 간단한 컴포넌트!이 컴포넌트를 useReducer를 사용하여 state관리를 해보았다.(물론 이러한 간단한 컴포넌트는 굳이 useReducer를 사용할 필요는 없음)위 reducer 함수 내 switch 에서 사용한 전개연산자(...

2020년 6월 8일
·
0개의 댓글

[TIL] JavaScript - switch 문

switch문은 자바스크립트에서 조건문을 쓰는 방법 중 하나다. 물론 if문이 가장 자주 사용되는 조건문이지만 switch문만의 장점이 있다. switch문은 필요한 조건에 만족하는 경우 각각 다른 조건을 매칭하여 실행시킬 수 있다. 각각의 개별적인 조건들이 많아질 경

2020년 6월 6일
·
0개의 댓글

[TIL] React Hook useReducer를 맛보다(?)

2차 프로젝트를 진행하면서 useState를 많이 사용했었는데, 전체 상태 관리를 하기 위해서는 반드시 Redux를 사용해야하는 것으로 알고 있었다. Udemy에서 React native 공부를 하던 중 React Hook 중에 useReducer라는 것이 있다는 것을

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

[TIL] React Native Navigation

현재 Udemy에서 Stephen Grider의 The Complete React Native + Hooks Course 2020 Edition 강의를 듣고있다.앱 역시 웹 사이트 처럼 화면 전환이 이루어지는데, 이때 사용하는 것이 React Navigation이다.A

2020년 6월 3일
·
0개의 댓글

[Tips] Xcode ios Simulator 설치

📱 리액트 네이티브로 App개발을 하기전 Xcode ios Simulator 설치하기 앱 스토어에서 Xcode 정식 버전을 다운로드. 약 7GB의 대용량 파일이기 때문에 다운로드와 설치하는데 오래 걸린다.😕 XCode를 실행하고 약관 동의에 체크. 더 많은 툴과

2020년 6월 2일
·
0개의 댓글

[TIL] 저장된 JWT Token을 POST 하기

2차 프로젝트에서 장바구니 기능을 구현하면서 fetch 서버에 POST 요청을 하게 되었다. 먼저 로그인을 하면서 받아온 토큰을 로컬 스토리지에 저장한다.localStorage.setItem(key이름 , key 값) 으로 로컬 스토리지에 저장한다.장바구니에 담기 위해

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

[React Native] 리액트 네이티브 첫만남

📱리액트 네이티브를 위한 맨땅에 헤딩 리액트 네이티브를 시작하는 가장 쉬운 방법은 Expo CLI로 개발하는 방법이라고 한다. Expo는 리액트 네이티브를 기반으로 구축된 도구 모음이다. 최신 버전의 Node.js와 Emulator만 필요하다. 이외에도 모바일 개발

2020년 5월 27일
·
0개의 댓글

기업협업 프로젝트 <1> - 피드메디

위코드에서의 1, 2차 프로젝트가 끝나고 드디어 4주간의 기업협업 프로젝트를 진행하게 되었다 !😮 !이번에 협업으로 진행하게 된 기업은 피트메디 FITMEDI 라는 신생 스타트업이다.피트메디는 이름처럼 Fitness와 Medical이 합쳐진 운동과 의료 서비스를

2020년 5월 26일
·
0개의 댓글
post-thumbnail

[Project] 2차 프로젝트 동적라우팅 적용하기

⬆︎위 1.쉐이빙젤 > 2.면도 > 3.애프터쉐이브 에서 원하는 단계를 클릭하면 오른쪽 이미지와 아래 텍스트가 변경되도록 만들어야 한다.쉐이빙젤, 면도, 애프터쉐이브 각각 클릭했을 경우 보여주는 텍스트가 다르기 때문에 각각의 컴포넌트로 분리시켜 만들어준 후 import

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

[Project] event-handler 하나로 합치기 !

&lt;ul>태그 내에 &lt;li>로 이루어진 4개의 리스트를 만들고 각 리스트를 클릭하면 그 &lt;li>의 배경색이 변경되고 보여지는 컨텐츠도 바꾸려면 어떻게 해야할까 ?예전에는 이런식으로 똑같은 형태의 이벤트 핸들러를 각각의 요소에마다 따로 만들어 주었다. 또

2020년 5월 14일
·
0개의 댓글

[Project] 1차 프로젝트 Review <2>

3. 내가 맡은 부분 로그인 페이지 회원가입 페이지 메뉴 상세 페이지 Menu Footer 3-1 로그인 페이지 잘한 부분 SCSS 활용, dispay: flex로 레이아웃 잡기 아이디 저장 부분의 체크박스 기본디자인을 이미지 스플릿으로 대체 onClick

2020년 5월 11일
·
1개의 댓글
post-thumbnail

[Project] 1차 프로젝트 Review <1>

Wecode에서 본격적으로 코딩을 배운지 4주차, 1차 팀 프로젝트를 하게 되었다. 😨?갓 배운 React로 고군분투하며 2주동안 구현한 내용과 코드에 대해서 간략하게 정리해보기로 했다.소개 : 폴 바셋 사이트 (https&#x3A;//www.baristapaulba

2020년 5월 7일
·
0개의 댓글
post-thumbnail

[Review] filter 메서드 실습 - Monster Cards

지난 map() 메서드를 실습해봤던 몬스터 카드에서 이번엔 filter() 메서드 까지 실습해봤다.먼저 SearchBox 컴포넌트를 만들고 &lt;input />태그를 만들어 검색창을 만든다.App → SearchBox → App → CardList → Card →

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

[Review] Map 메서드 실습 - Monster Cards

전에 배운 map함수를 리액트에서 컴포넌트에서 활용이 가능하다.먼저 최상위 컴포넌트인 App.js가 있고 하위 컴포넌트들로 Card, CardList, SearchBox컴포넌드가 있다. ⬆︎초기 App.js의 상태이다. ⬇︎먼저 백엔드로부터 데이터를 받기위해 compo

2020년 5월 6일
·
0개의 댓글

[TIL] JavaScript - Map 메서드

map()은 배열의 내의 각각의 요소마다 주어진 함수를 호출해서 적용된 결과를 새 배열로 리턴한다.map의 매개변수로는 callback과 thisArg 두개가 있다.callback내에는 다시 currentValue, 'index', 'array' 3개의 매개변수를 갖는

2020년 5월 6일
·
0개의 댓글