호팍이
article thumbnail
[Devlog] useEffect..
Devlog 2022. 10. 5. 03:11

useEffect 오늘도 어제에 이어서 useEffect의 난관에 부딪혔다. 어제는 단순히 초기 state 값이 null 이어야 하는 줄 알았는데, useEffect가 실행 되기 전, 초기 state 값들이 사진처럼 저장되는 것이었다..!! 따라서 useEffect 안에서 한 state 값을 동적으로 변하게 하고 싶으면 의존성 배열에 state값을 넣어줘야 한다. 오늘로 나는 겉핥기식으로 공부하고 있던걸 깨닫고 프로젝트 끝나면 클로저, useEffect, virtual DOM, 고차 함수부터 공부해야겠다 ,,, stackLists는 더미 데이터. get 요청받은 데이터들을 map으로 순회시키고 더미 데이터의 stack 값을 포함하면 빼버린다. 이거 구현하는데 정말 한참 걸렸다 ㅠㅠ 얄팍한 useEffec..

article thumbnail
[Devlog] axios delete
Devlog 2022. 10. 4. 03:24

axios delete 오늘은 axios 에서 delete 요청에서 애를 먹었다 후우 .. 전에 쓸 때는 body를 안 넣어서 금방 됐었는데 이번에 body를 넣어서 delete 요청을 보냈는데 안돼서 한참을 헤맸다. 결론은 delete에는 원래 body넣는 양식이 없는 모양이다. 따라서 header랑 같이 묶어서 보내야한다. 헤더와 같이 보낼 body를 { header: {}, data:{}} 양식으로 보내야 한다. body를 data:{}로 한번 더 묶는게 중요하다. CRUD 할만하다 생각했는데 오늘 애좀 먹었다 후우 ... 개별, 전체 체크 개별 체크와 전체 체크도 엄청 쉬울줄 알았는데 꽤 많이 애를 먹었다. https://velog.io/@realryankim/TIL-React-%EC%B2%B4%..

article thumbnail
[수풀] 프로젝트 막바지...
토이프로젝트/수풀 2022. 10. 3. 03:07

3일에 프로젝트를 마무리 하고 배포를 하기로 했는데 3일이 몇시간 남지 않았다 ... 마음이 급해서 그런건지 그냥 어려운건지는 모르겠는데 CRUD에서 계속 애를 먹었다. 특히나 애를 많이 먹은 것은 수정 페이지다. 수정 페이지는 작성 페이지의 컴포넌트를 재활용 하는데, 여기서 큰 문제가 발생했다. post 요청하기 위한 데이터의 양식, get 요청으로 받아오는 데이터의 양식, patch 요청으로 요청하는 데이터 양식이 다 다르기 때문이다.. 여기서 CRUD 에러와 씨름하느라 고생 좀 했다. 다행히 수정페이지는 완성 시켰지만 또 다른 문제들이 여기저기서 터져나오고 있다 ㅠㅠ sweatalert2 요 몇일간 새로 넣어본 것은 sweatalert2라는 라이브러리인데, 모달창 만들 시간이 없을 것 같아 찾아보다..

article thumbnail
[수풀] 드롭박스 position : absolute 주기
토이프로젝트/수풀 2022. 9. 30. 01:48

처음에 드롭박스를 넣었을 때는 밑에 있는 요소들이 밀렸었는데 absolute를 적용하니 안 밀리게 적용됐다. 적용하기 까다로울 줄 알고 나중에 하려고 미뤘었는데 너무 거슬려서 바꿔봤는데 굉장히 쉬워서 다행이었다. 겁먹기 전에 일단 부딪혀보는 게 맞는 것 같다. //React 자식 //CSS .Parents{ position: relative; } .Children{ position: absolute; } // relative는 부모요소 absolute는 자식요소 absolute를 원하는 곳에 적용하기 위해선 relative 요소가 필요하고, relative를 기준으로 위치를 조정하면 된다. 따라서 기준을 잡을 곳에 relative를 설정한다. 만약 relative가 없다면 window 객체의 viewpo..

article thumbnail
[수풀] 텍스트 에디터 지옥...
토이프로젝트/수풀 2022. 9. 28. 01:15

텍스트 에디터는 왜 이리 오류가 많을까... 처음으로 텍스트 에디터를 쓸 기회가 생겼고 같은 프로젝트 팀원분이 CKEditor를 쓰셨어서 나도 CKEditor를 써봤다. 처음에 구현하고 바로 잘 뜨길래 더 이상 건드리지 않았었는데, 멘토님의 넣지 못할 기능을 빼라는 조언을 듣고 빼려고 확인하는데.. 밑에 사진처럼 텍스트 에디터가 사라지는 현상이 발생했다. 혹시나 해서 새로고침을 해봤고, 여기서 깨달은 것이 새로고침을 10번 정도 하면 1~2번은 텍스트 에디터가 나오지 않았다. 비동기적으로 바꿔보아도 나의 부족한 실력 탓인지 해결이 되지 않아 다른 에디터를 쓰기로 마음먹었다. 다음으로 써본 것은 react-quill이다. react-quill은 코드도 엄청 간단하고 원하는 기능을 넣고 빼는데도 간편해서 굉..

article thumbnail
React hooks 정리
React 2022. 9. 19. 00:43

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. 매우 편리!! useState useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다. useState는 인자로 초기 state 값을 하나 받는다. import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언 const [count, setCount] = useState(0); return ( You clicked {count} times setCou..

article thumbnail
grid
CSS 2022. 9. 18. 15:41

grid flex는 1차원으로 조정하는 것이라면, grid는 2차원으로 조정하는 레이아웃 시스템. 보통 전체적인 틀을 grid로, 세부적인 틀을 flex로 잡는 게 좋아 보인다. (header, footer, section 등은 grid로, grid로 잡은 틀 속에 디테일은 flex로) grid container - display: grid; 를 적용하는 grid의 전체 영역. grid item - grid container의 자식 요소. grid track - grid의 행 또는 열. grid cell - grid의 한 칸을 가리키는 말. grid item 하나가 들어가 있는 가상의 공간. grid line - grid 셀을 구분하는 선. grid number - grid line의 각 번호. grid..

article thumbnail
display, position, flex
CSS 2022. 9. 18. 00:25

display block - 한 줄에 한 개 상자!! (div, p, h1 태그가 기본적으로 block 형태임) inline-block - 한 줄에 여러 개의 상자!! (button, input, select 태그 등) inline - 상품의 크기만큼!! width, height, margin, padding 등 못 바꿈(span, a, em 태그 등) position 태그를 어떻게 위치시킬지 정의 static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정해 줄 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정 fixed - 스크롤과 상관없이 항 상 문서 최 좌측 상단을 기준으로 좌표를..