본문 바로가기

모카 스터디

피그마 점유율 비교 Figma Where teams design together Figrma helps teams create, test, and ship better designs from start to finish. invisoin은 프로토타이밍 전문 툴이다. 한마디로 Figma 는 All-In-One ! 더보기
디자인 씽킹과 프로토 타입 피그마는 그저 프로토타입을 만들기위한 툴 그 이상 그 이하도 아니다. 목표 설정 =>회원가입률 높이기, 구매율 높이기 공감하기 => 사용자에 대해서 최대한 배운다. 무엇이 문제이고 어떤 니즈가 있는지 남성신발 플랫폼예시 : 사용자들이 어떻게 신발을 검색하고 구매하는지. 어려움이 없는지. 파악 정의하기(문제점 도출) => 어떤 문제에 대해서 해결해야하는지에 대한 정의(너무 많은 해결해야할것중 제일 필요한게 무엇인지 최소화) 아이-데이션 => 해결할 수 있는 아이디어에 대해 좋은 아이디어를 뽑는다. ex) 브래인 스토밍 프로-토타입 => 모든 아이디어를 출시까지 가져갈 순 없다. 최종적으로나온 1,2개의 아이디어를 테스트 및 시뮬레이션을 하기 위해 만듬 테스트 => 프로토 타입을 사용자에게 사용해 보도록 하.. 더보기
UX/UI 디자인 전체 프로세스 (+왜 피그마 일까 ?) https://www.inflearn.com/course/%ED%94%BC%EA%B7%B8%EB%A7%88-ui%EB%94%94%EC%9E%90%EC%9D%B8/ 위 강의를 토대로 공부한 내용을 기록하는 포스팅 입니다~ UI 디자인이 능력을 갖추는 비결 1. UX,UI 디자인의 원칙 및 원리가 있다. 2. 잘된 디자인 따라해보기 3. 평준화 되고 있는 UI 디자인 공감하기 : 사용자에 대해서 파악하고 이해하기 정의하기 : 사용자가 가지고 있는 문제점 정의 및 정리 아이데이션 : 문제를 해결하기 위해 솔루션을 탐색하고 브레인스토밍 프로토타입 : 아이데이션 단계에서 나온 아이디어를 시각화 테스트 : 사용자에게 테스트 후 피드백 받기 출시 UI 디자인이 가장 많이 관여 하는 단계 : 아이데이션 과 프로토 타입.. 더보기
The Movie DB API Key The Movie DB API Key 생성하기 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 회원가입 및 로그인 나의 계정 설정에서 api key 확인 The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 npm install axios --save api 환경변수 등록 및 axios 인스턴스화 및 사용할 url 더보기
리액트 유용한 컴포넌트가 정리된 레포지토리 https://github.com/brillout/awesome-react-components 더보기
YouTube API Key 획득 및 사용법 유튜브 api 공식 홈페이지로 이동하기 https://developers.google.com/youtube/v3 YouTube Data API | Google for Developers 동영상 업로드, 재생목록 만들기 및 관리 등의 YouTube 기능을 애플리케이션에 추가합니다. developers.google.com Developer Console's 클릭 프로젝트 만들기 약 30초 소요 생성된 대시보드로 들어가기 우측 상단에 있는 버튼 눌러 권한 생성 위와 같은 순서로 진행하면 API key 를 얻을 수 있다. 절 때 외부로 노출 시키지 안도록 하자 ! API 사용법 상단의 reference를 누르면 여러 사용 가능한api를 활용할 수 있다. list로 들어가면 여러 사용 정보에 대해 적혀 있어 그것.. 더보기
리액트 Redux Toolkit 개념 정리 Redux Toolkit Redux Toolkit APIs 더보기
리액트 리덕스 개념 정리 [John Ahn] 왜 쓰는가? 1.pros 문법 귀찮을 떄 모든 컴포넌트가 props 없이 state를 stroe에서 직접 꺼낼 수 있다. 2. 상태 관리 위해서 리듀서 : state 수정 방법에 대한 요청(action)을 가지고 있다. 컴포넌트에 state 수정 요청을 하려면? dispatch를 사용(인자로 action을 줌) 리덕스란? 미들웨어 없이 리덕스 카운터 앱 만들기 combineReducers Redux Provider npm i react-redux --save useSelector & useDispatch 리덕스 미들웨어 Redux Thunk 더보기