본문 바로가기

전체 글351

Styled-components(5) first-child와 last-child 사용하기 현업에서 스타일드 컴포넌츠를 쓰기 시작한지 얼마 되지 않은 시점에 당황했던 부분을 잊지 않기 위해 기록을 남겨본다. styled-components 에서 last-child 를 사용해보자. 결과화면 미리보기 이 두 개가 있다. 두 번째 버튼의 margin-left 만 주려고 한다. 이때 나는 last-child 를 사용하고 싶다. 자, 그럼 styled-components 에서 last-child 를 사용해보자 Styled-components(5) first-child와 last-child 사용하기 import styled from 'styled-components'; // 일단 임포트 해주시고 // 스타일드 컴포넌트로 들을 감싸주었다 이전 다음 스타일드 컴포넌트 내에서 &:last-child 를 사용한.. 2022. 2. 14.
MAC 에서 포트 죽이기 어느날 오후, 프로젝트를 실행하기 위해 npm start 를 힘차게 눌렀더니 이미 사용중인 포트라는 메시지가 뜬다면? 죽여보자 (어감이 좀 이상하지만 🥲) MAC 에서 포트 죽이기 1. 현재 사용중인 포트의 PID를 획득하러 가보자 $ lsof -i :3000 2. 획득한 PID 를 죽여보자 $ kill -9 PID번호 // 입력 후 엔터를 누르면 아무흔적도 없이 해결 2022. 2. 9.
JavaScript - Array.from() 으로 배열만들기 Updated 08/22/22 Array.from 은 배열이나 객체를 복사해 새로운 Array 를 만든다. 함수나 컴포넌트 내에서 한번 쓰이고 말 간단한 배열이나 객체를 후딱 만들어 써야 할 때, 자주 사용되는 것 같다. 이터러블 객체(for of)과 유사배열은 배열같은 객체이다. 객체이기 때문에 push 나 pop 등의 메소드를 사용할 수 없다. 하지만 이러한 객체들을 배열처럼 사용해야 할 때, → Array.from() 을 사용한다. 그럼 공식문서에 있는 예제 코드를 살펴보면서 Array.from 을 익혀보자. 이터러블 객체와 유사배열 이터러블(iterable) 은 메서드 Symbol.iterator가 구현된 객체이다. 유사 배열(array-like) 은 인덱스와 length 프로퍼티가 있어서 배열처.. 2022. 2. 8.
React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size 우리는 보통 데이터를 담는 그릇 (a.k.a 자료구조) 으로 객체나, 배열을 많이 사용한다. 하지만 사용하다 보면 여러가지 형태의 자료구조가 필요하다. 그중 하나인 맵(Map) 을 알아보자. 객체 – 키가 있는 컬렉션을 저장 배열 – 순서가 있는 컬렉션을 저장 맵(Map) 이란 일단 겉 모습은 객체랑 비슷하다. 쉽게 말해 커스텀이 가능한 객체 느낌이다. 키-값 쌍을 저장하며 각 쌍의 삽입 순서를 기억한다. 또한 Map 은 함수, 객체 등을 포함한 모든 값을 키와 값으로 사용할 수 있다. 일반적인 object 는 순서를 기억하지는 않는다. 리액트에서 맵(Map) 사용하기 1. new Map() – 맵 만들기 (리액트에서는 useState 로 맵을 선언했다.) // useState 로 타입이 맵인 변수 ar.. 2022. 2. 4.
React(58) - 화살표 회전 애니메이션 만들기 새발자는 리액트로 드롭박스를 만드는 중이다. 전체보기를 클릭하면 아래에 촤라락 하위메뉴가 펼쳐진다. 애니메이션을 추가하여 아주 자연스럽게 화살표를 뱅그르르 회전시켜보자. 결과화면 미리보기 [ 전체 보기 ] 버튼 옆에 달린 화살표의 방향 클릭할 때마다 바뀐다. 이 때 회전 애니메이션을 추가해볼 것이다. React(58) - 화살표 회전 애니메이션 만들기 useState 의 상태값은 스위치 역할을 한다. 클릭할 때마다 메뉴를 펴고 접으면서 화살표 방향이 달라질 것이다. 접힌 상태이기 때문에 기본값은 false 로 두자. // useState 로 스위치 역할을 할 상태값 변수를 선언해준다. 기본값은 false const [showCate, setShowCate] = useState(false); HTML on.. 2022. 2. 3.
React(57) Redux 로 객체배열 저장하기 (redux 상태관리) 처음에는 리덕스의 개념을 이해하는 것이 쉽지 않았다. 하지만 코드를 보며 몇 번 적용해보니 기본적인 개념이 이해가 되었다. 내가 생각하는 리덕스란 보통 데이터를 주고받을 때, 부모 - 자식 컴포넌트로 데이터를 전달하지만, 이곳저곳에서 다양하게 공통으로 쓰이는 글로벌 데이터라면, 자식-부모-조부모-삼촌-조카 이런식으로 여러 컴포넌트로 복잡하게 전달해줘야 할 것이다. 글로벌 저장소에 데이터를 저장해놓고 필요할때 어디서든 간단하게 소환할 수 있도록 하는 라이브러리가 리덕스(Redux) 라고 생각한다. Redux-persist 란 리덕스를 사용해서 글로벌 저장소에 들어간 데이터는 아쉽게도 새로고침 한방이면 초기화되며 수명을 다한다. 이때 Web Storage에 저장해줘야 하는데 저장과 삭제를 쉽게 해주는 라이브.. 2022. 2. 1.
반응형

티스토리툴바