공부블로그

- 의사 클래스 - CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다 a:link : 아직 방문하지 않은 요소의 상태 a:visited : 방문한 후의 상태 a:active : 클릭할 때의 상태 a:hover : 마우스가 올라갔을 때의 상태 ◆ CSS List list - style - type : 마커 모양 - position : 마커 위치 - image : 마커 이미지 * 클래스 이름을 사용해 원하는 리스트만 가져오고 싶을 때 = ul.원하는 클래스 이름 (공백없이 바로 클래스 선택자 사용) sushi salad noodle html..

전체 선택자 * 모든 요소를 선택한다. /* Selects all elements */ * { color: green; } 유형 선택자 태그 이름을 사용해 요소를 선택한다. span { background-color: DodgerBlue; color: #ffffff; } 클래스 선택자 . 요소의 class 특성에 기반해 선택한다. Hello css hohoho hahaha .head{ text-shadow: 4px 4px 3px #77f; } ID선택자 # 동일한 id를 가진 요소를 선택한다. /* id="demo" 요소 선택 */ #demo { border: red 2px solid; } *클래스는 중복이 가능하지만 id는 유일해야한다* 선택자 목록 , 일치하는 모든 요소를 선택한다. /* 모든 spa..

Atoms = Recoil의 상태 atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. 선언법 : const '원하는 상태 이름' = atom({ key : '보통은 상태 이름과 동일', default : '초기값 like useState의 괄호안의값' }) Selector = 파생된 상태 파생된 상태는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다 get으로 가져온 atom을 가공해서 리턴해준다. 선언법 : const '원하는 상태 이름' = selector({ key : '보통은 상태 이름과 동일', get : ({get}) => { const filte..

에러땜에 짱 고생한 redux-thunk를 정리해보게따.... 저번에 redux로 만든 todo-app redux에 middleware중 하나인 redux-thunk를 적용하는 코드를 작성해보자. 아 그리고 change_status 액션도 하나 더 만들었다. redux-thunk 는 뭘 하는 미들웨어일까? (from. 벨로퍼트 깃북) 가장 간단히 설명하자면, 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해줍니다. 리덕스에서는 기본적으로는 액션 객체를 디스패치합니다. 일반 액션 생성자는, 다음과 같이 파라미터를 가지고 액션 객체를 생성하는 작업만합니다: 만약에 특정 액션이 몇초뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가..

리덕스(Redux) 여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다. + typesafe-actions는 타입 정의를 쉽게 해주는 패키지다! ★ 리덕스에 사용되는 키워드 액션 (Action) : 스토어의 상태를 바꾸고 싶을 때, 액션이란 것을 발생시켜야 리듀서가 상태를 변경. 하나의 객체로 표현되고 type을 가져야 한다. 액션 생성 함수 (Action Creator) : 액션 개체를 만드는 함수. 파라미터를 받아와서 액션 객체 형태로 만들어준다. 컴포넌트..