소파에서 개발하기

이번 회고는 KPT보다는 주절주절 적어봐야겠다. 섹션3 마무리 기간부터 섹션4 중반까지가 나에게는 가장 큰 고비였다. 가장 큰 문제는 스트레스 관리였다. 항상 해왔듯이 자취방에서 데스크탑으로 공부를 하는데, 이상하게 숨이 턱턱 막히고 잠이 쏟아지고 도저히 텍스트가 머릿속에 들어오질 않았다. 꾸준하게 해 오던 블로깅도 미완성인 채로 넘기는 날이 많아지니, 뭐 하나 도저히 끝맺음이 안 됐다. 의욕이 안 생기니 청소하고 밥 차려먹는 것도 버거웠다. 그때그때 도움이 될 만한 것들은 자주 해 봤다. 짧게 낮잠을 자기도 하고, 명상을 하기도 하고, 간식도 들여놓고, 저녁에 산책을 나가기도 하고, 날씨가 더워지면서는 실내 자전거를 들였다. 다 어느정도 도움은 됐다. 그런데 매일의 수업에서 받는 타격이 그에 비해 너무..

기간 오전 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" } 원하는 표현식은 '..

Point 1 실행 컨텍스트 객체에는 3가지가 담긴다 1. VariableEnvironment : 생성 당시의 모습 2. LexicalEnvironment : 생성 후의 변화 반영 3. ThisBinding : this 식별자가 바라볼 객체 LexicalEnvironment는 두 가지 정보를 담는다. (1) EnvironmentRecord : 현재 컨텍스트 내의 매개변수명, 변수의 식별자, 선언한 함수의 함수명 수집 => 호이스팅과 연관됨 (2) outerEnvironmentReference : 상위 컨텍스트의 EnvironmentReconr => 스코프와 연관됨 Point 2 호이스팅이란 EnvironmentRecord가 식별자를 수집해 미리 알고 있는 것을 '끌어올린다고 표현'한 개념이다. Envir..

Point 1. 변수는 변경 가능한 데이터가 담길 수 있는 공간이고, 식별자는 그 변수의 이름이다. 원시형 데이터타입도 결국 '데이터가 저장되어 있는 주솟값'을 참조한다. (한 단계) 참조형 데이터타입은 ''데이터가 저장되어 있는 주솟값' 을 참조하는 배열/객체의 주솟값'을 참조한다. (두 단계) 보통 초심자들에게는 여기서 한 단계씩을 빼고 설명해주느라 약간의 부정확성이 생긴다고 한다. Point 2. 깊은 복사 : 배열/객체의 껍데기와 내부 데이터의 주솟값이 모두 달라지는 복사 얕은 복사 : 배열/객체의 껍데기만 새 주솟값을 갖고, 내부 데이터의 주솟값은 여전히 예전의 것을 공유하는 복사 참조형 데이터를 복사하는 메서드는 보통 current depth에서만 주솟값을 교체하므로, 깊은 복사를 하고 싶다면..

프로젝트 하면서 몇 가지를 배웠고, 이로 인해 멘탈이 휘청했다. 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..