구현할 리스트

• SEO를 위해 img태그 alt속성 추가
• 상단 메뉴 드롭다운 추가 (가능하면 카테고리를 메뉴와 동일하게 쓰면 좋을듯)
  
  • 치환자 수정이 불가할 경우 : 카테고리 dropdown 기능을 nav로 (이 경우 모바일 구현이 걱정)
• CSS 겹치는 부분 최소화하고 !important 최대한 없애기
• 광고 위 아래로 자동 여백 추가
• 사진 삽입 시 자동으로 여백 조정

구현한 리스트

• 커서를 변경
• TOP 버튼 추가
• 브라우저 창에 따른 상단 이미지 변경
• 채팅봇 추가

오늘 이론 시간에 배운 것
1. CSR과 SSR
2. Express
3. REST API
4. MongoDB
5. CRUD

1. CSR과 SSR

웹 브라우저에서 자바스크립트를 분석해서 HTML을 만든다

렌더링 : 데이터와 코드에서 출력을 생성하는 과정

CSR = Client Side Rendering

브라우저에서 렌더링을 진행

SSR = Server Side Rendering

서버에서 렌더딩을 진행

클라이언트 서버와 백엔드 서버 둘 다 서버다!

클라이언트 서버는 보이는 거다.

CSR과 SSR의 장단점은 서로 반대다

페이지마다 목적에 따라 구현 가능

렌딩 페이지는 SSR

나머지는 CSR

> 많은 회사들이 이런 식으로 둘 다 사용하고 있다

즉

SSR : 야 브라우저 너가 알아서 읽어 = 한국인한테 번역안된 원서를 던져주고 번역해서 읽으라는 거

CSR : 내가 읽어서 알려줄게 = 번역된 번역서를 던져주는 거

2. Express.js

Node.js 프레임워크로 자바스크립트 어플리케이션 개발이 더 쉬워진다

주요 기능

Routing

URL을 서버의 특정 기능에 꽂아주는 것 (매핑)

=식당 주문서

중첩 라우팅

모듈화 : 코드가 더 깔끔해지고 보수도 더 쉬워진다

동적 라우팅 : "/:" 는 뒤에 뭐가 오더라도 OK

파일 라우팅

pug파일  태그 없이 그냥 작성, 변수 입력 가능

미들웨어

HTTP 요청과 응답 사이에 실행되는 기능

=고속도로 휴게소 같은 거

애플리케이션 레벨 미들웨어 : 전역에서

라이터 레벨 미들웨어 : 특정 URL에서

오류 처리 미들웨어 : 에러를 모두 받는 빗물받이 역할

외부 라이브러리 미들웨어

내장 미들웨어

Nodemon은 Node를 재시작해주는 라이브러리다.

Node index.js

nodemon index.js

Package.json에 스크립트에 추가

"start" : nodemon ./index.js

3. REST API

Representational State Tranfer

보여지는 상태를 잘 맞추기 위한

사용 유지 관리 및 확장이 쉬운 웹서비스를 구축하기 위한 일련의 지침

HTTP를 어떻게 하면 사용하고 유지 관리하고 확장이 쉽게 관리할 수 있을까?

HHTP를 보내고 받을 때 어느정도 양식을 만들어놓는다

이력서도 양식이 있는 곳이 더 편하다

API란?

프로그램 간에 정해진 기능을 실행할 수 있게 하는 약속

배달앱을 생각해보자

음식 눌러 주문하기 > 집으로 배달 온다 (그 과정은 모른다. 식당과 기사의 일)

우리는 요청하면 응답이 온다

HTTP만 아니라 다른 거도 가능

HTTPMthod 를 명사형으

/createPost > Post /post/:id

4. MongoDB

RDBMS 관계형 데이터베이스

NoSQL

Database

Collection

document < 데이터 한줄

MongoDB를 직접 다루지 않고 Mongoose를 통해

자바스크립트는 Object

MongoDB는 document

둘이 비슷하지만 더 끈끈하게 연결을 원한다

그걸 도와주는 역할이 Mongoose

빠른 비정형

형식 없이 그냥

> 데이터 관리 곤란

그래서 Mongoose는 스키마를 통해 데이터 관리

붕어빵 틀 > 속에 무엇을 넣든 붕어빵이라는 범주 안에 있기에 붕어빵이다

스키마도 틀이 있다

5. CRUD

Creat

Read

Update

Delete

오늘 학습한 것
1. 인프런 React 강의에서 수정하기 버튼 구현하는 법을 배우고 Git에 업로드
2. 모던 자바스크립트 입문을 한 번 설렁설렁 읽어봄 (심볼에 대해 처음으로 배웠다)
3. HTTP 통신에 대해 ChatGPT에 물어보며 학습
4. 생활코딩에서 웹과 Node.js 11강까지 학습
5. 블로그에 HTML과 CSS 수정을 통해 채팅 기능과 브라우저 창 크기에 따른 상단 이미지 조정 기능을 구현
6. Visual Studio Code에서 같은 항목을 한꺼번에 수정하는 단축키 : Ctrl + Shift + L

HTTP가 아닌 다른 통신규약도 있니?

네, HTTP(하이퍼텍스트 전송 프로토콜) 외에도 여러 가지 다른 통신 규약이 있습니다. 일부 예는 다음과 같습니다.

FTP(File Transfer Protocol): FTP는 파일을 전송하는 데 사용되는 표준 프로토콜입니다. 일반적으로 서버와 클라이언트 간에 파일을 업로드하고 다운로드하는 데 사용됩니다.
SMTP(Simple Mail Transfer Protocol): SMTP는 전자 메일을 전송하는 데 사용되는 표준 프로토콜입니다. 이 프로토콜은 메일 서버 간에 이메일 메시지를 전송하는 데 사용됩니다.
DNS(Domain Name System): DNS는 인터넷 상의 도메인 이름을 IP 주소로 변환하는 데 사용됩니다. 이를 통해 사용자는 도메인 이름으로 웹 사이트에 액세스할 수 있습니다.
SSH(Secure Shell): SSH는 안전하게 원격 컴퓨터에 로그인하고 명령을 실행하는 데 사용되는 프로토콜입니다.
IRC(Internet Relay Chat): IRC는 인터넷 상의 실시간 채팅을 위한 프로토콜입니다.

이 외에도 Telnet, SNMP, RTP, SIP 등 다양한 프로토콜이 있습니다.

웹브라우저에서 HTTP말고 다른 통신도 가능해?

네, 웹 브라우저에서는 HTTP 말고도 다른 통신 규약을 사용할 수 있습니다. 일부 예는 다음과 같습니다.

HTTPS(Hypertext Transfer Protocol Secure): HTTPS는 HTTP의 보안 버전으로, SSL(Secure Socket Layer) 또는 TLS(Transport Layer Security) 프로토콜을 사용하여 데이터를 암호화합니다. 이를 통해 사용자의 개인 정보와 민감한 정보를 보호할 수 있습니다.
FTP(File Transfer Protocol): FTP는 파일을 전송하는 데 사용되는 프로토콜로, 일부 브라우저는 FTP 클라이언트를 내장하고 있습니다.
WebSocket: WebSocket은 서버와 클라이언트 간의 실시간 양방향 통신을 지원하는 프로토콜입니다. 이를 통해 더 빠르고 효율적인 양방향 통신이 가능합니다.
SPDY: SPDY는 HTTP의 대체 프로토콜로, 더 빠른 데이터 전송을 제공합니다. 구글에서 개발한 프로토콜로, HTTP/2로 표준화되었습니다.
WebRTC(Web Real-Time Communications): WebRTC는 웹 브라우저에서 음성 통화, 영상 통화, 파일 공유 등의 실시간 통신을 가능하게 하는 API입니다. 이를 통해 브라우저 간의 P2P 통신이 가능해집니다.

따라서, 웹 브라우저에서는 HTTP 외에도 다양한 통신 규약을 사용할 수 있습니다.

그렇다면 URL에서 HTTP대신 다른 규약 이름을 넣으면 쓸 수 있는거야?

아니요, URL에서는 프로토콜을 명시하는 부분에 HTTP 대신 다른 규약 이름을 사용할 수 있습니다. 예를 들어, HTTPS를 사용하려면 "https://"을 URL의 시작 부분에 추가하면 됩니다.

하지만, 모든 웹 서버가 다른 프로토콜을 지원하지는 않습니다. 예를 들어, 일부 웹 서버는 FTP 프로토콜을 지원하지만, 대부분의 경우 웹 브라우저에서 FTP URL을 직접 입력하면 작동하지 않을 수 있습니다. 이러한 경우에는 FTP 클라이언트 소프트웨어를 사용하여 FTP 서버에 연결하고 파일을 전송해야 합니다.

따라서, 다른 통신 규약을 사용하려면 해당 프로토콜을 지원하는 서버가 필요하며, 웹 브라우저에서 해당 프로토콜을 지원하는 기능을 제공해야 합니다. 일부 브라우저는 내장 FTP 클라이언트나 WebSocket, WebRTC 등의 프로토콜을 지원하고 있습니다.

수업을 듣는데 초반은 빡 집중해서 어찌어찌알겠는데... 점차 코드가 후다닥 지나가면서 어어... 하면서 놓치게 됨

꼭 이럴 때일수록 Nodemon이 실행이 안됨

그래도 다행인 건 React 2주차나 자바스크립트 3주차 마냥 코드가 이게 머여 하는 정도는 아니라는 거...

예를 들면 미들웨어는 알지만 여기서 추가되는 각종 응용 미들웨어에 대해서는 부족한 느낌

생활코딩 웹 시간에 좋은 말을 들었다. 중요한 것일수록 쉽다. 기본은 쉽고, 혁신은 어렵다. 우선 기본이 흔들리지 않게 잘 공부해야겠다.

생활코딩에서는 어째 코딩보다도 세상을 바라보는 가치관을 더 배워가는 느낌이 있다. 물론 코딩도 엄청 배워간다. 참 고마운 분

오늘 React에서 수정하기 버튼 구현을 실습했다. 이해가 되나 로직이 너무 대단해서 감히 내가 처음부터 구현할 수 있을까 하는 생각이 크다. 강의 다 끝나면 한 번 혼자서 끙끙대며 재현해봐야겠다.

항상 강의를 다 듣고 나중에 느낀 점만 올리고 배운 내용은 따로 정리해왔는데, 오늘 갑자기 강의에 집중하려면 메모를 해야겠다는 생각이 들어서 옆에 블로그 켜고 저장해가면서 들었다.

오늘 강의노트는 진짜 들으면서 실시간으로 적은거라 정리된 것이 아니다. 나중에 정리해서 따로 카테고리 파서 올려야겠다.

학습자료

생활코딩에서 배운 대로 HTML에 코드로 넣어봤다. 배운 걸 써먹고 이게 실제로 작동하니 정말 신기하다.

새벽까지 자바스크립트 복습을 하다가 그만 늦잠을 자버렸다

Node.js 화요일 수업을 어찌어찌 듣고, 점심을 먹었는데, 도서관 알람으로 예약한 책이 도착했다고 연락이 왔다

모던 자바스크립트 Deep Dive인데 엄청 두껍다... 도서관 수직생이 이정도면 흉기아니냐고 할 정도...

책을 딱 펼쳤는데... 하... 막막하다

일단 다른 자바스크립트 책이랑 하루종일 씨름했다.

안다고 생각했는데 모르는 것도 많았고, 완전 처음 보는 것도 많았다.

특히 Promise는 몇주째 알겠다!와 완전 모르겠다!의 반복...

그나마 수확이라면 그동안 멍한 상태로 이해하지 못한 채 넘어갔던 fetch를 이해하게 되었다는 점

조금만 성과라도 하나둘 모아서 급증하는 스트레스 수치를 어찌어찌 낮춰봐야겠다.

중간에 리엑트 인프런 강좌대로 실습하고 git에 push도 했다. 3일 콤보로 git을 쓰니 뿌듯하다

리엑트 인프런 강의는 이해가 되서 다행이지만, 아직 혼자서 무언가를 만들어보기는 벅찬 느낌이다.

저녁 이후에는 그동안 손도 못댄 채 넘겨온 실습 문제들을 어찌어찌 풀어봤다. 아직 전부 풀지는 못했지만 몇몇 개는 코치님 코드 도움받아가며, 몇몇 개는 혼자서 풀어보는 식으로 해결했다... 근데 아무리 생각해도 지시문이 너무 불친절하거나 설명을 어렵게 해서 정답 코드를 봐도 갸우뚱거릴 때가 많다.

특히 배우지도 않은 내용을 갑자기 해라고 던지는 경우도 많아서... 살짝 빡칠 때도... 한참을 풀어도 input 가져오는 게 안되어서 왜인가 했더니 정답코드에 전부 readline으로 적혀있었다. readline 배운 적도 없는데... 심지어 지시문에 쓰라는 말도 없다.

밤에는 ChatGPT 도움 받아가면서 자바스크립트 통신 부분이랑 Promise 문답식으로 공부했다. 진짜 ChatGPT랑 이야기하면서 공부하니까 버틸 수 있는 느낌이다. 은근 재미있다 ㅋㅋ

다만 자꾸 끊기는 일이 많아서 힘들다... 훈련비 받으면 바로 ChatGPT 유료 가입해야겠다

41.1度

41.1도

枕草子の「にくきもの」に、おしゃべりの長い客や酒ぐせの悪い人などと並んで、蚊が出てくる。〈ねぶたしと思ひて臥したるに、蚊の細声にわびしげに名のりて、顔のほどに飛びありく〉。眠くて横になったら、蚊がか細い声で心細げに名乗ってきて……。きれいな表現のなかに、不快さがにじむ。

마쿠라노소시*의 "얄미운 것"에는 끊임 없이 말을 하는 손님이나 술버릇이 나쁜 사람과 함께 모기가 언급된다. "잠이 와서 누우니, 모기가 홀로 왱하고 싸움을 걸고, 얼굴로 날아드는구나." 잠이 와서 누웠는데, 모기가 앵앵거리며 싸움을 걸어와서... 멋들어진 표현 속에 짜증남이 느껴진다.
*일본 헤이안 시대에 세이 쇼나곤이 집필한 고전 수필

耳元でキーンという羽音を聞いたときのあの嫌な感じは、今も昔も変わらないのだろう。ただこの夏は、気のせいか、いつもより少ないような。

귓가에 윙윙거리는 날개짓 소리를 들을 때마다 그 짜증남은 예나 지금이나 변함없다. 다만 올 여름은 기분 탓인지 평소보다 줄어든 듯 하다.

あまりに気温が高いと、どうも蚊は飛べなくなるらしい。ネッタイシマカが活動できるのが10度～35度だとする研究があり、日本によくいるヒトスジシマカも同様と見られている。35度超えが当たり前になった今年の夏。蚊さえまいらせる暑さとは、どういうことか。

기온이 심하게 높으면, 제아무리 모기라도 날지 못한다고 한다. 열대숲모기의 활동가능범위는 "10도에서 35도"라는 연구결과가 있으며, 일본에서 자주 볼 수 있는 흰줄숲모기도 이는 마찬가지로 보인다. 당연하다는 듯이 35도를 넘는 올여름, 모기조차 두손두발 다드는 여름은 할 말을 잃게 만든다.

大暑のきのう、埼玉県熊谷市で41.1度まで気温が上がり、日本の観測史上で最も高くなった。東京都、岐阜県、山梨県でも40度超を記録した。外を歩くと、熱い空気が身にまとわりつくかのようだ。

대서였던 어제, 구마모토현 구마야시에서 기온이 41.1도까지 올라가 일본 관측사상 최고를 찍었다. 도쿄도, 기후현, 야마나시현도 각각 40도 이상을 기록했다. 밖을 나가면 뜨거운 공기가 몸에 질척질척 달라붙는 느낌이다.

気象庁の定義では最高気温が30度以上なら真夏日、35度からは猛暑日である。40度以上に名前はない。これまで必要なかったにせよ今後はそうもいくまいと、考えてみる。「極暑日」「灼熱日」あるいは「炎熱日」?よそう。気分が悪くなる。

기상청의 정의에 따르면 최고기온이 30도 이상일 경우 "마나츠비(真夏日)", 35도 이상일 경우 "모쇼비(猛暑日)"이다. 하지만 40도를 넘을 경우 명칭은 아직 없다. 지금까지 그 필요성을 못 느꼈더라도 이젠 그렇지 않다고 생각한다. 그 새로운 이름을 생각해본다. "고쿠쇼비(極暑日)" "사쿠레츠비(灼熱日)" 또는 "엔네츠비(炎熱日)"... 그만두자. 기분만 나빠진다.

枕草子には秋に入ったころの涼やかな描写もある。夏扇のことなど忘れ、薄手の線入れをかぶって昼寝をする気持ちのよさ……。そんなことが、すごくぜいたくなように思えてくる。

마쿠라노소시는 막 가을이 될 무렵의 시원함에 대해서도 표현하고 있다. 부채는 던져버리고 얇은 천을 베고 낮잠을 자는 평온함... 그런 부분이 매우 풍요롭게 느껴진다.

絶滅危惧種

멸종위기종

19世紀の終わりごろ、米国の町々を回っていたサーカスの話である。「最後のキリン」を呼び物にし、こう宣伝した。かつてはたくさんいたキリンも、今ではこの1頭だけになってしまいました。非常に高価な動物です。この機会を逃したら、もう二度と見られないかもしれません。

19세기 막바지 무렵 미국의 마을 곳곳을 순회하던 서커스의 한 일화다. "마지막 기린"을 앞세워 이렇게 선전했다. 예전엔 쉽게 볼 수 있던 기린도 지금은 이 한 마리만 남았습니다. 대단히 귀한 동물입니다. 이 기회를 놓치면 다시는 못 볼 수도 있습니다.

シファキス著『詐欺とペテンの大百科』に出てくる大ゾウだ。それでも最後の機会だと信じた人はたくさんいたというから、盛況だったのだろう。

시파키스(Sifakis) 저서 "사기와 속임수 대백과"에 나오는 거대한 코끼리다. 그래도 마지막 기회라고 믿은 사람들이 많이 모였다고 하니까 아마도 성황이었을 것이다.

さて、こちらは詐欺でもペテンでもない正真正銘の絶滅危惧種、ニホンウナギである。今年も養殖用の雑魚がとれず過去2番目に少なかった。値段も上がるばかりだ。しかしというか、だからというか「絶滅するなら、今のうちに食べておこう」との消費行動もあるようだと、紙面で読んだ。

하지만 이건 사기도 속임수도 아닌 진짜 꾸밈 없는 멸종위기종 뱀장어이다. 올해도 양식용 치어를 잡을 수 없어 과거 2번째로 적은 생산량을 기록했다. 가격도 내릴 줄을 모른다. 이 상황 속에서 아니 오히려 이 상황이니까 "어차피 멸종될 것 지금이라도 먹어두자"라는 소비행동도 있는 모양이다. 신문을 통해 읽었다.

国際自然保護連合のレッドリストに乗ってから4年。雑魚がいない、天然ものも消えつつあると、ウナギ好きの身には暗いニュースが続く。完全養殖への望みはあるが、食卓に上るのはいつのことか。

세계자연보전연맹의 적색 목록에 오른지 4년이 흘렀다. 치어는 안 잡히고, 자연산도 점점 사라지고 있다는 장어를 좋아하는 사람에겐 어둡기만 한 뉴스가 이어진다. 완전 양식화를 기다려보지만 식탁에 오르기 까진 얼마나 걸릴지...

一昨年の小欄で、ウナギを味わうのは「大げさに言えば、パンダやトキを焼いて食べるようなもの」と書いた。表現がきつすぎると、お叱りの電話もいただいた。しかし今は大げさではないと感じる。好きだから控える。そんな姿勢があっていい。

제작년 신문 란에 장어를 맛본다는 것은 "과장해서 말하자면 판다나 따오기를 구워 먹는 것과 같다"고 적었다. 그 때문에 표현이 심하다고 항의 전화를 받았다. 하지만 지금은 전혀 과장이 아니라고 생각한다. 좋아하니까 피한다. 지금은 그런 모습이 바람직하다.

暑さにまいる土用のこの時期、何を食すべきか。言い伝えは様々で、土用卵、土用蜆、土用餅などの言葉もある。「最後のウナギ」を心配せずにすむ味覚はたくさんある。

무더위가 내리쬐는 "도요(*일본의 복날과 같은 날)" 이 시기 무엇을 먹어야 할까. 전해내려오는 것은 여러가지로, 몸보신 계란, 몸보신 바지락, 몸보신 떡 등의 말이 있다. "마지막 장어"를 걱정하지 않고 보낼 수 있는 방법은 여러가지다.