전체 글

JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. Promise는 비동기적인 작업을 처리할 때 사용되는 자바스크립트 객체입니다. Promise는 다음과 같은 기능을 가지고 있습니다. 1. 비동기적인 작업을 처리할 수 있습니다. 2. 동기적인 작업이 완료되었을 때, 결과를 처리할 수 있습니다. 3. 여러 개의 비동기적인 작업을 순차적으로 실행할 수 있습니다. 4. 비동기적인 작업이 실패했을 때, 에러를 처리할 수 있습니다. Promise는 필요한 이유도 많이 있습니다. 비동기적인 작업은 시간이 걸리는 작업이므로, 작업이 완료될 때까지 기다리지 않고 다른 작업을 처리할 수 있습니다. 예를 들어, 웹 페이지에서 데이터를 불러올때, 이렇게 하면 웹 페이지가 멈추지 않고 사용자에게 즉..

Redux store에 저장된 state가 array,object 자료인 경우, state 변경을 좀 편리하게 할 수 있다 그 방법을 알아보자 redux state가 array/object인 경우 변경하려면 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ state.name = 'park' } } 직접 state를 수정해도 변경이 잘 됩니다 array/object 자료의 경우 state변경은 state를 직접 수정해버려도 잘 되니까 직접 수정하십시오. 만약,버튼을 눌렀을때 변경하려는 자료의 +1을 해주고 싶으면? let user = createSlice..

메타인지 스터디는 각자 본인이 일주일동안 공부한 내용을 기록하고, 회고해보는 스터디이다. 일주일동안 구현한 기능들 더보기 버튼을 누르면 3초 있다가 로딩창이 뜨고, 상품이 뜨면 로딩창이 지워짐 3초이내 할인쿠폰 메세지 등장했다가 3초후에 사라짐 Detail 페이지의 하단 탭 ui 만듦 (버튼 0 누르면 내용 0뜸) 내용0,내용1,내용2 가 뜰때 0.5초 간격을 두고 서서히 등장함 Detail 페이지가 처음로드 될때 1초 간격을 두고 등장함 데이터를 데려와서 Cart 페이지에 반복문으로 렌더링 변경하기 버튼을 누르면 수량이 +1씩 추가됨 Detail 페이지에서 주문하기 버튼을 누르면 Cart에 상품이 추가됨 변경하기 버튼을 누르면 수량이 +1씩 추가됨 타켓팅을 하기 어려웠다 (1) 배열을 기준으로, 0번째..

Redux 의 state를 변경하고 싶다고요? 그러면 3가지 단계를 따르세요 store.js 에 state 변경해주는 함수부터 만들고 그 함수를 export 해두고 필요할때 import 해서 dispatch()로 감싸서 호출함 1. store.js에 state 변경해주는 함수부터 만들어요 import { configureStore, createSlice } from '@reduxjs/toolkit' //reducer 뒤에는 state 변경함수를 넣는다 let user = createSlice({ name: 'user', initialState: 'kim', reducers: { //reducers즈 란다. changeName(state){ // 파라미터 state는 기존state를 뜻함 return 'J..

Redux-toolkit라이브러리 왜 씀? props 없이도 컴포넌트간 state 공유가 가능해짐 ,, 등 컴포넌트들이 redux store.js 에서 state들을 가져다 쓸 수 있음 Redux store에 state 보관하는 법 크게 두가지로 나뉩니다 1. 먼저, createSlice() 로 state를 만들고 2. 아래에 configureStore()에 등록하면 됩니다 import { configureStore, createSlice } from '@reduxjs/toolkit' //여기에 state를 만들거임 //createSlice는 useState와 비슷한 역할임. state 생성 // state 하나를 slice 라고 부름 //initialState 뒤에는 초기값 state를 넣음 let u..

스스륵 나오는 애니메이션을 만들고 싶다면? 애니메이션 동작전 스타일을 담을 className을 만들기 애니메이션 동작후 스타일을 담을 className을 만들기 transition 속성도 추가 처음에는 떼엇다가 붙이기 이 순서에 따라서 저번 게시물에서 만들었던 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어보것음 먼저, 애니메이션 동작전후 스타일을 담을 className을 만들고, transition 속성도 추가해볼게요 (css파일) .start{ opacity:0; /* 안보임 */ } .end{ opacity:1; /* 보임 */ transition: opacity 0.5s; /* 천천히 보임 */ } 다음으로 '버튼을 누를때마다 end를 부착해주세요~!' useEffect를 써서 st..

동적인 UI 만드는 방법 1. html, css 로 미리 디자인 완성해두고 2. UI의 현재상태를 저장할 state 하나 만들고 3. state에 따라서 UI가 어떻게 보일지 작성하기 먼저, 버튼0 버튼1 버튼2 내용0 내용1 내용2 디자인하기 귀찮아서 버튼은 react-bootstrap 사이트에서 복사함 두번째로, UI의 현재상태를 저장할 state를 만들기 function Detail(){ let [tab, setTab] = useState(0) (생략) } 탭 ui의 상태는 0번 내용이 보이거나/ 1번내용이 보이거나/ 2번내용이 보이거나 셋중하나이기 때문에 그때그때마다 setTab()으로 state를 변경해주면 될듯 마지막으로, state에 따라서 ui가 어떻게 달라 보일지 작성 function D..

최근들어 프로젝트를 하다보면 자잘한 오류가 많이 난다. 자잘하다고 무시하면 안되는게, 코드 한줄만 잘 못써도 렌더링이 안되서 화면이 흰바탕이 된다. 내가 왜 이렇게 오류가 많이 날까? 생각해보니 나는 참 나쁜 습관을 가지고 있었다. 그래서, 나쁜 습관을 고치기 위한 강력한 해결방법이 필요했다. 난 오늘부터 프로젝트를 하면서 오류를 마주치면, 그 오류의 원인을 파악하고, 해결하는 그 과정을 모두 블로그에 적기로 했다. 어떤 오류는 1시간, 어떤 오류는 2일이나 걸려 해결하기도 하지만, 결론적으로는 문제원인이 무엇이었고, 어떻게 해결했는지가 중요하다고 생각한다. 문제를 차근차근 해결해나간다면, 앞으로 마주할 문제의 경우에는 걸리는 시간이 줄어들 것이다. 1. 영어로 된 에러코드를 읽고, 직관적으로 해석한다...