프론트엔드 첫걸음

컴포넌트들이 props 없이 state 공유할 수 있다. Redux로 컴포넌트간 공유가 편해짐 - 대용량 프로젝트에 사용하면 좋다. 액션 - 상태에 어떤 변화가 필요할 때 만드는 것 { type : 'ADD_TODO', data : { id : 1, text : '리덕스 배우기', } } 디스패치 - 액션을 발생시키는 함수. 액션을 파라미터로 넣어서 호출하면 스토어가 리듀서 함수를 실행함. 스토어 - 프로젝트에 리덕스를 적용하기 위해 만드는 저장공간. 한 개의 프로젝트는 하나의 스토어만 가짐. 스토어 안에는 현대 애플리케이션 상태와 리듀서가 들어있으며, 그 외에도 몇가지 중요한 내장함수를 지닌다. 리듀서 - 변화를 일으키는 함수. 디스패치로 리듀서가 실행되면 현재상태와 액션을 파라미터로 받아와서 두 값으..

CSS로 컴파일할 때 외부 선택기로 대체된다는 의미 https://stackoverflow.com/questions/14553066/less-css-hover https://medium.com/the-crazy-coder/what-scss-means-e448e2ac98d3 & 뒤에 공백이 있는 경우. .class1 { & .class2 { ... } } //아래와 같다. .class1 .class2 { ... } &는 .class1 를 요약한 것이다. & 뒤에 공백이 없는 경우 .class1 { &.class2 { ... } } //아래와 같이 컴파일된다. .class1.class2 { ... } 의사 클래스 작성 .button { &:visited { } &:hover { } &:active { } }..

https://styled-components.com/docs/advanced#referring-to-other-components See the Pen Untitled by JEONG (@cona) on CodePen. const Remove = styled.div` display: flex; align-items: center; justify-content: center; color: #dee2e6; font-size: 24px; cursor: pointer; display: none; `; const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: paleviole..

a:link { } /*링크*/ a:visited { } /*방문 시*/ a:hover { } /*지나치게*/ a:active { } /*활동하면*/ a:focus { } /*주목 받습니다*/ ~:hover { } ~:visited { } 순서를 이렇게 해버리면 한번 방문한 사이트는 hover효과가 안먹힌다. [참고] https://velog.io/@cateto/htmlcss-link-visited-hover-active-focus

Form 제출 시 input값 가져오는 두가지 방법이 있다. State에서 가져오는 것과 ref에서 읽은 값 두가지이다. const nameInputRef = useRef(); const [enteredName, setEnteredName] = useState(''); const nameInputChangeHandler = event => { setEnteredName(event.target.value); } const formSubmissionHandler = event => { event.preventDefault(); const enteredValue = nameInputRef.current.value; //1. useRef 사용하여 값 가져오기 console.log(enteredValue); //..

자바스크립트는 event를 안 넘겨주고도 함수가 event를 사용할 수 있다. 만약 inline으로 event를 넘겨주려면 반드시 'event'여아한다. 'e'를 넘겨주면 안된다. 함수에서 매개변수로 받는게 없어도 함수내에서 event사용할 수 있다. inline으로 event넘겨준 것이 있으면 event를 e로 축약해서 쓸 수 있다. 자바스크립트는 위와 같다. 한편 리액트는? inline함수로 event넘겨주지 않고, event를 반드시 받아야 한다. const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; 요기서 (event) 이부분이 꼭 있어야된다. 자바스크립트는 function inputHandler() { co..

이벤트 위임 localStorage에 데이터가 저장되는 todoList 를 만들었다. 아이템 추가된 후에 추가된 아이템에 delete버튼을 클릭한 경우 추가된 아이템을 그린 뒤에 delete 버튼에 이벤트를 걸려고 하니까 delete버튼이 null이라고 하는 오류가 발생했다. 이벤트 위임을 사용하니 해결되었다. https://stackoverflow.com/questions/16512016/event-listener-in-elements-appended-after-dom-content-loaded //deleteEvent document.body.addEventListener('click', function (e) { if (e.target.className == 'delete') { let $delBt..

display를 inline-block으로 준다. https://golmaru.tistory.com/15

getter setter setter를 설정하면 값을 할당하려 할 때 프로퍼티의 값이 직접 바뀌지 않고 setter가 호출된다. getter를 설정하면 값을 읽을때 getter를 통해 읽는다. class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } get age() { return this.age; } set age(value) { this.age = value; } } const user1 = new User('Steve', 'Job', 11); console.log(user1.age); user1 생성 시 constructor에서 -1..

첫 번째 truthy를 찾는 OR연산자 '||' 모든 피연산자가 false이면 마지막 피연산자를 반환 let firstName = ""; let lastName = ""; let nickName = "바이올렛"; alert( firstName || lastName || nickName || "익명"); // 바이올렛 리팩토링 예시 리팩토링 전 function fetchData() { if (state.data) { return state.data; } else { return 'Fetching..'; } } 리팩토링 후 function fetchData() { return state.data || 'Fetching'; } 첫 번째 falsy를 찾는 AND 연산자 ‘&&’ 모든 피 연산자가 true이면 마..