본문 바로가기
  • 삽질하는 자의 블로그
1. Cart와 Modal, 그리고 Portal 카트를 누르면, Modal 이 나오는 화면을 구축하고 싶다. 프로세스를 생각해본다. 1. "카트" 를 만든다. 2. "카트 버튼"을 누르면, "카트" 가 "모달" 형태로 만들어져 렌더되게 만든다. 3. 그러므로 "카트 모달"은 "포털"을 이용하여, "index.html 에 연결한다." 4. "카트 모달이 실제로 렌더되는 곳은 index.html"이다. 5. "카트가 직접 실행되는 곳은, Header의 카트 버튼"이다. 6. "카트 버튼"에서 "카트 모달"을 렌더하면, "카트 모달"은 "최상위 포지션의 형제 컴포넌트로 렌더된다." 7. "실행되는 곳"에서는 State 를 통해, 끄고, 켜고를 만든다. 8. 또한, "끄고 켜는 함수" 를 "카트 모달"로 props 드릴리으로 넘겨 "모달에서도 끄고 닫기를 사.. 2022. 12. 12.
2. Array.reduce(), Array.concat() 초간단 정리 Array.reduce() Array.reduce(( 축적된값, 선택 )=>{ 로직 }, 초기값) 1) [0, 1, 2, 3 ] 더하기 const sum = Array.reduce((acc, item) => acc + item , 0) 2) [{x:0}, {x:1}, {x:2}] 더하기 const sum = Array.reduce((acc, item) => acc + item.x, 0) Array.concat() concat 은 push 와 달리, 배열 안에 새 값을 넣어주면서도, "새 배열" 을 반환한다. ArrayA = [1,2,3] [ ArrayA.push(5) ] ArrayA = [1,2,3,5] [ const ArrayB = ArrayA.concat(7) ] ArrayA = [1,2,3,5] A.. 2022. 12. 12.
1. function.bind() - Array.map() 으로 무한증식 버튼 만들 때, 한 함수로, 각각 다른 역할을 하는 버튼 만들기 전체적용 [ 강제로, 함수에서, this(context) 를 고정시켜주는 bind()] func.bind(context)는 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환합니다. 이 객체를 호출하면 "this가 context로 고정된 함수 func가 반환"됩니다. 따라서 boundFunc를 호출하면 "this가 고정된 func를 호출하는 것과 동일한 효과"를 봅니다. 아래 funcUser에는 "this가 user로 고정된 func"이 할당됩니다. let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John ** "변.. 2022. 12. 12.
1. 움직이지 않는 backround 만들기, feat. 그라데이션 이전 Nextjs 프로젝트에서, 백그라운드로, 그림을 사용해 보았다. 어? 근데, 백그라운드가, 블록만 하나씩 생기면 움직인다. 접히고, 짤리고, 그 이유는 body 에, backround-image 를 넣었기 때문 에라이 그래서 새로 작업중인, React 사이드프로젝트에는, 움직이지 않는 딱 고정된 백그라운드를 만들어볼것이다! 1. main-backround 파일을 만든다. 2. 스타일링 한다. 3. index.js 에 가서, 붙여넣는다. 4. z-index 를 0로 설정해 가장 후방으로 뺀다. import styles from "./main-background.module.css"; function MainBackround() { return ; } export default MainBackround.. 2022. 12. 8.
5. Context 다뤄보기 - 기본편 Context 를 사용해보자 Context : 앱 전반에 걸쳐 같은 데이터를 공유하게 만들어 주는 HOOK Context 의 기본 구성 요소 "1) createContext" : createContext는, context 를 만들어주는 react의 빌트인 메서드이다. [const myContext = createContext(defaultValue)] * defaultValue는, "자동완성" 을 위해 사용한다고 해도 무방하다. Provider 를 통해, "아무값도 넘기지 않으면", defaultValue 가 사용된다. "2) context.Provider" : Conetext.Provider 는, "context 를 구독하는 컴포넌트"들에게, "context 의 변화를 알린다". [myContext.P.. 2022. 12. 8.
4. useReducer 바로 알기 - 기본편 useReducer 는, 강력한 State 관리 도구이다. useState 에 비해, 조금 복잡하지만, 많은 state의 변화를 가져오는 action (실행 함수) 을 한군데 모아, 가독성 있게 State 를 관리 할 수 있다. 또한, 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. useReducer는, 크게 두가지 파트가 있다. 리듀서 함수, 그리고 리듀서함수를 dispatch 하여 사용하기 1. 리듀서함수 리듀서 함수는, type 이라는 action의 이름을 이용하여, 각 type 에 맞는, action을 취하게 한다. 리듀서 함수의 반환값 (쉽게 말하면, 각각의 type에 맞는 action이 일어난 후 return 값) 은, 새로운 상태 를 반환한다. * 리듀서함수는 컴포넌트 함수.. 2022. 12. 8.
3. useEffect 바로알기 with. 클린업 프로세스, 디바운싱 useEffect의 사용 useEffect는, 사이드이펙트를 막는데 아주 유용하다. 기본사용 : useEffect( ( ) => { 실행함수 } , [ 종속성 ] ) useEffect의 기본적인 사용법 1. 시작할때 한번만 : 종속성에 state를 넣는다. 2. 무언가 변할때마다 : 종속성에 변하는것(state)를 넣는다. 종속성에는 여러 state 를 넣을 수도 있다, [name, password, id ...] 초기에 한번 실행되고, 이후, 종속성 값이 변할때마다 실행된다. 3. 클린업 프로세스를 이용한다 useEffect 를 사용할때, "반환하는 함수"를 만들 수 있다.(화살표 함수도, 선언문 함수도 괜찮다.) 이 함수를 "클린업 함수" 라고 부른다. [클린업 함수의 실행 타이밍] 1. 클린업 함수.. 2022. 12. 8.
2. React Portal 사용해보기 1) 기존의 Modal 1. 모달을 만든다. 2. 사용할 곳에서, modal 을 띄우거나, 제거하는 함수를 만든다. 3. 모달 컴포넌트로 함수 포인터를 넘겨, 그곳에서도, 띄우거나, 제거할 수 있게 만든다. ============================================= import { useState } from "react"; import Modal from "./components/UI/Modal"; export default function App() { const [modal, setModal] = useState(false); function toggleModal() { setModal((prev) => !prev); } return ( 모달 띄우기.. 2022. 12. 7.
2. 반응형 grid 만들기. grid 를 만들면, 1fr, 1fr ... 이나, 2rem , 3rem ... 이나 어찌됐든 가로나 세로열의 수를 정하곤 한다. 반응형에 따라, grid 의 위치를 배열을 바꾸고싶다. repeat ( auto-fill, mixmax("xx" rem, 1fr) )이것을 이용한다. display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; 2022. 12. 7.
1. 매번 헷갈리는 absolute 중앙 정렬 1. 중앙 정렬하기 with transform position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2. 중앙 정렬하기 with calc position: absolute; width: 20rem; top: 35%; left: calc(50% - 10rem); => top 은 calc(50% - height / 2) left 는 calc(50% - width / 2) * 둘의 차이점 transform 을 사용하면, 내부의 div 를 건드렸을때, 조금 위치가 변동 될 수 있다. calc 를 사용하면, 변함이 없다. 무슨소리인지는 해보면 안다. 나는 calc 로 사용 하는 것이 좋은 것 같다. 2022. 12. 7.
1. State 끌어올리기(상향식 컴포넌트 데이터 이동) React에서 아주아주 중요한 State 끌어올리기를 배워봅시다.(아직 Redux 배우는중이라...) [원리] 부모로부터 온, 함수의 포인터를, 자식이 실행시킨다. 함수의 실질적인 실행은 부모에서 실행된다. 자식은, 값들을 함께 넣고 실행시켜, 부모가 그 값을 받을 수 있다. [단점] 무진장 많은 Props Drilling 이 발생 할 수 있다. 복잡성은 사실 중요한 일이라서, 이게 가장 큰 단점이 될 수 있다. [코드] function onSaveYearValue(e) { setValue(e.target.value); } console.log(value); return ( ); } export default NewExpense; function ExpenseSelector(props) { const {.. 2022. 12. 7.
이론 용어정리(3) [76~130] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 76. 일급객체? 77. 일급객체인데 어떻게하라고? 78. "자바스크립트"는 "명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍이다!" 76. 일급객체? 77. 일급객체인데 어떻게하라고? 78. 함수는 "객체"이므로, "프로퍼티" 를 가진다. 78. 추가. "오로지 함수 객체 만이", prototype 을 가진다.(상속을 위한) == constructor 내부메서드를 가지고 있는 것은 "함수 객체 뿐이다" 79. "자바스크립트"는 "명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 "멀티 패러다임 프로그래밍이다" 80. 다.. 2022. 12. 6.

티스토리툴바