profile
프론트 공부를 열심히 하고 있는 대학생 개발자입니다.

index를 key로 쓰면 안 되는 이유

React는 이전 리스트와 현재 리스트를 순회하고 차이점이 있으면 변경을 생성한다.예를 들어 맨 끝에 엘리먼트를 추가한다면, 변경은 잘 작동할 것이다.React는 첫번째, 두번째 요소가 같은 것을 확인하고, 마지막에 third를 추가할 것이다.하지만 위와 같이 구현할

2020년 6월 20일
·
0개의 댓글
post-thumbnail

[DSC] 웹플랫폼 3주차

강의자 블로그 https://velog.io/@ehdrms2034/DSC-Node.js-%EC%99%80-React%EB%A1%9C-%EC%9B%B9-%ED%94%8C%EB%9E%AB%ED%8F%BC-%EC%A0%9C%EC%9E%91%EA%B8%B0-3왜 따로

2020년 5월 27일
·
2개의 댓글
post-thumbnail

Recoil - TodoList 만들어보기

(이 글은 recoil 0.0.7 버전으로 작성되어있습니다.)Recoil을 좀 더 알아보기 위해서 Recoil 튜토리얼에 있는 TodoList 만들기를 내 방식대로 조금씩 바꿔서 만들어 볼 것이다.src 밑에 recoil이라는 폴더를 만들어서 그안에 todo.js를 만

2020년 5월 22일
·
4개의 댓글
post-thumbnail

새로운 상태 관리 라이브러리 Recoil

페이스북에서 내놓은 새로운 상태관리 라이브러리이다. 페이스북 리액트 코리아 그룹의 한 포스트에는 이러한 장점이 있다고 말해주었다.atom/selector라는 단위를 통해 derived state를 효과적으로 처리하고 상태의 "코드 분할"이 가능하게 합니다.기존 상태관리

2020년 5월 20일
·
6개의 댓글

20.04.24 삽질

사용자의 입력을 받아 차트를 그릴 수 있게 하고 차트를 이미지로 다운 받을 수 있게 하는 사이드 프로젝트를 진행 중입니다.TypeScript, React, styled-components, react-router, chart.js를 사용하여 진행 중 입니다.3일전부터

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

React.lazy 사용해보기

오늘은 React에 내장되어있는 lazy를 사용해 볼 것이다. React.lazy는 코드분할을 하게 해준다. 코드 분할은 앱을 "지연 로딩"하게 도와주고 사용자들에게 획기적인 성능 향상을 하게 해줍니다. 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러

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

Next.js에 Redux-Saga 연결 해보기

Redux만으로는 비동기적인 작업을 처리하지 못 합니다. 그래서 미들웨어를 연결해서 비동기작업 처리를 하는 코드를 짜주어야 합니다. 대표적인 미들웨어로 thunk와 saga가 있는데 saga가 더 기능이 많고 많이 쓰이는 것 같아 saga로 해보도록 합니다.위 명령어를

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

2020-02-22 ~ 02-23 삽질

22일부터 23일까지의 삽질 및 생각을 적어본다DND 프로젝트 남은 기한이 1주일지 2주일지 잘 모르겠지만 최대한 열심히 해보려고 한다.현재 코로나 바이러스 때문에 밖에도 안 나가고 코딩 놀기 코딩 놀기만 반복중이다...흑흑ㅠㅠ주말동안 엄청 많은 작업은 하지 않았고 많

2020년 2월 23일
·
2개의 댓글
post-thumbnail

Next.js에서의 SSR이란

Client-Side-Rendering 과 Server-Side-Rendering은 다른 velog나 블로그에 너무나 많이 정리 되어있어서 그거를 참고하면 좋을 것 같다. 나도 그런 것을 보고 공부를 더 확실하게 해야겠다.Next.js에서는 next의 SSR을 이렇게

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Next.js란?

Next.js는 React 앱을 쉽게 구축할 수 있게 하고 SSR을 쉽게 설정할 수 있게 하는 리액트 프레임워크다.공식문서 : https://nextjs.org/Next.js의 장점으로는 이렇게 적혀있다.직관적인 페이지 기반 라우팅 시스템(동적 경로 지원)가능

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Next.js 동적 라우팅 SSR

이전에는 Next의 getInitialProps를 활용하여 기본적인 SSR을 해보았다. 이제는 동적라우팅으로 되어있는 페이지들을 SSR하게 만들어 볼 것이다. 그리고 styled-components가 처음에는 csr로 실행이 되어 css가 적용되지 않고 나타났다가 적용

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

2020-02-21 삽질

오늘도 DND 프로젝트를 이어서 했다. 오늘은 로그인 구현 및 메인페이지 정보들 불러오는 작업을 하였다. 우리 로그인은 jwt를 이용하여 하는데 지금 하는 방식이 좀 좋지 않은 방식이라는 생각이 들었다. 지금 React + spring boot로 이루어져있는데 클라이언

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

2020-02-20 삽질

오늘부터 시간날 때 삽질한 기록을 남기려고 한다.오늘도 엄청난 삽질의 연속이였다. 요즈음 부산IT연합동아리 DND활동을 하고 있다. 이번주가 8주차라 거의 끝나는 시기이다. 그래서 빨리 개발을 끝내야하는데 여기저기서 막혔다.Next.js에서 styled-componen

2020년 2월 20일
·
0개의 댓글
post-thumbnail

Next.js SSR 해보기

저번에 하던 폴더에서 Next.js 공식문서를 보고 ssr을 해보려고 한다.ssr(server-side-rendering)으로서 서버로부터 그려진 view를 받아오기 때문에 초기 구동 속도가 빠르고 seo 최적화 하기에 좋다.자세한 설명들은 다른 글에 잘 작성되어 있는

2020년 2월 19일
·
0개의 댓글
post-thumbnail

Next.js 라우팅

Next.js의 라우팅에 대해서 적어볼거에요. 요즘 팀프로젝트를 하면서 NEXT를 쓰게 됐거든요. 그래서 기록을 남길겸 혹시 도움 될까 싶어서 써봅니다ㅎㅎㅎ일단 NEXT 프로젝트를 셋팅해야겠죠?을 사용하여 초기세팅을 해줍니다!아니면 직접 세팅할 수도 있어요!!을 입력해

2020년 2월 18일
·
2개의 댓글