뇌 채우기 공간

기획회의의 연속 https://ohbin-kwon.notion.site/ohbin-kwon/4-8373ab68bac94675a3709393d90db7ce 실전 프로젝트4조 - 책 리뷰 및 추천 서비스 🍒 서비스 소개 ohbin-kwon.notion.site 오늘은 계속 회의를 진행했다. 더 차별성있고 챌린지한 기능을 넣을 수 있는 포트폴리오를 만들기위해 다들 의견을 열심히 내고 조율하는 과정을 거쳤다. 회의라는 것은 정말 에너지가 많이 뺏기는 것 같다. 어떻게 하면 회의가 더 효율적이고 빠르게 진행될 수 있을지에 대한 고찰을 앞으로 많이 해보아야겠다.

어제와 오늘 연속으로 실전프로젝트 기획회의를 했다. 기획회의라는 것은 정말 어려운 것 같다. 재밌으면서도 어렵다. 이번에는 백엔드 3명, 프론트 3명, 디자이너 3명, 9명이 함께 이야기를 하다보니까 너무 난이도가 높아졌다. 각자의 의견이 다르고 각자가 생각하는 바가 다르기 때문에 조율도 정말 어려웠다. 그렇지만 우리팀은 젠틀하게 말을 예쁘게 하면서 존중하는 모습이 정말 좋았다. 앞으로도 좋은 기억을 만들어가고 싶다. https://ohbin-kwon.notion.site/ohbin-kwon/4-8373ab68bac94675a3709393d90db7ce

마켓컬리 클론코딩 http://kurlymarket.shop/ 1. 제작 기간 & 팀원 소개 2021년 7월 16일 ~ 7월 22일 4인 1조 팀프로젝트 프론트엔드 (React) : 이현주, 양현정 백엔드 (Spring) : 성찬우, 남태현 2. 사용 기술 Front-end React javascript Back-end Spring deploy AWS EC2 (Ubuntu 18.04 LTS) AWS RDS (MySQL 8.0) AWS S3 3. 실행영상 https://www.youtube.com/watch?v=b9Z7gqWzyq8 4. 설계, 기능 설계 노션을 이용하여 API 및 SCOPE 공동 설계 : Notion 에서 확인 기능 회원가입 로그인 (JWT 인증방식) 메인페이지 상품 리스트 조회 상세페이..

마켓컬리 클론 코딩 끝! 이번에 DB가 준비가 잘 안돼서 리덕스로 화면에서만 보일 수 있도록 하였다. .. 너무 아쉽다! 2021.07.23 - [프로젝트] - [마켓컬리 클론코딩] 마켓 컬리 클론코딩 프로젝트 정리/ 회고

useMemo라는 hook을 사용해서 연산된 값을 저장해놓을 수 있다. 성능최적화에 쓰인다. 참고 블로그 : 벨로퍼트 function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } 활성 사용자 수를 알게 하기 위해서 함수를 만들었다. 이 함수는 이름을 눌러서 초록색이 된 사용자만 세면 된다. 그런데 문제는 input값이 바뀔때에도 저 함수가 호출되는 것이다. input 값이 바뀔때에는 저 함수가 실행될 필요가 없다. const count = countActiveUsers(users); const count = useMemo(() => countActiveU..

1. 마운트 React.useEffect(()=>{ console.log("a"); },[]); 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다. 위와같이 두번째 파라미터로 비어있는 배열을 넣는다면 클래스형에서 ComponentDidMount()와 마찬가지로 처음에 불러올때 중괄호 안의 함수가 실행된다. 2. 언마운트 cleanup함수라고 한다. React.useEffect(()=>{ console.log("a"); return()=>{ console.log("b"); } },[]); 컴포넌트가 사라질 때 return안의 함수가 실행된다. 3. deps에 특정값 넣기 deps 에 특정 값을 넣게 된다면 아래의 상황에서 호출이 된다. 컴포넌트 처음 마운트될때 저장..

const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(user => user.id !== id)); }; users의 배열에서 user.id가 일치하지 않는 원소만 추출해서 새로운 배열을 만든다. 이것을 리덕스 모듈에서도 활용할 수 있겠다.

이제까지 리액트에서 내가 배열을 렌더링할때는 이런 경우이다. 메인페이지에서 상품 목록을 가지고 올떄 위와 같은 페이지에서 상품 하나를 컴포넌트로 만들어서 , 페이지에서 상품 정보를 가지고 있는 배열을 map돌리는 것이다. {product_list.map((p) => { return ( ); })} 여기서 map을 돌릴때 꼭 key가 있어야한다. key가 없으면 추가나 삭제가 일어날때 매우 비효율 적인 작업이 일어난다. 예를 들어 [a, b, c, d] 배열에 z를 중간에 넣어 [a, b, z, c, d]로 만들고 싶다면 c가 z로 바뀌고, d가 c로 바뀌고 d가 새로 생긴다. 그 후 a를 삭제하고 싶으면 a가 b로 바뀌고 b가 z로 , c가 d로 바뀌고 마지막에 있던 d가 사라진다. 하지만 key가 있으..

1. Axios란? - 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 2. 설치 yarn add axios import axios from "axios"; 3. 사용방법 1. 리액트 프로젝트에 shared 폴더에 Request.js 파일을 만든다. import axios from "axios"; const instance = axios.create({ baseURL: "서버주소" // 요청을 www.aa.com/user로 보낸다면, www.aa.com까지 기록 }); // 가지고 있는 토큰 넣어주기! // 로그인 전이면 토큰이 없으니 못 넣어요. // 그럴 땐 로그인 하고 토큰을 받아왔을 때 넣어줍시다. // instance.defaults.head..

2021.07.21 - [WEB/REACT] - [React] Axios란? 서버통신하기/ headers, body 넣기 [React] Axios란? 서버통신하기/ headers, body 넣기 1. Axios란? - 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 2. 설치 yarn add axios import axios from "axios"; 3. 사용방법 1. 리액트 프로젝트에 shared 폴더에 Reques.. sso-feeling.tistory.com 2021.07.21 - [WEB/REACT] - [React] 배열 렌더링하기, map 사용 , key값이 꼭 있어야하는 이유 [React] 배열 렌더링하기, map 사용 , key값이 꼭 ..