목록혼자 발버둥 (48)
On a couch
이전 상태 부트캠프 세션을 통해서 하루동안 redux의 개념을 배우고 또 하루 동안 예제를 통해 실습을 했다. 그런데 당시에는 react를 배운 지도 얼마 안 돼서 props의 오르내림에 대한 개념도 오락가락 하는 상태였다. 그 위에서 redux를 배우고 있자니 어디까지가 react의 기능이고 어디까지가 redux의 기능이며 그 기능 뒤에서 어떤 함수가 작동하고 있는지도 파악이 너무 어려웠다..! (울고 싶었음) '내가 지금 당장 이해하기에는 복잡한 기능이다'라는 생각에 한동안 손을 떼고 있었는데, 얼마전에 todolist 만들면서 기능 추가할 때마다 어마어마한 props 이동이 필요한 걸 보고 겁이 났다. 아.. 이대로 프로젝트 만들면 props 수정하다가 토하겠다.. 상태 관리가 필요할 수밖에 없는 ..
기간 오전 10시 ~ 오후 8시 정도 결과물 레포 : https://github.com/sol-namoo/colorful-todolist 배포 : https://sol-namoo.github.io/colorful-todolist/ 디자인 레퍼런스 : https://pomofocus.io/app 피그마 작업 : https://www.figma.com/file/mPPEM8nsPQyThD45Fc2373/%EA%B0%9C%EC%9D%B8%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8---todolist?node-id=1%3A3 과정 + 참고자료 State 설계 * 삼항연산자 중첩 사용법 https://jong-hui.github.io/devlog/2020/08/12/(JavaScript)-ne..
회고 그동안 야금야금 눈팅만 하던 정규표현식을 테스트자동화 공부하며 드디어 한 번 써 봤다. 테스트해야 할 경우의 수가 무려 8가지x2가지 = 16가지인데, if문 안에 그렇게 길고 지저분한 코드를 넣고 싶지가 않았다 ㅠ // Discover 카드번호는 항상 6011, 65, 644에서 649까지의 숫자로 시작하고 16 또는 19자리의 숫자입니다. let discoverPrefix = /^['6011''65''644''645''646''647''648''649']/ let discoverLength = /\d{16,19}/ if(discoverPrefix.test(cardNumber) && discoverLength.test(cardNumber)){ return "Discover" } 원하는 표현식은 '..
프로젝트 하면서 몇 가지를 배웠고, 이로 인해 멘탈이 휘청했다. 1. 이때까지 급하게 씹어 넘겼던 학습 내용이 거의 소화되어 있지 않았다는 점 2. 사실상 스스로 배운 것을 곱씹어 본 적이 없었다는 점 3. 그런데 내 눈높이는 높아져서 이번 프로젝트의 목표를 욕심내어 높였다는 점 4. 그리고 결국 원하던 기능의 반도 완성하지 못했다는 점 5. 이로 인해 스스로 많은 스트레스를 받았다는 점 식욕도 너무 없었는데 '어쩌면 에너지가 없어서 더 다운되는 걸지도 몰라' 싶어서 억지로 먹고, 또 먹는 동안 멘탈을 잡아줄 오디오북을 들었다. 문제를 맞고 버티자. 버티면 그릇이 커질 것이다. 그릇이 커지면 더 이상 문제가 문제가 되지 않을 것이다.
미처 블로그에 옮기지 못한 예전 메모들을 보다가 유용하게 쓰일 거 같아서 따로 정리! 자료 출처: https://curryyou.tistory.com/235 [카레유:티스토리] 삼항연산자 사용형식: 조건 ? 조건이 truthy일 때의 값 : 조건이 falsy일 때의 값2 true 또는 false 한쪽 결과에 대해서만 특정 동작을 실행하고 다른 쪽에는 아무 동작도 주고 싶지 않다면 리턴값으로 null을 넣으면 됨 중첩해서도 사용 가능하다 // false ? (true ? "값1" : "값2") : "값3" 와 동일함 const result_06 = false ? true ? "값1" : "값2" : "값3"; console.log(result_06); // 값3 주의점 : 예상치못하게 falsy한 값 ( ..
텍스트 에디터로 편집할 때 애써서 h1, h2, 본문1, 2, 불렛 종류 설정 다 해 놓고 저장하면 막상 읽기 페이지에서 보는 화면은 에디터 화면으로 볼 때보다 훨씬 구리고 정렬도 엉망이다. 불렛 검은 동그라미 흰 동그라미 구분해 놓은 거 다 소용 없어지고, 행간 일그러지고, 글자 크기 제멋대로고, 텍스트가 wrap 되는 breakpoint가 텍스트 크기에 비해 너무 넓으니까 한 줄의 길이가 어마어마하게 늘어나서 그것도 가독성을 해친다. 그래서 내가 적은 필기글을 볼 때 읽기 화면으로 바로 읽지 않고 수정하기 페이지에서 읽는다 ㅠ 반면 에디터 화면에서는 일정 너비 이상으로 창을 늘리지 않으면 에디터 상하단 메뉴가 잘린다. 자주 사용하게 되는 상단 좌측 '헤딩 옵션', 하단 우측 '완료 버튼'이 하필 사이..
문제 윈도우에 우분투를 듀얼부팅으로 설치하면서부터 ssd와 hdd를 둘다 분리해 설치했는데, 어째서인지 컴퓨터에서 전혀 hdd 용량(94G)을 활용하지 못하고 28G짜리 ssd만 붙잡고 '용량이 없다'고 징징대고 있다 ㅠㅜ 설치할 때 나름 블로그 글을 보고 '고대로 따라한다'고 했는데 어딘가 잘못된 것인지.. 처음에는 마운트가 안 된 것인줄 알고 마운트 방법을 찾아봤는데 이미 되어있는 것 같아서 오히려 문제 해결이 늦어지고 있다 파악한 상황 fdisk -l로 확인했을 때 ssd는 dev/nvme0n1p5 파티션(Type : Linux filesystem)으로 잡힌다 fdisk -l로 확인했을 때 hdd는 dev/sda2(Type: Linux swap)와 sda3 파티션(Type: Linux)으로 잡힌다 ..
TIL 1. * 리액트 라우터를 이용해 라우팅 설정 후 기본 페이지를 설정하는 방법 : useEffect와 useNavigate를 이용해 마운트 시 특정 페이지로 연결 - 뒷동산 홈페이지 build 후 배포해 봤더니, 처음 로딩 시에는 메인 페이지가 렌더링되지 않고 빈 페이지만 나오다가, 메인 페이지로 이동하는 로고를 한 번 눌러줘야 렌더링되는 것을 확인했다. 기본 페이지를 설정하는 방법이 없나 해서 찾다가 첫 로딩(마운팅?) 시 특정 페이지로 이동하게 하는 hook 활용 방법을 찾음. 두 가지를 섞어서 이렇게 활용이 가능하구만! - 참고 : useEffect+useHistory 방법 https://jforj.tistory.com/146 , useNavigate 사용법 https://basemenks.t..
오늘 배운 것 패캠 리액트 강의를 산 지 한달만에 켜 봤는데 환경설정에서부터 어리둥절했다. 웹팩이.. 뭐란 말인가.. 셋업되는 모양을 모아하니 scss 쓰던 거랑 비슷해 보이는데 확실한 정의가 필요해서 검색했다. 블로그 글 'webpack'을 쓰는 이유 : https://ingg.dev/webpack/ 설명에 나온 path 모듈도 자주 보여서 한번 검색해 봤다. 쓰는 이유가 신기했다. https://www.daleseo.com/js-node-path/ 모듈화 구현 기법 발전 과정 자바스크립트에서 script 태그를 이용해 외부 스크립트 파일을 가져올 수는 있었지만, 파일마다 독립적인 스코프를 갖지 않고 하나의 전역 객체를 공유했다 => 변수이름 충돌 등 스코프 문제 발생, 의존성 문제가 해결되지 않아 모..
어제 아고라스테이츠 과제 하는데 다 아는 내용을 못 써먹고 있는 내가 너무 답답하고 자존심 상했다. 적용하기 귀찮아 할 때도 아니고 완벽한 지식이 떨어지길 기다릴 처지도 아니라는 생각이 들어서 필요한 걸 다 세팅해두고 활용해야지 싶었다. 데탑이랑 노트북 둘다 듀얼 환경이라 다 세팅하려면 엄청 시간 들겠지만.. 중요한 건 실력이 느는 거니까. 후.. 수업들을 당시 메모 보니까 그때 이해 제대로 못하고 대충 썼네. 과거의 내 메모를 정리해주고 있다 ㅠ 스파르타 파이썬/DB 사용법 복습 * 우분투에 몽고디비 설치 아니 우분투는 대체 뭔데 파이썬도 기본으로 깔려있고 몽고디비도 있는거야.. https://www.digitalocean.com/community/tutorials/how-to-install-mongo..