Skip to content

Home

Jump to bottom
강석현 edited this page Aug 29, 2021 · 1 revision

2021-08-20 시작

힘들었던점

헤더 컴퍼넌트를 만들 때 스크롤 바 쪽으로 padding 범위가 이 넘어가서 잘 안됨

  • 해결
box-sizing: border-box;
  • box-sizing: border-box = padding 값을 주었을 때 부모 컨테이너 밖으로 나간다면 밖이 아닌 안쪽으로 borer값을 줌

2021-08-21

헤더 부분에 있는 화면을 전환시키는 코드를 짤 때 어떻게 해야할지 고민.

  • 해결

    2일차와 3일차에 걸쳐 구글링을 통해 문서와 블로그를 찾아가며 구현

    scroll이벤트 관련 문서와 블로그 글이 얼마 없어서 힘들었음

TEAM 페이지에서 팀원들 프로필에서 github로 넘어가는 과정에서 다른 곳을 클릭해도 넘어가짐

  • 해결

    a태그 밖에다 div태그로 한 번 묶어줌

slide만들면서 margin으로 슬라이드를 밀려고 할 때 margin-right값을 줬더니 빈 곳으로 margin값이 들어가 마음대로 안됨

  • 해결

    marginRigth를 주지 않고 marginLeft에 값을 음수로 줘서 땡겨왔음.

슬라이드가 자동으로 넘어 갈 때 충돌이 발생하는지 특정 부분부터 매끄럽지 않음

  • 해결

    setInterval함수가 계속 리랜더링 될 때마다 계속 중첩되어서 발생한 오류임.

    interval 상태가 true라면 리랜더링 될 때마다 지우고 다시 만듬으로 중첩이 안되도록 변경.

공부 해야 할 것!

생명주기 알아보기!

과정

2021-08-20시작

  • 1일차

    • create-react-app으로 프로젝트 생성 후 메인,헤더 컴퍼넌트 생성 및 ui빌드
    • header에서 useState와, scroll이벤트로 특정 height를 넘어가면 헤더부분의 height가 줄어들도록 개발

  • 2일차

    • service컴퍼넌트 생성 후 ui 빌드
    • header에서 클릭시 화면을 이동하는 함수 개발(어려움 겪음)

  • 3일차

  • 4일차

    • Portfolio Page ui 빌드
    • 모달 추가
    • +버튼은 눌러도 모달이 안 켜짐 → 다른 것부터 하고 디테일 수정할때 할 예정

  • 5일차

    • AboutPage ui
    • 같은 태그가 많이 겹쳐서 이후에 map함수를 이용하여 더 깔끔하게 해볼 예정
    • TeamPage ui
    • map함수를 이용하여 각각의 프로필 생성

  • 6일차

    • 멤버들의 프로필에 hover설정
    • footer완성
    • slide어떻게 만들지 구상

  • 7일차

    • slide 컴퍼넌트 ui생성
    • button 클릭시 슬라이드 바뀌게 구현
    • 자동으로는 오류 발생

  • 8일차

    • entry landing페이지와 많이 달랐던 header부분의 폰트 변경
    • 디테일들 추가

  • 9일차

    • slide에서 발생하던 오류 고침

새로 알게된 것

HTML TAG

  • 1개의 화면 내에서 아래 있는 화면이 뜨게 하기 위해서는

    • 이동하려는 페이지 맨 위에 있는 태그에

      <a id="이동할위이름">이동할위치</a>

    • 이동하는 이벤트를 줄 부분에는

      <a href="#이동할부분이름">이동</a>

    • 로 하면 된다.

CSS

  • text-tranform
    • 글자를 대문자로 바꾸거나, 소문자로 표시하는 등 바꿀 수 있음
  • background-clip
    • 요소의 배경이 border,padding,content 중 어디까지 차지할지 정함
  • letter-spacing
    • 글자 사이의 간격을 조절

JS

React

  • useRef
    • React에서 돔을 직접적으로 건드는 Hook
Clone this wiki locally