mystery

이번 포스팅에서는 진행중인 프로젝트의 Page 단위 컴포넌트를 리팩터링 하는 과정과 느낀점을 담아보겠습니다. 도메인이 듬뿍 담긴 컴포넌트의 리팩터링 과정을 담다보니 다소 복잡합니다. 코드를 이해하기 보다는 가볍게 느낌만 봐주세요. (느낌만 봐도 충분히 복잡합니다..ㅎ) 과정과 설명 없이 Page컴포넌트의 Before / After 만 보고 싶으시면 아래 접힌글을 펼쳐서 코드를 확인해 주세요. 맨밑으로 가서 느낀점만 보셔도 됩니다... 더보기 Before After 1. Page 컴포넌트의 문제점 우선 리팩토링 대상 컴포넌트 코드를 살펴봅시다. 미리 주요 관심사들에 대해 주석으로 표시해 두었습니다. 코드를 하나하나 이해하는 것 보다는, 주석 부분만 읽으면서 '관심사가 이렇게 많구나~' 정도만 파악하시면 좋..

이번 포스팅에서는 react의 key props에 대해 탐구하는 시간을 가져보겠습니다. 1. Key란 ? React 구 공식문서에는 이렇게 나와 있습니다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. React 신 공식문서에는 이렇게 나와있구요. key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다..

오늘은 useRef를 알아보겠습니다잇! 1. 사용하게 된 계기 1-1. 무엇을 만드려고 했는가? 위에 보이는 것과 같이 signUp component를 구현하면서 있었던 일입니다! 사용자가 input을 입력하지 않고 건너뛰었을 때, 혹은 양식을 지키지 않았을때 등을 에러 상태라고 가정하고, onBlur시 각 에러에 해당하는 상황이라면 에러에 해당하는 에러 메세지를 보여주면서 에러의 타입과는 상관없이 모든 에러에는 경고를 위한 style을 적용하고 싶었습니다! 그래서... 에러상태에 보여줄 style은 미리 만들어 두고, 각 form에 해당하는 DOM을 선택해서 classList에 '.errored' 라는 class명을 추가시켜 동작시키려고 했습니다! 2. useRef로 DOM 선택하기! 2-1. 사용법 ..

하위요~ 요즘 혼자 만들고있는 쇼핑몰에 이것저것 개발한다고 뜸합디다. 어느정도만 만들어두고 또 새로운것을 배우고 싶은데... 하나 만들면 또 하나가 눈에 보이니... 멈출수가 읍쒀부러잉~~ 각설하고 쇼핑몰 프로젝트 진행중 여러 상품들의 Component를 수정하는 과정에서 이미지의 경로에 대한 문제가 생겼숨다. 자~ 오느룬 public폴더 이미지 절대경로로 사용하는 법을 알아보겠숨다. 기억하면 좋을 내용임과 동시에 구글에 검색해도 몇개 나오지 않는 주제라서 한번 써봅니다. 1. 무지성 import를 사용할 때 .ssul 평상시 저는 src 폴더에 img 폴더를 만들어서 모든 이미지 파일을 import로 때려박아서 사용했습니다. 이런 식으로여~ 그러다가~~~ 어느날 쇼핑몰 가다를 잡아가면서 "오늘은 상품 ..

안녕하세유~! 쇼핑몰 가다 잡는다고 벌써 3주 잠수를 탔군요 오늘의 집을 보면서 클론코딩 하듯 웹페이지에 모양이나 기능을 구현해가고 있슴다. css에 대해서도 따로 카테고리를 만들어서 써봐야 겠어요. 꽤나 흥미로운 주제들이 많더군용 favicon 변경하기 ! 여튼 ! 본론으로 들어가서 오늘은 웹페이지 상단바 아이콘과 타이틀을 바꿔봅시다. 너무 초라하더라구요 상단바 싸악 바꿔봅시다. 1. 아이콘 구하기! https://www.favicon-generator.org 아묻따 위 링크로 들어갑니다. 이곳에 자신이 가진 이미지파일을 넣으면 .ico 이라는 확장자를 가진 아이콘 파일을 퉤 뱉어줍니다. 탸단~~~ 벌써 아이콘을 얻었습니다. 2. 올바른 경로에 넣어주기! 대체 favicon.ico의 경로가 어딘가~~ ..

이 친구는 우리를 props 지옥에서 벗어나게 해주는 친구이다. 컴포넌트가 많아지면 어떤 state 데이터를 넘겨줄 때 부모컴포넌의 자식컴포넌트의 자식컴포넌트의 자식컴포넌트 ......~~~ 이런식으로 여러겹 겹칠때도 생겨유~ 이걸 props만으로 해결하려고 하면 아주 화날뿐더러 나중에 알아보기도 힘들어집니다유 이럴 때 쓰는게 바로 context API ! 이친구를 쓰면 어떤 값들을 하위 컴포넌트들이 공유해서 같이 쓸 수 있게 해줍니다. 쉽게 props 없이 컴포넌트끼리 넘겨줄 때 쓰는 방법이라고 생각하면 될듯 방법은 다음과같이~ 1. 범위 생성 app() 밖에 상단에다가 위에 처럼 써주시면 됩니다. StockContext 는 범위를 생성할 변수입니다. 밑에 보면 이해갈거에유 2. 공유할 컴포넌트를 앞뒤..

이걸 알기전에 Lifecycle hook 이란게 먼저 있었음 Lifecycle hook 이 뭐냐~~ 하면 쉽게말해서 Lifecycle = 생명주기 , hook = 갈고리 component가 등장 했을 때 , 업데이트(재 랜더링), 퇴장했을 때 (Lifecycle) 등의 타이밍에 이런 행동를 하겠습니다~~(hook) 라는거임. class형 컴포넌트에서 쓰던 방식이였고 componentDidMount() , componentWillUnmount() 이런 친구들이 있었음. 시간이 흘러 만들어진 function형 컴포넌트에서는 저렇게 긴 함수 안쓰고 useEffect() 라는 깔끔한 함수를 사용한다고 함. 어떻게 사용하냐 ~~~ 하면 위치는 component 안쪽 html 담겨있는 return 앞에다가 시작하면..

이 친구는 자식 Component에서 부모 Component의 State를 가져다 쓰고 싶을 때 쓰는 친구다. Card Component 에서 App Component에 있는 items 라는 State를 쓰고 싶은 상황이다 요로코럼 하면 된다. 1번 자식 Component에 사용하는 곳에 작명+{state명 or 변수명} 형식을 추가해 준다. 위에 사진에서 items={a} , i={ i } 처럼 작명+{state명 or 변수명} 형식을 추가해 준다. 2번 자식 Component를 만든곳에 원하는 파라미터를 (보통 props를 씀) 입력하고 기존 사용하려던 state명 or 변수명 앞에 '파라미터.'를 붙여준다. 요로코럼 1,2번 처럼 쓰면 무슨 뜻이냐 하면~ props.items 자리에 items.ma..

기본적으로 이 친구들은 파일을 쪼갤 때 사용한다. 모듈화 라고 하는것 같다. 사용법은 다양하다. 예를 들어 내가 State를 하나 만들어서 데이터 바인딩을 하고 싶은데 그 데이터가 너무 길어서 가독성이 떨어진다면 어찌 하겠는가아... 이렇게 상품에 대한 정보처럼 중요한 데이터는 꼭 State에 담아야 하는데, 이런경우 따로 .js 파일로 모듈화 시킨 후 export 와 import를 사용하여 내보내고 불러와주면 된다. export default는 파일 당 한번만 가능함 또 파일 하나에 있는 여러 변수를 다 내보내고 싶다면 요로코롬 써주면 된다. 끝

자 이제 SCSS가 무엇이냐 하면 CSS를 프로그래밍 언어스럽게 작성가능하게 만드는 친구임 CSS에서 변수, 연산자, 함수 등등 요런 아이들을 사용할 수 있게 해주는 친구란다. 근데 또 이걸 쓰려니깐 브라우저는 SCSS 문법을 모른다. CSS 문법을 알고 있을뿐 그래서 SCSS로 짜놓은 것을 CSS로 컴파일 해주는 친구가 필요함. 고로 터미널에 npm install node-scss ㄱㄱ 이 친구가 그 친구임. 사용법은 아주 간단하다. Detail.js 파일에 대한 SCSS 파일을 만들었다. 위 사진처럼 기본적인 셋팅을 하고나서 본격적으로 문법을 배워보자. 첫번째 SCSS에서는 변수에 데이터를 저장해서 쓸 수 있다. 내가 자주 사용할 색상이 있다면....? 위에 사진에서는 '#ff0000'이라는 색상을 ..