일단 다음과 같은 과정을 통해 해당 댓글의 작성자일 때만 수정하기 버튼과 삭제하기 버튼이 보이게 만들었다.

1. postId를 통해 해당 게시글에 작성된 댓글을 조회하기 위해 서버에 GET 요청 보냄
2. 이 때 유저의 token을 함께 보냄(Axios instance 활용)
3. 해당 댓글의 작성자인 경우 서버에서 response의 isAuthor 값을 true로 보내줌

그 다음 useState 훅을 이용해 현재 댓글을 수정하는 중인지 나타내는 상태값(isEdit)과 그 상태를 바꿔주는 함수를 만들어주었다.

const [isEdit, setIsEdit] = useState(false);

내가 구현하고 싶었던 모습은 아래와 같았다.

1. 수정하기 버튼을 누르면 isEdit 값이 true로 바뀜
2. 댓글 내용 부분이 댓글을 수정할 수 있는 input으로 변경
3. 수정하기 버튼이 수정완료 버튼으로 변경

수정하기 클릭 시 input 창으로 변경

댓글 내용 부분을 input으로 변경하는 것은 isEdit 값과 삼항 연산자를 사용하여 구현했다. 이 때 input으로 바뀌었을 때 원래 댓글 내용이 value로 남아있도록 localContent로 넣어줬다! (isEdit이 false일 때는 그냥 원래 댓글 내용만 보이도록 props.content로 설정)

  const [localContent, setLocalContent] = useState(props.content); 

// ...생략

<CommentContent>
        {isEdit ? (
          <input
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)}
          />
        ) : (
          props.content
        )}
</CommentContent>

수정하기 클릭 시 버튼 글자 수정완료로 변경

여기에서 isEdit 값이 true 일 때만 수정완료 버튼으로 바뀌도록 하는 과정이 가장 고민이었다. isAuthor 값이 true 일 때만 수정하기 버튼과 삭제하기 버튼이 렌더링 되도록 이미 삼항연산자로 만들어 준 상태였는데 '그럼 삼항 연산자를 중첩해야하나' 고민하던 중, 정말 번뜩 스터디에서 공부했던 이벤트 버블링 개념이 떠올랐다.

✏️ 이벤트 버블링 : 하위 요소의 이벤트가 상위 요소의 이벤트 핸들러에 영향을 주는 현상

<CommentModifyButton onClick={() => setIsEdit(!isEdit)}>
            {isEdit ? (
              <span onClick={() => commentPatchMutation.mutate()}>
                수정완료
              </span>
            ) : (
              <span>수정하기</span>
            )}
</CommentModifyButton>

그래서 위와 같이 isEdit 값을 토글시키는 setIsEdit은 CommentModifyButton 태그에 등록해주고, isEdit 값이 true 일 때만 렌더링되는 수정완료 span 태그에 PATCH 요청을 보내는 mutation 함수를 등록했다.

이렇게 하면 isEdit 값이 true 일 때는 수정완료가 렌더링 되고 그 수정완료를 클릭하면 부모 요소인 CommentModifyButton에도 클릭 이벤트가 전파되기 때문에 자동으로 setIsEdit 함수가 실행된다! 그럼 isEdit 값이 다시 false가 되면서 수정하기 버튼으로 변경되고 input으로 되어있던 UI도 수정된 내용으로 바뀐다.

완성된 기능

      {props.isAuthor && (
        <div className="commentButton">
          <CommentModifyButton onClick={() => setIsEdit(!isEdit)}>
            {isEdit ? (
              <span onClick={() => commentPatchMutation.mutate()}>
                수정완료
              </span>
            ) : (
              <span>수정하기</span>
            )}
          </CommentModifyButton>
          <CommentModifyButton onClick={() => commentDeleteMutation.mutate()}>
            삭제하기
          </CommentModifyButton>
        </div>
      )}

자바스크립트의 이벤트 플로우는 비교적 최근에 알게 된 개념인데 이렇게 스터디에서 이론적으로 공부한 내용을 기능 구현에 직접 적용해보니까 기억에도 훨씬 더 잘 남는다. 고민 많았던 기능 구현에 성공한 기쁨은 덤🥰✨

독서기록 프로젝트에서 워낙 새롭게 알게된 것들이 많아서 임시저장글은 쌓여가고...😂

네이버 검색 API를 이용하려면 네이버 개발자 센터에서 먼저 내 애플리케이션을 등록해야한다. 네이버 책 검색 API 설명서

카카오와 알라딘에서도 도서 검색 OPEN API를 제공하지만 나는 기존에 등록했던 애플리케이션이 있었기 때문에 네이버 책 검색 API를 사용하기로 했다. 설명서의 방법대로 요청 url과 header를 세팅하고 포스트맨에서 성공적으로 응답을 받은 것 까지는 좋았는데.. 브라우저에서 맞닥뜨린 CORS 에러😭(예상은 했지만..)

그래서 https://cors.sh/ 라는 proxy를 거쳐서 요청을 보내니까 이번에는 _request header 혹은 cookie가 너무 크다_는 에러가 떴다.

쿠키를 지워보고, 헤더 설정을 바꿔보고 해봐도 해결은 안되고 시간이 너무 오래 걸려서 카카오나 다른 도서 검색 API를 사용해야 하나, 다른 proxy middleware를 설치해야하나 고민하다가 '어쨌든 포스트맨에서는 문제없이 동작하니까 백엔드 쪽에서 imageRouter를 만들어서 요청을 보내는 코드를 짜보면 어떨까!🤨' 하는 (무모한) 생각이 들었고 한 번 해보자 싶어서 back 디렉토리에서 작업을 했다.

네이버 검색 API 예제에서 Node.js 코드는 request 객체를 이용하는 걸로 나와있었는데 나는 axios로 요청을 보냈다. (var 키워드도 고치고..)

// imageRouter.js
import { Router } from "express";
import axios from "axios";
import { config } from "../config";

export const imageRouter = Router();

function imageSearch(req, res, next) {
  const api_url =
    "https://openapi.naver.com/v1/search/book.json?query=" +
    encodeURI(req.query.query);
  axios
    .get(api_url, {
      headers: {
        "X-Naver-Client-Id": config.naverBook.clientID,
        "X-Naver-Client-Secret": config.naverBook.clientSecret,
      },
    })
    .then((data) => {
      res.send(data.data.items);
    })
    .catch((err) => next(err));
}

imageRouter.get("/", imageSearch);

그리고 config 파일에서 clientID와 clientSecret을 설정해주고, app 파일에서 imageRouter를 등록해주면 백에서는 작업 끝!

그리고 프론트에서는

1. query 값으로 사용자가 검색창에 입력한 검색어를 넣어주고 imageRouter에 해당하는 url로 GET 요청
2. 해당 검색어로 검색된 결과를 화면에 렌더
3. 내가 원하는 책을 클릭하면 해당 item이 갖고있는 image url을 state에 저장
4. 독서 기록 POST 요청을 보낼 때 title(제목), content(내용)과 함께 url 값을 서버에 전달

위와 같은 방법으로 책 이미지 검색 기능을 구현했다!

// imageSearchModal.tsx
type ImageSearchModalProps = {
  setBookImageUrl: Dispatch<SetStateAction<string>>;
  setModalState: Dispatch<SetStateAction<boolean>>;
};

type BookInfo = { [key: string]: string };

const ImageSearchModal = (props: ImageSearchModalProps) => {
  const [bookSearchKeyword, setbookSearchKeyword] = useState("");
  const [bookSearchResult, setbookSearchResult] = useState(Array<BookInfo>);
  const handleImageSearchInputChange = (
    e: React.ChangeEvent<HTMLInputElement>,
  ) => {
    setbookSearchKeyword(e.target.value);
  };

  const handleImageSearchClick = async () => {
    try {
      if (bookSearchKeyword === "") {
        console.log("검색어 없음");
        return;
      }
      const { data } = await axios.get(`/api/image?query=${bookSearchKeyword}`);
      setbookSearchResult([...data]);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <Modal title="이미지 검색하기" setModalState={props.setModalState}>
      <ImgSearchModalWrap>
        <ImgSearchBar>
          <ImgSearchInput
            name="img"
            id="img"
            placeholder="책 제목, 지은이, 키워드로 검색할 수 있습니다."
            value={bookSearchKeyword}
            onChange={handleImageSearchInputChange}
          />
          <MyButton btntype="basic" onClick={handleImageSearchClick}>
            검색
          </MyButton>
        </ImgSearchBar>
        {bookSearchResult.map((item, index) => (
          <ImageSearchResult
            key={index}
            item={item}
            setBookImageUrl={props.setBookImageUrl}
            setModalState={props.setModalState}
          />
        ))}
      </ImgSearchModalWrap>
    </Modal>
  );
};

export default ImageSearchModal;

// imageSearchResult.tsx
type BookItem = {
  item: { [key: string]: string };
  setBookImageUrl: Dispatch<SetStateAction<string>>;
  setModalState: Dispatch<SetStateAction<boolean>>;
};

const ImageSearchResult = ({
  item,
  setBookImageUrl,
  setModalState,
}: BookItem) => {
  const handleSearchResultItemClick = () => {
    setBookImageUrl(item.image);
    setModalState(false);
  };
  return (
    <SearchResultItem onClick={handleSearchResultItemClick}>
      <div>
        <SearchResultBookImg src={item.image} />
      </div>
      <SearchResultItemDetail>
        <SearchResultItemTitle>
          {item.author},{item.title}
        </SearchResultItemTitle>
        <SearchResultItemDescription>
          {item.description}
        </SearchResultItemDescription>
      </SearchResultItemDetail>
    </SearchResultItem>
  );
};

export default ImageSearchResult;

그래서 완성된 결과!

의문이 남는 점 + 아쉬운 점을 적어보자면,

• 검색 모달창 상태를 바꾸는 setIsImageSearchModalOpen 함수와 이미지 url 상태값 받아서 바꾸는 setBookImageUrl 함수를 NewContent 컴포넌트에서 ImageSearchModal 컴포넌트를 거쳐 ImageSearchResult 컴포넌트까지 prop으로 내려주고 있는데 이것도 props drilling이라고 할 수 있는지?
• 다른 백엔드 router에서는 util에 있는 asyncHandler를 사용해서 요청과 에러처리를 해주는데 나는 그냥 then과 catch만 사용해서.. 이건 사용자가 검색어에 빈 값을 입력했을 때는 어떻게 보여줘야 할지 생각하다가 발견한 문제라서 다른 코드들을 참고해서 에러 처리를 수정해줘야 할 것 같다.

여담으로는, 아주 예전에 네이버 영화 검색 기능을 구현하다가 너무 어려워서 결국 포기했던 기억이 있는데 이번에 이렇게 책 api를 사용해서 요청을 보내고 응답을 받고 그걸 활용해서 기능을 구현할 수 있었다는 거 자체가 너무 감격이었다..😭 다음에는 책 말고 뉴스나 지역 관련된 api도 꼭 활용해보고 싶다!💪

1. AWS S3에 이미지를 업로드
2. 이미지 url을 클라이언트로 일단 응답
3. 클라이언트에서는 그 경로와 함께 다른 텍스트 정보들을 서버에 전달
4. 서버에서 상품 DB에 정보를 저장

위와 같은 방법으로 최종 정리되었다.

여러 서칭을 통해 AWS S3 버킷 세팅을 마쳤고 multer-s3를 이용해 파일을 업로드 하기 위한 imageRouter의 코드는 아래와 같이 작성했다.

import dotenv from "dotenv";
import AWS from "aws-sdk";
import multerS3 from "multer-s3";
import multer from "multer";
import { Router } from "express";

// loads .env file contents into process.env
dotenv.config();

const imageRouter = Router();

// aws s3 설정
AWS.config.update({
  region: process.env.AWS_REGION,
  apiVersion: "latest",
  credentials: {
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  },
});

const s3 = new AWS.S3();

// multer를 이용해 이미지를 업로드하는 함수
const imageUpload = multer({
  storage: multerS3({
    //저장 공간 정보
    s3: s3,
    bucket: "decouvrir",
    key: function (req, file, cb) {
      // 확장자가 올바른지 확인
      const extention = file.mimetype.split("/")[1];
      if (!["png", "jpg", "jpeg", "gif", "bmp"].includes(extention)) {
        return cb(new Error("이미지 파일을 등록해주세요."));
      }
      // 파일 이름 지정
      cb(null, `${Date.now()}_${file.originalname}`);
    },
  }),
  acl: "public-read",
});

// post 요청이 들어왔을 때
imageRouter.post(
  "/upload",
  // 하나의 이미지 파일 업로드
  imageUpload.single("image"),
  async (req, res, next) => {
    try {
      res.json({
        // 이미지 경로를 res로 보내줌
        message: "이미지 저장 성공",
        imagePath: req.file.location,
      });
    } catch (err) {
      next(err);
    }
  }
);

export { imageRouter, imageUpload };

이렇게 작성을 하고 postman을 통한 테스트는 완료되었는데, 프론트에서 API 요청을 보내면 계속 오류가 나는 것이다ㅠㅠ 함참동안 뭐가 잘못되었을까 고민했는데, 결국 문제점을 찾아냈다.

function addProduct(e) {
  e.preventDefault();
  const productName = productNameInput.value;
  const content = contentInput.value;
  const price = priceInput.value;
  const category = categoryInput.value;

  const formData = new FormData();
  formData.append("image", photoFile.files[0]); // 파일 첨부

  fetch(`/api/images/upload`, {
    method: "POST",
    body: JSON.stringify(formData), 
  })
    .then((response) => response.json())
    .then((data) => {
      image = data.imagePath;
      const newProductData = {
        painterEmail,
        painterName,
        productName,
        price,
        content,
        category,
        categoryId,
        image,
      };

      Api.post(`/api/product`, newProductData);
      alert("상품 등록이 완료되었습니다!");
    });

}

postBtn.addEventListener("click", addProduct);

imageRouter로 POST 요청을 보낼 때 body를 그냥 formData로 했어야 했는데 JSON.stringify(formData)로 보내고 있었던 것이 원인이었다😭 내가 생성해준 formData 객체를 그냥 보내줬으면 됐는데 그걸 stringify 했으니 제대로 업로드되지 않았던 것.. 형식이 다른 데이터를 어떻게 보내야 하는지에 대한 고민이 부족했던 것이 느껴져서 많이 반성했다. (이렇게 간단한 걸 며칠동안 붙잡고 있었다니..)

더 알아보니 요청 헤더에 담기는 정보인 Content-type 중 multipart 자체가 폼에 이미지와 같은 파일과 제목, 설명과 같은 텍스트처럼 서로 다른 형식의 데이터가 함께 서버로 전달되어야 할 때 사용할 수 있는 타입이기 때문에 내가 했던 것 처럼 api 요청을 두 번 보낼 필요 없이 formData에 모든 정보를 담아서 한 번에 전달할 수 있다고 한다. 일단 S3에 이미지를 올리는 건 생각하지 말고, formData를 활용하는 방법을 더 익혀야겠다고 생각했다. (이미지가 다뤄지지 않는 웹서비스는 드물기 때문에 더더욱!💪)

참고 자료

• multer-s3 관련 포스팅
• multipart/form-data 관련 포스팅

엘리스를 만나기 전의 나,

2022년 1월, 퇴사를 한 나는 기로에 서있었다. 외고, 대학, 첫 취업까지 약 10년 동안 준비하고 걸어왔던 국제회의 기획사로서의 길을 계속 갈 것인지, 아니면 내가 잘할 수 있을지 없을지도 모르지만 정말 도전해보고 싶었던 개발 공부를 시작해볼 것인지. 사실 한 번 하고싶다고 마음 먹으면 발을 조금이라도 담가보기는 해야 하는 성격으로 인해 빠르게 개발 공부를 선택할 수 있었다.

작년 중순까지는 막연히 프론트엔드에 관심을 두면서 독학을 해나갔는데, 혼자 공부하는 시간이 길어지자 문득 내가 이걸 잘 하고 있는 건지, 실전에서는 어느정도의 실력을 필요로 하는지 의문이 생겼다. 그리고 이 질문들에 답해줄 수 있는 사람이 주위에 없다는 것에 따른 막막함과 답답함이 함께 찾아왔고, 그때부터 국비 교육을 찾아보기 시작해서 최종적으로는 엘리스 SW 엔지니어 트랙 3기에 합격!

엘리스 SW 엔지니어 트랙 3기 지원 & 합격 후기

꼭 지켰던 한 가지 규칙

수업을 듣기 시작하고 제일 처음 든 생각은 ‘4개월이 미친듯이 빨리 가겠구나’였다.

매일 이렇게 쫓기듯 공부하다보면 나중에는 분명 내가 뭘 했는지 기억도 나지 않을 것이라는 불길한 확신에 첫 실시간 수업 때부터 그 날은 무엇에 대해서 공부했는지, 그리고 공부를 하면서 든 생각들을 매일매일 기록해나갔다.

과거에 남겨놓은 기록이 얼마나 큰 힘으로 돌아오는지 알기 때문에 이것만큼은 절대 놓치지 않고 꼭 하려고 노력했고 (너무 힘들 때는 감정 쓰레기통이라고 생각하면서 쓰기도 했지만😅) 시간이 지날수록 ‘이 때는 아무것도 몰라서 진짜 힘들었는데 그래도 지금은 조금이나마 알고있네?’라고 생각하는 순간이 점점 많아졌다.

엘리스에서 깨달은 사실

나는 정말 팀프로젝트에 최적화 된 인간이었다..

그냥 팀에 묶이지 않고 혼자 뭔가를 하는 것과는 차원이 다른 성과가 나오는 걸 보고 그만큼 내가 팀에 느끼는 책임감과, 팀원들에게서 받는 에너지가 엄청나게 크다는 것을 새롭게 알았다.

처음 엘리스 트랙에 지원했을 때도 팀프로젝트와 스터디 활동에 기대가 많았고, 두 번의 스터디와 프로젝트 기간동안 내 인생에서 이만큼 뭔가에 열정을 쏟은 적이 있었나 싶을 정도로 최선을 다했었지만 마지막 수료식에서 받은 리더십상으로 그 노력을 확인받은 것 같아서 더더욱 뿌듯했다😁

엘리스에 있는 동안,

좋은 사람들을 정말 많이 만났다!

비전곰 스터디원들은 엘리스 내내 존재만으로도 힘이 되는 사람들이었고 1차 프로젝트, 2차 프로젝트 하면서 정말 많이 친해진 우리 플젝 팀원들도 너무 소중한 인연들ㅠㅠ💕

또 모르는 게 있을 때 물어보면 바로 답해주던 상냥한 레이서들, 얘기는 많이 나누지 못했어도 낙낙에서 항상 만나던 다른 레이서들, 그리고 코치님들과 매니저님들까지!

이렇게 다양한 사람들과 함께하며 배우고 공부할 수 있었다는 것이 내게는 더없이 커다란 행운이었다.

엘리스를 마치며

처음 개발 공부를 시작했을 때와는 많이 달라진 나 자신의 모습을 보면서 이제는 개발자로 일하는 나의 미래를 구체적으로 상상할 수 있게 되었다. 끝이나 이별에 취약한 인간이지만, 앞으로의 여정을 함께 할 동료들이 있다는 것이 너무나 든든하고, 지금은 걱정이나 불안보다 앞으로가 기대되는 마음이 더 크다!💜 현재의 목표는 개인으로서든, 팀으로서든 얼른 새로운 프로젝트를 시작하는 것ㅎㅎㅎ

엘리스에서 보낸 4개월의 희로애락을 기억하면서 이제 취업길..을 걸어야지..!

낙낙 라운지에도 찾아온 크리스마스🎄

2차 프로젝트

엘리스 SW 엔지니어 트랙 3기의 2차 프로젝트(이자 마지막 프로젝트)가 시작되었다! 이번에는 1차 프로젝트 때 프론트엔드와 백엔드를 둘 다 겪어본 경험을 바탕으로 팀장이 되었다ㅎㅎ

시작 단계에서 프로젝트 세팅할 때 eslint나 prettier도 거의 처음 다뤄보고 프론트에서 사용할 tailwind와 styled-components가 결합된 tailwind-styled-components 라이브러리도 제대로 작동하는지 확인하고 올리느라 세팅이 너무 오래 걸려서 팀원들한테도 미안한 마음이었는데.. 이것 말고도 여러가지로 인해 사흘 정도는 팀 안팎으로 좀 우당탕탕 했던 것 같다.

본격적으로 작업을 시작한 지금은 나도 내 역할을 잘 해내야겠지만 팀원들이 많이 얻어갔으면 좋겠는 마음이 크다. 하고 싶다고 말한 것들도 다 해보고, 아쉬움 없이! 마지막이니까!

처음에는 의욕에 불타서 "지금까지 배운 것들 다 써야지!" 라고 생각했는데 마음처럼, 생각처럼 되지 않는 부분도 분명히 있을테니 속도를 낼 때는 내더라도 무리한 욕심 때문에 멘탈 망가지는 일은 없길..!(사실 이미 너덜너덜인 멘탈

이제 프로젝트만 끝나면 엘리스 트랙도 끝이라 이력서와 포폴 준비에 대한 부담이 슬슬 몰려오는데.. (부담 느낀지는 좀 됐지만^^) 잘 할 수 있을까😭

1차 프로젝트가 끝나고 리액트를 공부하는 기간에 1차 스터디부터 함께해온 팀원들과 2차 스터디로 리액트 토이 프로젝트를 진행했다. 리액트가 낯선 팀원들이 많아서 첫 주에는 수업을 따라가면서 기본 개념을 먼저 익히고 11주차부터 본격적으로 프로젝트에 들어갔다. 개발자로 진로를 바꾸면서 만들어보고 싶다고 생각만 했던 독서 기록 웹서비스로 주제가 정해진 것도 기쁜데, 그걸 또 좋아하는 동료들과 함께 만들 수 있다니 이건.. 재미없을 수가 없지...😆

나는 새 독서 기록 생성 페이지와 독서 기록 상세 페이지, 그리고 댓글 기능을 담당했는데 일단 가장 어려웠던 문제는 _'로그인 한 유저가 해당 글의 작성자임을 어떻게 판단할 것인가?'_였다. 자신이 쓴 작성글에서만 수정하기와 삭제하기 버튼이 보이도록 하고 싶어서 상세 페이지에 들어갔을 때 현재 로그인 한 유저의 정보와 해당 게시글의 작성자 정보를 비교하는 로직을 넣어서 구현하려고 했는데 그러다보니 state가 많아지기도 하고 뭔가 더 좋은 방법이 있을 것 같은데 싶었던 기억이 남아있다. (무한 렌더링의 늪에서 헤어나오는 데에 이틀 걸린 건 안비밀..) 이번 프로젝트를 계기로 Redux를 얼른 배워야겠다고 다짐했(지만 너무 어렵)다..!

물론 '나는 왜 이렇게밖에 못할까', '진작 열심히 좀 할 걸' 후회하는 자책 시간도 빼놓을 수 없었지만(^^) 어려울 때 물어보면 언제나처럼 달려와서 같이 찾아봐주고 고민해주는 팀원들 덕분에 이번에 정말 짧은 기간 안에 생각보다 더 완성도 높은 페이지를 만들 수 있었다! 이번 발표도 내가 맡았는데 못해도 된다고, 떨지 말라고 응원 해주고 발표 마치고 모여서 이야기한 것들도 정말 평생 못잊을 것 같다. 진짜 제 5년치 행운 이 팀원들 만나려고 다 썼어요 엉엉..😭

지금도 정말 많은 고민을 쏟은 프로젝트지만 더 퀄리티를 높이기 위해서 남은 기간동안 또 열심히 배워보기로!

✏️ 구현한 기능

• useState를 활용해서 작성자에게만 수정, 삭제 버튼 보이도록 구현
• axios 사용해서 DB에 있는 독서 기록 불러오고 렌더링하기
• 새로운 독서 기록 생성하기
• 새로운 댓글 생성하기

• ✏️ 구현할 기능*
• 게시글 수정, 삭제
• 댓글 작성자가 자신의 댓글 수정, 삭제
• 책 API를 사용한 이미지 검색

멈출 수 없는 토끼🐰팀의 Découvrir

1차 프로젝트 그 후...

1차 프로젝트가 벌써 끝났다니😢 기억에 남는 일도 많고 팀원 모두가 정말 고생을 많이 한 첫 팀프로젝트였다. 중간에 이슈가 생겨서 내가 프론트엔드에서 백엔드 포지션으로 옮기게 되었는데, 팀에 도움이 될 수 있을까 하는 걱정이 들 때마다 옆에서 할 수 있다고 격려해주고 뭐든 문제가 생기면 함께 해결해나갈 수 있는 팀원들이 있다는 사실을 되뇌이면서 달려나간 2주였다.
물론 이론에서 배운 것들을 직접 사용해보면서 더 공부하고 배울 수 있었던 점도 좋았지만 함께했던 팀원들이 없었다면 절대 완성할 수 없었던 프로젝트였기에.. 팀원들의 에너지를 받아서 더 가파르게 성장할 수 있었던 시간이었다고 생각한다!ㅎㅎ 프로젝트는 끝났지만 아직 부족한 점도, 구현하고 싶은 기능도 많이 남아있어서 앞으로도 팀원들과 시간이 될 때마다 서비스를 더 발전시켜 나가보고 싶다!🐰

잘한 점 & 개선할 점

1차 프로젝트 무사히 마무리 한 건 정말 잘했다!👏 플젝 끝났다고 바로 주말에 냅다 자버린 건 안 잘했다..!😔

목표

1차 플젝 후기를 길게 썼지만 사실 지금 수업 진도는 리액트를 바쁘게 달리고 있다..ㅎ 이번에 프로젝트로 만난 팀원과 앞으로도 성수낙낙에 자주 가서 공부 하기로 해서(집에서 공부 못하는 새럼들😞) 무사히 낙낙 출첵하기를 목표로..!✅

*React에서 배열은 게시글, 피드, 리스트를 다루는 데에 많이 사용됨

✏️ 일기 리스트 컴포넌트 만들기 파일 : DiaryList.js

const DiaryList = () => {
    return <div className="DiaryList">
        <h2>일기 리스트</h2>
    </div>
}

export default DiaryList;

• 컴포넌트 추가 후에 App.js에서 import 해오는 거 잊지 말기!

✏️** 임시 배열로 리스트 렌더링 하는 것 먼저 연습하기** 목표 : 일기 목록 배열을 DiaryList 컴포넌트에 prop으로 전달해서 그 데이터를 렌더링

• 일기 dummyList 만들어주기

  // App.js
  import './App.css';
  import DiaryEditor from './DiaryEditor';
  import DiaryList from './DiaryList';
  

const dummyList = [ { id:1, author:"hailee", content:"hi", emotion:5, created_date: new Date().getTime(), // 현재 시간을 ms로 반환 }, ... // 똑같은 구조의 일기 객체 3개 만들어줌 ]

function App() { return (

export default App

- DiaryList 컴포넌트에서 prop으로 받아주고 확인하기
```javascript
// DiaryList.js
const DiaryList = ({diaryList}) => {
    console.log(diaryList)
    return <div className="DiaryList">
        <h2>일기 리스트</h2>
    </div>
}

• 콘솔에 출력된 diaryList는 우리가 <DiaryList diaryList={dummyList}/>로 넘겨준 일기가 담긴 배열

*아래처럼 prop을 그대로 출력했을 때는 diaryList라는 key에 배열을 vaule로 갖는 객체가 출력됨(prop 그 자체!)

const DiaryList = (prop) => {
console.log(prop)
}

📌 map으로 배열의 각 요소의 속성들 꺼내서 <div></div> 안에 담고 화면에 그려주기

// DiaryList.js
const DiaryList = ({diaryList}) => {
    return <div className="DiaryList">
        <h2>일기 리스트</h2>
        <h4>{diaryList.length}개의 일기가 있습니다.</h4>
        <div>
            {diaryList.map((item)=>{
                return <div key={item.id}>
                <div>작성자 : {item.author}</div>
                <div>내용 : {item.content}</div>
                <div>감정 : {item.emotion}</div>
                <div>작성시간(ms) : {item.created_date}</div>
                </div>
            }) }
        </div>
    </div>
}

• 각 일기 요소의 최상위 태그인 div에 <div key={item.id}>로 고유한 key값을 만들어줌(Each child should have a unique key prop 에러 해결)

  *요소마다 고유한 id가 없다면 배열의 map의 콜백함수의 두 번째 인자인 배열의 index를 unique key값으로 사용해도 될 것 같지만, 나중에 일기 요소를 삭제, 수정, 추가해서 index의 순서가 바뀌었을 때 문제가 될 수 있음. => 지양하기!

❓만약에 DiaryList 컴포넌트에 prop이 제대로 전달되지 않았다면? (diaryList={undefined}라면?)

// DiaryList.js
DiaryList.defaultProps={
    diaryList: [],
}

- `defaultProps` 를 이용해서 혹시나 컴포넌트에 데이터가 전달되지 않았을 때 사용할 기본값을 설정해주면 에러를 방지할 수 있다!

---
✏️** 일기 리스트에 렌더링되는 각각의 일기 아이템 별도의 파일로 분리시켜주기**
파일 : DiaryItem.js
```javascript
const DiaryItem = ({id, author, content, emotion, created_date}) => {
    return <div className="DiaryItem">
    <div className="info">
        <span>작성자 : {author} | 감정점수 : {emotion}</span>
        <br />
        <span className="date">
            {new Date(created_date).toLocaleString()}
        </span>
    </div>
    <div className="content">{content}</div>
    </div>
}

export default DiaryItem;

파일 : DiaryList.js

import DiaryItem from './DiaryItem.js'

const DiaryList = ({diaryList}) => {
    return <div className="DiaryList">
        <h2>일기 리스트</h2>
        <h4>{diaryList.length}개의 일기가 있습니다.</h4>
        <div>
            {diaryList.map((item)=>{
               return <DiaryItem key={item.id} {...item}/>
            }) }
        </div>
    </div>
}

DiaryList.defaultProps={
    diaryList: [],
}
export default DiaryList;

{...item}은 diaryList 배열의 각 요소인 객체({id:1, author:"hailee", content:"hi",..})를 펼쳐서 DiaryItem에 prop으로 전달해준 것! => DiaryItem이 DiaryList.map에 의해 호출될 때 마다 각각의 요소가 갖는 속성들이 prop으로 넘어가고 그에 맞는 DiaryItem이 렌더링 됨

Studying...

https://inf.run/qAuJ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood

천사 스터디팀원 분이 나눠주신 자양강장제👼

잘한 점

프로젝트 하면서 모르는 부분 제대로 공부한 거! 이번 1차 프로젝트는 엘리스에서 기본 코드를 제공해주었는데 로그인 기능을 구현하는 코드가 하나도 이해가 안돼서(jwt가 뭐죠..😢) 관련된 내용만 주말 내내 붙잡고 공부했다. 막상 공부할 때는 지금 급한 일들도 많은데 내가 이걸 보고있는 게 맞나 싶다가도 마침내 스켈레톤 코드가 이해 됐을 때는 진짜 감격 그 자체.. 어떻게 동작하는지 한 번 익히고 나니까 내가 원하는 방향으로 바꿔보기도 하고, 좀 더 효율적인 방법은 없을까 고민해보기도 하면서 정말 시간 가는 줄 모르고 코드 생각만 했던 것 같다. 아직 구현해야 할 것도, 해결해야 할 것도 많이 남아있지만 그래도 왠지 잘 끝낼 수 있을 것 같은 느낌..!😊

개선할 점

트러블 슈팅 기록 하기. 사실 프로젝트 하다보면 시간에 쫓겨서 에러가 생겼을 때 얼른 해결하고 다음 작업을 하는 경우가 훨씬 많긴 하지만..🥲 그래도 구글에 검색해보기 전에 터미널도 좀 더 꼼꼼히 보고 어떤 것 때문에 오류가 생겼는지 한 번 더 생각해보는 습관을 들여야 나중에도 어떻게 해결했는지 기억에 더 잘 남을 것 같다.

목표

1차 프로젝트 무사히 완성하기!

비전공자 && 엔젤들만 모인 스터디🎶

잘한 점

지난 2주 동안은 나름 이런저런 이벤트들이 많았다! 타입스크립트와 본격 백엔드 강의가 시작한 것도 그렇지만 1차 스터디 결과물 발표도 있었고, 취업지원 소개와 직무 특강도 들을 겸 성수에 있는 엘리스 훈련장도 처음으로 가봤다. 그 중에서도 가장 기억에 남는 건 스터디 발표😊 발표라는 걸 해본지가 어언..(먼산) 고작 3분 말하는 것도 혼자 온갖 시뮬레이션 돌려보면서 엄청 긴장했는데 팀원들의 응원이 너무너무너무 큰 힘이 되었다. 발표 무사히 끝낸 것이 이번 달 가장 잘한 일이라는 생각✨

개선할 점

이번에 취업지원 소개 때 엘리스 매니저님들을 처음으로 뵈었는데 "경력직으로 들어가는 거 아니니까 걱정할 시간에 하나라도 더 보고 공부하세요!" 라는 말에 아주 뼈를 맞아버렸다..🥲 미래 걱정은 조금만 덜 하고 당장 눈앞에 있는 일들을 차근차근 해나가야지. (강의 진도 미루지 말고 듣기.. 라던가...)

목표

그날 진도율은 그날 채우기..!

낙낙.. 너무 좋아여... 💜

따수운 튜터님의 응원..

잘한 점

포기하지 않은 거..?ㅎㅎ 사실 4주차에 본격적으로 비동기 관련 내용을 배우기 시작하면서 실습 문제를 건드리지도 못하는 사태가 발생했고 우울에 빠지기 직전이었는데 튜터님 메세지에 진짜 눈물이 차올라서 고갤 들어....ㅠㅠㅠㅠ 이거 보고 '나만 어렵고 힘든 게 아니었구나' 하고 많이 위로받았다. 지금까지는 모르는 개념이 나왔을 때 완벽하게 숙지하고 넘어가지 않으면 불안해서 계속 붙잡고 있었는데 이제 '익숙해진다'에 더 초점을 맞춰서 공부할 수 있을 것 같다!(잘한 점이 아니라 반성같은데..?)

개선할 점

체력 관리.. 체력 관리...! 잠을 좀 자!😞

목표

책을 읽자

이제 대망의 백엔드..!🤯

반복 가능한 객체를 순회한다.

• Iterable한 객체란 반복 가능한 객체를 의미
• Iterable한 객체는 for...of, spread 연산자, 구조분해 할당 등을 사용할 수 있음 e.g. Array, String, NodeList, Map, Set

const array = [1, 2, 3];
for (const item of array) {
    console.log(item);
} 
// 1 2 3 이 한줄씩 출력됨

for...of 반복문의 장점
- 어떤 데이터를 가져오려는지 명시적으로 나타낼 수 있어서 단순 for문 보다 가독성이 좋음
- array의 length에 대한 정보 없이 배열만으로 순회가 가능

---

✍ 어떤 객체가 iterable한 객체인걸 정확히 어떻게 알 수 있냐? 
⇒ **`Symbol.iterator`**를 먼저 알아야 한다.

#### `Symbol.iterator` 확인하기
1. `in` 연산자 사용
```javascript
const array = [1, 2, 3];
console.log(Symbol.iterator in array); 
// array의 속성 중에서 Symbol.iterator라는 것이 있냐
// true

2. array.values() 사용

   const arrIterator= array.values(); 
   console.log(arrIterator);
   // [Array Iterator] {} => Array Iterator 라는 객체를 반환함

3. array의 property로 찾아보기

   const arrIterator = array[Symbol.iterator](); 
   // const length = array['length']; 이렇게 array의 property를 찾는거랑 같은 형식
   // array[Symbol.iterator]는 function이기 때문에 ()로 실행시켜줌
   console.log(arrIterator); 
   // [Array Iterator] {} => Array Iterator 라는 객체를 반환함

*결론 : Symbol.iterator는 array에 있는 속성 중 하나이다. *

콘솔에서 확인해보니 Array Iterator 객체에는 next라는 메소드가 있음

"그러면 arrIterator는 어쨌든 객체이고 그 객체가 next라는 메소드를 갖고 있다면 arrIterator.next();로 실행할 수 있다는거지?"

✍ 실행해보자!

console.log(arrIterator.next()); // { value: 1, done: false }
console.log(arrIterator.next()); // { value: 2, done: false }
console.log(arrIterator.next()); // { value: 3, done: false }
console.log(arrIterator.next()); // { value: undefined, done: true }
// value와 done이라는 프로퍼티를 가진 object가 반환됨

• value : 최근 순회한 collection의 요소
• done : 반복할 요소가 더 이상 없는지? 반복이 다 끝났는지?

반복 가능한 객체에서 for… of를 쓰면 이 Iterator를 찾아내서 next 메소드를 계속 호출한다고 보면 된다. 그렇게 계속 실행하면서 value의 값을 받아서 출력해주다가 done 속성값이 true가 되면 break로 빠져나온다.

동작 원리를 풀어서 보면 아래와 같은 식으로 된다고 생각하면 된다.

while (true) {
    const item = iterator.next();
    if (item.done) break;
    console.log(item.value);
}

📌 iterable한 객체란 이 Symbol.iterator라는 속성을 갖고 있어서 반복이 가능한 객체를 뜻한다. => 다시 말해, next method에서 { value : , done : }(Iterator 객체)을 return하는 Symbol.iterator를 갖고 있다면 for… of나 spread 연산자, 구조분해할당 등을 사용할 수 있다!

📌 values() 메서드는 배열의 각 인덱스에 대한 값을 가지는 새로운 Array Iterator 객체를 반환한다. Array Iterator에는 이미 그 배열에 대한 값들이 next().value 로 들어있다. 따라서 해당 배열을 for…of로 돌릴 수도 있지만 Array Iterator를 for…of로 돌릴 수도 있다. (MDN 설명)

// 확인해보기
const array1 = ['a', 'b', 'c'];
const arrVal = array1.values(); // iterator 반환
for (const value of array1.values()) {
  if (value === arrVal.next().value) {
    console.log('yes');
  } else {
    console.log('no')
  }
  console.log(value);
}

for… in과 for …of의 차이

• for… of는 Symbol.iterator를 갖고 있는 array나 NodeList, Set 등에서만 쓸 수 있다. (iterator의 next().value값을 가져와야하기 때문에) ⇒ 일반 object에서는 사용 못함
• for… in은 object와 array 둘 다에서 쓸 수 있으며 object에서는 key값을 가져오고 array에서는 index값을 가져옴

  const object = { a: 1, b: 2, c: 3 };
  

for (const property in object) { console.log(${property}: ${object[property]}); }

// expected output: // "a: 1" // "b: 2" // "c: 3" ```

내 처참한 노션..

잘한 점

수업 들으면서 다 정리는 못해도 모르는 부분이나 생소한 개념은 메모라도 해놨다가 나중에 꼭 찾아보는 거!(봐야할 메모가 오조오억 개인게 문제이긴 한데) 혼자 천천히 읽어보고 다른 문서도 찾아보면서 정리하고 다시 수업 자료를 보면 완전 잘 이해됨.. 그렇게 복습하다보면 코치님들이 준비하신 수업 자료가 정말 중요한 개념들만 최대한 이해하기 쉽게 꾹꾹 눌러 담은 것들이라는게 느껴진다. (그걸 내가 보자마자 이해를 못하는게 문제이긴 한데) "이건 나중에 배울거예요~"라고 하시는 개념도 그냥 지나쳤다가 그때가서 아예 처음 머리에 넣는 것과 지금 대충이라도 이해해뒀다가 설명을 한 번 더 듣는 것은 천지차이라는 걸 많이 느끼고 있다.

개선할 것

나의.. 멘탈?😂 사실 실습 문제들 풀면서 자괴감을 많이 느꼈는데 그동안 여기에 자바스크립트 공부 내용을 정리해왔다는 것이 어이가 없을 정도로 내가 지금까지 그냥 공부하는 척만 해왔다는 사실을 1분마다 깨달았다..^^^ 내가 온갖 방법을 다 쓰면서 하면 절대 실행 안되는데 코치님이 하신거 보면 코드 두 줄.. 안그래도 공부할 시간 없는데 오타 하나 때문에 30분, 40분 날리면 또 억장 와르르.. 공부라는 게 내가 오늘 10시간 한다고 해서 바로 내일 모든 걸 통달할 수 있는 건 절대 아니라는 걸 알고는 있었지만 그래도 욕심만큼 내 머리가 따라주지 않으니 자꾸 우울해진다. 하지만 뭐 어떡할거야 그냥 믿고 해야지..!

목표

아예 몰랐던 개념 잘 정리해서 벨로그에 포스팅하기!

어.. 할 수 있을 것 같은데? 와 아.. 안될 것 같은데? 의 대환장콜라보의 나날들이지만 앞으로 갈 길이 멀다👊

서류 제출한지 하루밖에 안지났는데 바로 합격 메일 와서 놀랐다!

프리트랙에는 강의 뿐만 아니라 역량 테스트를 위한 연습 문제도 포함되어 있었는데 처음에는 문제도 이해 못하겠고 아예 어떻게 시작해야 할지조차 몰라서 멘탈이 많이 흔들렸다..😢 풀지 못하면 눈에 익히기라도 하자! 하면서 테스트 전날까지 계속 돌려봤음..

역량 테스트는 하루 동안 원하는 시간에 접속해서 볼 수 있었다. 코딩 테스트가 더 어려울 것 같아서 먼저 보고 논리력 퀴즈 들어갔는데 진짜.. (말잇못

역량 테스트 이후에 당연히 떨어졌겠지 하고 손 놓고 있었는데 합격 문자 받고 인터뷰 맹준비함🤯

실제로 받은 질문은

1. 개발에 관심을 갖게 된 계기
2. 개발자가 되기 위해 지금까지 한 노력
3. 팀프로젝트에서 팀원이 참여를 안한다면 어떻게 할건지
4. 하고 싶은 말이나 질문

비대면 면접은 처음이라 엄청 떨렸던 기억 뿐..

떨어져도 너무 실망하지 말자고 마음 다잡고 있었는데 합격 메일 받고 소리지를 뻔ㅠㅠ 이제 뒤돌아보지 말고 4개월 열심히 달려보자!

목표: 저장 버튼을 클릭했을 때 정상적으로 입력되지 않았으면 focus하기

✍ 정상적으로 입력되지 않은 element에 접근하기

useRef : React.MutableRefObject를 반환함. HTML 요소에 접근할 수 있는 기능.

const DiaryEditor = () => {

    const authorInput = useRef();
    const contentsInput = useRef();

    const handleSubmit = () =>{
        if(state.author.length < 1){
            authorInput.current.focus();
            // ref가 authorInput인 태그에 접근 -> current로 현재 태그 가져옴
            return; // 더이상 진행 안되도록 동작 끝냄
        }
        if(state.contents.length < 3){
            contentsInput.current.focus();
            return;
        }
        alert('저장 성공!');
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input ref={authorInput} />
        </div>
        <div>
            <textarea ref={contentsInput} /> 
        </div>

• const authorInput = useRef(); 레퍼런스 객체 생성
• <input ref={authorInput} /> 지켜볼 요소에 ref 속성 추가
• authorInput.current 현재 요소 불러옴
• focus(); 원하는 이벤트 추가

Studying...

https://inf.run/qAuJ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood

✍** 작성자 이름 입력받기**

import {useState} from "react";

const DiaryEditor = () => {

    const [author, setAuthor] = useState('');

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input value={author}/>
        </div>
    </div>;
}; 

export default DiaryEditor;

*class 이름 = 컴포넌트 이름 : 나중에 class를 이용해서 css로 스타일링 할 때 직관적으로 보기 위해(참고용 방법!)

• input의 value를 state로 설정했을 때 : 해당 state는 setAuthor 함수로만 변경될 수 있기 때문에 input이 변경될 때 setAuthor 함수를 이용해서 입력한 값이 input에 보이도록 해줘야함.

➡️ onChange 속성 사용하기

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input value={author} onChange={(e)=>{
                console.log(e);
            }}/>
        </div>
    </div>;

• input 태그에 Change 이벤트가 발생하면 콜백함수 `{(e)=>{

            console.log(e);
        }}`를 실행하도록 명령

• input에 값을 입력할 때마다 event 객체에 대한 정보 출력됨
• event 객체의 target-value를 이용해서 input의 값 변경 가능

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input value={author} onChange={(e)=>{
                setAuthor(e.target.value);
            }}/>
        </div>
    </div>;

• input 태그에 Change 이벤트가 발생하면 author의 값을 e.target.value로 변경 (setAuthor를 사용해 input에 입력한 값으로 author 값을 업데이트)

작성자 이름 입력하는 input과 일기 내용 입력하는 textarea는 동작 방식이 동일 : value={state}, setState 함수를 이용해 event.target.value로 state 변경, 자료형은 문자열

✍ 동작이 비슷한 state 하나로 묶어주기

const DiaryEditor = () => {
    const [state, setState] = useState(
        {
            author:"",
            contents:"",
        } 
    )

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input value={state.author} onChange={(e)=>{
                setState({
                    author: e.target.value,
                    contents:state.contents,
                });
            }}/>
        </div>
        <div>
            <textarea value={state.contents} onChange={(e)=>{
                setState({
                    author: state.author,
                    contents: e.target.value,
                })}}/> 
        </div>
    </div>;
}; 

• state의 초기값을 객체로 만들어줌
• 각 target에 onChange 이벤트 발생 => setState 콜백함수 실행 => 각각 event.target.value로 변경할 state 업데이트(자신의 change가 아닌 경우는 원래 값으로 고정) => state.author 혹은 state.contents로 value 변경

✍ 만약 입력창이 2개가 아니라 10개였다면..?

const DiaryEditor = () => {
    const [state, setState] = useState(
        {
            author:"",
            contents:"",
        }
    )

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input value={state.author} onChange={(e)=>{
                setState({
                    ...state,
                    author: e.target.value,
                         });
            }}/>
        </div>
        <div>
            <textarea value={state.contents} onChange={(e)=>{
                setState({
                    ...state,
                    contents: e.target.value,
                })}}/> 
        </div>
    </div>;
}; 

📌 Spread 연산자로 state 객체를 펼친 후 업데이트 할 state의 property만 써주기

❌ ...state를 업데이트 할 속성 뒤에 쓴다면?

setState({
author: e.target.value,
...state,
     });

• author 값 변경 후 state 객체 펼쳐짐 => 원래 state 객체에 있던 state.author 값으로 author 값이 다시 변경 => 업데이트 안됨

✍ onChange에 전달할 함수도 하나로 합쳐보자

const DiaryEditor = () => {
    const [state, setState] = useState(
        {
            author:"",
            contents:"",
        }
    )

    const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name] : e.target.value,
        })
    }

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input name="author" value={state.author} onChange={handleChangeState}/>
        </div>
        <div>
            <textarea name="contents" value={state.contents} onChange={handleChangeState}/> 
        </div>
    </div>;
}; // 각 입력창에 name 추가해줌

• e.target.name은 각 입력창의 이름이자 state 객체의 속성의 key값
• 각 target에 onChange 이벤트 발생 => handleChangeState 함수 실행 => 원래 state 객체 펼치고 [e.target.name] : e.target.value 변경
• [e.target.name]은 객체의 괄호 표기법

✍ 감정 점수도 같은 이벤트 핸들러로 만들어주기

    return <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input name="author" value={state.author} onChange={handleChangeState}/>
        </div>
        <div>
            <textarea name="contents" value={state.contents} onChange={handleChangeState}/> 
        </div>
        <div>
        <label>오늘의 감정점수 : </label>
            <select name="emotion" value={state.emotion} onChange={handleChangeState}>
                <option value={1}>1</option>
                <option value={2}>2</option>
                <option value={3}>3</option>
                <option value={4}>4</option>
                <option value={5}>5</option>
            </select>
        </div>
        <div>
            <button onClick={handleSubmit}>일기 저장하기</button>
        </div>
    </div>;

Studying...

https://inf.run/qAuJ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood

📌 API 호출을 비동기적으로 처리해야하는 이유? 정보를 요청할 서버에서 언제 데이터를 받을 수 있을지 정확하지 않기 때문에 작업의 성공과 실패를 확인할 수 있는 Promise와 async, await을 사용함

let rawResponse = fetch("https://jsonplaceholder.typicode.com/posts");

rawResponse.then((res) => console.log(res));
// Response {type: "cors", url: "https://jsonplaceholder.typicode.com/posts", redirected: false…}
// fetch의 결과값으로 Response 객체가 출력됨
// Response 객체는 쉽게 말해서 우리가 원하는 데이터가 담겨있는 포장지

• fetch : JS 내장함수. API를 호출할 수 있게 하는 기능. 인자로 정보를 요청할 URL(가져오고자 하는 리소스의 경로)을 받고 Promise를 반환함 => then 메소드를 사용해서 결과값을 이용할 수 있음
• 우리가 원하는 정보는 JSON 형식으로 되어있는 객체 배열

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData();
// (100) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

API 호출 내용은 봐도봐도 부족한 느낌ㅠㅠ 중요한 부분이니 연습하며 꼭 숙지하기..

파일 : Counter.js

import React, {useState} from "react";
// useState는 react의 메소드이기 때문에 따로 import 해줘야함

const Counter = () =>{
    const [count, setCount] = useState(0);
    const onIncrease = () => {
        setCount(count + 1);
    }
    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

export default Counter;

✍ 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달해주고 싶을 때?

파일 : App.js

import React from 'react';
import Counter from './Counter';
// import './App.css';

import MyHeader from './MyHeader';

function App() {
  const counterProps = {
    a:1,
    b:2,
    c:3,
    initialValue:6,
  }
  return (
<div>
<MyHeader/>
<Counter {...counterProps}/>
// Counter 컴포넌트에 spread 연산자로 Props 전달
</div>
  );
}

export default App;

파일 : Counter.js

const Counter = ({initialValue}) =>{
// 객체의 비구조화 할당
// { initialValue } = counterProps
// counterProps 객체에서 key가 initialValue인 속성의 값을 initialValue로 활용할 수 있음
    const [count, setCount] = useState(initialValue);
    const onIncrease = () => {
        setCount(count + 1);
    }
    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

✍ 에러 핸들링 : App 컴포넌트에서 Counter 컴포넌트에게 전해주는 counterProps 객체에 initialValue 속성이 없을 때 기본값 설정하기

파일 : Counter.js

const Counter = ({initialValue}) =>{
    const [count, setCount] = useState(initialValue);
    const onIncrease = () => {
        setCount(count + 1);
    }
    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}
Counter.defaultProps={
    initialValue: 0,
}

• defaultProps 기능을 사용하면 전달받지 못한 props의 기본값을 설정해서 에러를 방지할 수 있음

✍ props로 자식 컴포넌트에게 동적인 데이터 전달하기 동적인 데이터 대표) state

파일: Counter.js

import React, {useState} from "react";
import OddEvenResult from "./OddEvenResult";

const Counter = ({initialValue}) =>{
    const [count, setCount] = useState(initialValue);
    const onIncrease = () => {
        setCount(count + 1);
    }
    const onDecrease = () => {
        setCount(count - 1);
    }
    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
            <OddEvenResult count={count}/>
              //OddEvenResult 컴포넌트에 count 값을 props로 전달해줌
        </div>
    )
}

파일: OddEvenResult.js

const OddEvenResult = ({count}) => {
    // Counter.js의 count값을 props로 받아오기
    return <>{count % 2 === 0? '짝수' : '홀수'}</>
}

export default OddEvenResult;

• 동적으로 변하는 state(count 값)에 따라 각각 다른 결과를 렌더하는 컴포넌트

📌 컴포넌트가 rerender 되는 경우

파일: OddEvenResult.js

const OddEvenResult = ({count}) => {
    console.log('RENDER!');
    return <>{10 % 2 === 0? '짝수' : '홀수'}</>
    // 리턴값이 변하지 않는 자식 컴포넌트
}
export default OddEvenResult;

• 본인이 관리하는 state가 바뀔때마다 rerender
• 나에게 내려오는 props가 바뀔때마다 rerender
• 내 부모가 rerender되면 나도 rerender

✍** props로 다른 컴포넌트 전달하기**

여백을 주는 컴포넌트를 전달해보자

파일: Container.js

const Container = ({children}) =>{
    return <div style={{margin:20, padding:20, border:'1px solid grey'}}>
        {children}
    </div>
}

export default Container;

파일: App.js

function App() {
  const counterProps = {
    initialValue: 0,
  }
  return (
    <Container>
<div>
<MyHeader/>
<Counter {...counterProps}/>
</div>
    </Container>
  ); // Container 컴포넌트로 나머지 요소들을 감싸주기
}

• App 컴포넌트에서 Container 컴포넌트의 자식 요소들은 Container 컴포넌트에 children이라는 prop으로 전달됨
• children을 이용해서 자식 요소들을 값처럼 활용할 수 있음
• children을 console에 출력해보면 react.element 출력

Studying...

https://inf.run/qAuJ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood

• React는 컴포넌트 기반의 UI 라이브러리 공통으로 사용되는 HTML 요소를 컴포넌트로 만들면 수정하고 재사용하기 쉬워짐
• 선언형 프로그래밍 : 절차를 하나하나 설명하는 명령형 프로그래밍이 아닌 결론을 바로 알 수 있도록 코드를 작성하는 방법
• Virtual DOM을 사용 DOM : 문서 객체 모델. 브라우저가 HTML을 해석해서 화면에 보여줄 때 쉽게 해석하기 위해 트리 형태로 변형시킨 객체.
• Javascript는 이러한 DOM을 통해 HTML로 짜여진 요소들을 생성 및 변형하고 삭제할 수 있음. 일반 JS만 사용한 브라우저는 화면의 요소가 변경될 때마다 렌더링의 모든 과정을 거쳐서 페이지를 불러와야함 React는 현재 가상 돔과 새 가상돔을 비교해서 변화하는 부분을 수정하고 모든 수정이 끝나면 일괄로 합쳐서 실제 돔에서 업데이트 할 수 있도록 던져줌 변환된 DOM이 표시되는 과정?

📌 React를 도와주는 라이브러리(패키지)들: Webpack, Babel _*Webpack: 모듈 번들러. 다수의 JS 파일을 하나의 파일로 합쳐주는 역할. Babel: JS 컴파일러. JSX 등의 쉽고 직관적인 JS 문법을 사용할 수 있도록 도와주는 역할. _

Create React App: React의 boiler plate. *Bolier Plate: 이미 세팅 완료된 패키지. 프로그램을 만드는 데 필요한 패키지들을 모아놓은 패키지.

✍ Create React App을 통해 React app을 키고 꺼보자 1. terminal에 npx create-react-app reactexam1 입력 : 'reactexam1'이라는 프로젝트를 만들겠다. 설치 후 2. terminal에 npm start를 입력 ** localhost 주소로 react 창이 나타남 📌 내 컴퓨터가 서버 역할을 하는 것 **3. terminal에서 ctrl+c 입력 일괄 작업을 끝내시겠습니까? 에서 y 입력

파일 : App.js

import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>hi react</h2>
      </header>
    </div>
  );
}
export default App;

• JSX : React에서 사용하는 문법. JS의 변수나 함수와 같은 값을 HTML에 쉽게 넣을 수 있음.

파일 : index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js에서 export default App;으로 내보내기 한 App 컴포넌트는 다른 파일에서 import App from './App';으로 받아올 수 있음 => ES module 시스템

📌 JSX 규칙

• 태그를 열었으면 /를 이용해서 꼭 닫아줘야함
• Self-closing tag : <image /> 와 같이 열자마자 닫히는 태그들
• 컴포넌트를 만들 때 모든 태그들은 가장 바깥에 있는 하나의 최상위 태그로 감싸줘야함

  React.fragment로 최상위 태그 대체할 수 있음

  function App() {
  return (
  <React.Fragment>
  <MyHeader/>
      <header className="App-header">
        <h2>hi react</h2>
      </header>
  </React.Fragment>
  );
  }

*혹은 <> </>처럼 빈 태그도 사용 가능

✍ JSX와 CSS를 결합해서 스타일링 해보자

1. css 파일 import

import './App.css';

2. inline styling

function App() {

  const style = {
    App: {
      backgroundColor: "black",
      color: 'white',
    },
    h2 : {
      color: 'red',
    },
    bold_text : {
      color: 'green',
    },
  };
// 별도의 css 파일을 사용하지 않고 객체를 만들어서 inline으로 스타일 적용
  return (
<div style={style.App}>
<MyHeader/>
        <h2 style={style.h2}>hi react</h2>
<b style={style.bold_text} id="bold_text">React.js</b>
</div>
  );
}

📌 조건부 렌더링

function App() {
  const number = 5;
  return (
<div>
<MyHeader/>
<h2>hi react</h2>
<b id="bold_text">
{number}는 : {number % 2 === 0? '짝수' : '홀수'}
</b>
</div>
  );
}

• JSX에서 {}안에는 값이나 변수가 들어갈 수 있음(함수 포함)
• 위와 같이 현재 조건에 따라 렌더링 할 값이 달라질 때 삼항연산자는 React에서 사용하는 방법 중 하나

Studying...

https://inf.run/qAuJ 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 by 이정환 Winterlood

• Javascript는 자바스크립트 엔진이 탑재된 브라우저에서만 사용할 수 있었음
• 웹 브라우저가 아닌 곳에서 Javascript를 사용하기 위해서 만들어진 프로그램
• 크롬에서 사용하는 JS 엔진인 v8 엔진을 사용하여 만들어짐(v8은 C++로 개발됨)
• 자바스크립트의 실행 환경. JavaScript's runtime이라고도 함.
• runtime : 특정 언어로 만든 프로그램들을 실행할 수 있는 환경
• Node.js를 사용하면 JS로 웹 서버까지도 개발 가능
• React의 바탕

Terminal

• Graphic User Interface(GUI) : 아이콘, 커서(마우스), 더블 클릭 등을 이용해서 프로그램을 실행하는 방법
• Command Line Interface(CLI) : 명령어를 직접 타이핑해서 명령을 내리는 것
• Terminal : CLI 방식으로 프로그램을 실행할 때 명령어를 입력하는 곳 GUI 대신 CLI를 사용하는 이유는..?

파일 : calc.js

// 계산 기능을 하는 파일

const add = (a, b) => a + b;
const sub = (a, b) => a - b;

module.exports = {
    moduleName: 'calc module',
    add: add,
    sub: sub,
};

• module : 어떤 기능을 담당하는 분리된 파일
• calc.js는 계산 기능을 담당하는 모듈
• Node.js에서는 module.exports를 사용해서 객체 단위로 모듈을 내보낼 수 있음

파일 : index.js

const calc = require('./calc');
console.log(calc);

• require : 경로를 지정해서 모듈을 볼러옴. Node.js의 내장 함수.

terminal에 node index.js 입력 실행 결과

{
 moduleName: 'calc module',
 add: [Function: add],
 sub: [Function: sub]
} 

• module.exports와 require는 Node.js의 기능!
• commonJS Node.js에서 기본적으로 제공되는 시스템 모듈을 내보내고 다른 파일에서 받아서 사용하는 모듈 시스템

✍ npm으로 node.js package 만들고 외부 모듈을 실행해보자

npm(Node package manager)

• 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리 도구
• 다른 사람이 만든 node.js 모듈을 다운받아서 사용할 수 있도록 도와줌 package : 누군가 만들어놓은 node.js 모듈

📌 package 초기 설정 터미널에 npm init 입력 설정 후 생성된 package.json : 프로젝트의 정보를 json으로 기록한 환경설정 파일

파일: package.json

{
  "name": "package-example1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "randomcolor": "^0.6.2"
  }
}

• main: 패키지를 실행할 때 제일 먼저 실행할 파일
• scripts: 자주 사용하는 명령을 간단하게 실행시킬 수 있는 명령어들 terminal에 npm 키워드 를 입력하면 package.json 내의 script에서 해당 명령어에 해당하는 문자열이 terminal에 입력됨 -> 명령 실행

✍ npmjs.com에서 원하는 모듈 다운받아 보기 terminal에 npm i randomcolor 입력 *package.json이 있는 모듈에서 설치해야 함

📌 package.json에 "dependencies"가 추가되며 어떤 package를 설치했는지, 해당 버전의 범위를 기록함

  "dependencies": {
    "randomcolor": "^0.6.2"
    }

📌 node_modules 폴더에 실제 package의 코드, 파일들이 들어옴 📌 package-lock.json에 나의 package에 설치된 외부 package들의 실제 버전이 기록되어있음

commonJS로 require를 이용해서 모듈을 가져올 때

const calc = require('./calc');

경로 없이 package 이름을 적어주면 node_modules에 있는 모듈을 가져옴

const randomColor = require('randomcolor');