분류 전체보기

콘솔로그가 왜 두번씩 출력되는거야? - StrictMode

사건의 발단 useEffect를 배우며 마운트과정을 콘솔에 찍어보다가, 첫 마운팅시에 콘솔로그가 두 번 찍힌다는걸 발견했다. 이 이후부터는 정상적으로 한번씩 찍혀 넘어가려고 했으나 찜찜한 마음에 검색을 해 보았는데, 원인이 index.js에서 루트에 컴포넌트를 렌더링 할 때 사용하는 라는 것을 알게되었다. 원인은 StrictMode 리액트를 배운지 얼마 안되서 그동안 아무 생각없이 따라치던 녀석인데, 이녀석이 원인일 줄은 몰랐다. StrictMode 는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로서, Fragment 와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화한다. -> 쉽게 말해 StrictMode는 개발도중 발생하는 문제를 감지하기 위한 설정으로 Moun..

17주차 회고 - 리액트 시작. 위기감. 정해진 프로젝트 멤버

리액트로 정신없이 달린 한 주였다. 일단 자바스크립트 기초의 중요성을 실랄하게 느꼈다. 역시 기본기가 중요한건 세상의 이치인가. 그래도 사실 컴포넌트를 만들어서 되게 효율적(이라고 스스로 생각하는?)인 코드를 짜고있다는게 너무 신나고 재밌었다. 사실 근본적인 것들에 관심이 있는 편이라서(대학교때 변태처럼 '개론서', '니체' 같은걸 좋아했었다..) 하나의 개념을 깊게 파고들고싶지만 내 시간은 한정적이고 나는 거기에 빠지면 헤어나올 수 없다는걸 너무나 잘 알고있다. 매일 밤 딥다이브를 아주 재밌게 정독하는데에 만족하고있다. 집중해야한다! 산만하다. 자꾸 스스로에게 위기의식을 불어넣어야 한다. 지금 정신 안차리면 진짜 니인생 큰일난다 그냥 앉아서 인강을 보며 요약정리를 하거나 똑같이 따라치는건 공부가 아니다..

위기감이 몰려왔다

남자친구 집에서 스타워즈 영화를 신나게 보고 돌아온 일요일 저녁. 문득 위기감이 몰려왔다. 물론 평일에 공부를 소홀히 하는건 아니지만, 요즘에 누가 가르치는걸 그냥 듣고 받아적거나 따라적는거 말고 진짜 스스로 머리를 쥐어짜내서 공부하고 있나? 라고 되새겨보면 '아닌 것 같은데..'라는 대답이 나왔다. 나 왠지 공부하는 기분만 내면서 괜찮은 척 하고있는 거 같아. 인생을 바꾸겠다고 시작했는데 이렇게 스스로 정해놓은 데드라인 하나 없이 공부하고 주말에는 쳐놀고있다니.. 아, 또 스스로에게 너무 가혹해지고 있나? 이런 고민을 하다가 내린 결론은, 역시나 잘 해내고 싶다면 스스로를 계속해서 위기상황으로 몰아넣어된다는거다. 4개월만에 할 수 있는걸 1년이 걸려서 하고싶니? 다시 서비스업을 하고싶니? 네가 설계해놓..

리액트.... 이미지가 액박이 뜬다고?

결론: 응 원래 하던대로 하는거 아니야 사건의 발단 리액트를 배우기 시작하고 컴포넌트들을 만들어보다가, 이미지를 추가했다. 음..맞는데? 파일경로 파일이름 다 맞는데? 아~ 리액트에서는 파일경로도 중괄호 안에 넣나보다~ 검색해보니 create-react-app과같이 핫 모듈 로딩을 제공하는 웹팩을 사용하는 경우에는 이미지를 불러오는 방법이 달랐던 것! 웹팩을 사용하고 JSX문법을 사용하는 경우에는 아래처럼 두가지 경우로 이미지를 불러올 수 있다. 해결방법 require('image').default 사용하기 검색에서는 뒤에 .default를 붙이지 않아도 잘 불러오는 것 같았는데, 나의 경우에는 .default를 붙여야만 불러왔고 그렇지 않은 경우에는 엑박이 나왔다. import해서 사용하기 파일 최상단..

JS기초가 부족하면 React가 망한다는 말 진짜였네

결론: JS 기초 제대로 안 해놓으면 멸망 문제의 발단 리액트를 배운 첫날, 나는 '수정버튼'을 누르면 글제목 안의 첫번째 인덱스인 '남자 코트 추천'을 '여자 코트 추천' 으로 바뀌도록 만들라는 지령을 받았다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( 수정버튼 ) } 기존 state의 첫번째 요소만 살짝 변경해주고 state변경함수에 집어넣는 식으로 해보았다. 원본은 건들이면 좋을게 없기 때문에 copy를 하나 만들어서 만들었다. function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return..

flex & grid 책을 출간하기까지(총괄은 쉽지 않다! 하지만 많이 배웠다.)

소스코드:https://github.com/flexandgrid/flexandgrid URL:https://flexngrid.com/ 리디북스 바로가기: https://ridibooks.com/books/2773000058 알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나 ※ 해당 책은 22년 진행한 flex & grid 오픈소스 프로젝트 그룹의 결과물입니다. 사용자에게 컨텐츠를 잘 전달하는 일은 좋은 컨텐츠를 만드는 것만큼이나 중요한 일입니다. 이를 위해 CSS 레이아웃 ridibooks.com 드디어, 책 출간! 드디어 책이 출간되었다. 마지막 퇴고를 제외하고는 처음부터 끝까지 동료들과 힘을 합쳐 직접 만들었다. 항상 책을 쓰고싶다곤 생각했는데 난 그게 에..