인트로오늘은 리액트에서 SCSS 사용하는 방법에 대해 알아보려고 합니다. SCSS를 알고만 있고 사용하지 않았는데 CSS 코드가 길어질 때마다 파일 보는 게 너무 괴롭더라고요.. 이참에 SCSS에 익숙해지려고 합니다. 일단 오늘은 리액트에서 SCSS 사용하려면 어떻게 해야하는 지만 알아보겠습니다.SassSass(Syntactically Awesome StyleSheets)는 CSS pre-processor 즉 css 전처리기입니다.가독성이 높고 코드 재사용에 유리한 CSS를 생성할 수 있습니다.변수, 조건문과 반복문 등 추가기능을 사용할 수 있습니다. 더 자세한 내용은 문법 포스팅에서 알아보도록 하죠.어쨌든 순수 CSS보다 지원하는 기능도 많고 짧은 코드로 원하는 스타일을 적용할 수 있습니다.SASS /..

오늘 만든 것오늘은 트위터와 유사한 twittler 만들기를 진행했습니다. react 기초를 배우기 위해 제공되는 과제입니다.기존 과제는 트윗을 전송 시 전송한 트윗은 메인화면 가장 위에 띄우는 것입니다. 그리고 mypage에 갔을 때는 본인 트윗만 띄우는 게 끝이에요.그렇게 모든 테스트는 통과했는데 이랬을 때 다른 페이지를 갔다 오면 이전에 전송한 기록들이 싹 없어지고 초기화가 됩니다.컴포넌트가 언마운트되면서 tweet data가 포함된 state가 소멸되는 것 같아요.. 그리고 다시 마운트 될 때 초기값으로 재설정되면서 기존 dummydata에 있는 것만 보이는 게 아닌가 싶습니다.. 저도 아직 react 생명주기를 잘 몰라서 그냥 그렇지않을까..라는 생각입니다.  LocalStorage 사용하기보다..

인트로useState는 어제로 맛 잘 봤고 이제 useEffect에 대해 알아보려고 합니다.아직 모든 강의를 다 보지는 못했지만 벌써부터 새로운 지식들이 추가되고 좋네요useEffectEffect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다고 합니다.근데 side effect가 정확히 뭐죠..? React 컴포넌트가 화면에 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과를 Side Effect라고 합니다. 리액트에서는 데이터 가져오기, 구독 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것 등이 side effect에 해당된다고 하네요. (익숙하지 않을 수 있다고 공감까지,.. 감동입니다.) React 컴포넌트에는 일반적으로 두 종류의 side eff..

인트로react custom hook 관련 강의를 듣다가 훅을 사용하여 만들지는 않았지만 되게 유용하다라는 생각이 드는 함수들이있어 정리해보려고 합니다.어떻게 구현하는지 궁금해하던 기능들이었는데 강의에서 만나게 되니 매우 반갑네요useConfirm사용자가 뭔가를 하기 전에 확인하는 함수입니다.예를 들어 뭔가를 삭제할 때 정말 삭제하시겠습니까?라는 창이 뜨는 경우가 있잖아요. 그런 기능입니다. 버튼 클릭 시 comfirmDelete 함수가 호출됩니다. Delete the worldComfirmDelete 변수에는 useConfirm이 반환하는 함수가 저장됩니다. const deleteWorld = () => console.log("Deleting the world"); const abort =..