728x90 Frontend15 [React] Redux(2) [payload] Payload란? 이전에 Redux를 이용해 counter를 만들었습니다. 그때는 정해진 숫자만 더하고 빼기만 했었는데 이번에는 임의의 값을 넣어 더하고 빼는 counter를 만들어 보려고 합니다. 이때 임의의 값이라는 목적어가 생기게 되고 그 목적어도 액션객체에 담아 같이 보내줘야 합니다. 이렇게 액션객체에 같이 담아 보내주는 것을 Payload라고 합니다. export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; ⭐반드시 payload라는 이름을 통해서 보내야 하나요? 리덕스는 굉장히 유연한 라이브러리이기 때문에 많은 것들이 “표준화”되어 있지 않습니다. 때문에 자신만의 방식으로 프로그래밍 할 수 있는 유연성을 .. 2022. 12. 14. [React] Redux(1) [count 만들기] Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. Redux 기본 키워드 1. 액션( Action ) 상태에 어떠한 변화가 필요하게 도리 때, 액션이란 것을 발생시켭니다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 합니다. { type : "PLUS_ONE" } 2. 액션 생성함수( Action Creator ) 액션 생성함수는, 액션을 만드는 함수입니다. 액션 생성함수를 만들어서 사용하는 이뉴는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 그래서.. 2022. 12. 13. [TIL] CSS - display : fixed 서론 프로젝트 D-3... 웬만한 기능들은 이제 구현이 되고있는 중입니다... 가장 쉬운 메인페이지 구현이면서 오늘에서야 완성을 해버렸....습니다...😭 사실... 100%완성은 아니구... NavBar 반응형까지 완성했으니까 다했다고 해주세요... 문제점 NavBar를 밑으로 내리고 싶은데 무슨 짓을 해도 안내려갑니다... display : flex를 써도 안되고... margin을 주자니 컴퓨터 해상도에 따라 크기가 다르기에 문제가 됩니다... 해결법 ( display : fixed ) 의외로 정말 간단했습니다... css에 display : fixed; 한 후 bottom : 0;을 주면 viewport bottom에 고정이 되게 됩니다... 마치며... 2022. 11. 22. [TIL] CSS - Transition(애니메이션) Transition이란? CSS 트랜지션은 시작 지점과 끝 지점을 서로 연결을 해 주는데 중간 과정을 부드럽게 만들어 주는 역할을 합니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. CSS, JavaScript, Class 활용의 차이 공용 HTML 웹 퍼블리싱 왕초보 시작반 웹개발 플러스 1) CSS .button { padding: .. 2022. 11. 14. [CSS] Media Query @media @media를 사용 기본적인 문법 @media (조건) { 스타일 } 조건에 맞춰 스타일 변경 max-width : 조건 이하까지 스타일준 css로 변경 min-width : 조건 이상까지 스타일준 css로 변경 See the Pen Untitled by chaaaniii (@chaaaniii) on CodePen. 2022. 9. 13. [React] 절대 경로 (Absolute Imports) Absolute Imports란? React로 프로젝트를 개발하다보면 ../../../../components/Basic과 같은 import 지옥이 되는 경우가 잦습니다. 절대경로는 이름 그대로 어떤 상황에서도 변하지 않는 경로를 의미합니다. import를 선언하는 페이지의 위치와는 상관 없이 일관성 있는 경로를 작성하기 때문에 추후 파일 위치가 이동해도 import를 다시 맞추지 않아도 되는 장점이 있습니다. 적용 방법 CRA(create-react-app)으로 프로젝트를 만들었다고 가정했을 때 보통 src 파일안에 소스코드가 있기 마련입니다. 그러니 jsconfig.json을 통해서 이 src 폴더를 루트 폴더로 지정하기만 하면 됩니다. JavaScript 프로젝트라면 jsconfig.json파일을 .. 2022. 8. 19. 이전 1 2 3 다음 728x90
