rigood

1. Redux 자바스크립트로 만든 앱을 위한 예측 가능한 상태 저장소 복잡성을 낮춰서 예측 가능하게 해줌 모든 데이터를 state에 넣어 관리하면서 복잡성을 낮춘다. (...라고 하는데 다른 상태 관리 라이브러리보다 훨씬 더 복잡한 것 같다;;) 2. store 개념 state는 함부로 접근할 수 없고, store에 저장되어 있음 (마치 우리가 은행에 돈을 넣어두는 것처럼) state를 가져오는 것, 변경하는 것, 구독하는 것 모두 store를 통해서 이루어짐 store의 getstate, dispatch, subscribe 이용 getstate를 통해 store에 저장된 state를 가져옴 dispatch와 reducer를 통해 state를 변경함 subscribe를 통해 state가 바뀔 때마다 s..

타임라인1월 3일 (화)- 오전 6시에 홈페이지에서 백엔드 자바(JAVA) 과정 수강신청 1월 4일 (수)- 아침 11시쯤 전화인터뷰 안내 문자 수신 (오후 1시~5시 예정)- 오후 2시반 전화인터뷰 진행- 오후 5시반 합격 문자 수신 전화인터뷰전화인터뷰를 한다는 문자를 받았을 땐 조금 두려웠는데,인터넷에서 후기를 찾아보니 해당 과정을 잘 들을 수 있는지만 확인하는 자리이기 때문에 전혀 긴장할 필요가 없다고 했다. 전화인터뷰는 총 4분 30초 정도 진행했고, 담당자 님은 여자분이셨다.지원자를 평가한다는 느낌보다는 리스트에 있는 질문을 순서대로 물어본다는 느낌이 더 강했다. 인터뷰 질문1. 비전공자이신데 해당 과정에 지원한 동기는? -> (내 답변) 프론트엔드를 몇달간 독학하면서 백엔드 없이는 제대로 된 ..

개념 자식 요소들(flex items)의 총 너비가 부모 요소(flexbox)를 초과할 때 줄바꿈을 어떻게 처리할 건지 다루는 속성 부모 요소(flexbox)에 적용하는 속성 종류 nowrap: 줄바꿈을 하지 않고, 자식 요소들을 한 줄로 표시 -> 부모 요소를 초과하게 된다. wrap: 줄바꿈하여 표시 wrap-reverse: 줄바꿈하되 자식 요소들을(flex items) 역순으로 표시 암기법 wrap이 '감싸다' 라는 뜻이니까, 밖으로 삐져나가지 않도록 부모 요소가 자식 요소들을 감싸서 줄바꿈을 한다고 외워야겠다...😅

지난 글에서는 absolute와 opacity를 이용하여 슬라이더를 만들어 보았습니다. 이번 글에서는 CSS의 translateX 속성을 이용하여 옆으로 이동하는 이미지 슬라이더를 만들어 보겠습니다. 먼저 완성샷입니다. 이동 버튼과 페이지네이션까지 구현한 모습입니다. 다만 문제는... 마지막 슬라이드에서 Next 버튼 클릭 시 맨 처음 슬라이드로 거꾸로 돌아갑니다. 첫번째 슬라이드에서 Prev 버튼을 누를 때도 왼쪽으로 이동하는게 아니라, 오른쪽 방향으로 이동하여 중간에 있는 모든 이미지를 거쳐 마지막 슬라이드에 도달하게 됩니다. translateX를 이용하여 이미지 슬라이더 만들기 ※ CSS는 styled-components 라이브러리를 사용했습니다. 0. 구현 원리 한눈에 보기 이미지를 일렬로 쭉 나..

리액트로 이미지 슬라이더를 만들어 봅시다. 라이브러리를 사용하지 않고 순수 자바스크립트로 구현해보겠습니다. 만드는 방법은 2가지가 있습니다. 1. position: absolute와 opacity를 이용하는 방법 2. tranform: translateX를 이용하는 방법 1번 방법은 position: absolute로 이미지를 겹쳐 놓은 상태에서 opacity를 이용하여 맨 위에 보여지는 이미지를 바꾸는 방법입니다. 간편한 방법이지만 이미지가 옆으로 스윽- 이동하는 효과는 낼 수 없습니다. 2번 방법은 이미지가 옆으로 이동하는 효과는 낼 수 있지만 마지막 슬라이드에서 다음 슬라이드(맨 처음 슬라이드)로 이동할 때 왔던 길을 다시 되돌아 가야 합니다. 이번 글에서는 1번 방법으로 이미지 슬라이더를 만들어보..