mystery

생각을 줄이자.

제가 처음 부트스트랩을 사용하면서 골머리를 썩었고, 그 이후 무려 이 글을 포스팅 하는 오늘까지도 대충 야매로 넘겼던 부트 스트랩 css 수정에 대해 정리를 해보려고 합니댜. 단지 잘 가져온 bootstrap 컴포넌트의 스타일을 일부분 수정하는 것 말입니다. class를 주고 css파일에서 수정하는거 말이에요 !!!! 'css커스텀' , 'css덮어쓰기' , 'css오버라이드' , 'css수정' , 'css스타일변경' , 'css classname' 등등 수많은 키워드가 나올 수 있는 이 행동 어쩌면 저와 같은 목적으로 해매는 사람이 충분히 있을것 같아요.. 부디 천천히 읽어보시고 광명 찾으세요. 진지합니다. 출발 1. 내 목적은 일부분만 수정하는거야!!!! 저는 react-bootstrap를 사용했었습..

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

언제나 그렇듯 혼자 열심히 코딩을 하고 있었슴다. 상단 Navbar UI 를 개선하려고 코드를 이것저것 짜보다가 도저히 머리가 안돌아가서 현직에 종사하는 친구에게 조언을 구했습죠. 제 코드를 보여주니 단번에 개선된 코드를 후루룩 짜더니 "이렇게 짜면 어떤점이 좋은지 이해돼?" "혹시 단일책임의 원칙이라고 알아?" 라고 말하더이다. 친구가 수정해준 코드를 읽어보는데.... 이럴수가.... 주석 하나 없이도 코드의 의미가 바로 파악되는게 아니겠어유? 이전까지 저는 코딩을 할 때 돌아가게 짜고..... 중복을 제거하면.... 그저 그게 전부였는데.... 뭔가 뒷통수를 씨게 맞은듯 했었슴다. 그래서 바로 포스팅을 하는거에유! 1. 단일 책임의 원칙 !!! 바로 검색해보았슴다. 객체 지향 5대 원칙 S.O.L.I..

하위요~ 요즘 혼자 만들고있는 쇼핑몰에 이것저것 개발한다고 뜸합디다. 어느정도만 만들어두고 또 새로운것을 배우고 싶은데... 하나 만들면 또 하나가 눈에 보이니... 멈출수가 읍쒀부러잉~~ 각설하고 쇼핑몰 프로젝트 진행중 여러 상품들의 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..