본문 바로가기

분류 전체보기

 (90)
OPEN API 써보기2 데이터를 받아왔는데 이미지는 어떻게 불러올까 ? 다시 문서 확인 https://developers.themoviedb.org/3/getting-started/images API Docs developers.themoviedb.org /p 뒤 w500은 너비 길이 니까 그 뒤는 path라고 생각하면 된다 그래서 나는 const BASE_URL = "https://image.tmdb.org/t/p/"; export const getImgPath = (path, size = "w500") => `${BASE_URL}${size}${path}`; 함수를 만들어서 이런식으로 인자값을 패스에 넣어주었다.
OPEN API 써보기 내가 정말로 구현해보고 싶었던 OPEN API 이거 하면 진짜 나도 이제 개발자에 가까워 지는구나 생각했다.. 오늘 연동 해볼 API는 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 어떻게 했냐면.. 1.회원가입 2. 마이페이지 -> 설정 -> API -> API 키 요청 3. 키 발급됬으면 문서 확인 내가 봐야할건 MOVIES 중에 nowPlaying 니까 여기 문서를 봐야함 4.https://api.themoviedb.org/3/movie/now_playing?api_key={발급된키값..
Redux Tool Kit 사용법 리덕스(툴킷) 은 porps 없이 편리하게 state 공유가 가능하게 한다. 리덕스 스토어에 state 보관하는 법 초기세팅때 만들어둔 store.js 파일을 열어서 아래와 같이 코드를 짜면 state를 만들 수 있다. import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initialState : {name:'kim'} }) export default configureStore({ reducer: { user : user.reducer } }) 1. 새로운 createSilice 에 state를 만들고 2. configureStore에 리듀서를 등록한다. 저장된 state는..
Redux Tool Kit 초기 세팅 리덕스 툴킷으로 프로젝트를 끝냈으나 정리를 안하면 무조건 까먹을 것이니 정리를 해봐야겠다. (정리를 해도 까먹겠지만..) 일단 리덕스를 쓰는 이유는 1.파일 하나에 state를 몰아 넣어서 상태관리가 편함 2.프롭스 드릴링을 할필요가 없음 리덕스 툴킷은 리덕스의 개선버전이라고 보면 됨 문법이 좀더 쉬워짐(4줄 써야될거 2줄됨) 리덕스 툴킷 설치 하려면 리액트 & 리액트 돔 이 18.1.x 버전 이상이여야함 npm install @reduxjs/toolkit react-redux 리덕스툴킷 세팅은 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) store.js 파일을 만들어서 위 ..
React Native React Native 리액트로 모바일앱을 만들 수 있는 프레임 워크 리액트로 android, ios 네이티브앱을 동시에 만들 수 있는 크로스플랫폼 React Native 장점 1.하나만 만들면 되니깐 개발 비용이 절감된다. 2.리액트 알고있으면 배우기 쉽다. React Native 세팅하려면 1.Expo Go 쉬운 셋업 및 빠른 초기개발 Native 코드 수정은 불가능 2.React Native CLI 모든 React Native 를 위한 인프라를 직접 설치 Native 코드 직접 수정 가능 3.CRNA CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음 Android Studio 또는 Xcode 설치 필요 4.ignite ..
프로그래머스- 숨어있는 숫자의 덧셈 (1) 문제설명 문자열 my_string이 매개변수로 주어집니다. my_string안의 모든 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 소문자, 대문자 그리고 한자리 자연수로만 구성되어있습니다. 입출력 예 설명 입출력 예 #1 "aAb1B2cC34oOp"안의 한자리 자연수는 1, 2, 3, 4 입니다. 따라서 1 + 2 + 3 + 4 = 10 을 return합니다. 입출력 예 #2 "1a2b3c4d123Z"안의 한자리 자연수는 1, 2, 3, 4, 1, 2, 3 입니다. 따라서 1 + 2 + 3 + 4 + 1 + 2 + 3 = 16 을 return합니다. 내가 풀이한 과정 1.정규식을 써보자 숫자만 선택하는 ..
사망토론 프로젝트 회고 프로젝트 명: 보람3조의 사망토론 필수작업: 게시물, 댓글의 CRUD 서버, 리액트 배포 추가 작업: 좋아요 기능 로그인, 회원가입, 로그아웃 게이지 바(본문의 category A, B별 댓글 수에 따른 % 계산) My Page(내가 쓴 글, 좋아요 누른 글, 닉네임 변경) KEEP 1. 꼼꼼한 문서화 작업 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow, PR 활용 기능개발이 끝나거나 작업이 마무리가 될때 다같이 Git PR 하는 화면을 다같이 보면서 휴면에러를 줄이고, PR을 하면서 코드리뷰도 같이 하는게 좋았음. 3. 소통 잘 한 ..
게이지바 구현 게이지바를 드디어 완벽하게 구현했다. 예외처리 까지 끝냈음 어떻게 했냐면 일단 1.게이지바를 구현 하기 위해서 중첩반복문을 통해 posts 와 comments DB값을 하나씩 필터링 2.필터링된 comments 값의 카테고리를 필터링 하여 카테고리가 A면 A값에 1 추가, B면 B값에 1을 추가하여 몇개의 득표수(댓글수) 가 있는지 확인 코드는 const PostList = () => { //DB에서 post 와 comment 를 호출 한 값을 변수에 담았음 const { posts } = useSelector((state) => state.posts); const { comments } = useSelector((state) => state.comments); //posts에 반복문을 돌려서 각각 등록..

티스토리툴바