Projects) Main page 개발

🔗 배포링크

 

# 회고 

좋은 기회로 시니어 개발자와 협업할 기회를 가졌다. 리액트와 javascript를 사용해 개발했다. Udemy 강의를 들으며 혼자 공부해서 어떻게 개발해야하는지, 어떤 생각의 흐름을 가져야 하는지 몰랐는데, 이번 경험은 정말 값진 경험이었다. 예를들어 프로그래머스 문제를 풀고 있긴 하지만, 이를 코드에 언제 어떻게 적용해야 할지 몰랐다. 그래서 매번 hard coding 하고 있었는데, 시니어 개발자분께서 '언제 어떤 경우에 이런 메소드를 사용해야 하기 때문에 프로그래머스를 통해 javascript를 꾸준히 학습해야한다'며 조언해주셨다. 사실, 다들 프로그래머스 문제를 풀어야 한다기에 풀긴 했지만, 개발시에는 어떻게 써야 하는지 와닿지가 않았다. 이번 경험은 정말 머리를 한 대 맞는 기분이었다. 좀 더 열심히 문제를 풀며 공부했어야 하는데, 문제를 푸는 이유를 모르니 원동력이 없어 프로그래머스를 등한시 했었다. 이제 이유를 알았으니, 꾸준히 문제를 풀고 이를 개발에 적용하고자 노력해야겠다.

추가로, 블로깅을 하며 꾸준히 공부해왔는데, 배운 내용을 주도적으로 사용하여 프로덕트를 개발해보지 않아오는 괴리감이 컸다. '나 지금까지 뭘 공부한거지?'라는 생각이 절로 들었으니 말이다. 역시, 개발은 눈이 아니라 손으로 하는 말이 틀리지 않았다. 앞으로는 무언가를 배우면 꾸준히 손으로 개발하며 복습하여 체득할 수 있게 해야겠다. 

멘토님 감사합니다

 

 

##  Feedback

- File tree

: App을 제외한 페이지의 파일트리는 분명하게 할 것

: 일반적으로 페이지 단위는 views 혹은 pages 폴더 내에 정리

- component

: 컴포넌트명은 의미가 분명하게 작성할 것

:  src/components 폴더에는 기능 컴포넌트 넣기

: 컴포넌트 폴더 역시 용도에 따라 파일트리를 분명하게 할 것

: 리액트 컴포넌트는 카멜케이스로 작성

- variable

: static한 string 값은 상수로 선언해 사용하기

const introDescription = `~~~\n~~~\n~~~`;

function Intro() {
  return (
    <>
      <section className={styles.sectionWrapper}>
        <p className={styles.introDescription}>{introDescription}</p>
      </section>
    </>
  );
}

- map()

: 반복 형태를 지니는 경우, map()을 사용해보기

const items = [{title: ~~, content: ~~}, ...]

function FAQ() {
  return (
    <section className={styles.frame}>
      <Accordion>
        {faqItems.map((faqItem, index) => (
          <Accordion.Item eventKey={index} key={index}>
            <Accordion.Header>{faqItem.title}</Accordion.Header>
            <Accordion.Body>{faqItem.description}</Accordion.Body>
          </Accordion.Item>
        ))}
      </Accordion>
    </section>
  );
}

How to map images in reactjs

 

- sementic tag의 중요성에 대해 학습하기

: h 태그는 글씨 크기를 정하는데 사용하지 말 것

: 일반 txt는 span, div, p 태그를 사용해 스타일만 조정

reference)

h태그가 중요한 이유와 올바른 사용법(구글 SEO)

 

- className

: tag명과 className 명은 절대 동일하게 작성하지 말 것

: wrapper: 전체를 감쌀 때 사용