새벽코딩

시애틀 매리너스 MLB 직관 후기 T MOBILE PARK

midnightcoder — Thu, 22 Aug 2024 14:08:54 +0900

한국에서부터 야구팬이였던 나의 버켓리스트 중 하나는 MLB 직관하기였다.

사실 약 10년전, 토론토에서 이미 꿈을 이루긴 했지만, 이번 여름 두번째 MLB 경기를 직관하게 되었다.

Aug 11, 2024 SUN (1:10PM)

시애틀 매리너스 VS 뉴욕 메츠

E - TICKET

좌석은 1루석 뒤쪽으로 경기장이랑 매우 가까운 자리를 골랐다.

가격이 무려 CAD 133... 이왕 보는거 잘보이는데서 보자구ㅎㅎ

티켓 구매는 여기에서

https://www.ticketmaster.com/seattle-mariners-tickets/artist/806019

경기가 4시로 밀려서, 밴쿠버에서 아침 11시쯤 출발을 하였다. (스타디움까지 대충 3시간정도 걸림)

012

웅장한 스타디움 뷰 ㄷㄷ

한국에서 여러 스타디움을 가보았지만, 비교가 불가하다고 감히 말하고 싶다.

두근두근 설렌 마음을 안고 입장

0123

한국처럼 치어리더 단상 같은건 없지만, 경기를 보기에 탁트인 경기장은 감탄을 자아냈다.

시골 촌놈처럼 사진만 100장넘게 찍은듯..

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

금강산도 식후경이라고, 안에는 여러 매장들이 즐비해 있었다.

012345

우리는 갈릭 후라이 + 치즈버거 먹음..

0123

대충 저렇게해서 USD 25 정도 하는데..

텍스까지해서 거의 4만원 ㄷㄷㄷ 역시 미국 물가 미쳤음 ㅋㅋ

갈릭 후라이는 맛은있었는데, 좀 간이 세서 물 엄청많이 먹음 ...

그리고, 무인 매장은 아니고, 들어갈때 신용카드를 찍고 들어가면, 물건들고 나올때 자동으로 결재가 되는 시스템의 매장도 있었음..

캐신기.. 내가 뭐 산건지 어떻게 아냐고 ㅠㅠ

계산 잘못된건지도 모르겠고... ㅋㅋㅋ

012345

잭다니엘 콜라맛 한 캔먹었는데.. 만원정도 나옴.. 이거 제대로 계산된거 맞아?? 영수증도 없어서 모름 ....

경기도 재미있었지만, 야구장 구경하는것도 재미있었다.

두팀에 아는 선수라고는,

메츠 프란시스코 린도어

매리너스 저스틴 터너 (최근에 이적하심), 훌리오 로드리게스

정도 밖에 없었지만, 경기는 진짜 재미있었다.

왜냐.. 매리너스가 홈런 3방에 12안타를 치면서 대 폭발을 하였기 때문이였다.

내기억으론 두팀다 타율 0.250 치는 애들도 없었는데.. 거의 불을 뿜은 날이였다.

소리지르다가 경기 끝남..ㅎㅎ

그리고 8회 시작하기전? 하늘에서 핫도그를 던져주는 이밴트를 한다..

뭐 HOTDOGS HEAVEN 이라나... ㅋㅋㅋ

근데 던지는 애가 힘이 없는지 코앞에만 떨어뜨려서 냄새도 못맡아봄..ㅠ

이름하여 HOTDOGS HEAVEN

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

나름 파도타기 응원도 펼침...ㅋㅋ

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

더 할이야기는 많은데, 일기 치고 너무 길어서.. 이만 마친다.

마지막으로 시애틀의 슈퍼스타 훌리오 로드리게스~~~~

12년 계약했는데.. 잘좀하자 ㅠㅠ

이날 5타석 5 삼진 ㄷㄷㄷㄷ

[밴쿠버 일상] 응급실 방문 후기 feat 신장결석, 요로결석 - 2탄

midnightcoder — Tue, 13 Aug 2024 13:23:13 +0900

배출된 결석.. 생각보다 크다

응급실 다녀온 다음날, 이상할만큼 아무 증상이 없었고, 일끝나고 맥주한잔하고 기분좋게 하루를 마무리하였다.

조금 일찍 잠에 들었는데....

저녁 12시 쯤 복통인지 뭔지 배가 아파서 잠을 깼고, 화장실을 갔지만.. 이건 화장실 통증이 아니였다..

다시 복사통이 시작되고, 한번 버텨보자고 끙끙대면서 2시간을 떼굴떼굴 하며 통증을 참았다.

하지만, 새벽2시.. 통증은 참을 수 없을 만큼 강력했고, 심지어 구토도 하기 시작했다.

(통증이 심하면 구토증상까지 동반한다고함)

바로 우버를 불러서 응급실로 향했다.

집에서 차타고 7분거리에 있는 Eagle Ridge Hospital: Emergency Room로 향했다.

https://maps.app.goo.gl/GsTpKHZZfgws7ccN9

사실, 와이프가 새벽에 아팠어서, 여기는 두번정도 가봤었는데.. 시설이 너무 낙후되어 있고 별로 가고 싶지는 않았지만

새로 방문한 ER은 리모델링이 되어있어서, 내부가 매우 쾌적하고 뉴웨스트민스터에 있는 응급실보다 더 좋아보였다.

물론 외관은 후짐..ㅋㅋ (아파서 사진찍고 뭐고 할새가 없었음)

도착한 응급실은 그래도 생각보다 사람은 별로 없었다. 대략 10명정도 대기실에 있었던거 같음

2:30AM

응급실에 도착하자마자, 거의 통증때매 말도 잘안나오는 상황이었지만, 프론트 데스크에서 차근차근 설명했다.

이틀전에 신장결석으로 응급실을 갔었고, 통증이 그때보다 심하고 너무 아파서 병원을 왔다고 설명함

2:40AM

바로 접수하고, 체온 재고 혈압체크 후 옆에 간호사가 대기하고 있는 데스크로 넘어감

마찬가지로 간호사에게 설명을하고, 내가 죽어가고 있는게 보이는지..

바로 진통제를 놔주겠다고 하였다. (강력한거로 달라고 요청함)

2:45AM

이렇게 빨리?

간호사가 주사기와 약통2개를 들고왔다 (몰핀이랑 구토 억제하는 약)

주사를 맞고, 통증이 바로 진정되기 시작함

3:00AM

이때부터 긴 기다림이 시작됨.... ㅎㅎ

통증이 약해지긴했지만, 몸과 마음이 지친나는 앉아있기도 힘들었고, 의자 2개가 붙어있는 곳에 새우처럼 누워서 다음 단계를 기다림..

병원이 생각보다 쌀쌀했고, 긴팔을 가져갔지만 몸이 안좋은건지 너무 추웠음..

간호사에게 담요 좀 부탁했는데 친절하게 가져다주심

4:00AM

대기실에서 내이름을 호명

안쪽 병실있는 곳으로 이동함

이동해서, 소변 채취하고 병실하나 가르키면서 거기서 기다리고 있으라고함

5:00AM

생각보다 빨리 의사선생님을 만나게됨

증상을 묻고, 여지껏 히스토리랑 다 설명드림

의사선생님이

소변검사 결과 기다리고,

피검사를 할꺼니까 피검사 결과보고 다시 이야기하자고 하심

지난번 응급실에서 링거바늘 + 주사바늘 때문에 팔한쪽이 피멍이 들어있다.

한국 간호사들처럼 주사를 잘 못놓는듯하다..ㅠㅠ

왜 자꾸 피를 뽑나 했는데,

피검사는 결석으로 인해, 염증같은게 있는지 다시 한번 검사를 하는거라고한다.

6:30AM

피 뽑기시작

피뽑는 간호사(?)는 실습생인거 같았는데, 한국분 께서 그분을 가르치고 있었음

내 이름을 보시더니, 한국분이냐고 친절하게 이것저거 설명해주시는데..

너무 감사했음.. JANE 선생님 고마워요 ~

내가 너무 고통스럽다고, 시술이나 수술로 결석을 뺄수는 없냐고 여쭤봤는데..

자기가 의사가 아니여서 함부로 말을 할 수 는 없지만,

4mm크기면 일단 기다려보고 진짜 최후의 수단으로 다른걸 할거라고.. 일단은 자연배출 해야한다고 하심

피검사결과는 한시간 정도 걸리기 때문에,

다시 구석에 쭈그리고 누워서 잠을 청함.... 이와중에 잠은 잘잠 ㅎㅎ

7:00AM

진통제 약빨이 다 떨어졌는지, 다시 통증이 막 올라오기 시작함..

간호사 호출 해서 통증이 너무 심하다고, 진통제 놔줄수 있냐고 부탁하였다

그리고 이번엔 주사대신 알약으로 몰핀을 들고와서 먹여주심....

그리고 다시 꿈나라로...ㅎㅎ

8:00AM

의사선생님이 다시 등장하심

피 + 소변 검사결과 특이사항이 없고, 집에가도 되고 아프면 타이레놀 + 에드빌 섞어서 먹으라고 하심..

여기서 나는 약간 겁에 질려서 간청을 함..

선생님 저 다시 통증이 올까봐 너무 무섭다고..

진통제라도 처방해달라고.. 제발~~~~

내 마음이 통한건지..

진통제와 구토 억제약을 바로 처방해서 주셨다.

진통제는 몰핀이였고

HYDRO morphone 1mg

무려 6알이나 주셨다..

나머지 구토 억제제는 Ondansetron 이라고 써있음..

대략 6시간정도 후에 병원을 탈출 할 수 있었다.

물론 병원비+약값은 다 무료~~~ (약도 병원에서 준거라서 따로 돈안냄)

근데 그래서 결석은 어떻게 됐냐고????

다음날까지 에드빌+타이레놀로 진통 억제를 시키다가 (몰핀은 진짜 통증이 심할때 먹으려고 참고참음 - 결국 안먹음)

다음날 점심에 소변에서 나옴.....

참고로, 에드빌+타이레놀 같이 4시간정도 텀을 두고 먹으라고했는데, 이게 효과가 은근히 셈

같이 집에 구비해놓는것도 좋을 듯

배출되기 약 10분전 정도?

갑자기 뭔가 컨디션이 확 좋아졌는데.. 뭐지...?

싶다가 소변을 보는데, 뭐가 하나 빠져나옴...ㅋㅋ 세상 편안~~

앞으로 예방을 위해, 물 많이많이 먹고.. 칼슘이나 나트륨 섭취를 조금 줄일예정 ㅠㅠ

하 진짜 일주일 너무 힘들었다..

[밴쿠버 일상] 응급실 방문 후기 feat 신장결석, 요로결석 - 1탄

midnightcoder — Tue, 6 Aug 2024 14:29:27 +0900

한창 오피스에서 일을 하던 찰나..

갑자기 허리 옆구리쪽이 쑤시기 시작한다.

문득 7년전 그날의 고통이 떠올랐다.

새벽에 복통 비스무리한 통증으로 잠에서 깻는데, 통증이 너무 심해서 걷기도 힘들었던 그날..

요로결석 /신장결석 은

복사통이라고해서, 척추 좌 우측 허리쪽 통증이 느껴진다.

X 로 표시해놓은 부분 (내 허리 사진은 아님)

무튼, 회사 동료들에게 이야기를 하고 엠블런스를 부를지 우버를 타고갈지 고민을 하던 찰나..

통증이 조금 약해져서, 과감하게 운전을 해서 병원으로 이동을 했다.

Royal Columbian Hospital 응급실 전경 (구글맵 이미지)

https://maps.app.goo.gl/mqDnSVAGyJKAyYr18

로열 콜롬비안 병원 · 330 E Columbia St, New Westminster, BC V3L 3W7 캐나다

★★★☆☆ · 종합병원

www.google.com

혹시나 모를 시술같은게 있을지도 몰라서, 코퀴쪽 ER보다는 규모가 큰곳으로 가게 되었다.

참고로, 병원에는 주차장이 없고, 주변에 스트릿파킹이나 페이 파킹을 이용해야하는데.. 금액이 사악하다 ㅠㅠ

응급실에서 언제나올지도 모르는데 대충 2시간에 $15 정도 했던듯...

차타고 가지 말자

10:50 AM

도착하자마자 프론트데스크에서 체크인을 하였고, 대략적인 증상을 말하고, 신장결석( kidney stone )인거 같다고 접수

11:00 AM

바로 옆 창구에서 간호사가 다시한번 진단을 하면서, 혈압 및 체온을 재주었다.

그래도 정확한 증상이랑 기존 히스토리를 말하니까 이것저것 안물어보고 바로 접수가 되었다.

접수 후에 소변통을 주고, 소변 채취해서 안쪽 존에 있는 간호사에게 통을 전달하라고 했는데..

여기서 우왕좌왕하면서 일단 안쪽 존으로 들어가게 된다. (밖에 존에서 소변보고 안에서 부를때까지 기다려야되었음)

11:30 AM

안쪽 화장실에서 소변 채취 후 기다리고 있는데, 밖에서 나를 찾는 소리가 들린다..

나 여기있어 하고 통을 건내드림..

12:30 PM

한참을 기다린거 같은데, 한시간밖에 안지났네.. ㅎㅎ

의자에 가만히 앉아서 여러 환자들을 보면서 시간을 보내고 있을 찰나, 간호사 한명이 나를 또 찾는다.

그리고 혈액 채취를 하고, 링거 바늘같은거를 팔에 꼿아놓고 떠났다.

13:00 PM

다행히 통증이 조금 떨어진 상태여서.. 버티는데 큰 무리는 없었는데..

이제서야 진통제를 가져와서 링거에 수액과 같이 투여를 해주심

대충 대부분의 환자들이 복도에 저렇게 앉아서 기다리고 있다..

심각한 환자들만 우선적으로 병실로 들어가는듯..

14:00 PM

대략 한시간 정도가 지나고 진통제랑 수액도 다 소진이 되었다.

근데 다들 바쁜건지, 한 30분동안 방치되어 있다가, 주사바늘이 아파서 간호사를 불렀다.

'이거 아픈데 좀 빼줄수 없니?'

간호사님께서는 수액봉지랑 진통제 봉지만 제거해주고, 링거바늘은 검사 결과등 추가로 필요할 수 도 있기떄문에

아직 제거는 안된다고 하였다....

14:30 PM

안쪽 병실로 이동해서 침대에서 기다리라고 하심

한 10분정도 대기하고 있는데..

응급실 입성 4시간 정도만에 의사를 만났다.

의사선생님께 대략적인 증상을 말하고, 나 이거 겪어봐서 아는데 신장결석 맞는거같다 라고 하니

의사도 응 니말이 맞는거 같아 하고

토한적 있니?

복통은 없었니?

뭐 이것저것 물어보고, 청진기도 대보고, 누워서 배도 눌러보고 하시고 CT찍어보고 이야기하자고 하고 떠나심

이때가 대충 15:00PM 정도 됨..

16:00 PM

한 시간정도 기다리고, 다시 내이름을 한 간호사가 찾기 시작함 ㅎㅎ

CT실로 이동해서 통안에 들어가서 촬영진행

여기 CT실에서 촬영 진행함

사실 인대 파열이나 골절같은걸로 캐나다에서 CT한번찍으려면 최소 4달 - 6달 기다린다고하는데..

당일에 CT를 찍다니.. 약간 감동

17:00 PM

CT를 찍고, 또 한시간정도 대기를 하니 의사 선생님 재 등장

결석이 4mm 정도 크기이고, 자연 배출될거 같다는 소견..

아프면 타이레놀+에드빌 사서 먹고 물 많이 먹어 하면서 별거 아니라는듯 말씀하심 :)

그리고 TAMSULOSIN HCL CR 0.4MG 을 처방해주심

결석이 빨리 배출되게 도움준다는데.. 뭐 잘모르겠음

Good to go ~~ 하고 이렇게 첫 ER 방문이 끝나게됨..

-----------------

진통제 때문은 아니고, 통증이 갑자기 줄어들어서 병원에서도 심각하게 보지 않은거 같음..

뭔가 다시 정상으로 돌아온거같았음

다음날 정상적으로 오피스가서 일하고, 잠도 잘잠.... 은 아니였음 ㅠㅠ

병원을 다녀오고 하루가 지난 다음날 밤 12시.. 다시 통증이 시작되었음.................... 이건 2탄으로 ㅠㅠ

React 앱 생성하기 (feat. Vite)

midnightcoder — Mon, 11 Sep 2023 05:22:18 +0900

보통 리액트 앱을 생성할 때, 아래와 같은 명령어로 생성을 한다.

npx create-react-app my-app

오늘은, Vite 라는 툴을 이용해서, 다른 방법으로 리액트 앱을 생성해보려고 한다.

Vite 란?
프랑스어로 rapid 또는 quicky 라는 뜻으로, React 외에도 vue, svelte 등 의
프로젝트를 빌드할 수 있게 도와주는 툴 중 하나이다.

https://ko.vitejs.dev/guide/

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

프로젝트 생성

1. 프로젝트 생성하고하자는 폴더로 이동하여,

npm create vite@latest

2. 아래와 같이 선택해 주면, 프로젝트를 생성한다.

3. 생성된 프로젝트 (first-react-app)으로 이동하여, 생성된 파일 확인

cd first-react-app

dir

4. dependency 설치

npm install

5. Server 시작

npm run dev

6. url 접속 : 아래 보이는 Local 도메인으로 접속을 하게되면, 생성된 프로젝트를 볼 수 있다.

장점 : 다른건 모르겠고.. 진짜 엄청 빠르다.

K6 Keychron(키크론) 블루투스 키보드

midnightcoder — Wed, 12 Jul 2023 06:46:16 +0900

기존에 사용하던 키보드가 너무 길기도 하였고, 기계식 키보드를 한번 써보고 싶었는데

때마침, 와이프님께서 졸업선물로 키보드를 구매할 기회를 선사하였다.

나의 작업 공간

캐나다에는 한국의 하이마트처럼 전자기기를 판매하는 3대 매장이 있다.

- Best Buy (https://www.bestbuy.ca/en-ca)

- Canada Computers & Electronics (https://www.canadacomputers.com/)

- Memory Express (https://www.memoryexpress.com/)

각 회사마다 홈페이지에 클리어랜스 세일을 하는데.. 가끔 엄청난 가격의 물건들이 올라와서 종종 둘러보곤 한다.

여러 기계식 키보드 중, 내구성 좋아 보이고, 디자인도 깔끔하니 유행안타게 생긴 키크론 브랜드로 정하고, 그 안에서 선택을 하였다.

포장 박스랑 패킹이 매우 고급스럽다

내가 고른 모델은, K6 red 적축모델로

- 키 개수 : 68개

- 블루투스, C 케이블 유선연결 가능

- 윈도우 & 맥 모두 호환가능

- 4000mAh 베터리 내장

구성품은 위와 같이, C케이블, 여분 key (mac 이랑 window용으로 바꿀수있도록), 그리고 key 빼는 스틱이 함께 들어있다.

그리고 키보드 좌측 면은 아래처럼 2개의 슬라이드 버튼과 충전/연결 포트가 있다.

약, 6개월 정도 사용하면서 일단

타건감이 너무 좋고, 소리도 딸깍딸깍 너무너무 좋다 (가끔 와이프가 시끄럽다고 구박하기도 함)

아래 소리 한번 감상

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

또 한 가지 맘에 드는 점은 백라이트가 너무 예쁘다..

한 5가지 정도 패턴이 있는데, 오른쪽 맨 위 버튼을 누를 때마다 패턴이 변경된다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

뭐, 단점이라면 배터리가 들어있어서 조금 무거운 거랑, 키보드가 작다 보니 가끔 잘못 눌러서 오타 나는 경우..

그리고 가격이 조금 비싸다. 캐나다 달러기준 120달러 정도였나.

암턴 대 만족하며 잘 사용 중이다.

node modules 삭제 및 gitignore

midnightcoder — Sat, 8 Apr 2023 15:14:46 +0900

- node modules 삭제

node modules은 많은 파일이 포함되어 있어서 삭제시 상당한 시간이 소요된다.

하지만, 터미널에서 간단하게 삭제하는 방법을 소개한다.

먼저, 패키지를 설치한 후에

npm install rimraf -g

아래 명령어를 입력하면, 순식간에 삭제된다.

rimraf node_modules

- node modules을 git commit 시에 제외

또한, 리모트 repository에 올라가는 것을 막기위해서, 아래와 같이 하면 된다.

1) 프로젝트 최상위 위치에 .gitignore 파일 생성해준다. (맨앞에 점 주의)

2) .gitignore 파일안에 제외할 내용 입력 후 저장

지금의 경우 node_modules 폴더를 제외해야하므로, 아래와 같이 저장

/node_modules

[JavaScript기초] 8. form tag (with input tag)

midnightcoder — Mon, 6 Feb 2023 12:55:18 +0900

이번 포스팅에서는 form 의 input tag 안에서

1. input에 입력된 값을 get하는 방법

2. 그 값이 공백인 경우에 alert을 띄워주는 방법

3. 또한 값이 특정 길이 보다 짧을 경우에 alert을 띄워주는 방법을 알아 볼 예정이다.

아래와 같이 로그인을 위한 <form>을 생성 한 후

    <div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <!-- 전송 누르면 action으로 지정된 url로 이동 -->
          <form action="sucess.html"> 
            <div class="my-3">
              <input type="text" class="form-control" id="email">
             </div>
             <div class="my-3">
               <input type="password" class="form-control" id="password">
             </div>
             <button type="submit" class="btn btn-primary" id="send">전송</button>
             <button type="button" class="btn btn-danger" id="close">닫기</button>
          </form> 
        </div>
      </div>

미리보기

1. input에 입력된 값을 어떻게 get할까?

먼저, 위에 첫번째 input field는 email을 입력하는 부분이고,

해당 field에(id="email" 인 tag) 입력된 값이 무엇인지 아래와 같이 확인 할 수 있다.

document.getElementById('email').value
// id='email'인 요소의 value를 나타낸다

2. 입력값 (email 또는 password 입력값)이 공백일때 alert을 띄워주는 방법

3. 또한 password 값이 특정 길이(6) 보다 짧을 경우에 alert을 띄워주는 방법 (length를 이용)

아래 코드를 통해서 해답을 확인해보자

      <script>
        // 전송버튼 누르면 -> input에 입력한 값이 공백이면 alert 띄워주세요
        $('form').on('submit', function(e){
            if(document.getElementById('email').value == '' ||
            document.getElementById('password').value == ''
            ){
                alert('email and password should be entered!')
                e.preventDefault(); //form 전송을 막을 수 있다.
            }

            // the length of password is less than 7
            if(document.getElementById('password').value.length <  6){
                alert('The password cannot be less than 6.');
                e.preventDefault();
            }
        })

      </script>

여기서 첫번째 if문을 보게되면

둘중 하나라도 공백이라면 ▶ 이 조건은 또는 (or) 조건으로 연산자 ( || 를 사용하였다)

그리고 두번째 if문을 보게되면

e.preventDafault() 라는 함수를 사용하여, form전송이 되지 않도록 막았다 (추후 포스팅예정)

비밀번호를 3자리 입력하였을때, 잘 작동한다.

출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'

[JavaScript기초] 7. jQuery 사용법

midnightcoder — Mon, 6 Feb 2023 10:52:55 +0900

- jQuery 설치

구글에 jQuery cdn 검색 https://releases.jquery.com/

jQuery CDN

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr

releases.jquery.com

jQuery 3.x 버전 <script> 태그를 찾아서 html 파일에 복사 붙여 넣기

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

아니면, 최신버전 jQuery 사용하려면 아래 코드를 body안에 넣어준다.

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

- jQuery 사용 (1 ~ 5까지 예시)

1. html 변경

이전 포스팅에서 자바스크립트로 html을 변경하는 방법을 보았다.

<p class="hello">안녕</p>

<script>
	document.querySelector('.hello').innerHTML = 'hello'
</script>

해당 코드를 jQuery를 사용하게된다면

$('.hello').html('hello');

위와 같이 간단하게 작성이 가능하다.

2. 스타일 변경

<p class="hello">안녕</p>

<script>
  $('.hello').css('color', 'red');
</script>

참고로, html 셀렉터( querySelector)로 찾으면 html 함수들(ie. innerHTML)을 사용해야하고,

jQuery 셀렉터로 찾으면 jQuery 함수들(ie. html)을 사용해줘야한다.

$('.hello).innerHTML = 'hello';

위 코드는 잘못된 예시이다.

3. class 탈부착 방법 (아래 링크와 비교해보면 jQuery 함수와 html 함수와 차이점을 알 수 있다.)

<p class="hello">안녕</p>

<script>
  $('.hello').addClass('클래스명');
  $('.hello').removeClass('클래스명');
  $('.hello').toggleClass('클래스명');
</script>

https://midnightcoding.tistory.com/101

[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)

이전 포스팅에서 bootstrap을 이용하여, Navbar구현하는 법에 대해서 알아보았다. https://midnightcoding.tistory.com/100 [JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap) 부트스트랩은, 기존에 만들어 놓은 Na

midnightcoding.tistory.com

또한, jQuery를 사용하게 되면, 한번에 같은 class를 모두 변경 할 수있는 장점이있다.

<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>

<script>
  $('.hello').html('바보');
</script>

위에 class='hello' 인 3가지 <p> tag의 html 을 한번에 다 바꿔 줄 수있다.

4. 이벤트 리스너 사용방법

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    어쩌구~
  });
</script>

html에서 사용하였던, addEventListener 대신 on 을 쓰면된다.

앞에서 이야기한대로, on 같은 함수는 jQuery 문법 즉, $() 이걸로 찾은 것들에만 붙일 수 있다.

5. UI 애니메이션 사용법

<p class="hello">안녕</p>
<button class="test-btn">버튼</button>

<script>
  $('.test-btn').on('click', function(){
    $('.hello').fadeOut();
  });
</script>

.hide() 는 사라지게

.fadeOut() 은 서서히 사라지게

.slideUp() 은 줄어들며 사라지게 만들어줍니다.

간단한 애니메이션은 이런 식으로 쉽게 사용가능합니다.

애니메이션을 반대로 주고 싶으면 show() fadeIn() slideDown() 이런게 있습니다.

아니면 fadeToggle() 이런 것도 있음

출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'

[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)

midnightcoder — Mon, 6 Feb 2023 07:19:51 +0900

이전 포스팅에서 bootstrap을 이용하여, Navbar구현하는 법에 대해서 알아보았다.

https://midnightcoding.tistory.com/100

[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)

부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다. 사용법 1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다. 2. Bootstrap 웹페이지로 들어가서 상

midnightcoding.tistory.com

이번 포스팅에서는 Bootstrap을 이용하여, Navbar 버튼을 눌러서 서브메뉴를 보여줄수 있도록 해보자

여기에서는 div tag에 class를 탈부착하여, 요소가 보이게 또는 안보이게 만들예정

오른쪽 버튼을 누르면 서브메뉴가 나타나고, 사라지고 한다.

1. UI 구현 (Navbar + sub menu via bootstrap)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <link href="main.css" rel="stylesheet">
    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

      <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

그리고, css파일 (main.css)에 아래와 같이 두 class에 대해서 스타일링 해준다.

.list-group {
	/* 서브메뉴 숨기기위해 none */
    display: none; 
}

.show {
	/* show class가 있다면, 화면에 나타나도록 */
    display: block; 
}

2. 기능 구현

class="show"를 추가하는 코드

<body> tag안에 <script> tag를 넣어주고, 아래 코드를 집어 넣는다.

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.add('show');
});

즉, class="navbar-toggler" 를 가진 요소를 클릭하게되면,

class="list-group" 인 요소에 show라는 클래스명을 추가하라는 코드이다.

class="show"를 제거하는 코드

그렇다면, 다시 해당 서브메뉴를 안보이게 하고 싶다면?

위에서 부착했던, 'show' 클래스를 다시 제거하면 된다.

document.querySelector('.navbar-toggler').addEventListener('click', function(){
    document.querySelector('.list-group').classList.remove('show');
})

add를 remove함수로 바꿔주면되는데, toggle() 함수를 사용하게되면 위에 추가하고 제거하는 것을 모두 가능하다.

- 클래스명이 있으면 제거하고

- 클래스명이 없으면 붙여준다.

add(), remove() 대신 toggle() 을 이용한 코드

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.toggle('show');
});

querySelector

getElementById()

getElementsByClassName()

이전 포스팅에서 html 요소를 찾아주는 두가지 셀렉터에대해서 다뤄봤는데, 다른 셀렉터도 있습니다.

querySelector인데 아래와 같이 사용가능하다.

<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>

<script>
  document.querySelector('.test1').innerHTML = '안녕';
  document.querySelector('#test2').innerHTML = '안녕';
</script>

querySelector() 안에는 css 셀렉터 문법을 사용가능합니다.

(css에서 마침표는 class라는 뜻이고 #은 id라는 뜻임)

다만 querySelector() 는 맨 위의 한개 요소만 선택해줍니다.

<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>

<script>
  document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>

▲ 그래서 위처럼 test1이라는 클래스가 중복으로 여러개 있는데

X번째 요소를 선택하고 싶은 경우엔 querySelectorAll() 쓰면 됩니다.

querySelectorAll() 은 해당하는걸 다 찾아서 [ ] 안에 담아줍니다.

그래서 [숫자] 를 뒤에 붙여서 원하는 위치에 있는 요소 찾아쓰면 됩니다.

출처 : 코딩애플 'JavaScript 입문과 웹 UI개발'

[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)

midnightcoder — Mon, 6 Feb 2023 06:54:04 +0900

부트스트랩은, 기존에 만들어 놓은 Navbar, tabs, Modal등을 가져와서 구현을 할 수 있는 플랫폼이다.

사용법

1. 구글에 bootstrap을 검색하여, 아래 링크로 들어간다.

2. Bootstrap 웹페이지로 들어가서 상단 네브바에서 Docs로 들어간다 (상단 오른쪽 버전확인 v5.x )

2023년 2월 5일 기준 화면 (화면 구성이 바뀌기도 한다)

3. 위와 같이 Get started with Bootstrap 이라는 화면이 보이게 되는데, Quick start 순서대로 하면된다.

먼저 index.html을 만들고 아래 코드를 넣어준다 (vs code에서 느낌표+tab을 누르면 자동생성)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

4. 그리고 <head> tag 부분과 <body> tag 부분에 아래와 같이 <link> tag와 <script> tag를 추가해주면,

bootstrap 사용 준비 끝

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- 아래 코드 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- 아래 코드 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

이제, 추가하고 싶은 요소를 찾아서 코드를 붙여 넣어주면 구현 가능하다.

* Navbar를 추가하고 싶다면, 아래와 같이 Search에서 검색을 해보자

맨위에 Nav를 누르게되면, 여러가지 Nav 샘플이 나온다.

아래와 같은 모양의 Nav를 구현하고 싶다면, 코드를 복사해서, 붙여넣으면 끝

전체 코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- 아래 코드 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- 아래 코드 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

미리보기화면

위와 같이 예쁜 Navbar가 상단에 나타나게된다.