본문 바로가기

전체 글130

React 8. setState, this.props.children setState 함수 setState함수는 컴포넌트의 상태(state)를 업데이트하는 방법으로 많이 사용된다. 리액트를 처음 사용하여 인스타그램을 클론할 때, 유저가 입력하는 리뷰를 빈 string으로 설정해놓고, 아래와 같은 방법을 통해 state값을 업데이트하려고 시도한 적이 있었다. // 공간 부족 상 일부 코드만 // 컴포넌트 상태값 this.state = { userInput : '', } // 유저 입력값을 상태에 업데이트하는 함수 handleChange = (e) => { this.setState({ userInput : e.target.value, }) this.checkUser(); } // checkUser = (e) => { // 폼 외부 div에 이벤트를 걸어서 유저 정보가 맞는지 .. 2020. 9. 29.
[Allstar] 컨버스 웹사이트 클론 팀프로젝트 후기 프로젝트 소개 미국의 스포츠웨어 브랜드 기업인 컨버스의 웹사이트 클론 프로젝트 프로젝트 기간 : 9. 14 ~ 9. 25 (2주) 개발인원 (총 6명) : 프론트엔드 (권영빈, 김호균, 문상호, 손병진) / 백엔드 2명 (강경훈, 김수정) 깃헙 링크 : 프론트엔드, 백엔드 주요 기능 (+영상) 1. 제품 상세 페이지 2. 장바구니 사용 기술 Front-End JavaScript(ES6) React.js (CRA, Class형 component 사용) Sass Git / Github React 라이브러리 React-router-dom React-slick (슬라이더) 내가 맡은 역할 나는 제품 상세 페이지와 장바구니, 그리고 미니 장바구니 일부를 담당했다. 제품 상세 페이지 상품 id 별로 데이터 불러와서.. 2020. 9. 27.
React 7 - Component Lifecycle 리액트의 컴포넌트는 생명주기 (Life Cycle)를 가진다. Lifecycle API는, 컴포넌트의 생성부터 소멸 사이의 여러 시점에서 호출될 수 있는 다양한 메소드를 말한다. Mounting 관련 메소드 constructor() : 컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 호출된다. componentWillMount() : 컴포넌트가 화면에 정의되기 직전에 호출되는 API. 현재는 잘 사용하지 않는다. componentDidMount() : 컴포넌트가 화면에 나타났을 때 호출되는 메소드로, render() 이후에 실행된다. 가장 많이 쓰이는 메소드로 주로 외부 라이브러리 연동, Ajax 나 mock data 요청 등에 사용된다. 요소 render 이후에 데이터를 fetch 하여 stat.. 2020. 9. 26.
wecode +37 (9/23) 배운 것/개발한 것/정리한 것 1. 컨버스 프로젝트 1)장바구니 화면 - 장바구니 데이터 통신 완료 (headers 에 유저 token 전달하여 authorization 획득 -> 해당 유저에 맞는 장바구니 데이터 불러오기) - 장바구니 수량 +, - 통신 완료 (처음에 받아온 장바구니 데이터 배열에 다시 map을 돌려서, 클릭하는 아이템에 해당하는 수량만 update하는 새로운 배열을 return 하기) - 장바구니 페이지 추천 제품 구현 : 내일 merge 후 테스트 2) 제품 상세 페이지 - 코드 최신화 + 리팩토링 반영 3) 참고 사이트 velog.io/@7p3m1k/%EC%9E%A5%EB%B0%94%EA%B5%AC%EB%8B%88-%ED%8E%98%EC%9D%B4%EC%A7%80-%EA%B8%B.. 2020. 9. 23.
wecode +35 (9/21) 배운 것/개발한 것/정리한 것 - 오후 청주 다녀오느라고 거의 개발하지 못함.. - 저녁 장바구니 레이아웃 완성! 내일 할 것 1. 상품 상세페이지 기능 추가 구현 - 상세페이지에서 로그인시 로그인 팝업 및 로그인 API 사용하여 로그인 처리 - 장바구니 버튼 클릭하여 장바구니에 추가 - 미니 장바구니 페이지와 ProductDetail 연결하기 - 상품 API와 연결하여 URL단위로 받아오기 2. 장바구니 페이지 기능 추가 구현 - 장바구니 추가시 데이터 state로 받아오기 2020. 9. 22.
wecode +31 (9/17) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 1.문제 * 문제 주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동시켜주세요. 원래 있던 숫자의 순서는 바꾸지 말아주세요. * 새로운 배열을 생성해서는 안 됩니다. 2. 답안 const moveZeroes = nums => { let zeroCount = []; while(nums.includes(0)) { for (let i=0; i res.json()) .then((res) => { if (res.productItem[`${this.props.match.params.id}`]) { this.setState({ productInfo: res.productItem[`${this.props.match.params.id}`], }); } else { c.. 2020. 9. 17.
wecode +30 (9/16) 배운 것/개발한 것/정리한 것 - 오전 : 코드카타 (통과 X) - 오후 1. 세션 (4시) : 리액트 메뉴 탭 구현하기 2. 컨버스 사이트 클론코딩 (Pull request 생성) 상품 상세페이지 관련 컴포넌트 분리 및 CSS 적용 상품 메인 피드 레이아웃 추가 상품 우측 패널 (상품 상세정보, 컬러, 사이즈, 장바구니 버튼 등 포함) 상품 리뷰, 커뮤니티 섹션 추가 추천 상품 섹션 추가 내일 할 일 1. 컨버스 사이트 - 동적 라우팅 (제품 별 다른 url로 연결) 시도해보기 - 상품 Mock data 만들고 페이지에 뿌려보기 - CSS 추가 : 사이즈 버튼 hover, 로그인 버튼 hover, 바로구매 버튼 hover 추가 - 인스타그램 부분 hover 안했을 시에 나타나는 부분 추가, 더보기 하여.. 2020. 9. 16.
wecode 세션 : 인증/인가와 로그인 인증&인가 1) 인증 (Authentication) : 유저의 identification을 확인하는 절차로, 유저의 아이디/비번을 확인하는 작업 2) 인가 (Authorization) : 유저가 특정 request를 수행할 수 있는 권한을 가지고 있는지 확인하는 작업 일반적인 로그인 절차 1) 유저 아이디/비번 생성 2) 유저 비번 암호화하여 DB에 저장 3) 유저 로그인 -> 아이디/비번 입력 4) 유저가 입력한 비밀번호를 암호화 한 후 DB에 저장된 유저 비밀번호와 비교 5) 일치하면 로그인 성공 6) 로그인 성공 후 access token을 클라이언트에게 전송 7) 유저의 첫 번째 로그인 성공 후 access token을 첨부하여 request에 전달함으로서 매번 로그인을 안해도 되도록 설정 암호화.. 2020. 9. 12.
code kata (9/11) 문제 인자인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. 내 코드 function getMaxArea(height) { const areas = []; let thisArea; for (let i=0; i 2020. 9. 12.

티스토리툴바