mystery

자바스크립트 기본기를 잘 갖추지 않고 리액트니 뭐니 쓰고있던 나. 초보방을 스킵하고 고수방을 들락날락 거리다 패배의 쓴맛을 본 이 시점에 빨리 공부 해줘야한다. 자자 가봅시다~ 레고~ 1. 프로퍼티 플래그( property flags )란? 객체는 키(key) + 값(value) 쌍으로 이루어진 프로퍼티(property)가 저장된 친구에요. 저는 객체가 이게 다 인줄 알았습니다... 하지만 놀랍게도 프로퍼티는 값(value) 과 함께 플래그(flag)라고 불리는 특별한 속성 세 가지를 갖습니다!!! 모두 true 나 false 값을 가집니다잇! 1. writable -> 값(value) 수정이 가능한지 여부입니다. [ write = 쓰다 ] 2. enumerable -> 반복문을 사용해 나열 가능한지 여..

스크롤과 휠 이벤트를 사용할 때 조건으로 이런 저런 높이 값을 사용 할 일이 많았다. 고래서 정리한다잇 1. scrollHeight 문서의 시작부터 보이지 않는 부분까지 !! 즉 전체 높이를 나타내유. 요로코롬 쓰면 됩니다유. 2. clientHeight 상단 탭, 주소표시줄, 즐겨찾기바, 하단 수평 스크롤바 , 문서의 마진 등등 전부 다 빼고!!!! 문서의 보이는 부분 !! 즉 뷰포트 높이에유. 요로코롬 쓰면 됩니다유. 자매품으로 innerHeight도 있습니다유 . 결과 값은 같아여~ 3. scrollY 문서의 최상단으로 부터 내려온 만큼의 높이!! 즉 최상단으로부터 스크롤한 높이에유. 요로코롬 쓰면 됩니다유. 자매품으로 pageYOffset도 있습니다유 . 결과 값은 같아여~ 4. 간단한 활용 (쓰..

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

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

지난 4탄에서 우리는 Store의 state를 모든 Component에서 접근 가능한 상태로 만들어 두었습니다. 그러면 접근을 해봐야겠쥬~? 이번시간에는 본격적으로 State값을 사용하고 수정 해보겠습니다잇 !! 언제나 그랬듯이 본론을 바로 들어갈 수 없슴다ㅎ 개념을 잡고 읽어야 더 이해하기 쉬우니까유~ 1. Component 분리하기 저도 Redux를 배우고 써보면서 알게된 개념입니다. 우리는 이제 우리가 쓰던 Component를 2개로 분리할겁니다!!! 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트로 말이쥬~~ 말은 거창한데 사실 별거없더이다. 말 그대로~ 프리젠테이셔널 component → 보여지는 것 (UI) 들을 담은 component 이다 컨테이너 component → 이 안에서 State값을 불..

간단히 3탄을 복기 하고 넘어가보쟝! 저번 시간에는 모듈을 완성했다! 모듈에는 액션 타입과 액션 생성함수, 리듀서 가 들어있다! 여기까뤼~ 이제 본격적으로 만들었던 모듈을 사용해봅시댜! 는 ~ 들어가기에 앞서서 하나만 더 짚고 넘어가겠슴다! 1. Reducer가 여러개라면 ? 지금은 모듈이 하나지만, 우리가 State 하나로만 모든걸 해결하지 않듯이 추후에는 하나의 프로젝트에서 여러개의 모듈을 만들게 될것이고 또 그렇게 할겁니다. 아마도여~ 그렇다면 당연히 Reducer도 여러개 생기겠네유~ 그런경우에 우리는 여러개의 Reducer를 하나로 합쳐서 관리할 수 있슴다 ~ 따라오세여~ 우리 모듈파일 있는곳( modules디렉토리 ) 에다가 파일하나 더 만듭시댜! 파일명은 알아서들 하슈 짜잔~ 위에부터 차근히..

1,2탄의 내용은 글쓴이인 제가봐도 당연히 이해가 가지 않을것 같은 부분이 많습니다. 전체적인 동작원리에 대해 정확히 모르는 상태에서 개별 부품에 대한 설명부터 하기때문입니다~ 하지만 꼭 필요했던 정보들입니다. 한번 쓰윽 읽고 3탄을 보면 이해하기 쉬울겁니다. 우선 차근히 보다보면 마지막에 전체 원리 설명해줄거임 ! 그러면 유레카! 하지 않을까요 ? 꼽으면 마지막부터 읽던가요 이젠 정말 배워봅시다.... Redux 3탄 레츄기릿 시작하기에 앞서서 라이브러리 설치부터 해줍시다. 터미널에서 npm install redux , npm install react redux 갈겨줍니다. 가보쟈이이~~~잇! 1. 리덕스 모듈을 만들어보자! "src" 디렉터리에 "modules" 라는 하위 디렉터리를 생성하고 그 안으..

2탄입니다. 진짜 사용법에대해서 알아볼건데 잘 따라오셔야 합니다. 왜냐믄 이것저것 뭐가 많이 등장하거든요 분명 보다보면 " 아니~~ 슈바 그냥 useState 써서 props로 떤질까 ? " 이런생각 들거에요 분명 들거야.. 근데 나름 이 원리를 이해하는거 자체가 쪼금 재밌는거 같기도한데요... 하... 암튼 재밌음 따라와보셈... 진짜 마지막으로 몇가지만 더 설명하고 사용법ㄱㄱ 하겠슴다. "아니 사용법 언제알려줌 ㅡㅡ " 이라고 하시겠지만 어쩔수 없음 중요한걸요.. Redux의 필수규칙 3가지입니당. 1. Store는 항상 1개다 . 말글대로 입니다. Store는 그냥 뒤져도 1개라고 생각하세요. 2. State는 읽기전용이다. ! 항상 State는 값을 직접 수정하지 않아야합니다. ( immutabl..

포스팅이 약 3주? 정도 없었는데 이 상노무 Redux를 조금이라도 더 정확히 파악하고 포스팅 하고 싶었기 때문입니다! (사실상 redux만 잡고 있었음) 이 친구는 저번 글에 썼던 Context API 와 비슷한 능력을 가진 친구입니다. 우리를 props 지옥에서 벗어나게 해주는친구. props 연결고리 대신 별도의 공간에서 state를 만드는 느낌인데 자세한건 아래에 설명 하겠어요~ 꽤 많은 사람들이 Redux를 쓴다고 한다. 점유율이 높은편 세상은 앞으로도 더 좋아지면서 이 Redux마저도 간단하게 만들 전역상태관리 도구가 나오겠지만 여튼 세상은 아직 Redux를 쓴다고 합디다~ ( Context API 와 비교했을때 장점이 많이 있더라) 핵 코린이 시점에서 생각했을때 좋은점은 state변경 로직을..

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