profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자
post-thumbnail

useEffect와 dependency array

요새 또 블로그를 게을리하고 있었는데 다시 차근차근 써보도록 하겠습니다. 기본기가 많이 없어서 한동안은 React의 기본적인 Hook 이나 메서드 같은 걸 공부하도록 하겠습니다.일반적으로 함수형 컴포넌트 내부에서 발생하는 side effect를 처리할 때 React 모

2022년 1월 20일
·
0개의 댓글
·
post-thumbnail

Material-UI에서 Style을 적용하는 방법

변명 중에서도 가장 어리석고 못난 변명은 "시간이 없어서"라는 변명이다. -에디슨- 잠깐의 2021년 회고 블로그를 작성하기전에 현재의 내가 느끼고 있는 것들의 대해서 잠시 얘기를 해보겠다. 나는 2달전에 부트캠프를 들어와서 현재 기업협업을 나와있다. 부트캠프에 다

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

CORS 에러와 마주하다

기업협업에서 백엔드와 API통신을 하던 중 에러를 마주하게 됐는데...현재 프론트엔드, 백엔드를 분리하여 프로젝트를 진행하던 중 둘 다 로컬서버로 run server를 하였는데이러한 에러가 뜨면서 진행이 안되는 일이 발생하였다. 많은 검색을 해본 결과 이것이 CORS

2021년 12월 31일
·
0개의 댓글
·
post-thumbnail

Modal 창

이번 프로젝트를 진행하면서 모달창을 두 번 만들었는데 이번에 만들었던 코드를 올려봅니다.

2021년 12월 26일
·
1개의 댓글
·
post-thumbnail

2차 프로젝트 [에어피앤피] 회고

"내 자신에 대한 자신감을 잃으면, 온 세상이 나의 적이 된다." -랄프 왈도 에머슨- 이번 프로젝트 회고도 좋은 명언으로 시작하겠습니다. 2차 프로젝트를 진행하면서 작업적으로도 힘들지만 정신적으로 힘들때가 있었습니다. 그때마다 이 명언을 보면서 견뎠던 기억이 납니다

2021년 12월 26일
·
0개의 댓글
·
post-thumbnail

Redux 란?

프론트 마지막 세션데이터의 흐름이 복잡하기 때문에 데이터의 흐름을 제약할 필요가 생겼습니다.그래서 상태 변화가 일어나는 시점과 형태에 제약을 두어서 상태 변화를 예측 가능하게 만들고자 시도을 한 것입니다. 단방향 데이터 바인딩을 하는 Flux패턴의 자바스크립트 구현체

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

React로 페이지네이션 라이브러리로 구현하기

React로 페이지네이션을 라이브러리로 구현해보았습니다.많이 해매가지고 제가 어떻게 구현을 했는지 차근차근 써보겠습니다.1차 프로젝트때는 무한스크롤을 구현하였고 2차 프로젝트에서는 페이지네이션을 구현하게 되었습니다. 좋은 라이브러리가 많이 있었는데 그 중에서 react

2021년 12월 18일
·
0개의 댓글
·
post-thumbnail

React 에서 slick 과 styled-components를 적용해보기

React slick 을 이용하여 Carousel을 구현해보자!라이브러리를 사용하는데도 시간이 오래걸렸고 이것을 정리해서 올려봅니다.2차 프로젝트를 시작하면서 슬라이드(캐러셀)을 구현해야하는 일이 생겼고, 이것을 라이브러리로 적용해보자는 마음을 먹고 구현을 해보았습니다

2021년 12월 18일
·
0개의 댓글
·
post-thumbnail

React 카카오 소셜로그인 구현

React로 구현하게 된 카카오 소셜로그인에 대해서 작성해보도록하겠습니다.REST-API말고 자바스크립트 팝업로그인으로 구현하였습니다.저처럼 서성이는 분들께 도움이 되길 바라면서 작성해보았습니다.💻 사용한 것: React / style-component / kakao

2021년 12월 17일
·
0개의 댓글
·
post-thumbnail

스크롤 인디케이터

스크롤바를 최상단으로 고정하기인디케이터란?일의 현황/사정 변화 등을 나타내는 지표를 말합니다. 스크롤을 하면 상단에 게이지가 쌓이면서 어느정도 스크롤링이 됐는지를 보여주는 것입니다. 라이브러리 없이 구현하기..!검색해서 여러가지를 보았지만 방법은 의외로 간단했습니다.s

2021년 12월 12일
·
0개의 댓글
·
post-thumbnail

React 무한 스크롤 (라이브러리 없이)

프로젝트를 진행하면서 알게 된 무한스크롤을 되짚어보겠습니다.정보를 한번에 가져와서 보여주기엔 정보량이 너무 많아서 API fetch로 받는 결과가 느릴 때, 스크롤을 통해서 아주 작은 일부분만 가져와서 추가로 보여주는 기술을 말합니다.즉, Scroll End 지점까지

2021년 12월 12일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 [브랜치] 회고

인내하라, 경험하라, 그리고 희망을 가져라 - 조셉 에디슨제가 좋아하는 명언으로 글의 시작을 알려보았습니다. 첫 프로젝트를 시작하고 마친 현재에 시점에서 저를 다시 돌아보게 하는 문장입니다.인내하고 경험하고 희망을 가지는 사람이 되기 위해 항상 감사하는 마음을 가지겠습

2021년 12월 12일
·
4개의 댓글
·
post-thumbnail

Mock data / map

이번 프로젝트를 진행하면서 알게 된 것들을 작성합니다.fetch 파일은 하나의 useEffect에 적어도 됩니다. , 가 없으면 무한랜더링이 일어납니다.반드시 작성해야합니다.모든 함수는 return 안에 존재해야합니다.Component의 이름을 작성하고 useState

2021년 12월 5일
·
0개의 댓글
·
post-thumbnail

1차 프로젝트 [브랜치] 중간회고

1차 프로젝트를 하면서 느낀점월요일부터 1차 프로젝트를 시작하였습니다. 저희팀은 작가로 선정된 사람들이 글을 올릴 수 있는 '브런치'라는 사이트를 클론코딩합니다.제가 맡은 부분은 포스팅페이지와 리스트페이지입니다. 상단바 / 헤더 / 본문 / 작가소개란 / 추천 글 리스

2021년 12월 5일
·
0개의 댓글
·
post-thumbnail

React에 대해서 (3)

너무 바빠서 블로그 안쓴지 오래됐다. 힘내서 블로그 정리하기 React state 변경하는 법 onClick 이벤트 안에는 무조건 { 함수 } 만을 넣을 수 있습니다. onClick ={ 제목바꾸기() } 이건 함수를 바로 실행하라는 뜻입니다. 소괄호는 빼는 것이

2021년 12월 4일
·
0개의 댓글
·
post-thumbnail

React에 대해서 (2)

오늘도 힘차게 리액트에 대해서 알아봅시다!변수를 { } 안에 넣으면 랜더링을 시킬 수 있습니다. 함수도 넣을 수 있습니다. src,id,href 등의 속성에도 {변수명,함수 등}, 상상하는 모든 곳에 { }로 변수 집어넣기가 가능합니다.style도 집어넣을 수 있는데,

2021년 11월 24일
·
0개의 댓글
·
post-thumbnail

map 함수 적용시 key props를 부여하는 이유

이렇게 작성하니까 'key'가 없다는 오류가 떴다. 그래서 index를 만들어주고 key에 index 값을 적어주니 오류는 사라졌다. Key는 React가 어떤 항목을 변경하거나 추가 또는 삭제할 지 구분하는 것을 돕는다.Key는 element에 안정한 고유성을 부여하

2021년 11월 23일
·
0개의 댓글
·
post-thumbnail

React 의 대해서 (1)

💻 React에 대해서 다시 공부해봅시다.무언가를 나눈 파일 (폴더로 안해도 됨)function 컴포넌트만 쓸겁니다. function을 쓰면 무조건 return값을 써야합니다.그 안에는 JSX문법을 써야합니다. HTML 문법과는 다릅니다.위에 코드를 첫번째에 꼭 적어

2021년 11월 22일
·
0개의 댓글
·
post-thumbnail

React 로그인 버튼 활성화 구현

오늘 구현한 것들을 마구잡이로 적어본다.아이디에 @가 들어가거나 비밀번호가 5개 이상일 경우 로그인 버튼이 활성화 되는 것을 구현하였습니다.무언가 비교할 때는 꼭 원래 값을 써야합니다. console.log를 자주 이용해야한다. 먼저 active, setActive 를

2021년 11월 21일
·
0개의 댓글
·
post-thumbnail

State / Props

State 와 Props의 대해서 알아보자

2021년 11월 20일
·
0개의 댓글
·