일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 자바스크립트#JS#slice#splice
- children vs childrenNodes
- cmarket
- 헷갈린다~
- 자바스크립트#조건문#문자열
- dom
- ㄷㅌ
- https://developer-talk.tistory.com/299
- react
- redux상태유지
- removeCookie
- UI
- https://www.daleseo.com/js-array-slice-splice/
- 내장고차함수
- CSS
- js
- @redux-toolkit
- 자바스크립트#JS#var#let#const#undefined#null
- 노드교과서
- 자바스크립트
- Beesbeesbees
- toString#String
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- variable#function
- slice/splice/split
- JS#3일차달리자#초반인데#시간금방~
- UX
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- User Flow
- for~in/for~of
- Today
- Total
목록Code개발일지 (93)
Daily Front_Minhhk
Props Drilling이란 Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미합니다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야합니다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않습니다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생합니다. 코드의 가독성이 매우 나빠지게 됩니다. 코드의 유지보수 또한 힘들어지게 됩니다. state..
📌 점점 난이도가 어려워지고 있다,,, 잘 하고 있는건지 모르겠지만! 📌 styled-components와 속성을 삼항연산자로 나타내었다 Bare minimum Requirement modal.js > import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; `; export const ModalBackdrop = styled.div` // TO..
CDD, styled-Component , storybook, useRef 📌 Component Driven Development (CDD) 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발 → 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 을 진행 (컴포넌트 단위로 만들어 페이지를 조립하는 개발 방식인 상향식 개발) 📌 CSS 전처리기(CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 → CSS 전처리기 로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환 Sass(Syntactically Awes..
자주 사용하는 기능 & 단축키 모음 기본 단축키 복사하기 : Command + C 붙여넣기 : Command + V 잘라내기 : Command + X 복제하기 : Command + D 혹은 Option 누른 상태로 드래그 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭 그룹으로 묶기 : Command + G 프레임으로 묶기 : Command + Option + G 그룹, 프레임 해제하기 : Command + Shift + G 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기 오토 레이아웃 오토 레이아웃 추가하기 오토 레이아웃 적용할 요소 선택 → Shift + A 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택..
UI (User Interface) 사람들이 컴퓨터와 상호 작용하는 시스템 을 의미 그래픽 요소, 키보드, 마우스 등 물리적 요소도 UI UX (User Experience) 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험 UI UX UI 레이아웃 그리드 시스템 (Grid System) 웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초점을 맞춘 **컬럼 그리드 시스템(Column Grid System)**을 사용하며, Margin, Column, Gutter라는 세 가지 요소로 구성됩니다. 1. Margin Margin은 화면 양쪽의 여백을 의미합니다. 너비를 px 같은 절대 단위를 사용해서 고정 값으로 사용해도 되고, vw, % 같은 상..
💡 JSON은 JavaScript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷 JSON.stringify JSON.stringify : 객체를 JSON으로 변환한다. JSON으로 변환된 객체의 타입은 문자열이다. → JSON.stringify하는 이 과정을 **직렬화(serialize)**한다고 합니다. JSON.parse JSON.parse : JSON을 객체로 변환한다. → JSON.parse를 적용하는 이 과정을 **역직렬화(deserialize)**한다고 합니다. JSON의 기본 규칙 JSON은 얼핏 보기에 자바스크립트의 객체와 별반 다를 바가 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙이 있습니다. 자바스크립트 객체 JSON 키 키는 따옴..