목록전체 글 (150)
On a couch
미처 블로그에 옮기지 못한 예전 메모들을 보다가 유용하게 쓰일 거 같아서 따로 정리! 자료 출처: 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 태그를 이용해 외부 스크립트 파일을 가져올 수는 있었지만, 파일마다 독립적인 스코프를 갖지 않고 하나의 전역 객체를 공유했다 => 변수이름 충돌 등 스코프 문제 발생, 의존성 문제가 해결되지 않아 모..
과제 Part 1 - 타이머 API 1) 타이머 관련 API setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행 매개변수 : 실행할 콜백 함수, 실행 전 기다릴 시간(0.001초) return값 : 임의의 타이머 ID setTimeout(function () { console.log('1초 후 실행'); }, 1000); // 123 clearTimeout(timerId) : setTimeout 타이머를 종료 매개변수 : 타이머 ID return값 : 없음 const timer = setTimeout(function () { console.log('10초 후 실행'); }, 10000); //timer에 id를 반환받아 저장 clearTimeout(timer); ..
어제 아고라스테이츠 과제 하는데 다 아는 내용을 못 써먹고 있는 내가 너무 답답하고 자존심 상했다. 적용하기 귀찮아 할 때도 아니고 완벽한 지식이 떨어지길 기다릴 처지도 아니라는 생각이 들어서 필요한 걸 다 세팅해두고 활용해야지 싶었다. 데탑이랑 노트북 둘다 듀얼 환경이라 다 세팅하려면 엄청 시간 들겠지만.. 중요한 건 실력이 느는 거니까. 후.. 수업들을 당시 메모 보니까 그때 이해 제대로 못하고 대충 썼네. 과거의 내 메모를 정리해주고 있다 ㅠ 스파르타 파이썬/DB 사용법 복습 * 우분투에 몽고디비 설치 아니 우분투는 대체 뭔데 파이썬도 기본으로 깔려있고 몽고디비도 있는거야.. https://www.digitalocean.com/community/tutorials/how-to-install-mongo..
오늘 배운 것 scss 다시 세팅 - 강의 처음 들을 땐 뭔 말인지도 모르고 그냥 따라만 했었는데 교육에서 package.json에 대한 설명을 한 번 듣고 나니 익숙해보이는 게 신기했다 ㅎ 이제 나도.. script가 왜 필요한지 알아요.. ㅎㅎ gitignore 샘플 활용방법 - 노트북을 우분투로 세팅하면서 쏟아지는 source control 알람에 기겁하고 뜨는 것마다 gitignore에 수동으로 입력해 줬는데, github에서 기본적으로 제공하는 세팅이 있다는 걸 알게 됐다. https://velog.io/@psk84/.gitignore-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 덕분에 node-scss 세팅하면서 뜬 1000개 이상의 알람을 진화할 수 있었다 ㅠ
배운 내용을 그때그때 적용하며 사용 가능한 페이지 제작을 목표로 하는 개인 프로젝트 1차 (22.05.04) : 메인페이지 페이스오프 / Django 아임웹에 게시된 식음료점 디자인들을 참고 모바일/데스트탑 2단의 반응형 메인 페이지를 테스트 제작 django 템플릿으로 연결 2차 (22.05.14-15) : scss 적용 scss 세팅 : 그리드 시스템, 타이포그래피, 컬러 기본값을 적용 favicon 추가 3차 (22.05.16) : 세부페이지 목업 공간소개, 메뉴소개, 쇼핑 페이지 와이어프레임 제작 4차 (22.06.06) : React 적용 python 모듈 제거 : 첫 시도에서 uninstall 시도 시 '파일을 찾을 수 없다'며 오류 -> venv에 설치했다는 걸 깨닫고 안에서 전부 unins..
1. props로 재사용 가능한 함수 만들기 버튼 여러 개를 만들 때, 복붙해서 여러 개를 만드는 것보다 하나의 컴포넌트를 설정해두고 내부 속성(props) 몇 가지만 바꿔가면서(configurable) 재사용할 수 있으면 훨씬 깔끔하지 않을까? -> 그러면 바꾸고 싶은 속성값을 어떻게 전달할 수 있을까? 사용하고싶은 컴포넌트(함수)를 만든다. 여기서는 Btn() App()에 컴포넌트(함수)를 삽입하고, 해당 컴포넌트에 전달하고 싶은 속성(key : value)을 적는다. 라고 적는 것은 Btn({banana:"Save Changes"})와 같은 뜻. 이 때 속성 이름은 아무거나 적어도 상관 없음. 변수처럼 사용할 것임. 속성값으로는 함수도 들어갈 수 있음 컴포넌트 Btn()의 괄호 안에 인자로 속성(p..