Studying Front-end
React-router를 사용해서 routing할 때, props를 전달하는 방법 (나는 데이터 목록에서 상세보기 페이지로 넘어갈 때 사용하였다) routing할 때 path 설정하기 ( /: 뒤가 parameter로 전해질 props 이름이다, 여기서는 postId ) 2. props 전달하기 3. props 전달받기 이렇게 하면 라우팅 할 때 다른 컴포넌트에서 props로 값을 전달받을 수 있다! TIP) 크롬에서 react extension을 이용하면 직접 확인할 수 […]
프로젝트 진행 중에 상세보기 페이지를 만드는데, 이미지 컴포넌트에 주소를 넘겨주면서 TypeError가 발생했다. TypeError: Cannot read property ‘0’ of undefined 해당 오류는 array가 아닌 변수에 인덱스로 접근할 때 자주 봤는데, 이번에는 props가 확실히 array였기 때문에 골치가 아팠다. 그런데 console.log를 찍어보니 useEffect에 props가 변화할 때마다 작동을 하는데, 왠지 undefined에서 [0]으로 접근해서 오류가 나는 느낌이었다. 그래서 이번엔 바로 […]
나홀로 프로젝트 진행 중, 정리하지 않으면 도저히 안될것 같아서 회원가입부터 정리를 시작 스택 Frontend: React (redux, axios) Backend: NodeJs, express DB: MongoDB 구현 순서 모델 설계 백엔드 로직 구현 프론트 컴포넌트 구현 Redux action, reducer와 axios로 데이터 통신 모델 설계 원래 모델에 다른 속성도 많은데 회원가입 기능에 관한 것만 정리하기 위해서 간단하게 정리했다. 먼저 회원스케마를 […]
HOC란? A higher-order component (HOC) is an advanced technique in React for reusing component logic. – React 홈페이지(https://ko.reactjs.org/docs/higher-order-components.html) React홈페이지에도 있는 것처럼 HOC는 컴포넌트 로직의 재사용을 위해 사용하는 기술로, argument로 받은 컴포넌트를 특정 기능을 실행한 후 결과에 따라 리턴하는 함수이다. 사실 이름만 들었을 때는 고차원 컴포넌트가 이해가 안갔는데 예시 하나를 따라하고 나니 이해가 갔다. HOC 이해하기 […]
한창 자라나는 학생일 땐 엽떡을 밥먹듯이 먹었는데 성인되서는 밥말고는 생각이 안났따. 그러다가 갑자기 배달떡볶이가 먹고 싶어서 찾아보는데 치즈감자전 떡볶이라는 메뉴가 있어서 시켜먹었다! 크레이지 치즈감자전 떡볶이 17000원 : 3~4인 모둠 구성(떡+ 비엔나소세지 + 오뎅 + 만두+ 계란 1개 + 모짜치즈 + 체자치즈 1장 + 바삭한 감자전) 맛선택은 매운걸 안좋아해서 중상으로 선택했다. 감자전은 어디있는지 잘 안보였는데 치즈를 […]
광고가 들어온 기념으로 신나서 맛집을 풀어본다 참고로 나는 간장게장을 좋아하는데, 비린걸 못먹는다. 그래서 여수가서도 한입 먹고 손도 안댔다..ㅠ_ㅠ 그러다가 어느날 또 간장게장이 너무 땡겨서 집 근처로 보는데 바로 집앞에 식당이 간장게장 맛집이라고 떴다! 심지어 비린거 못먹는 사람인데도 잘 먹었다는 말에 다음 날 바로 달려갔다. 간장게장이 1인분에 8000원인데도 반찬과 함께 꽤 많이 나온다. 김치찌개도 사장님 강력추천으로 […]
개발을 하면서 가장 어이가 없을 때는 공식문서를 보고 그대로 했는데도 에러가 뜨는 경우이다. 프록시가 버전업이 되면서 기존의 proxy 객체를 createProxyMiddleware로 바뀌었다. 그래서 그 코드를 그대로 복사해 썼는데, yarn start를 하면 서버는 잘 켜지는데 프론트가 proxy is not a function이 뜨는 것이었다. 그래서 계속 구글링을 하던 도중, 오히려 이전버전의 코드를 쓰면 해결된다는 글을 봤다. 따라서 이전버전 […]
Error: ENOSPC: System limit for number of file watchers reached, watch React로 개발을 하던 도중, 개똥같은 오류를 만났다. 아직 개발 초기인데도 벌써 파일감시수가 제한치에 도달했다니.. 해결법 터미널에 해당 코드를 입력해서 file watchers의 제한을 늘려주는 것이다. 설정이 잘 되었는지 확인한후에 다시 시작하면 오류없이 시작할 수 있다!
Container에 이어서 mobx로 to do app 구현하기를 해봤다. 여러개의 컴포넌트에서 store를 import해서 쓰니까 확실히 사용법을 익히게 되었다. 디렉토리 구조 src > pages > Todo.jsx / Input.jsx / List.jsx : Components 역할 src > stores > todo.js : input과 todoList state 관리하는 store 역할 src > useStore.js : store를 모아서 api처럼 사용하는 역할 todo.js : Store […]
React components 구조에 익숙해지고 나니 MobX에 대한 필요성을 느꼈다. 전에는 MobX를 다른사람 코드만 보고 따라해봤는데 이젠 목표를 정해서 익숙해지려고 한다. 처음 구현해볼 것은 아주 간단한 Counter이다. Counter 구조 src > pages > Counter.jsx : component역할 src > stores > counter.js : store 역할 useStore.js : stores를 하나에 모아 useStore()로 제공 counter.js : count하는 변수와 메소드를 […]