분류 전체보기 (49) 리스트형 TIL 24 ReactNative RNPickerSelect 리액트 네이티브에서 목록창을 만들려면 RNPickerSelect을 사용해야 된다. View태그 안에다가 RNPicker을 넣어주면 스타일 줄 수 있다. 휴대폰 번호 밑 통신사가 들어가 있는 창이 RNPicker이다. placeholder은 label로 변경해주면 된다!! TIL 23 ReactNative Box shadow 주는법 1. Box Shadow 위 4개의 shadow속성들은 ios에 적용되는 속성들이고 elevation은 안드로이드에 적용되는 속성이다. 문제는 이렇게만 적용을 해주면 테두리에 그림자가 생기는게 아니라 안에 있는 내용들이 그림자가 생기면서 제대로 먹히질 않는다. 이를 해결하기위해서는 전체 컨테이너에다가 backgroundColor: "white"을 넣어주면 해결이된다!!! 위코드 2차 프로젝트 후기(핀터레스트 팀 프로젝트) 1. 프로젝트 소개 및 역할 11/15부터 시작해서 11/26까지 프런트3명 백엔드 2명으로 구성된 팀으로 핀터레스트를 구현하는 2차 팀 프로젝트를 위코드에서 하게 돼었다. 팀원들과 초기세팅을 마치고나서 역할 분담을 어떻게 할지 회의했는데 3가지 파트로 나누어서 분담하기로 햇다. Nav바 업로드페이지, 로그인페이지 카카오 소셜로그인, 메인페이지 마이페이지, 이렇게 파트로 나누었고 나는 로그인페이지 카카오 소셜로그인을 맡기로 했다. 2. 사용된 기술 1. React 2. React hook 3. JavaScript 4. Styled-Component 5. git 3. 카카오 소셜 로그인 구현!!!! 처음에 소셜로그인을 맡았을때 상당히 쉬울거라고 생각을 했다. 정말 오만도 이런 오만이 없을거다. 사용자가 입.. TIL 22 React ref 리액트에서 돔요소를 직접 조작해야 할때 ref를 사용해야된다. 스크롤 이벤트로 해당 element로 이동해야할때도 쓰인다. 먼저 ref 쓰기위해서 useRef함수를 사용한다고 선언을 해야한다!!! import React, { useRef } from 'react'; 그리고 ref로 지정할 변수를 선언을 해줘야한다 const pageHeaderRef = useRef(); 이동하고 싶은 요소에다가 ref속성을 쓰고 선언한 변수를 넣어준다. const goToPagePosition = position => { position.current.scrollIntoView({ behavior: 'smooth', }); }; 그리고 scrollIntoView를 사용할 변수에다가 ref변수명.current.scrollI.. TIL 21 리액트 Router Nav바 숨기기 문제: 로그인하는 첫페이지에만 Nav바를 숨기고 나머지 페이지에서는 보이게구현 처음에는 라우터 컴포넌트에서 로그인을 여부를 파악해서 Nav바를 조건부 랜더링해서 해결하려고 했다. 프로젝트로 만들고 있는 사이트가 로그인 페이지에서 로그인에 성공을 하면 바로 메인페이지로 넘어가는 구조였기에 하려고 했지만 그 보다 훨씬 간단한 해결방법이 있다. 바로 라우터를 잘 사용하면된다!! 라우터 본체 파일에 가장 첫화면에 나오는 EnterPage컴포넌트와 그외에 Nav바가 보여질 컴포넌트들이 모여있는 User라는 컴포넌트가 들어가 있다. User컴포넌트 path를 보면 '/*' 이렇게 되어있는데 '/' 경로다음에 올 모든 path를 포함한 경로다. EnterPage를 제외한 모든 컴포넌트들이 들어가 있는데 상단에 보면 .. TIL 20 리액트 함수형 컴포넌트(useState) 1. 함수형 컴포넌트 1차 프로젝트때 클래스형 컴포넌트만 사용하다가 2차 프로젝트는 함수형 컴포넌트를 사용하기로 했다. 클래스형 컴포넌트에서 해결하기 힘든 여러문제들을 커버하기 위해서 나온 컴포넌트이다. 1.1 함수형 컴포넌트 기본 작성 class Welcome extends Component { constructor() { super(); this.state = {name:' jeon'} } render() { return Hello, {this.state.name}; } } export default Welcome; 위 코드는 기존에 사용했던 클래스형 컴포넌트이고 import React, { useState } from 'react'; function funcComponent() { return ( .. TIL 19 Props로 받은값 State로 넘기기 컴포넌트에서 Props로 받은값을 state에 저장하는걸 구현해봤다. 각 코멘트에 들어가있는 유저이름 코멘트 내용 좋아요 갯수를 mock데이터로 받아서 구현한 것이다. 코멘트는 컴포넌트이다. commentInfo라는 props값들을 받아서 해당 컴포넌트에서 뿌려주는 형태이다. CommentIndividual을 보면 render부분은 제외한 코드인데 중요한건 componentDidMount을 보면 된다. state에 likeNumber값은 0으로 두고 리액트의 라이플 사이클 render()함수가 끝마치고 실행되는 componentDidMount를 보면 likeNumber을 props로 받아온 commentInfo.like_number로 바꿔 줄 수 있다. 바로 props의 값을 state값으로 갱신한것을 .. TIL 18 fetch기능 Post 구현하기 별점기능 구현에서 별점을 클릭했을때 Post메소드로 통해서 점수를 백엔드 서버에 전송해서 DB에 저장을 한후에 저장된 값을 Get메소드로 가져올려고 했다. 그럼 fetch함수를 두번사용해서 구현하는데 Post의 fetch가 함수가 실행되고 다음 get의 fetch함수가 실행될때 텀이 생기는데 이 사이에 클릭이 fetch를 실행하는 함수가 중첩되면서 오류가 생겼다!! 해결책으로는 post함수 한번으로 get기능도 실행 할 수 있다 현재 registerStarScore함수는 별점구현을 했을때 fetch를 통해서 점수를 post를 통해서 서버에 보내주고 두번째 .then에서 백엔드에서 보내준 data중 평점값을 가진 키값에 접근을해서 바로 setState를 통해서 변경이 가능하다. 물론 이방법은 백엔드에서 p.. 이전 1 2 3 4 5 ··· 7 다음 목록 더보기
