# 끄적끄적

32개의 포스트

Render Props 예제

Render Props 패턴이 헷갈린다면 다음 예제를 살펴보시길 추천합니다!만약 위와 같은 컴포넌트가 있다면 추후 사용할 때 다음과 같이 사용할수 있습니다.RenderPropsSamle에게 children props로 파라미터에 2를 곱해서 반환하는 함수를 전달하면 해

2020년 5월 18일
·
0개의 댓글

더보기 버튼 전체코드

frontback

2020년 4월 29일
·
0개의 댓글

더보기 버튼

더보기 버튼을 클릭하면 게시글이 보여짐limit : 처음 데이터를 가져올때와 더보기 버튼을 눌러서 데이터를 가져올 때 몇개의 데이터를 가져올 수 있는지!여기선 8개의 데이터를 처음에 가져오고, 더보기 버튼을 누르면 8개의 데이터를 가져온다.skip : 어디서부터 데이터

2020년 4월 29일
·
0개의 댓글
post-thumbnail

HTML 필터링하기

위의 사진처럼 HTML태그가 보이는 현상 발생.이 태그를 없애는 작업은 서버쪽에서 해주어야함. 클라이언트에서 처리하는 방법도 있지만, 현재 이 프로젝트에서는 포스트 리스팅을 할 때 body의 글자 수를 200자로 제한하는 기능을 했기때문에 HTML의 일부분만 전달되어

2020년 4월 21일
·
0개의 댓글

리덕스 편하게 사용하기!

리액트를 다루는 기술redux-actions, immer라이브러리 활용액션 생성 함수를 더 짧은 코드로 작성 가능switch/case문이 아닌 handleActions라는 함수를 사용하여 각 액션마다 업데이트 함수를 설정하는 형식으로 작성.액션 생성 함수handleAc

2020년 3월 28일
·
0개의 댓글
post-thumbnail

Switch, NavLink

Switch 컴포넌트는 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링시켜 줍니다.Switch를 사용하면 모든 규칙과 일치하지 않을 때 보여 줄 Not Found 페이지도 구현할 수 있습니다.존재하지않는 url 경로로 들어갈시 나오는 화면NavLin

2020년 3월 23일
·
4개의 댓글

widthRouter

withRouter 함수는 Hoc(Higher-order Component)입니다.라우트로 사용된 컴포넌트가 아니어도 match,location,history 객체를 접근할 수 있게 해줍니다.링크

2020년 3월 23일
·
0개의 댓글

history

history 객체는 라우트로 사용된 컴포넌트에 match,location과 함께 전달되는 props중 하나로, 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출 할 수 있습니다.

2020년 3월 23일
·
0개의 댓글

서브 라우터

서브 라우트는 라우트 내부에 또 라우트를 정의하는 것을 의미합니다.라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 됩니다.

2020년 3월 23일
·
0개의 댓글

URL 쿼리 사용

쿼리는 location 객체에 들어 있는 search값에서 조회할 수 있습니다.http://location:3000/about?detail=true 주소로 들어갔을 때의 값URL 쿼리를 읽을때는 search 값을 확인문자열 형태로 되어있음search 값에서 특

2020년 3월 23일
·
0개의 댓글

URL 쿼리와 파라미터

파라미터 예시: /profiles/wjdwndtlr쿼리 예시: /about?details=true유동적인 값을 사용해야 하는 상황에서 파라미터를 써야 할지 쿼리를 써야 할지 정할 때, 무조건 따라야 하는 규칙은 없습니다. 다만 일반적으로 파라미터는 특정 아이디 혹은 이

2020년 3월 23일
·
0개의 댓글

리렌더링 최적화 : 함수형업데이트

setNumber(number+1)을 하는것이 아니라 어떻게 업데이트할지 정의해 주는 업데이트 함수를 넣어준다. 그러면 useCallback을 사용할 때 두번째 파라미터로 넣는 배열에 값을 안넣어줘도된다.예시)setTodos(todos => todos.concat(to

2020년 3월 22일
·
0개의 댓글

배열복사

2020년 3월 20일
·
0개의 댓글

sequelize 수정했을때

시퀄라이즈 수정사항은 mysql에 자동으로 반영되진 않습니다. 테이블을 지웠다 다시 만들거나(실무에서는 비추천), sequelize migration을 수행해야 합니다.http://jeonghwan-kim.github.io/sequelize-migration/

2020년 3월 8일
·
0개의 댓글

댓글 작성..(불변성 위주로 코드 게시)

PostCard.js 중에서.. reducers => post.js 중에서.. > const postIndex =state.mainPosts.findIndex(v=>v.id=== action.data.postId); // action.data.postId로 게시글의 위치를 찾음 >const post = state.mainPosts[postIndex]...

2020년 2월 8일
·
0개의 댓글

댓글 컴포넌트 만들기

전체 코드 `` 코드로 아이콘을 클릭할때마다 true & false로 변함

2020년 2월 8일
·
0개의 댓글

next Router로 페이지 이동하기

로 작업해도되나 조금더 프로그래밍적인 방식으로 접근한것임 /signup페이지에서 로그인 버튼을 누를시 useEffect() 조건이 활성화되면서 경고창 실행됨 객체끼리 비교하는게 쉽지가 않아서 me.id 식으로 데이터를 넣음 단, Post.Followings,Foll

2020년 2월 6일
·
0개의 댓글

axios

서버에 요청을 보내주는 모듈 서버에 보내는 것들중 유명해서 주로 사용 구글도 이것 사용함;

2020년 2월 5일
·
0개의 댓글

.eslint-config-airbnb

npm i -D eslint-config-airbnb란? > npm i -D eslint-config-airbnb > npm i -D eslint-plugin-jsx-a11y > npm i -D babel-eslint 에어비엔비 에서 만든 스타일가이드인데 리액트를 .eslint적용 하고싶다 할때 사용한다. 매우 엄격함. npm i -D eslint-p...

2020년 2월 4일
·
0개의 댓글