들어가며 프론트단을 개발하면서 데이터를 post 해야하는 상황이 항상 생긴다. 이번에는 유저가 파일과 텍스트를 올렸을 때 그 안의 내용을 post 하는 상황이었다. formData를 처음 써보는거라 많은 고민을 했다. 그리고 백앤드 개발자 분에게 전송이 제대로 되었는지 계속 물어봐야해서 좀 미안하기도 했다.. 아무튼, formData로 데이터 post 하는법을 알아보자~! 본문 먼저 폼을 만들어준다. 나는 유저가 설명을 입력하고 파일을 업로드하도록 만들었다. 제출! 여기서 textarea에 받은 value 값과 input을 이용해 올린 파일이 데이터로 전송될 것이다. 처음에는 리액트쿼리를 이용하지 않고 짰다가 리액트 쿼리를 이용하면 좀 더 간편하게 보여진다고 해서 리액트 쿼리를 이용했다. 리액트 쿼리를 ..
개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는..
리액트로 투두리스트(todoList)를 구현하고 있던 도중 이런 오류를 만났다. 폼을 제출할 때 콘솔창에 이런 오류가 뜨기 시작했다.. 뭐가 문제인지 구글링해봤는데 form 안에 버튼이 2개가 존재하면 이런 오류가 뜰 수 있다고 한다. 내가 쓴 코드는 이러하다. { onEdit(index); }} > setNewTodo(e.target.value)} /> 제출 setEdited(false)} > 취소 버튼이 2개인데 버튼마다 타입을 명시해줘야 한다고 해서 각 버튼마다 타입을 명시해줬다. 제출 setEdited(false)} > 취소 근데도 오류가 뜸.. 그래서 다른 방법을 찾아야 했다. 나머지 방법을 스택오버플로우에서 찾았는데 e.preventDefault()를 사용해야 한다고 나와있었다. 그러면 저 코..
프로젝트를 CRA를 이용해 만드려고 설치를 하던 중 오류를 발견했다. 두번이나 시도했는데 계속 실패해서 구글에 이유를 찾아봤다. 뭔가 node 버전이 맞지 않아서 그런 것 같았다. 오류를 발견했을 때 다른 분은 node 버전이 낮아서 이런 오류가 발생했는데 나는 저번에 yarn을 설치하면서 버전이 너무 높았던 것 같다. node 버전을 18.14.0으로 설치해주니까 CRA 설치가 정상적으로 작동했다. 이렇게 명령어로 설치를 해준 후 확인을 해보면 제대로 바뀌어 있는 것을 볼 수 있다. 나는 원래 노드 버전이 20.3.0이었는데 lts에 맞게 버전을 내려줬다. 다시 재 설치하면 정상적으로 작동하는 것을 볼 수 있다!
내일배움카드를 통해 리액트 리덕스 강의 마지막 주차다. 마지막 주차 강의에서는 성능개선을 위해 어플리케이션을 만들었다. 성능을 체크할 때 구글에 프로파일러와 하이라이트를 통해 성능을 체크할 수 있었다. 이것은 구글 확장프로그램이어서 깔고 쓸 수 있다! 프로파일러와 하이라이트를 사용하면 내가 입력할 때마다 반짝이는 것을 볼 수 있다. 이 부분은 하이라이트를 체크해야 볼 수 있는 부분이다. A, B 컴포넌트를 각각 만들 때 A컴포넌트는 한 번에 만들었고 B는 쪼개서 만들었다. 쪼개서 만들었을 때 성능이 더 좋지않을까? 싶지만 그것도 아니다. 오히려 불필요한 곳에서 리렌더링이 일어나 좋지 않을 수 있다. 따라서 React.memo를 이용해 성능을 최적화 시킬 수 있다. React.memo로 래핑될 때 리액트는..
어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다! 새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다. 이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로 옮겼다. 처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서 board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다. 코드는 이런식으로 다시 짰다. 좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다. 처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다. 나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다..
드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다. 선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다! 초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다. 리액트로 조그마한 어플리케이션 하나를 만들었다. 원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다. 하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다. 일단 이런식으로 클래스로 기본틀을 짜줬다. constructor안에 super와 state가 바뀔 대상을 지정해준다. 이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다. 칸 ..
오늘도 내일배움카드를 통해 수강한 리액트 & 리덕스 강의 5주차 후기를 써보려고 한다. 기간이 얼마 남지 않아서.. 후딱 듣고 빨리 후기를 남겨야하는데 이것저것 할게 너무 많아서 계속 미뤄졌다. 그래서 그냥 자바스크립트 부분을 다 듣고 쓰는게 좋을 것 같아서 자바스크립트 까지 모두 들었다! 이번 강의를 들으면서 좋았던 점은 npm에 익숙하지 않은 사람들에게 좋은 강의가 되었을 것 같다. 개발을 처음 시작할 때 환경설정하는게 어찌보면 제일 힘들고.. 영어가 많아서 어지럽다. 그냥 어찌저찌 npm을 깔고 개발환경을 구축했었는데 이번 강의를 통해서 npm과 nvm의 차이점에 대해서도 정확히 알 수 있었다. 그리고 npm버전에 대해서 자세히 알 수 있었다. 그냥 숫자면 버전인가보다~ 하고있었는데 프로젝트를 배포..
요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다! 나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다. css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다. 오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다. 오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데 자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다..... 그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음) 또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것..
이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲 이번엔 CSS 속성에 관한 글을 작성하려고 한다! 나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다. flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다! 처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다. 개발은.. 하면 할수록 느는(?) 과정인 것 같다. 그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다. 개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다. 예를들어 이런 코드가 있다. p:not(.classy) { color: red; } body :not(p) { color: gr..
