TIL 66

230809) Array.prototype.map() expects a value to be returned at the end of arrow function 문제 해결

{data?.map((post) => { if (post?.uid === user?.uid) { return ( { showPostHandler(post); }} > {post?.userConcern} { deletePostHandler(post.id); }} > 삭제 ); } })} 해당 코드에서 지속적으로 Array.prototype.map() expects a value to be returned at the end of arrow function라는 경고문이 발생하였다. '경고'이기에 잘 돌아가긴 하지만 Warning 없이 깔끔한 방법이 좋기 때문에 해결방법을 찾아냈다. 결론적으로 해당 문제는 아주 간단하게 해결 가능하다 {data?.map((post) => { if (post?.uid === u..

TIL 2023.08.09

230807) Recoil 과 Atom

redux 를 대체해서 사용할 수 있는 전역 상태 관리 라이브러리인 'Recoil' 에 대하여 간단하게 알아보자 :) 1. Recoil의 세팅 방식 Recoil의 세팅 방식은 아래와 같다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { RecoilRoot } from "recoil"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 위 코드처럼 최상단에 를 감싸 준다. redux를 사용할 때 최상단에 store을 넣는 것과 비슷하다고..

TIL 2023.08.07

230803) redux에서 reducer를 사용할 때 주의할 점

redux 에서 user라는 이름의 리듀서를 따로 분리하여 파일을 만들어놨는데 계속해서 오류가 떴다. 이런저런 방법을 써보고, 콘솔로 수없이 확인해 봤지만 큰 문제가 없어 보였다. 정말 삽질을 1시간 가까이 했는데, 순간적으로 무언가 쎄...한 느낌이 들었다. 그렇다... 사진처럼 현재 redux 폴더를 생성 후 config.js 파일과 posts/user라고 하는 두 가지의 리듀서를 각자 파일을 나눠 따로 생성해 놨는데, user.js를 만들기만 해 놓고 config 파일에 따로 reducer라고 명시를 해 주지 않았던 것이다 ... ! config.js에 user.js 를 잘 임포트해 와 준 후 user라는 이름으로 user.reducer를 등록해 주고 나서 쉽게 문제가 해결되었다! 오늘도 잘 해냈다!

TIL 2023.08.04

230802) .env 파일과 .gitignore

.env로 api key등 필요한 환경변수등을 모두 옮겨 저장 해 둔 상태에서, 이를 git에 업로드하게 되면 보안이 매우 취약해진다. 따라서 이를 막기 위해선 github에 .env 파일이 업로드 되지 않도록 해야 되는데 이를 막기 위해서는 .gitignore파일을 이용하는 것이 좋다. .gitignore에 아래와 같은 코드를 추가한다. .env .env.local .env.development.local .env.test.local .env.production.local .env.* .env.* 를 작성하게 되면 .env.[이곳에 들어오는 모든 이름] 이 git에 업로드 되지 않게 된다. 따라서 .env 파일을 따로 작성하였고, 이를 git에 업로드 해야 될 때는 .gitignore파일을 필수로 만들..

TIL 2023.08.02

230801) jsx와 삼항연산자

jsx에서는 if else문이 사용 불가능하다. 따라서 if else문을 삼항연산자로 변경하여 사용하는 것을 권장하는데, 이 과정에서 한 조건에 여러 피연산자를 사용하려니 지속해서 오류가 발생했다. 해당 에러를 해결해 보려고 gpt에게도 5번 넘게 질문해 보았고, 검색을 하여 많은 블로그를 참고하였지만 결론적으로 나에게 맞는 해답은 없었다. 1. 삼항연산자를 if else로 변경할 것 -> 앞서 말했듯 jsx 환경에서는 if else문을 사용하기 어렵다. 2. 익명함수를 사용할 것 -> 이것으로 해결이 되긴 했으나, 정확한 해결방법이라 보기는 어려울 것 같아 다른 방법을 찾고자 하였다. 3. 피연산자들을 소괄호()로 묶을 것 -> 이론대로라면 되어야 할 것인데, 되지 않았다. 4. 괄호 안 피연산자들의 ..

TIL 2023.08.01