SCIAN

[Calculus] 중요한 함수들의 테일러(매클로린) 급수

Scian — Sun, 15 Jun 2025 15:41:08 +0900

$e^x$에 대한 매클로린 급수

$e^x=\sum_{n=0}^\infty\dfrac{f^{(n)}(0)}{n!}x^n=\sum_{n=0}^\infty\dfrac{x^n}{n!}=1+\dfrac{x}{1!}+\dfrac{x^2}{2!}+\dfrac{x^3}{3!}+\cdots$

$\sin x$에 대한 매클로린 급수

$\sin x = \sum_{n=0}^\infty (-1)^n\dfrac{x^{2n+1}}{(2n+1)!}=x-\dfrac{x^3}{3!}+\dfrac{x^5}{5!}-\dfrac{x^7}{7!}+\cdots$

$\cos x$에 대한 매클로린 급수

sin x에 대한 매클로린 급수를 미분하는 방식을 사용하면 쉽게 구할 수 있다.

$\cos x = \dfrac{d}{dx} (\sin x) = \dfrac{d}{dx}\left(x-\dfrac{x^3}{3!}+\dfrac{x^5}{5!}-\dfrac{x^7}{7!}+\cdots\right) = \sum_{n=0}^\infty (-1)^n\dfrac{x^{2n}}{(2n)!} = 1-\dfrac{x^2}{2!}+\dfrac{x^4}{4!}-\dfrac{x^6}{6!}+\cdots$

$\arctan x$에 대한 매클로린 급수

$\arctan x = \sum_{n=0}^\infty (-1)^n \dfrac{x^{2n+1}}{2n+1}$

$\cosh x, \sinh x$에 대한 매클로린 급수

이 때, $\cosh x$와 $\sinh x$는 미분한 것이 각각 서로이므로, 음수항을 포함하지 않는다.

$\cosh x = \sum_{n=0}^{\infty} \dfrac{x^{2n}}{(2n)!}$

$\sinh x = \sum_{n=0}^{\infty} \dfrac{x^{2n+1}}{(2n+1)!}$

$\dfrac{1}{1-x}$에 대한 매클로린 급수

$\dfrac{1}{1-x}=\sum_{n=0}^{\infty}x^n=1+x+x^2+x^3+\cdots$ (if $-1<x<1$)

$\ln (1+x)$에 대한 매클로린 급수

$\ln (1+x) = \sum_{n=1}^{\infty} (-1)^{n-1}\dfrac{x^n}{n} = x-\dfrac{x^2}{2}+\dfrac{x^3}{3}-\dfrac{x^4}{4}+\cdots$ (if $-1<x \leq 1$)

[일반물리학] 뉴턴의 만유인력 법칙과 케플러 법칙

Scian — Wed, 11 Jun 2025 22:43:59 +0900

만유인력 법칙

우주의 모든 입자는 서로를 끌어당기는 힘을 갖는다.
이를 공식으로 나타내면 다음과 갖다.
$F_g=G\dfrac{m_1m_2}{r^2}$
이때 $G=6.674\times 10^{-11}N\cdot m^2/kg^2$ (역제곱 법칙)
벡터 꼴로 나타내면, $\overrightarrow{F}_{12} = -G\dfrac{m_1m_2}{r^2}\hat{r}_{12}$ (작용-반작용 쌍)
지구와 같은 경우, $F_g=G\dfrac{M_Em}{R_E^2}$로 나타낼 수 있음.

케플러 법칙

케플러 제1법칙 - 타원 궤도 법칙

모든 행성은 태양을 하나의 초점으로 하는 타원 궤도를 돈다.
이때, 타원 중심에서 초점까지의 거리: $c$, 장반경: $a$, 단반경: $b$, 이심률 $e=\dfrac{c}{a}$ (원 궤도는 $e=0$, 타원형은 $0<e<1$)
근일점(Perihelion): 태양과 가장 가까운 점
원일점(Aphelion): 태양과 가장 먼 점

케플러 제2법칙 - 면적 속도 일정 법칙 ⭐

증명 문제로 잘 출제되는 파트

태양과 행성을 잇는 선(반지름 벡터)이 같은 시간동안 쓸고 지나가는 면적은 항상 같다.
각운동량 보존 법칙을 이용하여 설명 가능, 행성의 속도가 궤도 위치에 따라 달라진다는 것을 의미함.
- $L=\overrightarrow{r}\times\overrightarrow{p}=M_p\overrightarrow{r}\times\overrightarrow{v}=\text{constant}$

케플러 제3법칙 - 조화의 법칙

행성의 공전 주기의 제곱은 궤도 장반경의 세제곱에 비례함.
$T^2 \propto a^3$
태양 주위를 도는 모든 행성에 대해 $\dfrac{T^2}{a^3}$ 값이 일정함.
$T^2=\left(\dfrac{4\pi^2}{GM_s}\right)a^3=K_sa^3$ (이때, $K_s$는 행성의 질량과 무관. 즉, 모든 행성에 대해 유효함)

탈출 속도

중력장을 벗어나기 위한 최소 속도. 물체의 질량 및 방향과 무관함.

$v_{esc}=\sqrt{2GM/R}$ (이때 R과 M은 각각 행성의 반지름과 질량)

[일반물리학] 토크와 각운동량 보존 법칙

Scian — Wed, 11 Jun 2025 21:40:43 +0900

토크 (torque)

토크(돌림힘) $\tau \equiv rF\sin\phi$ [N·M]

벡터곱(외적)을 이용한 토크의 정의

$\overrightarrow{\tau}\equiv\overrightarrow{r} \times \overrightarrow{F}$

뉴턴 제 2법칙

$\sum \tau_{ext}=I\alpha$

일-에너지 정리

$W=\Delta K_R$

각운동량 (angular momentum)

정의

$\overrightarrow{L}\equiv\overrightarrow{r}\times\overrightarrow{p}$ [$kg\cdot m^2 / s$]

강체 전체의 각운동량

$L=I\omega$

각운동량 보존 법칙

외부에서 작용한 토크가 0이면, 각운동량은 보존된다. 즉,
$L_i = L_f$

강체의 구름 운동 (rolling motion of rigid objects)

순수 구름 운동 (pure rolling motion) : 물체가 미끄러지지 않고 구름
한 점을 잡았을 때, 구름 운동을 하면 해당 점이 사이클로이드 형태를 그리며 이동함
병진축이 아닌 임의의 축에 대한 관성 모멘트: 평행축 정리를 이용하여 구함!

평행축 정리에 관한 자세한 사항은 아래 글 참고.

https://scian.tistory.com/157

[대학물리학] 평행축 정리

평행축 정리 질량중심에서의 관성 모멘트를 이용하여 질량중심을 지나는 축과 평행한 다른 축에서의 관성 모멘트를 구할 수 있는 정리이다. 위 그림을 참고하면 평행축 정리를 알 수 있으며, 결

scian.xyz

[일반물리학] 회전 운동 에너지와 관성 모멘트

Scian — Wed, 11 Jun 2025 21:23:22 +0900

회전 운동 에너지

회전 운동에서도 운동 에너지가 존재함.
이때 회전 운동 에너지 $K_R=\frac{1}{2}\sum_i m_i r_i^2 \omega^2$
여기에 아래 관성 모멘트를 적용하여 충분한 미소 질량을 잡으면,
$K_R=\frac{1}{2}I\omega^2$

관성 모멘트 (moment of inertia)

회전 운동을 유지하려는 정도, 질량의 분포와 회전축까지의 거리의 제곱에 비례
물체의 형태와 질량 분포에 따라 다름
$I=\sum m_i r_i^2$

Source ❘ https://web2.ph.utexas.edu/~coker2/index.files/RI.htm

Thin cylindrical shell

$I_{CM}=MR^2$

Hollow Cylinder

$I_{CM}=\frac{1}{2}M\left(R_1^2+R_2^2\right)$

Solid cylinder or disk

$I_{CM}=\frac{1}{2}MR^2$

Rectangular plate

$I_{CM}=\frac{1}{12}M(a^2+b^2)$

Long, thin rod (rotation axis through center)

$I_{CM}=\frac{1}{12}ML^2$

Long, thin rod (rotation axis through end)

$I_{CM}=\frac{1}{3}ML^2$

Solid sphere

$I_{CM}=\frac{2}{5}MR^2$

Thin spherical shell

$I_{CM}=\frac{2}{3}MR^2$

[일반물리학] 각위치, 각속도, 각가속도

Scian — Wed, 11 Jun 2025 21:06:42 +0900

각위치 (angular position)

→ $r$과 기준선이 이루는 각도

$\theta=\frac{s}{r}$ [rad]

각변위(angular displacement) $\Delta\theta=\theta_f-\theta_i$

각속도 (angular speed)

평균각속도

$\omega_{avg}\equiv\frac{\theta_f-\theta_i}{t_f-t_i}=\frac{\Delta\theta}{\Delta t}$ [rad/s]

순간각속도

$\omega\equiv\lim_{\Delta t \to 0} \frac{\Delta \theta}{\Delta t}=\frac{d\theta}{dt}$ [rad/s]

각가속도 (angular acceleration)

평균각가속도

$\alpha_{avg}\equiv\frac{\omega_f-\omega_i}{t_f-t_i}=\frac{\Delta\omega}{\Delta t}$ [$rad/s^2$]

순간각가속도

$\alpha\equiv\lim_{\Delta t \to 0}\frac{\Delta \omega}{\Delta t}=\frac{d\omega}{dt}$ [$rad/s^2$]

회전 운동과 병진 운동과의 관계

각속도와 속도

$v=r\omega$

접선가속도, 구심가속도

접선가속도(tangential) $a_t=r\alpha$

구심가속도(centripetal) $a_c=\frac{v^2}{r}=r\omega^2$

자세한 내용은 아래 글 참고.

2023.02.04 - [ Study/Physics] - [대학물리학] 회전 운동 공식, 병진 운동과의 관계

[대학물리학] 회전 운동 공식, 병진 운동과의 관계

회전 운동과 병진 운동과의 관계 병진 운동에서 사용되는 운동 공식을 회전 운동에서도 유사하게 적용할 수 있다. 간단하게 생각하면, 병진 운동과 회전 운동은 아래처럼 대응된다고 생각해 볼

scian.xyz

[Calculus] 근판정법과 비판정법, 멱급수(거듭제곱급수)

Scian — Sun, 8 Jun 2025 23:54:58 +0900

근판정법과 비판정법

Root Test and Ratio Test

\begin{align*}
\text{Let } L =
\begin{cases}
\lim_{n \to \infty} \left| \frac{a_{n+1}}{a_n} \right| & \text{(for ratio test)} \\
\lim_{n \to \infty} \sqrt[n]{|a_n|} & \text{(for root test)}
\end{cases}
\end{align*}

이때, $\sum_{n = 1}^\infty a_n$은 L<1에서 절대수렴하며, L>1에서 발산한다.

L=1인 경우, 별도의 고려가 필요하다.

멱급수 (거듭제곱급수)

Power Series

$\sum_{n=0}^\infty c_n(x-a)^n$ → a가 중심이 되는 멱급수

수렴반경 (interval/radius of convergence)

|x-a|<R이면 수렴, |x-a|>R이면 발산한다고 할 때, R (R>0)을 수렴반경이라고 한다.

위 예시에서, 수렴반경(R)은 다음과 같이 구할 수 있다.

\begin{align*}
R &= \frac{1}{\lim_{n \to \infty} \left| \frac{a_{n+1}}{a_n} \right|}
\quad \text{or } \frac{1}{\lim_{n \to \infty} \sqrt[n]{|a_n|}}
\end{align*}

멱급수가 될 수 있는 경우의 수

이를 정리하면, 멱급수는 다음과 같은 3가지 경우 중 한 가지만 될 수 있다.

x=a일 때만 수렴한다.
모든 x에 대해서 수렴한다.
수렴반경 내에서 수렴하며, 그 외에는 발산한다.

[Calculus] Definition of Limit

Scian — Sun, 20 Apr 2025 23:56:39 +0900

Definition of Limit

$\lim_{x\rightarrow a}f(x)=L$

위 식처럼 나타나는 극한을 다음과 같은 엡실론-델타 정의로 표현할 수 있다.

If and only if for all $\varepsilon>0$, there exists $\delta>0$, such that $0<|x-a|<\delta \Rightarrow |f(x)-L|<\varepsilon$

좌극한과 우극한의 정의

참고로, 우극한과 좌극한은 다음과 같이 정의된다.

$\lim_{x\rightarrow a^+}f(x)=L$

If and only if for all $\varepsilon>0$, there exists $\delta>0$, such that $a<x<a+\delta \Rightarrow |f(x)-L|<\varepsilon$

$\lim_{x\rightarrow a^-}f(x)=L$

If and only if for all $\varepsilon>0$, there exists $\delta>0$, such that $a-\delta<x<a \Rightarrow |f(x)-L|<\varepsilon$

[OCI] Ubuntu에서 포트 개방하기 (연결 거부될 때, 도메인 연결 오류)

Scian — Mon, 9 Dec 2024 00:59:41 +0900

node.js 등을 이용해 OCI 가상 머신의 Ubuntu에서 웹 서버 등을 열 때, Connection Refused가 발생하는 경우가 있다.

해결을 위해서는, 먼저 OCI 관리자의 VCN 상에서 방화벽을 열어줘야 한다.

VCN Ingress Rule (수신 규칙) 설정

아래는 모든 포트에서 모든 방식으로 들어오는 연결을 수신하도록 하는 설정이다.

개발 용으로 진행하기에 전체를 개방하였으나 보안 상에 문제가 있을 수 있으니, 실제 프로덕션 환경에서는 사용하는 포트만 열어둘 것을 강력히 권장한다.

IPTABLES 설정

Ubuntu의 경우, 가상 머신 자체가 갖고 있는 방화벽인 iptables에서 포트를 차단하는 경우가 있다. 이 부분 또한 차단 해제해 주어야 한다.

위에서 설명한 VCN의 경우 OCI에서 접속 자체를 차단하는 1차 방화벽이라고 하면, IPTABLES는 해당 가상 머신에 접속할 때 차단해 주는 2차 방화벽의 개념이라고 설명할 수도 있을 것이다.

예를 들어, 3000 포트의 경우 다음 명령어를 이용해 열어준다.

sudo iptables -I INPUT -p udp --dport 3000 -j ACCEPT

혹은, 다음과 같은 리눅스 함수를 만들어 별칭처럼 사용해도 편리하다.

# ~/.bashrc

openport() {
  if [ $# -ne 2 ]; then
    echo "사용법: openport <protocol> <port>"
    echo "예: openport udp 19992"
    return 1
  fi

  local proto=$1
  local port=$2

  # INPUT 체인에 규칙 삽입
  sudo iptables -I INPUT -p "$proto" --dport "$port" -j ACCEPT
  if [ $? -ne 0 ]; then
    echo "iptables 명령 실행 실패"
    return 1
  fi

  # 변경된 룰 저장
  sudo netfilter-persistent save
  if [ $? -eq 0 ]; then
    echo "iptables: $proto port $port 개방 및 저장 완료"
  else
    echo "netfilter-persistent save 실패"
    return 1
  fi
}

도메인 연결 시

IP주소로 접속할 때에는 연결이 잘 되지만, 도메인으로 연결하면 SSL PROTOCOL ERROR 등이 발생할 수 있다.

이 경우, 시크릿 모드로 새 창을 열어주고 http://[도메인]:[포트]/[경로]를 입력해 들어가 보자. https 구현을 위해서는 Let's Encrypt 등을 이용해 인증서를 넣어줘야 하는데, 이는 다음에 다뤄보도록 하겠다.

[CloudKit] Field 'recordName' is not marked queryable 오류 해결

Scian — Mon, 18 Nov 2024 13:12:29 +0900

CloudKit + SwiftData로 데이터를 관리할 때, Private Database에서 등록된 데이터를 확인하기 위해 Query Records 버튼을 누르면 "Field 'recordName' is not marked queryable" 오류가 발생하는 경우가 있다.

이 경우 Schema > Indexes에서 해당하는 Record Type을 선택한 후, 두 번째 이미지처럼 Queryable이 설정된 recordName을 만들어 주면 정상적으로 데이터를 확인할 수 있다.

개화기 이후 서사 갈래의 흐름

Scian — Sat, 22 Jun 2024 19:40:51 +0900

개화기 ~ 일제 강점기

전통적 양식 → 근대적 양식 과도기
역사담, 전기, 우화 등 전통 양식 활용한 현실 비판물과 신소설의 창작
문명개화 사상 등을 내세웠던 신소설: 고전 소설의 흔적 지님 + 사실주의 소설 특성을 많이 갖춤
이광수 <무정> (1917) — 계몽의 문제, 신소설보다 더 나아감
3·1운동 → 나도향, 김동인, 현진건, 염상섭 등에 의해 근대 사실주의 소설 양식 정립
조명희, 이기영 등에 의한 계급주의 문학의 흐름 출현
1930년대 <상록수>, <삼대>, <임꺽정>, <고향>, <인간 문제> 등 장편 소설이 당대 현실 조감
김남천, 채만식, 이태준, 김유정, 이상, 박태원, 이효석, 김동리 등 → 다양한 지향점을 지닌 소설 창작

광복 이후

주요 과제: 과거에 대한 성찰, 현실의 직시, 새로운 미래의 건설

한국 전쟁 이후의 피폐한 현실

손창섭, 장용학, 오상원 등 — 전쟁의 상처, 인간 실존의 문제 등
김동리, 황순원 등 — 인본주의 논리로 전후 현실 돌파
하근찬, 이범선 등 — 분단, 전쟁이 강요한 현실을 비판적 직시
4·19 혁명 이후 최인훈 <광장> — 분단과 전쟁의 의미 재확인
김승옥, 이청준, 이호철 등 — 내면의식, 소시민 세계 섬세하게 표현
→ 최일남, 서정인, 박완서, 오정희 등으로 흐름 계승
김정한, 박태순 등 — 급속한 경제 성장: 그늘진 삶을 양산
→ 황석영, 조세희, 이문구, 윤흥길 등이 계승
김원일, 현기영 등 — 분단, 외세 문제
박경리 — 민족의 삶

1980년대: 민주화 요구 국민 vs 억압적 정권의 대립

양귀자, 박영한, 한승원 등 — 민중의 현실에 관심
조정래, 임철우 등 — 민족의 근현대사 탐구
방현석, 김하기 등 — 노동, 통일 문제
이문열, 윤후명 등 — 다양한 시각으로 억압적 현실에 접근

세계화, 고도 정보화, 탈이념화의 새로운 현실 → 인간의 문제가 새롭게 제기되고 있음

서사 문학 — 인간과 세계의 다양한 문제에 대한 관심, 표현 → 더 풍부한 모습 보여줌

* 출처: <고등학교 문학>, 해냄에듀, 조정래 외

Google Product Expert (구글 제품 전문가) 프로그램이란?

Scian — Mon, 17 Jun 2024 02:34:15 +0900

구글 지원 커뮤니티를 보시다 보면, Google Product Expert (제품 전문가)라는 말을 종종 보실 수 있으리라 생각됩니다.
구글 직원인지? 아니면 일반 사용자인지 정체가 모호하게 생각하실 수도 있다고 생각합니다.
저 또한 Google 제품 전문가로 활동 중이며, 관련된 여러 사항에 대해 소개해 보고자 합니다. 다만, 이후 언급드리겠지만 일부 내용은 NDA(기밀 유지) 대상으로 모든 정보를 공유드리지는 못하는 점 양해 부탁드립니다 ㅠ
먼저 말씀드리자면, 제품 전문가는 Google의 직원은 아닙니다.
이 점을 확인해 주시고 아래를 읽어 주시면 감사드리겠습니다!

공식 소개말

Product Expert 프로그램의 공식 소개 페이지는 아래에서 확인하실 수 있습니다.

Product Expert 프로그램은 Google의 수퍼유저 커뮤니티로,
전 세계 Google 사용자로 구성된 글로벌 네트워크를 대변하며
Google 도움말 커뮤니티에서 다른 사용자를 지원합니다.

https://productexperts.withgoogle.com/ - 소개 페이지

https://productexperts.withgoogle.com/

productexperts.withgoogle.com

https://support.google.com/communities/answer/9138806 - 도움말

Product Expert 프로그램이란 무엇인가요? - support.google.com 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

역할

위에서 언급드린 것처럼 저희 Google Product Expert(이하 'PE' 혹은 'GPE')는 각자 전문성을 갖는 제품 분야에서 질문에 답하며 사용자들을 돕고, 문제 해결에 최대한 도움을 드리려 노력하고 있습니다. 이외에도 저희는 아래처럼 Google 지원 커뮤니티 내에서 다양한 활동을 수행하고 있습니다.
* 아래는 제가 활동하고 있는 Gmail과 YouTube를 기준으로 작성된 것으로, 다른 커뮤니티는 활동이나 혜택, 포인트 기준 등이 다를 수 있습니다!

Google 지원 커뮤니티에 올라온 질문에 답변
사용자가 올린 질문이 해결이 어렵거나, 보고가 필요한 경우 Google 측에 문제 이관
내부 채널을 통한 동료 PE들과의 소통
정기적으로 진행되는 Google 직원과의 미팅에 참여 (선택)
매년 1회 이상 진행되는 PE Summit에 온/오프라인 참여 (선택)
자주 발생하는 이슈들에 대한 파악 및 보고, 일부 처리 사항 공유 등

등급 및 혜택

PE 등급 구분

포인트 부여

PE의 등급은 크게 다섯가지로 나뉩니다.
답변을 하거나(1포인트), 답변이 추천 답변으로 지정(10포인트)되거나, 실버 등업 이후 다양한 활동을 진행할 경우에 포인트가 부여되며, 포인트(정량적) + 담당 커뮤니티 매니저의 판단(정성적)으로 등업 여부가 결정됩니다.
지금 작성하고 있는 이 게시물도 앰버서더 게시물로, 이런 게시물을 쓰거나 FAQ 글을 만드는 경우 등에도 포인트가 부여되기도 합니다.
(FAQ 글은 아래와 같은 것을 참고해 주세요!)
https://support.google.com/mail/thread/267106274/

FAQ: Google 계정을 가입할 때에 전화번호 인증 관련 오류가 발생합니다. - Gmail 커뮤니티

support.google.com

https://scian.xyz/172

구글 계정 가입시 발생하는 전화번호 인증 관련 문제 해결하기

최근 Google 계정을 가입할 때에 전화번호 인증과 관련된 오류가 자주 발생하는 것으로 보입니다. 업데이트 (2024. 6. 13.): 해당 문제는 작년부터 지속적으로 발생한 문제로, 현재 Google에서 인지한

scian.xyz


브론즈	실버	골드	플래티넘	다이아몬드

브론즈, 실버, 골드, 플래티넘, 다이아몬드 ~~(롤티어)~~로 나뉘는 등급에 따라 주어지는 혜택이 다르며, 각 등급별 기준은 아래와 같습니다.

https://support.google.com/communities/answer/9138806?hl=ko

혜택 및 등급별 상세 소개

브론즈 회원

가장 낮은 등급인 브론즈 회원은 답변 옆에 브론즈 회원 배지가 표시되는 것 외에는 별다른 혜택이 주어지지 않습니다.
공식적으로도 PE에 속하지 않는 약간 애매한 위치에 있다고 할 수 있습니다.

실버 GPE

처음으로 정식 GPE 프로그램의 일원으로 등록되는 등급입니다.
300 포인트를 받고 추천 답변을 3개 받는다면 등록에 필요한 최소 조건이 만족되며, 이 조건을 만족했거나 곧 만족할 것으로 보이는 경우, 혹은 커뮤니티에서 올린 답변이 커뮤니티를 관리하시는 커뮤니티 매니저(이하 'CM') 분 눈에 띄었을 경우 초대 메일을 받게 됩니다.
이 초대 메일을 받고, 참여 의사를 보이면 공식적으로 등록되며 정식 PE로서 처음 활동을 시작하실 수 있습니다.
정식 PE가 된 만큼 브론즈 회원이나 일반 이용자에게 공개되지 않은 자료에 제한적으로 접근할 수 있습니다. 다만, NDA 서명 이전으로 혜택이 많이 주어지지는 않습니다. 커뮤니티 관리나 답변 작성에 필요한 추가 기능들과 정보, 인프라가 제공된다고 보시면 이해가 쉬우실 것 같습니다 :)
실버 GPE의 자세한 혜택과 사용 가능한 추가 기능은 아래와 같습니다. 정식 GPE가 처음 되므로 가장 혜택 차이가 많다고 볼 수 있습니다.

웰컴 기프트 및 기타 굿즈 제공 (이건 커뮤니티마다 다르고, 기간도 일정치 않아서 장담드리긴 어렵습니다. 전 받아봤어요 ㅎ)
PEKB (제품 전문가 지식베이스)에 접근 가능 — PE 프로그램과 관련된 자료나 공지, 일부 제품들에 대한 설명이나 기타 자료 등을 확인할 수 있습니다.
Google 직원과 직접적으로 소통하며, 피드백 도구를 통해 피드백을 보낼 경우 가장 먼저 처리됩니다. (일반 사용자 중에서는 시스템적으로 먼저 처리되도록 설계하셨다네요)
Google 내부 도구인 커뮤니티 콘솔에 접근 가능 — 모든 Google 지원 커뮤니티에 올라오는 게시물을 한 눈에 확인하실 수 있으며, 필터나 정규식 등을 이용해 세부적인 검색이 가능합니다. 또한, CR(미리 준비된 답변) 기능을 통해 답변을 더 쉽게 올릴 수 있습니다.
게시물을 신고할 경우 임시 블라인드 처리가 됩니다.
실버 등급을 갖고 있는 커뮤니티의 게시글을 이동하거나, Google 직원에게 이관할 수 있습니다.
실버 등급을 갖고 있는 제품의 비공개 포럼에 접근할 수 있습니다.
일부 제품의 경우, PE 전용 채팅방에 초대되어 활동하며 인맥을 쌓고 여러 정보를 공유할 수 있습니다.
멘토링 세션에 참여하여 선배 PE에게 제품과 관련하여 배우고, 소통할 수 있습니다.
PE Summit에 온라인으로 참가할 수 있습니다. (단, 만 18세 이상이 되어야 하고, 서밋을 진행할 때에 아직 출시되지 않은 제품 정보 등이 공유되므로 NDA에 서명해야 합니다.)
SNS 홍보 키트를 주고, 프로필 사진에 전용 프레임을 쓸 수 있습니다. (제 티스토리 프사처럼요)
유튜브로 제품 사용법이나 팁 등에 대해 영상을 찍어 올리면 공식 커뮤니티나 유튜브 채널 등에서 소개될 수 있습니다.
실제로 유튜브 커뮤니티의 경우에는 유튜버 분들도 매우 활발히 활동중이십니다!
PE 전용 뉴스레터 (전체 공지사항을 전달할 때와 일부 커뮤니티에서 소식을 공유할 때 제공하며, 각 커뮤니티마다 다르고 외부 공유는 불가합니다 ㅠ)

골드 GPE

골드 GPE부터는 NDA에 필수적으로 서명해야 하며, 만 18세 이상이 되어야 합니다.
실버 GPE의 모든 혜택에 더불어 더 많은 혜택을 받으며, 더 많은 기능을 사용할 수 있습니다.

다른 PE의 초대를 받으면 PE Summit에 오프라인으로 참가할 수 있습니다. (자리가 남을 경우)
마찬가지로 NDA 서명이 필요하며, 해외에서 열릴 경우 왕복 항공료 및 호텔 비용 등을 Google에서 제공합니다.
NDA 서명 이후 접근이 가능한 비공개 포럼에 접속할 수 있습니다.
새로운 제품이 출시되거나 기능이 업데이트되는 경우 등에 베타 테스트로 초대받을 수도 있습니다. (항상 그런건 아니에요)
커뮤니티 콘솔에서 몇 가지 기능들이 더 열립니다.

플래티넘 & 다이아몬드 GPE

플래티넘 이상이 되면, 아래와 같은 혜택이 주어집니다.

PE Summit에 우선적으로 초대되며, 개최될 경우 별다른 문제가 없다면 거의 오프라인 참여가 가능합니다.
물론, 왕복 항공료와 호텔 비용은 Google에서 제공합니다.
커뮤니티 콘솔에서 직원 전용 기능을 제외한 모든 기능을 사용할 수 있습니다.
일부 포럼에서 AI 도구를 사용할 수 있습니다.
다이아몬드의 경우 활동 인증서를 받을 수 있다고 합니다.
커뮤니티 가이드를 작성할 수 있습니다.

Product Expert Summit

여러 번 PE Summit(줄여서 PES라고 보통 부릅니다)에 대한 언급이 나왔는데, 이부분에 대해 간단히만 소개 드리자면 전세계의 PE들이 모여 새로운 Google의 소식을 듣고, 네트워킹하는 자리입니다. 대륙별로 진행하기도 하고, 한 곳에서 크게 진행하기도 하며 제품에 대한 소식이나 소그룹 세션, 시상식 등을 진행합니다. (세부 내용은 NDA 계약 사항으로 공유가 어려운 점 양해 부탁드립니다 ㅠ) 온/오프라인 참여가 가능하며 제반 비용이나 행사 당일 식사 등은 Google에서 제공해 줍니다.
서밋에 대해서는 유튜브 쪽에서 활동 중이신 어비님이 올려주신 영상을 첨부합니다 :)
https://www.youtube.com/watch?v=VVMWgL0s81o

어비님 영상 (PES 2023)

어때요, 좀 마음에 드시나요?

만약 구글 제품에 대해 아는게 많고, 좀 해보고 싶다는 생각이 드시나요?
아래에서 로그인하시고, Google 지원 커뮤니티에서 답변을 시작해 보세요!
https://productexperts.withgoogle.com/

https://productexperts.withgoogle.com/

productexperts.withgoogle.com

혹시나 PE 프로그램에 대해 질문이 있으시다면 댓글로 알려주시면 답변드릴 수 있는 부분까지는 최대한 안내드리겠습니다 :)

본 게시물은 Google Product Experts 앰버서더 프로그램의 일환으로 작성되었으며, 금전적 대가를 받지 않았음을 알려드립니다.

구글 계정을 해킹당했을 때의 대처법

Scian — Mon, 27 May 2024 23:27:06 +0900

구글 계정을 해킹당했을 때, 어떤 조치를 취해야 할지 잘 모르시겠다면 아래 질문을 천천히 따라가봐 주세요.

아래 조건에 해당하실 경우, 해당 문제를 먼저 해결해 주시기 바랍니다.

1. 계정이 비활성화되었나요?

https://support.google.com/mail/answer/7682439를 확인해 주세요.

2. 특정한 Google 제품이나 서비스에 액세스할 수 없나요?

만약 특정한 Google 제품에 접속하였을 때 https://support.google.com/accounts/answer/40039로 리디렉션된 경우 이의 제기 양식을 제출해야 합니다.

이의 제기 양식은 https://myaccount.google.com/restrictions에서 제출하실 수 있습니다.

1 또는 2 중 하나라도 해당할 경우

이의 제기가 받아들여진 경우에만 알림을 받게 된다는 점에 유의하세요. 이의 제기가 거부된 경우에는 아무런 알림이 전송되지 않습니다.

또한 이의신청을 여러 번 요청할 경우 처리 시간이 더 오래 걸리므로 한 번만 이의 제기를 신청해 주시기 바라며, 이의 제기 양식은 지원팀에 문의할 수 있는 유일한 방법으로, 저와 같은 제품 전문가나 구글 직원이 직접적인 도움을 드리기는 어렵습니다.

3. Google 계정에 정상적으로 접근할 수 있나요?

비밀번호와 아이디 또는 기타 2FA 방법/패스키를 사용하여 Google 계정에 로그인할 수 있나요?

3-1. '예'

https://myaccount.google.com/에서 계정이 안전한지, 보안 권장사항이 없는지 확인할 수 있습니다. 계정에 액세스할 수 있더라도 계정 비밀번호를 변경할 것을 강력히 권장드리며, 다른 사이트에서 동일한 비밀번호를 사용할 경우 반드시 해당 사이트에서도 비밀번호를 변경하시기를 권해드립니다.

3-2. '아니오'

그렇지 않은 경우 계정을 복구해야 합니다.

Google 계정을 복구할 수 있는 유일한 방법은 Google의 온라인 복구 도구를 사용하는 것입니다.

https://g.co/recover/

이 도구와 전반적인 계정 복구 또는 인증 프로세스는 계정 소유자가 본인인지 확실히 확인하기 위해 고안되었습니다.

따라서 다음 옵션을 사용하여 소유권을 확인할 수 있습니다.

접근 가능하고, 계정에 복구 전화번호로 등록된 전화번호
접근 가능하고, 계정에 복구 이메일로 등록된 이메일
2단계 인증을 위한 추가 로그인 옵션(예: SMS, OTP, 패스키, 보안 키 또는 백업 코드)

또한, 아래와 같은 방법으로는 소유권의 확인 및 계정 복구가 불가능합니다.

정부 발급 신분증
Google에 전화 또는 이메일 보내기
Google 직원 또는 Google 제품 전문가의 수동 지원

또한 시스템은 신원 소유권 증명 중 하나로 위치, 브라우저 또는 디바이스 데이터를 사용하므로 집이나 직장에서 복구 절차를 진행하는 것이 좋습니다. 만약 도구에서 계정을 복구할 수 없다는 메시지가 표시되면 안타깝게도 더 이상 계정을 복구할 방법이 없으며 새 계정을 만들어야 할 수도 있습니다.

아래에서 계정 복구와 관련된 공지사항도 확인하실 수 있습니다.

https://support.google.com/mail/thread/188196273/account-recovery

Account Recovery - Gmail 커뮤니티

support.google.com

4. "Google에서 이 계정이 본인 계정이라는 것을 확인하지 못했습니다." 또는 기타 유사한 메시지가 표시되나요?

일반적으로 복구 또는 계정 확인 옵션에 액세스할 수 없거나, 낯선 위치 또는 IP 주소에서 계정 복구 프로세스를 시도하는 경우 "Google에서 이 계정이 본인 계정이라는 것을 확인하지 못했습니다."와 같은 메시지가 표시됩니다.

이 경우, 아래와 같은 방법을 시도해 보실 수 있습니다.

비밀번호, 복구 이메일, 복구 전화, 2FA 방법(예: SMS 또는 Google OTP, 물리적 보안 키, 패스키 등)을 알고 있는지 확인
오랫동안 사용했던 디바이스, 집이나 회사 같은 장소(이전에 계정을 자주 사용했던 곳), 특히 몇 주 동안 사용했던 장소나 상황에서 복구 절차를 시도

온라인 복구 도구를 사용하는 것이 계정을 복구할 수 있는 유일한 방법이라는 점을 유념해 주세요.

제품 전문가와 Google 직원조차도 계정에 액세스하거나 수동으로 복구할 수 있는 권한이 없습니다.
또한 계정 복구 절차를 통해 계정에 다시 액세스할 수 있다는 보장은 없으며 경우에 따라서는 계정을 새로 만들어야 할 수도 있습니다.

본 포스트는 Google Product Experts (제품 전문가) 앰버서더 프로그램의 일환으로 작성된 가이드 게시물입니다.

Google 제품에 대해 문의 사항이 있으신가요?

Google 제품을 사용하는 중에 문제가 발생하셨나요?

언제나 주저 말고 Google 지원 커뮤니티를 이용해 주세요. 커뮤니티는 항상 열려있으며, 대부분의 제품에서 한국어 지원이 가능합니다.

Gmail: https://support.google.com/mail/community?hl=ko

Gmail 커뮤니티

support.google.com

YouTube: https://support.google.com/youtube/community?hl=ko

YouTube 커뮤니티

@TeamYouTube 한국어 질문 지원 시작: YouTube 관련 질문이 있으시다면, 지금 X(구 Twitter)에서 @TeamYouTube를 태그해 질문을 남겨주세요!

support.google.com

혹시, Google 제품에 대해 잘 알고 계시나요?

Google Product Expert 프로그램에 참여하여 다른 사람들을 도와주며 다양한 혜택을 받으실 수 있습니다!

이미지를 클릭하여 더 알아보실 수 있습니다.

EP.1 링크 단축 서비스 (4) — 사용 방법 [완성]

Scian — Thu, 16 May 2024 16:49:45 +0900

잇(IT)! 가이드
EP.1 링크 단축 서비스 (4) — 사용 방법 [완성]
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

들어가기

드디어 서버가 완성되었고, 우리는 링크 단축 서비스를 사용할 수 있게 되었다.

여기까지 따라온 자기 자신에게 박수를 치고 시작하자.

이번 글은 이 시리즈의 마지막 글로, 링크 단축 서비스의 사용 방법을 자세히 설명한다.

서비스 구조

우리가 만든 링크 단축 서비스는 다음과 같은 구조를 갖는다.

여기서 관리자 인증을 통해 접속해야 하는 페이지는 아이콘을 이용해 표시하겠다.

인증창

관리자 인증을 하는 창이다.

별도로 직접 구현한 창은 아니며, 운영체제와 브라우저에 따라 다르게 나타날 수 있다.

인증 정보는 일반적으로 저장되며, 한 번 로그인해 두면 일정 기간동안은 같은 브라우저에서 다시 비밀번호를 치지 않아도 된다.

관리자 인증창

/ (index.html)

포탈과 같은 페이지로, 링크와 로그 관리를 할 수 있는 메인 페이지이다.

메인 페이지

/create

링크를 생성하는 페이지이다.

여기서 공개 여부는 다음 3가지로 구분된다.

예를 들어, domain.com이 vercel과 연결되어 있고, alias가 test이며, 연결된 URL이 https://example.com/이라고 하자.

public: 누구나 domain.com/test에 접속하면 https://example.com/으로 리디렉션된다.
protected: domain.com/test에 접속하면 인증 오류가 뜨며, domain.com/test?pw=[패스워드]를 입력하면 리디렉션된다.
private: domain.com/test에 접속하면 인증창 을 통해 인증하거나, 이미 로그인된 경우에만 리디렉션된다. 이외에는 인증 오류가 반환된다.

iOS URL와 Android URL은 스키마 또한 지원한다.

예를 들어 domain.com/test를 입력하면,

iOS에서는 ios-app://test1이 열리게 할 수 있으며, Android에서는 android-app://test2가 열리도록 할 수 있다. 물론 Play 스토어나 앱 스토어로도 링크되게 할 수 있다.

create

/list

전체 링크 리스트를 확인할 수 있는 대시보드이며, 각 링크를 직접 관리할 수 있다.

연필 버튼을 누르면 /edit/:alias로, 삭제 버튼을 누르면 /delete/:alias로 연결된다.

링크 목록

/edit, /delete

말 그대로 링크를 수정하거나 삭제하는 페이지이다. 삭제 전에는 확인이 필요하다.

edit

delete

/logs

링크 클릭이 언제 일어났는지, 어떤 브라우저나 ip주소에서 클릭했는지 확인할 수 있는 페이지이다.

/logs/:alias로 들어가면 각 링크별로 클릭된 정보를 확인할 수도 있다.

logs

404.html (혹은 접속 불가 페이지 모두)

링크가 존재하지 않을 경우 표시되는 페이지이다.

404

맺음말

이렇게 우리는 첫 번째 프로젝트인 링크 단축 서비스를 성공적으로 구축해볼 수 있게 되었습니다.

필자는 원래 MySQL을 이용하여 구축해 사용 중이었는데, Postgres로 옮기며 일부 코드를 수정하게 되어 작동하지 않는 기능이 일부 있을 수 있습니다. 만약 이를 발견한다면 댓글 혹은 메일로 제보해 주시면 감사드리겠습니다. 또한, 보안이나 오류에 대해서도 편하게 제보해 주시면 정말 감사드리겠습니다.

모두 긴 글 읽어 주셔서 감사하며, 앞으로도 다양한 프로젝트 예제가 올라올 예정이니 공감과 구독 부탁드리며, 많은 관심 가져주시기 바랍니다.

감사합니다 :)

링크 단축 서비스 프로젝트 모아보기

2024.05.13 - [잇(IT)! 가이드] - EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

잇(IT)! 가이드EP.0 — 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게

scian.xyz

2024.05.14 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (1) — 시작하기

EP.1 링크 단축 서비스 (1) — 시작하기

잇(IT)! 가이드EP.1 링크 단축 서비스 (1) — 시작하기잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도

scian.xyz

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

잇(IT)! 가이드EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구

scian.xyz

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

잇(IT)! 가이드EP.1 링크 단축 서비스 (3) — 서버측 코드 작성잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할

scian.xyz

EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

Scian — Thu, 16 May 2024 16:18:27 +0900

잇(IT)! 가이드
EP.1 링크 단축 서비스 (3) — 서버측 코드 작성
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

본 포스팅은 이전 게시물과 이어지는 내용입니다. 아래 게시글을 먼저 확인해 보시기를 추천드립니다.

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

scian.xyz

서버 측 코드 작성 준비

이전 포스팅에서 우리는 Vercel을 통해 무료 Postgres (Postgresql) 데이터베이스를 구축하였다.

이제, 이 데이터베이스를 실제 동작이 가능한 링크 처리 서버와 연결하여 링크와 로그 정보를 데이터베이스에 저장하고, 불러오며 통신이 가능하도록 할 것이다.

NPM 패키지 설치

서버에 필요한 패키지를 설치해 준다.

아래 명령어를 작업 폴더의 터미널에서 실행해 주면 된다.

npm i express cors express-useragent request-ip serve-favicon dotenv pg
npm i @vercel/postgres

여기서 각 라이브러리의 기능은 다음과 같다.

express: API 서버 구축 (정적 호스팅)
cors: CORS 관련 문제를 쉽게 해결하기 위해 특정 조건을 허용하기 위해 사용
express-useragent: 접속 클라이언트 정보를 로깅하고, 클라이언트별 리디렉션을 위해 사용
request-ip: 접속 클라이언트의 IP주소를 로깅하기 위해 사용
serve-favicon: favicon 이미지를 안정적으로 로드하기 위해 사용
dotenv: 비밀 정보(내부 API 키, 관리자 비번 등)를 환경변수로 안전하게 관리하기 위해 사용
pg, @vercel/postgres: Postgres 데이터베이스 연결을 위해 사용

app.js 작성

app.js 파일에 아래 node.js 코드를 입력해 준다.

최종 코드는 아래에 있으며, 우선 각 부분별로 간단한 설명을 함께 제공하겠다.

패키지 import 및 정의

36번줄까지는 패키지와 서버에 필요한 항목을 정의하며, authenticate 함수에서 관리자 인증 기능을 하나의 함수로 통합해 구현하였다.

또한, async를 통해 데이터베이스에 연결을 시도하고, 연결 여부를 확인하도록 하였다.

const express = require('express');
const { Client } = require('pg');
const cors = require('cors');
const useragent = require('express-useragent');
const requestIp = require('request-ip');
const favicon = require('serve-favicon');
const { sql, db } = require('@vercel/postgres'); // Import the Vercel Postgres SDK
const env = require('dotenv').config();

const app = express();
const port = process.env.PORT || 3000; // Use environment variable for port

// Get database URL from environment variable
const databaseUrl = process.env.DATABASE_URL;
if (!databaseUrl) {
    console.error("DATABASE_URL environment variable is missing. Please set it.");
    process.exit(1);
}

// Create a Postgres client
const client = new Client({
    connectionString: databaseUrl,
    ssl: {
        rejectUnauthorized: false
    }
});

const adminList = [
    { 'login': 'admin', 'password': process.env.ADMIN1_PASSWORD },
    { 'login': 'admin2', 'password': process.env.ADMIN2_PASSWORD }
];

app.use(cors());
app.use(express.json());
app.use(useragent.express());
app.use(favicon(__dirname + '/favicon.ico'));

// Basic Authentication Middleware
const authenticate = async (req, res, next) => {
    const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
    const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
    if (!login || !password || !adminList.some(admin => admin.login === login && admin.password === password)) {
        res.set('WWW-Authenticate', 'Basic realm="401"');
        res.status(401).send('관리자 권한이 필요합니다.');
        return;
    }
    next(); // Proceed if authenticated
};

// Connect to the database
(async () => {
    try {
        await client.connect();
        console.log('Connected to PostgreSQL!');
    } catch (err) {
        console.error('Connection error', err.stack);
    }
})();

index, 테스트 페이지 구현

메인 페이지는 관리를 위해 사용할 것이므로 인증이 필요하도록 하였다.

또한, /ping 엔드포인트로 동작 여부를 확인하도록 하였다.

// Route for the main page 
app.get('/', authenticate, (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

// Route for ping
app.get('/ping', (req, res) => {
    res.send('pong!');
});

링크 접속 처리 구현

사용자가 링크를 타고 들어왔을 때, 링크 접속을 처리하는 엔드포인트를 구현하였다.

사실 엔드포인트라기보다는 와일드카드로, 세부적으로 정의되지 않은 모든 URL로부터 오는 요청을 모니터링하고, 여기서 데이터베이스에 해당 링크가 없다면 404.html을, 링크가 있다면 해당 링크로 연결되도록 한다.

특히, 사용자 에이전트를 분석하여 iOS 기기인 경우와 Android 기기인 경우에 별도 링크로 연결되는 딥링크 기능을 탑재하였으며, 사용자 인증 또는 쿼리 기반 패스워드 인증 기능을 포함하였다.

주의점

중요한 점은, 실제로 이 코드는 전체 코드의 가장 마지막 부분에 위치해야 한다는 것이다.

Node.js 특성상 위쪽에 있는 엔드포인트를 먼저 실행하는데, 만약 이 코드가 위쪽에 있다면 추후 설명할 다른 엔드포인트(링크 생성, 수정, 로그 보기 등)들이 작동하지 않게 될 것이다!

// Catch-all route for handling link redirection
app.get('*', async (req, res) => {
    try {
        const ua = req.useragent;
        const destination = req.originalUrl.slice(1).split('?')[0];
        // Parameterized query to prevent SQL injection
        const result = await client.query('SELECT * FROM links WHERE alias = $1', [destination]);

        if (result.rows.length === 0) {
            res.sendFile(__dirname + '/404.html');
        } else {
            const status = result.rows[0].status;
            if (status === 1) {
                // Do nothing for public links
            } else if (status === 2) {
                const real_password = result.rows[0].password;
                const user_password = req.query.pw;
                if (real_password !== user_password) {
                    res.status(403).send('Forbidden');
                    return;
                }
            } else if (status === 3) {
                const auth = { login: 'admin', password: 'merona06*' };
                const b64auth = (req.headers.authorization || '').split(' ')[1] || '';
                const [login, password] = Buffer.from(b64auth, 'base64').toString().split(':');
                if (!login || !password || login !== auth.login || password !== auth.password) {
                    res.set('WWW-Authenticate', 'Basic realm="401"');
                    res.status(401).send('관리자 권한이 필요합니다.');
                    return;
                }
            }

            const isIOS = ua.isiPhone || ua.isiPad || ua.isiPod;
            const isAndroid = ua.isAndroid;
            const ip = requestIp.getClientIp(req);

            // Parameterized query to prevent SQL injection
            await client.query('INSERT INTO logs (alias, ip, useragent) VALUES ($1, $2, $3)', [destination, ip, req.headers['user-agent']]);

            if (isIOS) {
                res.redirect(result.rows[0].ios_url || result.rows[0].url);
            } else if (isAndroid) {
                res.redirect(result.rows[0].android_url || result.rows[0].url);
            } else {
                res.redirect(result.rows[0].url);
            }
        }
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

로그 통합 페이지 및 개별 상세 페이지 구현

각 링크별로 접속 기록을 각각 살펴볼 수 있는 상세 페이지와, 전체 로그를 한눈에 볼 수 있는 페이지를 구현하였다.

이는 SQL 데이터베이스의 logs 테이블과 연결되어 있으며, 사용자 IP, useragent 등을 포함하였다.

또한, 파라미터를 통해 링크별 상세 접속 기능을 확인할 수 있도록 하였다.

// Route for logs (with authentication)
app.get('/logs', authenticate, async (req, res) => {
    try {
        const result = await client.query('SELECT * FROM logs'); // Use client.query for Postgres
        res.send(`
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
            <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid black;
                padding: 8px;
                text-align: center;
            }
            th {
                background-color: #f2f2f2;
            }

            a {
                text-decoration: none;
                color: #3322bb;
            }
            </style>
            <h1>Logs</h1>
            <a href="/" style="padding-bottom: 1rem;"><i class="bi bi-chevron-left" style="margin-right: 0.2rem;"></i>홈으로</a>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Alias</th>
                        <th>IP Address</th>
                        <th>User Agent</th>
                        <th>Visit Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    ${result.rows.map(log => `
                        <tr>
                            <td>${log.id}</td>
                            <td><a href="/logs/${log.alias}">${log.alias}</a></td>
                            <td>${log.ip}</td>
                            <td>${log.useragent}</td>
                            <td>${log.timestamp}</td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `);
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

// Route for logs with alias (with authentication)
app.get('/logs/:alias', authenticate, async (req, res) => {
    try {
        const { alias } = req.params;
        // Parameterized query to prevent SQL injection
        const result = await client.query('SELECT * FROM logs WHERE alias = $1', [alias]);
        res.send(`
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
            <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid black;
                padding: 8px;
                text-align: center;
            }
            th {
                background-color: #f2f2f2;
            }

            a {
                text-decoration: none;
                color: #3322bb;
            }
            </style>
            <h1>Logs</h1>
            <a href="/logs" style="padding-bottom: 1rem;"><i class="bi bi-chevron-left" style="margin-right: 0.2rem;"></i>로그 목록</a>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Alias</th>
                        <th>IP Address</th>
                        <th>User Agent</th>
                        <th>Visit Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    ${result.rows.map(log => `
                        <tr>
                            <td>${log.id}</td>
                            <td><a href="/${log.alias}">${log.alias}</a></td>
                            <td>${log.ip}</td>
                            <td>${log.useragent}</td>
                            <td>${log.timestamp}</td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `);
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

전체 링크 목록 확인 구현하기

전체 링크 목록을 한 눈에 확인하고, 삭제 및 수정 등의 기능을 사용할 수 있는 페이지를 구현하였다.

관리자 인증을 통해 접속이 가능하며, bootstrap icon을 이용해서 수정/삭제, 상태 표시 아이콘을 구현하였다.

// Route for the link list (with authentication)
app.get('/list', authenticate, async (req, res) => {
    try {
        const result = await client.query('SELECT * FROM links'); // Use client.query for Postgres
        res.send(`
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
            <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid black;
                padding: 8px;
                text-align: center;
            }
            th {
                background-color: #f2f2f2;
            }

            a {
                text-decoration: none;
                color: #3322bb;
            }
            </style>
            <h1>Links</h1>
            <a href="/" style="padding-bottom: 1rem;"><i class="bi bi-chevron-left" style="margin-right: 0.2rem;"></i>홈으로</a>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Alias</th>
                        <th style="max-width: 200px;">URL</th>
                        <th>iOS URL</th>
                        <th>Android URL</th>
                        <th>Status</th>
                        <th>Password</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    ${result.rows.map(link => `
                        <tr>
                            <td>${link.id}</td>
                            <td><a href="/${link.alias}">${link.alias}</a></td>
                            <td style="max-width: 400px; word-wrap: break-word;">${link.url}</td>
                            <td>${link.ios_url}</td>
                            <td>${link.android_url}</td>
                            <td>
                                ${link.status === 1 ? '<i class="bi bi-globe" title="Public"></i>' : ''}
                                ${link.status === 2 ? '<i class="bi bi-eye-slash" title="Protected"></i>' : ''}
                                ${link.status === 3 ? '<i class="bi bi-lock" title="Private"></i>' : ''}
                            </td>
                            <td>${link.password}</td>
                            <td>
                                <a href="/edit/${link.alias}"><i class="bi bi-pencil" title="Edit" style="margin-right: 0.5rem; color: #3399bb;"></i></a>
                                <a href="/delete/${link.id}"><i class="bi bi-trash" title="Delete" style="color: #bb3333;"></i></a>
                            </td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        `);
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

링크 생성 기능 구현

링크를 생성하기 위해 접속할 페이지와, POST method의 링크 생성 처리 엔드포인트를 구현하였다.

또한, 해당 링크가 이미 존재하는지 확인하는 checkalias라는 GET method의 엔드포인트도 구현하였다.

// Route for creating a new link (with authentication)
app.get('/create', authenticate, (req, res) => {
    res.sendFile(__dirname + '/create.html');
});

// Route to check if alias is available (with authentication)
app.get('/checkalias/:alias', authenticate, async (req, res) => {
    try {
        const { alias } = req.params;
        // Parameterized query to prevent SQL injection
        const result = await client.query('SELECT * FROM links WHERE alias = $1', [alias]);
        if (result.rows.length === 0) {
            res.status(200).send({ success: true, message: 'Alias 사용 가능' });
        } else {
            res.status(409).send({ success: false, message: '이미 사용중인 링크입니다.' });
        }
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

// Route to handle link creation (with authentication)
app.post('/create', authenticate, async (req, res) => {
    try {
        const password = process.env.ADMIN_KEY;
        const authKey = req.body.authKey;
        if (!authKey || authKey !== password) {
            res.status(401).send('관리자 권한이 필요합니다.');
            return;
        }
        const { name, alias, url, ios_url, android_url, status, password: set_pass } = req.body;

        // Check if alias already exists using parameterized query
        const checkQuery = 'SELECT * FROM links WHERE alias = $1';
        const checkResult = await db.query(checkQuery, [alias]);

        if (checkResult.rows.length > 0) {
            res.status(409).send({ success: false, message: '이미 사용중인 링크입니다.' });
            return;
        }

        // Insert new link using parameterized query to prevent SQL injection
        const insertQuery = `
            INSERT INTO links (alias, url, name, ios_url, android_url, status, password) 
            VALUES ($1, $2, $3, $4, $5, $6, $7)
        `;
        await client.query(insertQuery, [alias, url, name, ios_url, android_url, status, set_pass]);
        res.status(200).send({ success: true, message: 'Link 생성 성공' });
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

링크 수정 기능 구현

링크 생성과 유사하게, 링크 수정을 하는 페이지와 POST method의 링크 수정 백엔드 엔드포인트를 구현하였다.

SQL 데이터베이스에 쿼리를 실행해 업데이트를 해 주는 방식이다.

조금 더 코드가 길고 복잡한 이유는 디자인을 위해 html 페이지를 렌더링하기 때문이다.

// Route for editing a link (with authentication)
app.get('/edit/:alias', authenticate, async (req, res) => {
    try {
        const { alias } = req.params;
        const ADMIN_KEY = process.env.ADMIN_KEY;
        // Parameterized query to prevent SQL injection
        const result = await client.query('SELECT * FROM links WHERE alias = $1', [alias]);
        res.send(`
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>${process.env.SERVICE_NAME} Link 편집 | ${process.env.SERVICE_NAME} Link Service</title>
                <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css" />
                <style>
                body {
                    font-family: 'Pretendard';
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    height: 100vh;
                    font-family: Arial, sans-serif;
                    background-color: #f5f5f5;
                }
        
                h1 {
                    font-family: 'Pretendard';
                    font-size: 4rem;
                    margin-bottom: 1rem;
                    color: #333;
                }
        
                p {
                    font-family: 'Pretendard';
                    font-size: 1.5rem;
                    color: #666;
                }
        
                form {
                    font-family: 'Pretendard';
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    margin-top: 2rem;
                }
        
                input {
                    font-family: 'Pretendard';
                    padding: 0.5rem;
                    margin-bottom: 1rem;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    width: 100%;
                    max-width: 500px;
                }
        
                button {
                    font-family: 'Pretendard';
                    padding: 0.5rem 1rem;
                    border: none;
                    border-radius: 4px;
                    background-color: #007bff;
                    color: #fff;
                    cursor: pointer;
                }
        
                button:hover {
                    font-family: 'Pretendard';
                    background-color: #0056b3;
                }
        
                select {
                    font-family: 'Pretendard';
                    padding: 0.5rem;
                    margin-bottom: 1rem;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    width: 100%;
                    max-width: 500px;
                }
                </style>
            </head>
            <body>
                <style>
                @media (max-width: 768px) {
                    h1 {
                        font-size: 3rem;
                    }
                }
                </style>
                <h1>Link 편집</h1>
                <img src="https://i.imgur.com/U77qqOC.png" alt="Link Services" width="120" height="120" style="margin-bottom:1.5rem;">
                <form>
                    ${result.rows.map(link => `
                    <input type="text" name="name" placeholder="링크 제목" value="${link.name}">
                    <input type="text" name="alias" placeholder="연결될 alias" value="${link.alias}" readonly>
                    <input type="text" name="url" placeholder="URL" value="${link.url}">
                    <select name="status" title="Status" value="${link.status}">
                        <option value="1">Public</option>
                        <option value="2">Protected</option>
                        <option value="3">Private</option>
                    </select>
                    <input type="text" name="password" placeholder="Password" hidden value="${link.password}">
                    <input type="text" name="ios_url" placeholder="iOS URL" value="${link.ios_url}">
                    <input type="text" name="android_url" placeholder="Android URL" value="${link.android_url}">
                    <button type="submit">링크 편집</button>
                    `).join('')}
                </form>
                <script>
                const form = document.querySelector('form');
                const inputs = form.querySelectorAll('input');
                const select = form.querySelector('select');
                const button = form.querySelector('button');
        
                select.addEventListener('change', () => {
                    const selected = select.value;
                    const password = form.querySelector('input[name="password"]');
                    if (selected === '2') {
                        password.removeAttribute('hidden');
                    } else {
                        password.setAttribute('hidden', true);
                    }
                });
        
                form.addEventListener('submit', async event => {
                    event.preventDefault();
                    const data = {
                        name: inputs[0].value,
                        alias: inputs[1].value,
                        url: inputs[2].value,
                        status: select.value,
                        password: inputs[3].value,
                        ios_url: inputs[4].value,
                        android_url: inputs[5].value,
                        authKey: '${ADMIN_KEY}'
                    }
                    console.log(data);
                    const response = await fetch('/edit', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    });
                    const result = await response.json();
                    alert(result.message);
                    form.reset();
                    history.back();
                });
                </script>
            </body>
            </html>
        `);
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

// Route to handle link editing (with authentication)
app.post('/edit', authenticate, async (req, res) => {
    try {
        const password = process.env.ADMIN_KEY; // Replace with your actual admin key
        const authKey = req.body.authKey;
        if (!authKey || authKey !== password) {
            res.status(401).send('관리자 권한이 필요합니다.');
            return;
        }
        const { name, alias, url, ios_url, android_url, status, password: set_pass } = req.body;
        // Parameterized query to prevent SQL injection
        await client.query(
            'UPDATE links SET name = $1, url = $2, ios_url = $3, android_url = $4, status = $5, password = $6 WHERE alias = $7',
            [name, url, ios_url, android_url, status, set_pass, alias]
        );
        res.status(200).send({ success: true, message: 'Link 수정 성공' });
    } catch (err) {
        console.error(err);
        res.status(500).send({ success: false, message: 'Internal Server Error' });
    }
});

링크 삭제 기능 구현

링크를 삭제하기 위한 API 엔드포인트(DELETE method)와, 관리자 접속이 가능한 삭제 페이지(GET method)를 구현하였다.

파라미터를 통해 어떤 링크를 삭제할지 확인하도록 하였으며, 최종 승인 후 삭제되도록 하였다.

// Route for deleting a link (with authentication)
app.get('/delete/:id', authenticate, async (req, res) => {
    try {
        const { id } = req.params;
        const ADMIN_KEY = process.env.ADMIN_KEY;
        // Parameterized query to prevent SQL injection
        const result = await client.query('SELECT * FROM links WHERE id = $1', [id]);
        res.send(`
            <style>
            button {
                padding: 0.5rem 1rem;
                border: none;
                border-radius: 4px;
                background-color: #dc3545;
                color: #fff;
                cursor: pointer;
            }
            button:hover {
                background-color: #c82333;
            }
            </style>
            <h1>Link를 삭제하시겠습니까?</h1>
            <p>Alias: ${result.rows[0].alias}</p>
            <p>URL: ${result.rows[0].url}</p>
            <button id="deletebutton">
                <span>삭제</span>
            </button>
            <script>
                const deleteButton = document.getElementById('deletebutton');
                deleteButton.addEventListener('click', async () => {
                    const response = await fetch('/delete/${id}', {
                        method: 'DELETE',
                        headers: {
                            'Authorization': '${ADMIN_KEY}'
                        }
                    });
                    const result = await response.json();
                    alert(result.message);
                    window.location.href = '/list';
                });
            </script>
        `);
    } catch (err) {
        console.error(err);
        res.status(500).send('Internal Server Error');
    }
});

// Route to handle link deletion (with authentication)
app.delete('/delete/:id', authenticate, async (req, res) => {
    try {
        const { id } = req.params;
        const password = process.env.ADMIN_KEY;
        const authKey = req.headers.authorization;
        if (!authKey || authKey !== password) {
            res.status(401).send('관리자 권한이 필요합니다.');
            return;
        }
        // Parameterized query to prevent SQL injection
        await client.query('DELETE FROM links WHERE id = $1', [id]);
        res.status(200).send({ success: true, message: 'Link 삭제 성공' });
    } catch (err) {
        console.error(err);
        res.status(500).send({ success: false, message: 'Internal Server Error' });
    }
});

서버 실행 코드 작성

마지막으로, 서버가 실제로 동작되도록 하는 module export와 포트 정의, app 실행 부분을 작성하였다.

// Start the server
app.listen(port, '0.0.0.0', () => {
    console.log(`Server is running on ${port}`);
});

module.exports = app;

전체 코드 완성

이로써 app.js의 모든 코드는 완성되었다.

다만, 실제로 동작하기 위해서는 404.html, index.html과 같은 정적 웹페이지 소스가 필요하다.

이는 관리자의 편리한 관리를 위함이며, 예제 파일은 아래에서 다운로드받을 수 있다.

link_sources.zip

0.05MB

app.js를 포함한 전체 코드

위 소스 파일은 연습을 위해 app.js는 제외하였다.

만약 전체 코드가 필요하다면, 아래 '더보기' 버튼을 눌러 GitHub 링크를 활용하도록 하자.

다만, 연습을 위하여 위의 코드를 이용하여 직접 만들어 보기를 권장한다.

GitHub - hoony6134/link-service-example

Contribute to hoony6134/link-service-example development by creating an account on GitHub.

github.com

환경 변수 설정

gitignore 설정

위에서 언급된 것처럼, 우리는 보안을 위해서 중요 정보를 환경 변수로 관리한다.

이를 위해, .env라는 파일을 만들어 주어야 한다. 이는 중요 보안 정보이기에 GitHub에 올라가면 안되므로, 만약 .gitignore에 .env 파일이 등록되어 있지 않다면, 아무 곳에나 .env를 넣어 주자. (만약 /node_modules/가 포함되어 있지 않다면, 이 또한 넣어주자.)

gitignore 추가

.env 파일 설정

gitignore에 추가했다면, 실제 환경변수를 설정할 차례이다.

.env 파일을 넣어 아래 내용을 추가해 준다.

POSTGRES로 시작하는 내용은 vercel 데이터베이스 관리 페이지에서 메모한 정보를 넣어준다.

DATABASE_URL은 vercel 데이터베이스 관리 페이지의 psql 부분을 참고한다.

여기서 ADMIN_KEY는 복잡한 문자열로 아무 문자열을 입력하면 된다.

또한, SERVICE_NAME은 간단한 서비스명 (ex. SCIAN)을 입력해 주고, ADMIN1_PASSWORD, ADMIN2_PASSWORD에는 자신이 원하는 패스워드를 입력해 준다. 이때 작성한 패스워드는 메모해 두도록 하자.

호스팅하기

GitHub 데스크탑에서 이렇게 작성한 코드를 Commit&Push해 준다.

이후, Vercel 사이트에 접속하여 우리가 만든 프로젝트 페이지의 Settings>Environment Variables에 들어가 준다.

그런 다음 아까 만들어 두었던 .env의 내용을 복사하여 이곳에 붙여넣어 준다.

Vercel 환경변수 설정

Save 버튼을 눌러주면 아래와 같이 나타날 것이다.

Vercel 환경변수 설정 완료

이렇게 되면, 모든 준비는 끝났다. 처음에 메모해 둔 이 서버의 URL로 들어가 ID:admin, PW: [메모해 둔 비밀번호]로 로그인하여 링크를 생성해 보자!

전체 서비스의 사용 방법은 다음 글을 통해 소개하겠다.

다음 편 바로보기

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (4) — 사용 방법

EP.1 링크 단축 서비스 (4) — 사용 방법

잇(IT)! 가이드EP.1 링크 단축 서비스 (4) — 사용 방법잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도

scian.xyz

EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

Scian — Thu, 16 May 2024 02:16:19 +0900

잇(IT)! 가이드
EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

본 포스팅은 이전 게시물과 이어지는 내용입니다. 아래 게시글을 먼저 확인해 보시기를 추천드립니다.

2024.05.14 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (1) — 시작하기

EP.1 링크 단축 서비스 (1) — 시작하기

scian.xyz

Vercel 연결

vercel.json 설정

이전 게시글까지 잘 따라왔다면, GitHub 리포지토리에 app.js라는 파일과 package.json이라는 파일이 생성되어 있을 것이다.

우리는 이제, 이 리포지토리를 서버에 호스팅하기 위해 Vercel이라는 사이트를 이용할 것이다.

Vercel에 대한 설명과 설정 방법은 아래 포스팅에 자세히 설명해 놓았으니, 아래 게시글을 보고 다시 이 글로 돌아오자.

이전 게시글을 봤다면, 남은 단계를 모두 진행하면 된다.

2024.05.13 - [잇(IT)! 가이드] - EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

scian.xyz

지금은 app.js에 아무 내용이 없어 제대로 실행이 되지 않을 것이다.

또한, app.js에 내용을 작성해도 Vercel에서 이를 인식하지 못해 제대로 작동하지 않을 것이다.

이를 해결하기 위해, 우리는 vercel.json이라는 파일을 만들어 주어야 한다.

VSCode에서 vercel.json이라는 파일을 새로 만들어 주고, 아래 내용을 복붙해 준다.

{
    "version": 2,
    "builds": [
        {
            "src": "app.js",
            "use": "@now/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "app.js"
        }
    ]
}

Git Commit & Push

GitHub Desktop으로 돌아가 이 내용을 Commit & Push해 주자. VSCode 내의 Git 확장 기능을 사용해도 좋다. (이와 관련해서는 구글 검색을 해보면 많은 자료가 나와 있을 것이다.)

Commit & Push

데이터베이스 구조

데이터베이스를 구축하기 전에, 간단하게 우리의 데이터베이스 구조와 서버의 연결 에 대해 살펴보자면, 우리는 links라는 이름의 테이블에 우리가 사용할 링크의 정보(원래 url, 나중 url, 보안 기능, 설명 등등등)를 담아놓고, 서버에서 접속한 url과 데이터베이스의 내용을 비교하여 원래 url로 갈 수 있도록 한다. 이 때, 접속과 동시에 로그 기록을 남겨 ip주소와 useragent 등의 정보를 logs 테이블에 저장하도록 하였다.

DISCLAIMER:
본 블로그에서는 링크 연결에 대해 접속자의 데이터를 로그에 기록하는 기능을 포함하여 설명합니다.
접속자 데이터 수집에 대한 개인정보 보호법 준수를 포함하되, 이에 국한되지 않는 모든 책임은 방문자님께 있음을 알려드립니다.

데이터베이스 구축

Vercel의 postgresql 데이터베이스 생성

다시 Vercel 창을 열고, 스토리지 탭에 접속한다.

Storage

Postgres라는 데이터베이스를 선택하여 만들어 준다.

Postgres

동의를 눌러주고, 리전 선택에서 한국과 그나마 가까운 싱가포르를 선택해 준다.

(다른 곳을 선택해도 큰 문제가 있는 것은 아니다.)

그리고, 데이터베이스 이름을 원하는 것으로 바꿔준다.

리전 선택

이후, connect 버튼을 눌러준다.

데이터베이스—프로젝트 연결

바로 열리는 페이지에서 .env.local 탭을 눌러 나오는 데이터베이스 접속 정보를 메모해 둔다.

Show secret 버튼을 눌러 상세정보를 표시할 수 있다.

아래 데이터에 유념해서 메모해 준다.

POSTGRES_USER="************"
POSTGRES_HOST="************"
POSTGRES_PASSWORD="************"
POSTGRES_DATABASE="************"

Datagrip 설치

SQL 문법에 대해 잘 안다면 직접 연결해서 사용하거나, 코드를 짜서 데이터베이스를 관리할 수도 있지만 본 프로젝트에서는 GUI(그래픽 사용자 인터페이스) 기반의 툴을 사용해서 쉽게 데이터베이스를 관리하고자 한다.

이를 위해서 Datagrip을 설치해 준다. (30일 무료 체험판을 제공하며, 학생은 무료이다.) 만약 다른 소프트웨어를 사용하고 있다면, 그 제품을 써도 무방하다. (Tableplus도 무료로 쓸만 하다.) 다만, 본 예시에서는 Datagrip을 기준으로 설명하도록 하겠다.

https://www.jetbrains.com/ko-kr/datagrip/

DataGrip: JetBrains가 만든 데이터베이스 및 SQL용 크로스 플랫폼 IDE

www.jetbrains.com

데이터 소스 추가

Datagrip을 열고, File 메뉴>아래 경로(macOS 기준)를 따라서 Postgresql을 추가해 준다.

데이터 소스 추가

이후, 메모해둔 정보를 입력해 준다.

데이터 소스 추가 (정보 입력)

콘솔 확인

만약 잘 추가했다면, 아래와 같은 페이지를 볼 수 있을 것이다.

성공 페이지

links 테이블 생성

위에서 열린 콘솔에 아래 명령어를 입력해 준다.

id는 고유한 값으로 각 링크와 1:1로 연결된다. alias는 [도메인주소]/[텍스트] 형식에서 [텍스트] 부분에 들어갈 문자열을 뜻한다.

url은 단축할 url, name은 내부적으로 확인할 별칭, status와 password는 보안 관련 기능(추후에 설명하도록 하겠다.), description은 내부적으로 확인할 설명, timestamp는 생성 시간을 의미한다.

또한, ios_url과 android_url은 접속 장치에 따라 다른 url로 접속하도록 할 때 필요한 기능이다.

CREATE TABLE links(
    id SERIAL PRIMARY KEY,
    alias text,
    url text,
    name text,
    status integer DEFAULT 1,
    password text,
    description text,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    ios_url text,
    android_url text
);

logs 테이블 생성

links 테이블이 잘 생성된 것을 확인하고, 아래 명령어도 콘솔에 다시 입력해 주자.

이전에 입력한 명령어는 지우는 것을 잊지 말자.

마찬가지로 id를 만들어 주고, ip주소는 방문자의 ip주소를 기록하는 공간이며, alias를 통해 위에서 만든 links 테이블과 연결된다.

또한, 접속 시간을 timestamp에 기록하며, 방문자 브라우저의 상세정보를 useragent에 기록한다.

CREATE TABLE logs(
    id SERIAL PRIMARY KEY,
    ip text,
    alias text,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    useragent text
);

이번 단계의 게시물은 여기까지이다.

다음 단계에서는 실제 서버 측 코드를 작성하고, 데이터베이스와 연결하는 작업을 할 것이다.

다음 단계부터가 진짜라고 할 수 있으니(?) 기대해도 좋다.

다음 편 바로가기

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

EP.1 링크 단축 서비스 (3) — 서버측 코드 작성

scian.xyz

EP.1 링크 단축 서비스 (1) — 시작하기

Scian — Tue, 14 May 2024 15:14:11 +0900

잇(IT)! 가이드
EP.1 링크 단축 서비스 (1) — 시작하기
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

Intro

한번쯤은 bit.ly와 같은 링크 단축 서비스를 사용해 본 적이 있을 것이다. 긴 URL을 내가 원하는 짧은 링크로 줄여 사용할 수 있는 장점이 있기에 필자 또한 즐겨 사용하는 서비스 중 하나이다.

들어가기에 앞서, 다른 서비스들에 대해 간단히 살펴보며 우리가 왜 이 서비스를 직접 만들어 사용해야 하는지 설명하도록 하겠다.

만약 바로 프로젝트를 시작하고 싶다면, 목차의 'Get Started' 부분부터 시작하기를 권한다.

bit.ly

bit.ly 로고

링크 단축 서비스의 대명사라고 불릴만큼 가장 많이 사용하는 링크 단축 서비스의 하나이다.

bit.ly/[문자열]의 형태로 링크가 이루어지며, 유료 플랜 결제를 할 경우 내가 갖고 있는 도메인을 사용하여 서비스를 만들 수 있다.

문자열은 원하는 대로 설정할 수 있으나, 제한이 있고, 이미 유명한 서비스인지라 사용중인 url이 많다.

Firebase Dynamic Link

이전에 한 번 다뤘던 Firebase Dynamic Link는 이러한 문제점을 깔끔히 해결해 주지만, 지원 종료가 선언되었다.

필자는 이 서비스를 사용하다 필요성을 체감하여 이 프로젝트를 진행하게 되었다.

2022.10.09 - [ IT/⭐️ Lifehacks] - 사용자 도메인으로 링크 단축하기 - bitly 대체

사용자 도메인으로 링크 단축하기 - bitly 대체

bit.ly와 같은 링크 단축 서비스가 있다. 특히 bit.ly의 경우에는 내가 소유하는 도메인을 이용하여 링크 단축을 하려고 하면 유료 결제를 해야 한다. 또, 내가 원하는 링크 주소가 이미 사용되고 있

scian.xyz

Solution

그래서, 우리는 내가 가지고 있는 도메인에 연결하여(만약 도메인이 없다고 해도, 걱정할 것은 없다. 무료로 도메인을 제공해 주는 서비스를 사용해도 되고, 후술할 호스팅 사이트에서도 무료로 도메인을 제공해 준다.) 나만의 링크 단축 서비스를 만들어 보고자 한다.

여기서 더 나아가, 어떤 사용자가 링크를 클릭했는지 분석하고, 아이폰이나 안드로이드 등에서 접근했을 때 다른 URL로 연결되도록 딥링크 기능 또한 구현해 보고자 한다. 또한, 웹상에서 링크를 쉽게 만들고, 관리자만 볼 수 있는 링크를 만들거나, 비밀번호를 알아야 연결할 수 있는 링크 등 다양한 기능도 넣어 보고자 한다.

준비가 되었다면, 어떻게 만들 것인지 간단하게 알아보고 가자!

Node.js

Node.js 로고

우리는 링크 단축 서비스를 만들기 위해 Node.js라는 자바스크립트 기반의 런타임을 사용할 것이다.

쉽게 말하면, 자바스크립트라는 언어를 이용해 코드를 짜서 링크 단축 서비스를 만드는데, 그 중에서도 Node.js라는 친구를 이용해서 서버를 돌릴 수 있도록 할 것이다.

SQL

우리는 링크 목록을 저장하기 위해 SQL을 사용할 것이다. SQL은 데이터베이스의 일종으로, 데이터 간의 관계를 중심으로 하는 관계형 데이터베이스이다. 필자는 별도의 리눅스 서버를 운용 중으로, MySQL 데이터베이스를 직접 구축해 사용하고 있으나, 이 과정 전체를 다루기에는 너무 복잡하므로, 본 프로젝트에서는 무료 SQL 호스팅을 사용할 예정이다.

Vercel

Vercel은 우리가 만든 링크 단축 서비스를 24시간동안 돌릴 수 있도록 도와주는 호스팅 서비스로, 우리가 만든 코드를 업로드하면 쉽게, 그것도 무료로 호스팅해주는 좋은 서비스이다. Vercel과 관련해서는 EP.0에서 다룬 적이 있으니 아래 글을 참고하자.

2024.05.13 - [잇(IT)! 가이드] - 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

scian.xyz

Get Started

자, 우리는 관련한 내용을 간단히 살펴보았고, 프로젝트를 시작할 준비가 되었다.

본격적으로 프로젝트를 시작해 보자!

Visual Studio Code 설치

우리는 앞으로 코드를 작성할 것인데, 코드를 작성하기 위해서 Visual Studio Code라는 IDE(통합 개발 환경; 쉽게 말하면 코드를 작성할 수 있는 프로그램이자 공간이라고 생각하면 된다.)를 사용할 것이다.

사용중인 운영체제에 맞는 버전을 아래 사이트에서 다운로드받자. 만약 이미 설치했다면, 건너뛰어도 좋다.

앞으로는 Visual Studio Code를 줄여 VSCode라고도 부를 것이니 참고하자.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

VSCode 시작하기

VSCode를 설치하고, 기본 설정을 마치면 아래와 같은 화면을 볼 수 있다. 우선 이 화면을 켜둔 상태로 다음 단계로 넘어가자.

필자는 macOS를 기준으로 설명하도록 하겠다.

VSCode 실행 화면

GitHub, GitHub Desktop 세팅하기

먼저, 아래 EP.0의 게시글을 보고 GitHub와 GitHub Desktop을 설정하자.

Vercel은 추후 사용할 예정이니, 잠시 새 탭에 아래 글을 띄워 놓고 GitHub Desktop의 설치까지만 진행하도록 하자.

2024.05.13 - [잇(IT)! 가이드] - 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

scian.xyz

설정이 완료되었다면, 위 글을 따라 만든 리포지토리를 VSCode에서 열어주자.

열기.. 버튼을 눌러 리포지토리가 위치한 폴더를 선택해 주자.

리포지토리 열기

Node.js 설치

아래 사이트에서 Node.js를 설치하자.

https://nodejs.org/en/download

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

기본적으로 설정된 값으로 (LTS 버전), 운영체제에만 맞게 설치하자.

설치법은 많은 블로그에서 다루고 있으니, 생략하도록 하겠다.

NPM init & 기본 설정

보기 → 터미널을 눌러 폴더를 터미널에서 열어준다.

control+shift+` (컨트롤 + 쉬프트 + 백틱(원화 기호))를 사용해도 열 수 있다. (macOS에서도 ^키이다.)

터미널에서 폴더 열기

여기에 아래 명령어를 입력한다.

npm init

npm init (1)

이어 나오는 질문들에 엔터를 치다가, entry point를 app.js로 바꿔준다.

서버에서 가장 먼저 실행할 파일을 정해주는 것이며, 우리는 app.js라는 이름으로 파일을 만들 것이다.

npm init (2)

아래 창이 나오면 엔터 키를 한 번 더 눌러 마무리해 준다.

npm init (3)

잘 따라왔다면 왼쪽 explorer에 package.json 파일이 잘 생성되었는지 확인한다.

package.json 생성 확인

이후, New File 버튼을 눌러 app.js라는 이름의 파일을 생성해 준다.

New File

아래처럼 화면이 나타나면 잘 된 것이다.

(Copilot Chat 관련된 메시지—스크린샷에서 파란 글씨는 나타나지 않을 것이니 무시해도 좋다.)

app.js 생성 완료 화면

여기까지 잘 따라왔다면, 링크 단축 서비스를 만들기 위한 첫 단계는 완성한 것이다.

모두 축하하며, 다음 편으로 넘어가도록 하자.

다음 편 바로가기

2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축

scian.xyz

신경전달물질과 화학적 시냅스

Scian — Mon, 13 May 2024 19:36:15 +0900

신경전달물질과 화학적 시냅스에 사용되는 물질의 특징에 대해 정리해 보면, 아래 표와 같이 정리할 수 있다.

본 표는 모든 물질을 포함하고 있는 것은 아니며, 핵심적인 일부 물질만 포함되어 있다.

구분		수용체	분비 부위	수용체 위치	기능
아세틸콜린		니코틴성	중추신경계, 말초신경계, 척추동물 신경근 접합부	골격근, 자율신경, 중추신경계
아세틸콜린		무스카린성	중추신경계, 말초신경계, 척추동물 신경근 접합부	평활근, 심근, 내분비샘, 외분비샘, 중추신경계
아민	노르에피네프린	아드레날린성 (α, β)	중추신경계, 말초신경계	평활근, 심근, 샘, 중추신경계	평활근 수축과 이완, 심장박동 촉진
	에피네프린	아드레날린성 (α, β)	중추신경계, 말초신경계	평활근, 심근, 샘, 중추신경계	평활근 수축과 이완, 심장박동 촉진
	도파민	도파민	중추신경계, 말초신경계	중추신경계	쾌감, 운동 신경 조절
	세로토닌	세로토닌	중추신경계		안정, 평온
	히스타민	히스타민			혈관 확장, 내장 근육 수축, 알레르기
신경 펩타이드	물질 P		중추신경계, 말초신경계		스트레스, 통각 전달
신경 펩타이드	엔케팔린 (엔돌핀)		중추신경계		통각 조절
아미노산	글루탐산	AMPA, NMDA	중추신경계, 무척추동물의 신경근 접합부		학습과 기억
	GABA	GABA	중추신경계, 무척추동물의 신경근 접합부		우울, 긴장, 두려움 해소
	글라이신	Gly	중추신경계		안정 작용
	아스파트산	Asp	중추신경계		흥분성

* 만약 표가 잘 보이지 않거나 깨져 보인다면, 아래 더보기를 눌러 이미지 버전의 표를 확인할 수 있다.

신경전달물질과 화학적 시냅스

이 중, 가장 중요한 물질 중 하나인 아세틸콜린의 수용체별 기능에 대해 정리하면 아래와 같다.

아세틸콜린의 수용체별 기능

아세틸콜린의 구조

니코틴성 Ach 수용체

아세틸콜린이 니코틴성 아세틸콜린 수용체(이온통로 수용체)에 결합하면,

Na+가 유입되고, K+가 유출된다.
EPSP가 형성된다.
활동 전위가 발생한다.
골격근이 수축하고, 자율신경절에 탈분극이 일어난다.

무스카린성 Ach 수용체

아세틸콜린이 무스카린성 아세틸콜린 수용체(G단백질 연결수용체)에 결합하면,

G단백질(GTP 결합 단백질)은 아래 3가지로 작용할 수 있다.

K+ 채널의 닫힘 → EPSP 형성 → 위평활근 수축
K+ 채널의 열림 → IPSP 형성 → 심장박동 억제
Ca2+ 채널의 열림 → Ca2+ 농도 ↑ → 평활근 수축, 샘분비 촉진

EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)

Scian — Mon, 13 May 2024 00:49:19 +0900

잇(IT)! 가이드
EP.0 — 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.

Intro

어떤 웹사이트든, 코드를 다 짜면 사용자가 볼 수 있도록 웹상에 보여주는 호스팅 과정이 필요하다.

일반적으로 리눅스 관련 전문 지식이 있다면 AWS, Google Cloud 등의 VM(가상 머신)을 빌려 직접 코드를 설치해 호스팅을 하거나,

서버를 잘 다루지 못한다면 웹호스팅 전문 업체를 사용한다.

이 글에서는 서버를 잘 다뤄도, 다루지 못해도 유용하게, 무엇보다 무료로 사용할 수 있는 Vercel이라는 서비스와 사용법에 대해 소개한다.

우리들의 구세주 Vercel

Vercel에서는 Node.js를 이용해 만든 사이트를 호스팅하는 데에 최적이며, Flask 등도 호스팅이 가능하나 관련 지식이 필요하다.

만약, 단순히 html 파일 하나 또는 여러 개를 호스팅하고자 한다면, 후술할 GitHub Pages를 사용하기를 권장한다.

GitHub 계정 만들기

Vercel을 사용하려면, 개발자들의 필수품이라고 할 수 있는 GitHub 계정이 필요하다. GitHub는 리포지토리라는 공간이 있는데, 이 공간에 내가 만든 코드를 올리면 Vercel이 알아서 웹사이트로 바꿔줄 것이기 때문이다.

아래 링크를 클릭해 무료 GitHub 계정을 만들어 주자.

https://github.com/signup

GitHub: Let’s build from here

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...

github.com

일반적인 웹사이트를 가입하는 것처럼, 이메일을 넣고 이메일을 인증하면 계정이 생성된다.

요금제는 무료 요금제를 사용해도 충분하다.

GitHub 리포지토리 생성하기

GitHub 계정을 만들었다면, 첫 페이지(대시보드)에서 New Repository를 누른다.

GitHub 대시보드 화면

아래에 원하는 이름을 지어주고(영문, 숫자, 하이픈 권장),

리포지토리 이름 짓기

공개 범위를 설정해 준다.

코드가 알려지지 않아야 한다면 Private(비공개)으로, 상관 없다면 Public(전체공개)로 설정한다.

Add a README file 버튼을 먼저 눌러주면 이후 편하게 작업이 가능하니, 이 버튼도 눌러준다.

이후, Create Repository 버튼을 누른다.

리포지토리 생성

잘 따라왔다면, 아래와 같은 화면이 보일 것이다.

리포지토리 화면

이후, 아래 설명을 따라준다.

GitHub Desktop 설치

만약 macOS를 사용중이거나, Windows에 Git이 설치되어 있고, git 명령어를 사용할 줄 안다면 이 단계는 넘어가도 좋다.

git이 뭔지 모르거나, 터미널(명령 프롬프트)로 뭔가를 하는게 익숙하지 않다면 GitHub를 쉽게 쓸 수 있는 프로그램인 GitHub Desktop을 설치해 두자.

https://desktop.github.com/

GitHub Desktop

Simple collaboration from your desktop

desktop.github.com

위 링크에서 설치를 완료하고, GitHub Desktop을 열고 로그인을 눌러 GitHub 계정과 연동한다.

이후, 아까 리포지토리 페이지를 눌러 Open with GitHub Desktop을 누른다.

아까의 리포지토리 페이지

이후, 리포지토리 복제 창에서 원하는 위치를 선택하여 복제해 준다.

리포지토리 복제

성공적으로 복제되면, 아래와 같은 화면이 나타난다.

리포지토리 복제 후 화면

이후, 해당 폴더를 열어준다.

GitHub 리포지토리에 웹사이트 코드 업로드

로컬의 GitHub 리포지토리 폴더에 코드 이동

웹사이트 코드를 작성했다면, 이를 GitHub 리포지토리가 위치한 폴더에 담아 준다.

코드 이동

GitHub Desktop에서 commit&push

GitHub Desktop을 열고 웹사이트의 내용(아무거나 적어도 상관 없지만, 처음에는 Initial commit이라 적어주거나, 수정 사항을 제목으로 적어 주어야 향후 관리가 편하다.)을 적고 Commit to main을 누른다.

여기서 잠깐!
git에서 commit은 내가 수정한 사항을 저장해 주는 느낌이라고 볼 수 있고, 향후 만들 push는 그걸 서버에 올려 실제 서비스에 반영하는 역할을 한다. 만약 여러 명이 사용할 경우 fetch (새로고침)해 주고, pull하여 다른 사람의 변경 사항을 나한테 적용할 수도 있다.

GitHub Desktop에서 commit하기

이후, Push origin 버튼을 누른다.

GitHub Desktop에서 push하기

자, 그러면 GitHub와 GitHub Desktop의 기본 사용 방법에 대해서 알게 되었다!

그렇다면, 이제 Vercel로 넘어가 볼 차례이다!

Vercel 회원가입

아래 링크를 눌러 회원가입을 진행하자.

https://vercel.com/signup

Vercel's frontend cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

vercel.com

Vercel 가입 1단계

이후, Connect with GitHub를 눌러 로그인된 GitHub 계정과 연동해 준다.

중간에 권한 승인 화면이 나타나면 Authroize Vercel 버튼을 누르고, All Repository에 대한 접근 권한을 허용해 준다.

Vercel 가입 2단계

이후, 메인 화면으로 가서 새 프로젝트를 만들어 주자.

아래 링크를 클릭해 만들어도 좋다.

https://vercel.com/new

New Project – Vercel

Project Limit Reached This Personal Account has reached the Infinity project Hobby limit. To continue, please create a Pro team or select a different account . Create a Pro TeamOpen Account Switcher

vercel.com

아래 화면처럼 나타나면, Import 버튼을 눌러주자.

Vercel 프로젝트 생성 1단계

이후, 바로 Deploy 버튼을 눌러준다.

Vercel 프로젝트 생성 2단계

만약 작성한 코드에 오류가 없다면, 아래처럼 축하를 받으며 프로젝트가 잘 만들어질 것이다.

Vercel 프로젝트 생성 3단계

Continue to Dashboard를 눌러주면, 아래와 같은 화면을 볼 수 있다.

Vercel에서는 무려 무료로 vercel.app의 서브도메인 형식으로 도메인 주소를 제공해 준다.

만약 본인이 갖고 있는 도메인 주소를 연결하고 싶다면, 이 링크를 참고하자.

접속할 주소 확인

해당 주소로 접속해 보면, 웹사이트가 정상적으로 나오는 것을 확인할 수 있다!

자신이 사용하는 환경에 맞게 다양한 커스텀이 가능하며, 여러 고급 기능이 있으니, 관련된 지식이 조금 있다면 아래 공식 문서를 참고해 보는 것도 좋을 것이다.

https://vercel.com/docs

Vercel Documentation

Vercel's Frontend Cloud gives developers frameworks, workflows, and infrastructure to build a faster, more personalized web

vercel.com

웹사이트 업데이트하기

웹사이트를 만들었으면, 코드를 업데이트할 일이 분명 있을 것이다.

만약 코드를 업데이트했다면, 해야할 일이 많지 않다. 전에 언급된 Commit & Push만 진행해 주면, 나머지는 Vercel에서 알아서 해 준다. 대시보드에 접속해 보면 상황을 확인해 보고, 로그를 체크할 수도 있지만, 코드가 정확하다고 자신한다면 약 30초~1분 사이에 위에서 얻은 접속용 주소에 방문하면 업데이트된 코드대로 바뀌어져 있을 것이다.

이 점이 바로 Vercel의 큰 강점이라고 할 수 있다 :)

GitHub Pages 사용하기

만약 html 파일 몇개만 호스팅해야 하고, 사이트가 복잡하지 않다면, GitHub Pages를 사용하는 것이 편리하다. 이 또한 사용 방법은 거의 비슷하며, Commit&Push로 무료로 호스팅해준다.

다만, 만약 GitHub 무료 버전을 사용할 경우 비공개 리포지토리의 경우 호스팅이 되지 않으므로, Pro 버전을 사용하거나 소스코드를 전체 공개로 바꿔야 할 것이다. (학생의 경우 Pro 버전과 다양한 혜택을 무료로 제공해 준다. https://education.github.com/ 참고.)

GitHub Pages를 사용하는 방법에 대해서는, 본 주제의 핵심이 아니므로 친절히 설명된 공식 문서를 참고해 보면 좋을 것이다. 혹은 관련된 자료가 많으니, 구글에 GitHub Pages를 검색해 보는 것도 좋다.

https://pages.github.com/

GitHub Pages

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

pages.github.com

Outro

이 글에서는 Git, GitHub, Vercel을 이용해 Node.js 기반의 웹사이트를 무료로 호스팅하는 방법에 대해 살펴보았다.

이 글이 도움이 되었길 바라며, 글을 마무리하겠다.

만약 질문이 있다면 댓글로 남겨 주셔도 좋습니다 :)

방문해 주셔서 감사합니다 :)

Scian — Sun, 12 May 2024 22:46:07 +0900

안녕하세요 :)
SCIAN의 티스토리 블로그를 방문해 주셔서 감사합니다!

이 블로그는 주로 아래와 같은 내용을 다룹니다.

수과학 관련 지식
프로그래밍 (코드 작성)
IT 관련 이슈 및 Lifehack
Google 제품 관련 사용법 및 이슈, 문제 해결법
기타 내용

현재 저는 과학고에 재학중이고, 여러 내용들을 배우며 이 블로그를 노트와 비슷한 공간으로 사용하고 있습니다.
또, 저는 Google 공인 제품 전문가 (Product Expert)로 활동중이며, Gmail과 YouTube 등에서 발생하는 여러 문제들과 해결 방안에 대해 다룰 예정입니다.
본 블로그의 오류나 제안 사항, Google 제품 관련 오류 제보 및 문의 등은 언제든지 댓글로 남겨주시면 빠르게 답변드리겠습니다!
Google 제품 관련해서 궁금하신 점이나, Google Product Expert 활동에 대한 궁금증 등은 gpe[@]scian.xyz로 연락주셔도 좋습니다 :)

감사합니다!

[분석화학] 적정 분석 - 균형식을 이용한 이양성자산의 첫번째 당량점에서 pH 근사

Scian — Sun, 12 May 2024 19:36:34 +0900

평형과 균형식

분석화학에서 적정 분석을 하기 위해서는 전하 균형과 질량 균형에 대해 먼저 알고 있어야 한다.
전체 과정에 대해 설명하기 위해, 이 글에서는 C M의 이양성자산 $H_{2}B$ 용액을 C M $NaOH$ 용액으로 적정하는 예시를 이용하겠다.
이 예시에서, 이양성자산 $H_{2}B$ 용액의 이온화 반응은 아래와 같다.

$H_2B(aq)\leftrightarrow HB^-(aq) + H^+(aq)$ $K_1$
$HB^—(aq)\leftrightarrow B^{2-}(aq) + H^+(aq)$ $K_2$

전하 균형

전하 균형은 용액의 전기적 중성에 대해 표현한 균형식으로, 양전하의 합과 음전하의 합은 같다는 점을 이용해 양변에 양전하와 음전하를 각각 모아 표현하는 방식이다.
이때, 각 화학종 앞에 있는 계수는 언제나 그 이온의 전하의 크기와 같다는 점을 주의해야 한다. 즉, 이온 전하의 크기가 2라면, 전하 균형식에서 앞에 계수 2를 붙여줘야 하는 것이다.
예시의 첫 번째 당량점을 기준으로 전하 균형식은 $\left[ Na^{+}\right] +\left[ H^{+}\right] =\left[ OH^{-}\right] +\left[ HB^{-}\right] + \color{red} {2} \left[ B^{2-}\right] $가 된다.

질량 균형

질량 균형은 어떤 원자를 포함하는 모든 화학종을 합한 양이 용액에 가해준 그 원자의 양과 같다는 점에 대한 균형식이다.
하나의 원자를 기준으로 하여 전체의 합이 C M와 같다는 식으로 표현할 수 있으며, 해당 원자가 2개 이상 포함된 경우(e.g. $L_2$) 계수로 처리해야 한다.
예시의 첫 번째 당량점을 기준으로 질량 균형식은 $\left[ Na^{+}\right] =\left[ H_{2}B\right] +\left[ HB^{-}\right] +\left[ B^{2-}\right] $가 된다.

첫 번째 당량점에서의 pH 구하기

각 단계별 평형상수 확인

각 단계별로 주어진 평형상수를 반응에 참여하는 반응물과 생성물의 농도로 각각 나타내면 다음과 같다.
$K_{1}=\dfrac{\left[ HB^{-}\right] \left[ H^{+}\right] }{\left[ H_{2}B\right] }$
$K_{2}=\dfrac{\left[ B^{2-}\right] \left[ H^{+}\right] }{\left[ HB^{-}\right] } $
$K_{w}=\left[ H^{+}\right] \left[ OH^{-}\right]$

질량 균형식을 전하 균형식에 대입

pH를 구하기 전에, 소거를 위해 질량 균형식을 전하 균형식에 대입한다. (그 반대의 경우도 가능하나, 편의를 위해 이 글에서는 본 방법을 사용하였다.)
대입한 결과는 아래와 같다.
$\left[ H^{+}\right] +\left[ H_{2}B\right] =\left[ OH^{-}\right] +\left[ B^{2-}\right] $

평형상수 식을 이용한 대입 및 처리

위의 질량 균형식을 전하 균형식에 대입한 식에서 $K_1$, $K_2$의 분모에 해당하는 항을 평형상수에 대한 식으로 표현할 수 있다.
또한, 물의 이온곱 상수 $K_w = [H^+][OH^-]$를 이용하면,
$\left[ H^{+}\right] +\dfrac{\left[ HB^{-}\right] \left[ H^{+}\right] }{K_{1}}=\dfrac{K_{w}}{\left[ H^{+}\right] }+\dfrac{K_{2}\left[ HB^{-}\right] }{\left[ H^{+}\right] }$
양변에 $K_{1}\left[ H^{+}\right] $를 곱하여 처리해 주면,
$K_{1}\left[ H^{+}\right] ^{2}+\left[ HB^{-}\right] \left[ H^{+}\right] ^{2}=K_{1}K_{w}+K_{1}K_{2}\left[ HB^{-}\right] $
좌변에 $\left[ H^{+}\right]$만 남기기 위해 $\left[ H^{+}\right]^{2}$으로 묶고, 계수항으로 나눈 뒤 루트를 씌워 처리해 주면,
$\left[ H^{+}\right] =\sqrt{\dfrac{K_{1}K_{w}+K_{1}K_{2}\left[ HB^{-}\right] }{K_{1}+\left[ HB^{-}\right] }}$

근사의 적용

단순화를 위해 $\left[ HB^{-}\right] =\left[ HB^{-}\right] _{0}=C$ 근사를 적용하면,
$\left[ HB^{-}\right] \gg K_{1},K_{1}K_{2}\left[ HB^{-}\right] \gg K_{1}K_{w}$가 되어 작은 항을 무시할 수 있다. 이를 적용하면,
$\left[ H^{+}\right] \approx \sqrt{\dfrac{K_{1}K_{2}\left[ HB^{-}\right] }{\left[ HB^{-}\right] }} = \sqrt{K_{1}K_{2}}$
pH를 구하기 위해 양변에 -log를 씌워주면,
$\therefore pH\approx \dfrac{1}{2}\left( pK_{1}+pK_{2}\right) $

[그래프 이론] 인접행렬과 거듭제곱의 성질

Scian — Sat, 11 May 2024 11:09:32 +0900

아래 글을 먼저 보시고 오시기를 추천드립니다.
https://scian.tistory.com/174

[그래프 이론] 용어 및 기본 개념 정리

기본 용어그래프 점과 선으로 이루어진 도형 ($G(V,E)$) 꼭짓점 그래프에서의 점 (그래프에서 꼭짓점 집합: V) 변 꼭짓점을 연결한 선 (그래프에서 변 집합: E) 같은 그래프이다. 꼭짓점의 위치를 바

scian.xyz

인접행렬
어떤 그래프의 두 꼭짓점이 한 변으로 연결되어 있으면 1, 변으로 연결되어 있지 않으면 0으로 하여 그래프의 두 꼭짓점 사이의 관계를 나타낸 행렬

$v_{1}, …, v_{n}$을 꼭짓점으로 갖는 그래프 $G$의 인접행렬을 $A$라 할 때,

G의 각 꼭짓점의 차수
$A^{2}$의 대각성분 ($v_{i}$의 차수: $A^{2}$의 i,i 성분)

G의 변의 수: $\frac{tr(A^{2})}{2}$ (모든 꼭짓점 차수 합/2)

$v_{i}$에서 $v_{j}$로 가는 길이가 k인 길의 개수
$A^{k}$의 $(i,j)$ 성분

G안에 있는 삼각형의 개수
$\frac{tr(A^{3})}{6}$ ($A^3$ 대각성분 합/3!)

[그래프 이론] 용어 및 기본 개념 정리

Scian — Sat, 11 May 2024 10:51:07 +0900

기본 용어

그래프
점과 선으로 이루어진 도형 ($G(V,E)$)

그래프의 예시

꼭짓점
그래프에서의 점 (그래프에서 꼭짓점 집합: V)

변
꼭짓점을 연결한 선 (그래프에서 변 집합: E)

같은 그래프이다.
꼭짓점의 위치를 바꾸거나 변을 구부리거나 늘이거나 줄여도 두 그래프를 같은 그림으로 그릴 수 있다.

꼭짓점의 차수
그래프에서 한 꼭짓점에 연결된 변의 개수
그래프에서 모든 꼭짓점의 차수의 합 = 2*변의 개수

완전그래프
서로 다른 두 꼭짓점 사이에 항상 변이 오직 한 개 있는 그래프 ($K_{n}$)

연결그래프
임의의 서로 다른 두 꼭짓점이 연결된 그래프

경로
그래프의 한 꼭짓점에서 다른 꼭짓점으로 이동할 때, 한 번 지난 변을 반복하지 않으면서 연결된 변을 따라 순서대로 꼭짓점을 나열한 것

경로의 길이
한 꼭짓점에서 다른 꼭짓점으로 가는 경로에서 지나는 변의 개수

회로
한 꼭짓점에서 출발하여 출발한 꼭짓점으로 돌아오는 경로

인접행렬
어떤 그래프의 두 꼭짓점이 한 변으로 연결되어 있으면 1, 변으로 연결되어 있지 않으면 0으로 하여 그래프의 두 꼭짓점 사이의 관계를 나타낸 행렬
https://scian.tistory.com/175

[그래프 이론] 인접행렬과 거듭제곱의 성질

아래 글을 먼저 보시고 오시기를 추천드립니다. https://scian.tistory.com/174 [그래프 이론] 용어 및 기본 개념 정리기본 용어그래프 점과 선으로 이루어진 도형 ($G(V,E)$) 꼭짓점 그래프에서의 점 (그래

scian.xyz

여러 그래프

평면그래프
평면에서 변들이 꼭짓점에서만 교차하는 그래프
오일러공식: 연결된 평면그래프에서 $v-e+f=2$

$e \leq 3v-6$ (단, $v \geq 3$)
차수가 5 이하인 꼭짓점이 적어도 하나 있음

오일러 경로
연결된 그래프의 모든 변을 지나며 한 번 지난 변을 다시 지나지 않는 경로
⇔ 홀수점의 개수 0개 혹은 2개, 시작점과 끝점이 홀수점

오일러 회로
회로인 오일러 경로
⇔ 홀수점을 가지지 않음

오일러 그래프
오일러 회로를 갖는 그래프

해밀턴 경로
연결된 그래프의 모든 꼭짓점을 한 번씩만 지나는 경로

해밀턴 회로
회로인 해밀턴 경로
n개의 꼭짓점을 갖고 있는 연결그래프에서 인접하지 않은 임의의 두 꼭짓점의 차수의 합이 n 이상일 경우, 해밀턴회로가 존재 (단, n≥3)

해밀턴 그래프
해밀턴 회로를 갖는 그래프

수형도

수형도
회로를 가지고 있지 않는 연결그래프
수형도이면, $e=v-1$ 만족 (항상 $f=1$)

G가 n개의 꼭짓점을 갖는 연결그래프일 때, 아래는 모두 동치.
G는 수형도이다.
⇔ 임의의 꼭짓점 u, v에 대하여 u에서 v로 가는 유일한 경로가 있다.
⇔ G에서 임의의 한 변을 제거하면 남은 그래프는 연결그래프가 아니다.
⇔ G는 n-1개의 변을 가지고 있다.

생성수형도
연결된 그래프에 회로가 포함된 경우 변을 일부 제거하여 수형도가 될 때, 그 수형도

$G(V,E)$의 부분그래프 $G^{\prime}(V^{\prime},E^{\prime})$에 대해 $V=V^{\prime}$이고, $G^{\prime}$이 수형도이면 $G^{\prime}$은 $G$의 생성수형도이다.
연결그래프에는 항상 생성수형도가 있다.
n개의 꼭짓점을 갖는 서로 다른 수형도의 개수는 $n^{n-2}$개

구글 계정에서 패스키 사용하기

Scian — Sun, 7 Apr 2024 18:34:52 +0900

최근 Google 계정 로그인 시 패스키 기능이 도입되어 이에 대해 소개해 보고자 합니다.

관련 공지: https://support.google.com/accounts/answer/13548313?hl=ko

만약, 아래 조건을 만족하는 장비를 갖추고 계실 경우, 패스키 사용이 가능합니다.

2단계 인증 옵션 혹은 고급 보안 프로그램에서 인증 수단으로 사용 가능한 물리적 보안키(usb와 같은 형태로 사용자 인증을 할 수 있는 장치)와 비슷하지만, 기기의 구매가 필요 없이 기존에 갖고 있던 장치의 보안 기능을 활용할 수 있습니다.

Windows 10, macOS Ventura, ChromeOS 109 이상을 실행하는 노트북 또는 데스크톱
iOS 16 또는 Android 9 이상을 실행하는 휴대기기
FIDO2 프로토콜을 지원하는 하드웨어 보안 키

iOS 및 macOS에서는 Apple에서 제공하는 키체인 기능으로도 패스키를 생성할 수 있으며, 이 또한 Google 계정 로그인 패스키로 사용 가능합니다.

일반적으로, 패스키를 사용한 인증은 일반 아이디 + 비밀번호 로그인보다 강력한 인증처럼 처리되며, 2단계 인증이 설정된 경우에도 패스키를 이용해 인증할 경우 2단계 인증까지 한 번에 해결됩니다.

최근 비밀번호 유출 등의 문제로 안전한 로그인 트렌드로 거론되고 있는 패스키를 사용할 경우 보안 강화와 편의성을 모두 확보할 수 있을 것으로 기대됩니다.

만약 패스키를 등록하고 싶으실 경우, https://myaccount.google.com/signinoptions/passkeys로 이동하여 안내를 따라 등록이 가능합니다.

패스키를 이용해 로그인하고자 하실 경우 (등록한 기기와 로그인 기기가 동일),

Android 기기에서 로그아웃하면 다른 방법으로 다시 로그인해야 합니다. 본인 인증을 다시 해야 하는 민감한 작업을 로그인한 상태에서 하는 경우, Android 기기 자체에서 패스키를 사용할 수 있습니다.

Android가 아닌 다른 기기에서는 패스키를 사용하여 계정에 다시 로그인할 뿐만 아니라 이미 로그인한 상태에서 본인 인증을 다시 할 수 있습니다.

기기에 표시된 Google 로그인 페이지에 사용자 이름을 입력합니다.
이전에 해당 기기에서 계정의 패스키를 만든 경우 기기의 패스키로 본인 인증을 진행하라는 메시지가 표시됩니다.
- 화면에 표시된 패스키 안내에 따라 기기를 잠금 해제하고 본인 인증을 완료합니다.
  - UI는 운영체제와 브라우저에 따라 다릅니다.
- 간혹 기기에 패스키가 있음에도 비밀번호를 입력하라는 메시지가 표시될 수 있습니다.
패스키 사용 메시지를 표시하려면 '다른 방법 시도' 옵션을 사용하면 됩니다.

휴대폰에서 등록한 패스키를 컴퓨터 등 다른 장치에서 사용할 경우 컴퓨터에 표시된 QR코드를 패스키를 등록한 기기에서 스캔하면 사용이 가능합니다. 이 때, Apple 기기의 경우 패스키를 지원하고, 같은 iCloud 계정이 로그인된 모든 기기에서 스캔 및 로그인이 가능합니다.

본 글은 아래 구글 공식 지메일 지원 커뮤니티의 고정글에서도 확인 가능합니다.

https://support.google.com/mail/thread/261353777?hl=ko

FAQ: “패스키”가 무엇인가요? - Gmail 커뮤니티

support.google.com

본 포스트는 Google Product Experts (제품 전문가) 앰버서더 프로그램의 일환으로 작성된 가이드 게시물입니다.

Google 제품에 대해 문의 사항이 있으신가요?

Google 제품을 사용하는 중에 문제가 발생하셨나요?

언제나 주저 말고 Google 지원 커뮤니티를 이용해 주세요. 커뮤니티는 항상 열려있으며, 대부분의 제품에서 한국어 지원이 가능합니다.

Gmail: https://support.google.com/mail/community?hl=ko

Gmail 커뮤니티

support.google.com

YouTube: https://support.google.com/youtube/community?hl=ko

YouTube 커뮤니티

@TeamYouTube 한국어 질문 지원 시작: YouTube 관련 질문이 있으시다면, 지금 X(구 Twitter)에서 @TeamYouTube를 태그해 질문을 남겨주세요!

support.google.com

혹시, Google 제품에 대해 잘 알고 계시나요?

Google Product Expert 프로그램에 참여하여 다른 사람들을 도와주며 다양한 혜택을 받으실 수 있습니다!

이미지를 클릭하여 더 알아보실 수 있습니다.

구글 계정 가입시 발생하는 전화번호 인증 관련 문제 해결하기

Scian — Sun, 7 Apr 2024 18:32:26 +0900

최근 Google 계정을 가입할 때에 전화번호 인증과 관련된 오류가 자주 발생하는 것으로 보입니다.

업데이트 (2024. 6. 13.): 해당 문제는 작년부터 지속적으로 발생한 문제로, 현재 Google에서 인지한 상태이며 처리중이나 현재로써는 가족이나 친구, 친척 등의 전화번호를 빌리거나 투넘버 서비스 등 다른 번호를 이용하는 것밖에는 방법이 없다고 합니다.

이 전화번호는 이미 여러번 사용되었습니다.

특히 위 오류에 대해 전화번호 제한이 풀리는 시기는 공개된 바 없으며, 짧게는 몇일에서 몇주, 길게는 수개월이 소요될 수 있습니다.

Google에서는 계정을 만들 때 사용 가능한 전화번호의 개수를 제한하고 있으며, 몇 번 사용했을 경우 잠기는지, 혹은 제한 기간이 얼마만큼인지는 아직 공식적 자료가 나온 바 없습니다.

이전에 가입했던 계정을 찾아보시기를 추천드리나, 새 계정이 필요할 경우 가족 혹은 지인의 동의를 받아 전화번호 인증을 받고, 다른 이메일(네이버 등)을 계정의 복구 이메일 주소로 추가한 뒤, 지인의 전화번호를 제거하는 방법이 있습니다. 혹은, 중요한 계정의 경우 보안을 위해 통신사의 투넘버 서비스 등을 사용하는 방법 또한 있습니다.

또한, 경우에 따라 전화번호 인증이 강제되지 않고 건너뛰기가 가능할 수 있습니다. 신뢰할 수 있는 환경에서 vpn 등을 종료하고 다시 시도해 보세요. 여러 장치를 가지고 계실 경우 PC에서 오류가 발생할 경우 모바일에서, 혹은 그 반대에서 시도해 보시는 것도 도움이 될 수 있습니다.

만약 중복 사용이 아니지만, 인증에 사용할 수 없는 전화번호로 표시되는 경우 가상번호 서비스 등은 계정 인증에 사용할 수 없으니 주로 사용하는 전화번호를 통해 인증을 재시도해 주시기 바랍니다.

본 글은 아래 Gmail 지원 공식 커뮤니티의 고정글에서도 확인해 보실 수 있습니다.
https://support.google.com/mail/thread/267106274?hl=ko

FAQ: Google 계정을 가입할 때에 전화번호 인증 관련 오류가 발생합니다. - Gmail 커뮤니티

support.google.com

본 포스트는 Google Product Experts (제품 전문가) 앰버서더 프로그램의 일환으로 작성된 가이드 게시물입니다.

Google 제품에 대해 문의 사항이 있으신가요?
Google 제품을 사용하는 중에 문제가 발생하셨나요?
언제나 주저 말고 Google 지원 커뮤니티를 이용해 주세요. 커뮤니티는 항상 열려있으며, 대부분의 제품에서 한국어 지원이 가능합니다.

Gmail: https://support.google.com/mail/community?hl=ko

Gmail 커뮤니티

support.google.com

YouTube: https://support.google.com/youtube/community?hl=ko

YouTube 커뮤니티

@TeamYouTube 한국어 질문 지원 시작: YouTube 관련 질문이 있으시다면, 지금 X(구 Twitter)에서 @TeamYouTube를 태그해 질문을 남겨주세요!

support.google.com

혹시, Google 제품에 대해 잘 알고 계시나요?
Google Product Expert 프로그램에 참여하여 다른 사람들을 도와주며 다양한 혜택을 받으실 수 있습니다!

이미지를 클릭하여 더 알아보실 수 있습니다.

Gmail 계정에 보낸 이메일이 자주 스팸 처리됨

Scian — Sat, 17 Feb 2024 19:09:59 +0900

도메인 메일(example@example.com)에서 Gmail 계정으로 보낸 이메일이 스팸 처리되었을 경우,

Gmail 사용자에게 보낸 메일이 차단되거나 스팸으로 분류되는 것을 방지하기 도움말을 참고해 주세요.

이메일 발신자 가이드라인 - Google Workspace 관리자 고객센터

도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요

support.google.com

해당 도움말을 천천히 읽어보시고, Gmail에서 처리하는 해당 회사 도메인에 대한 평판을 확인할 수 있는 Postmaster Tools를 이용하면 도메인이 어떤 평판을 가지고 있고, 스팸으로 처리되는 수준이 어느 정도인지 대략적으로 확인할 수 있습니다. 또한 피드백 루프를 이용하는 것도 도움이 될 수 있습니다.

또, 뉴스레터 등을 발행하신다면 Google에서 제공하는 대량 메일 전송 관련 도움말 모음을 참고해 주세요.

본 포스트는 Google Product Experts (제품 전문가) 앰버서더 프로그램의 일환으로 작성된 가이드 게시물입니다.

Google 제품에 대해 문의 사항이 있으신가요?

Google 제품을 사용하는 중에 문제가 발생하셨나요?

언제나 주저 말고 Google 지원 커뮤니티를 이용해 주세요. 커뮤니티는 항상 열려있으며, 대부분의 제품에서 한국어 지원이 가능합니다.

Gmail: https://support.google.com/mail/community?hl=ko

Gmail 커뮤니티

support.google.com

YouTube: https://support.google.com/youtube/community?hl=ko

YouTube 커뮤니티

@TeamYouTube 한국어 질문 지원 시작: YouTube 관련 질문이 있으시다면, 지금 X(구 Twitter)에서 @TeamYouTube를 태그해 질문을 남겨주세요!

support.google.com

혹시, Google 제품에 대해 잘 알고 계시나요?

Google Product Expert 프로그램에 참여하여 다른 사람들을 도와주며 다양한 혜택을 받으실 수 있습니다!

이미지를 클릭하여 더 알아보실 수 있습니다.

[Logic Pro] Dolby Atmos로 믹싱하기

Scian — Thu, 30 Nov 2023 15:51:43 +0900

1. Dolby Atmos 형식 중 헤드폰에서 들을 수 있는 Binaural 포맷으로 설정해야 함.

(먼저 믹스>Dolby Atmos에서 공간음향 켜고 샘플률 48 or 96KHz 설정)

https://support.apple.com/en-bw/105041

Listen to a binaural Logic Pro spatial audio mix on iPhone and other devices - Apple Support (BW)

If you’ve been monitoring your spatial audio mix in a binaural format using headphones, you can bounce the mix to listen to it on other devices and to share it with others.

support.apple.com

2. 메뉴에서 Surround 대신 Binaural Panner 선택

만약 처음에 서라운드고 Binaural이 비활성화 상태이면 3D Object Panner 선택 후 Binaural Panner 선택

3. 작업 후 내보내기: 파일>내보내기>프로젝트를 ADM BWF로.. 선택

위치 선택 후 내보내지면 파일 열어서 Quick Look이나 음악 앱에서 공간 음향 뜨는지 확인

[node.js] NVM을 이용한 node.js 및 기본 세팅

Scian — Thu, 2 Nov 2023 17:32:45 +0900

1. NVM 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

2. 소스 적용

source ~/.bashrc

3. 노드 설치

구름IDE에서 오류 발생시 https://sunnys-note.tistory.com/12 참고

[Node.js] Node.js 설치 후 `GLIBC_2.28' not found (required by node) 에러

1. 에러코드 확인 및 원인 (1) 개발환경 - ubuntu-18.04 (2) 에러발생 원인 - 우분투 18.04 에서 최신 node 버전 (18.0.0이상) 설치 후 npm 명령 실행시 다음과 같은 에러 발생 $ npm install node: /lib/x86_64-linux-gnu/li

sunnys-note.tistory.com

nvm install node  # 최신 버전
nvm install 17 # 17버전 (Goorm IDE ubuntu 18.04 기준)

4. nvm 기본 설정

nvm alias default 17

Goorm IDE MySQL / phpmyadmin 셋업

Scian — Thu, 2 Nov 2023 17:19:42 +0900

1. 컨테이너 생성시 Blank / MySQL / mysql-cli 선택

2. 완료 후 workspace directory에서 https://help.goorm.io/ko/goormide/17.faq/language-and-environment/install-phpmyadmin 나와있는 명령어 입력

// PHP 버전 7.2 기준
apt-get update
apt-get install -y mysql-server
service mysql start
apt-get install -y php7.2-mbstring php7.2-mysqli phpmyadmin
service apache2 restart

3. 아래 명령어 입력해서 관리자 진입 (https://velog.io/@seungsang00/Ubuntu-%EC%9A%B0%EB%B6%84%ED%88%AC%EC%97%90-MySQL-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0) 참고

sudo /usr/bin/mysql -u root -p

4. 아래에서 나오는 계정 정보로 phpmyadmin 로그인

sudo cat /etc/mysql/debian.cnf

Troubleshooting

권한 오류 발생시 다음 참고:

https://oziguyo.tistory.com/36

Access denied for user 'root@'@'localhost' 해결방법

Ubuntu에서 mysql의 root계정 로그인이 안되는 경우 해결방법 ! ubuntu같은 일부 리눅스 시스템에서 mysql을 설치하고 $ mysql -u root -p 으로 로그인 시도를하면 'ERROR 1698 (28000): Access denied for user 'root'@'localh

oziguyo.tistory.com

https://cjh5414.github.io/change-mysql-root-password-mac/

MySQL root password 변경

Jihun's Development Blog

cjh5414.github.io

M2 시리즈 맥북에서 클램쉘 모드 사용하기 (Amphetamine 안될 경우)

Scian — Sun, 30 Jul 2023 23:09:23 +0900

보통 맥북을 덮어놓고 돌리고 싶을 때 Amphetamine을 사용하는데, M2 시리즈 맥북에서 화면 닫았을 때 잠자기를 끄는 옵션이 잠겨있어 클램쉘 모드가 안되는 이슈가 있다.

https://www.reddit.com/r/macapps/comments/wme9bk/amphetamine_not_working_on_m2_macbook_air

From the macapps community on Reddit

Explore this post and more from the macapps community

www.reddit.com

이에 대한 임시방편을 찾아 공유한다.

아래 One Switch 앱을 다운로드받고, Keep Awake에서 시간을 선택하고, 드롭다운에서 'Keep Awake when lid is closed'를 선택한다. 이후, 디스플레이를 잠자기(One Switch의 Display Sleep 등)하면 암페타민에서처럼 적용된다.

https://fireball.studio/oneswitch/

One Switch - Fireball Studio

Keep Awake Prevent your Mac from sleeping or displaying the screen saver.

fireball.studio

PPT 자동 작성 AI - Gamma

Scian — Mon, 10 Jul 2023 00:16:33 +0900

https://gamma.app/signup?r=vs33lt167uaaqx6

Gamma

A new medium for presenting ideas, powered by AI. Beautiful, engaging content with none of the formatting and design work.

gamma.app

한국어로도 잘 되고, 챗GPT로 개요를 작성해 달라고 한 다음 그 개요를 프롬프트로 넣으면 잘 돌아간다.

원래 400크레딧(프레젠테이션 10개 생성)을 주는데 위 링크로 가입하면 15개의 프레젠테이션을 만들 수 있는 600개의 크레딧이 초기에 지급된다.

[대학물리학] 전자기 관련 필수 암기 공식

Scian — Sun, 26 Mar 2023 01:25:07 +0900

전위 관련 공식

하나의 점전하에 의해 생기는 전위

$\large V=\frac{1}{4\pi \epsilon_0}\frac{q}{r}$

여러 점전하에 의해 생기는 전위

$\large V=\frac{1}{4\pi \epsilon_0}\sum_{i=1}^n \frac{q_i}{r_i}$

연속적인 전하 분포

$\large V=\int dV=\frac{1}{4\pi\epsilon_0}\int\frac{dq}{r}$

전기장과 전위

$\large V=-\int \overrightarrow{E}\cdot d\overrightarrow{s}$

$\large E_x=-\frac{dV}{dx}$

면전하밀도와 전하량

$\color{#FF0000} {\large dq=\sigma dA=2\pi\sigma rdr}$

[SSL/TOOL] SSL 오류 예시 확인 사이트 - badssl.com

Scian — Mon, 13 Mar 2023 20:30:07 +0900

간혹 SSL 오류가 나는 사이트에 접속해야 하는 경우가 있다.
(예를 들어 브라우저나 보안 테스트 등) 이럴 때 인증서가 안되는 사이트를 찾기보다는 아래 사이트에서 종류별 오류를 확인해보자.
https://badssl.com

badssl.com

Your Browser: Click to copy

badssl.com

양자역학 (4) - 1차원 상자 속 입자

Scian — Thu, 9 Feb 2023 19:26:52 +0900

Intro

우리는 일반화학에서 다루는 양자역학 중에서 암기해야 할, Point 부분만을 골라 학습할 것이다.

양자역학 자체가 접하기도 어렵고, 이해하기는 더더욱 어렵기 때문에, 특히 시험을 앞둔 과학고/영재학교생이나 대학생은 암기하는 데 중점을 둘 것을 권장한다. 다만, 본 글에서는 수식적 증명의 과정을 비교적 상세히 작성하여 풀이에도 집중할 수 있도록 하였다.

필자 또한 암기에 도움을 받고자 본 글을 작성한다. 본문은 노트 필기와 비슷한 방식으로 작성될 것이며, 문장보다는 수식 또는 이미지 혹은 개요식의 텍스트가 중점적으로 배치될 것이다. 다만, 필요한 경우 문장으로 풀어서 설명할 수 있다.

앞으로 약 3~4개의 포스팅을 통해 양자역학에 대해 배우게 (암기하게) 될 것이다.

준비가 되었다면, 아래로 스크롤을 내리자!

* 이전 편 (슈뢰딩거 파동방정식 편)을 보고 오시는 것을 권장드립니다!

2023.02.09 - [ Study/Chemistry] - 양자역학 (3) - 슈뢰딩거 파동 방정식

양자역학 (3) - 슈뢰딩거 파동 방정식

Intro 우리는 일반화학에서 다루는 양자역학 중에서 암기해야 할, Point 부분만을 골라 학습할 것이다. 양자역학 자체가 접하기도 어렵고, 이해하기는 더더욱 어렵기 때문에, 특히 시험을 앞둔 과

scian.xyz

1차원 상자 속 입자

1차원 상자 속 입자의 전자 발견 확률에 대해 살펴보자.

우선, $\psi(x)$를 이용해 구하면 확률이 음수가 나올 수 있으므로, 그냥 ~~닥치고~~ 제곱하자.

그러면, 전자 발견 확률은 $\psi(x)^2$이 된다.

이제 3가지 조건을 살펴보자.

물리적 조건 ⭐️

아래 적분식 하나를 기억해 두도록 하자.

$\int^{L}_{0}\psi(x)^2dx=1$

경계 조건 ⭐️

$\psi(x)=A\sin kx + B\cos kx$

이 때, x=0이면 $\psi(0)=0$이고, $B=0$이어야 한다.

x=L이면 $\psi(L)=0$이며, $A\neq 0$이어야 한다.

그렇다면, x=L인 상황에서 $\sin kL=0$이어야 하고, 이를 만족시키기 위해서는 $kL=n\pi$여야 한다.

이를 k에 대해 정리하면, $k=\frac{n\pi}{L}$이고, 이를 $\psi(x)$에 대입하면,

$\large \psi(x)=A \sin \frac{n\pi}{L}\cdot x$

수학적 조건

이는 모든 위치에서 $\psi(x)$가 연속임에 대한 것으로, 간혹 수식적 과정이 시험에 나올 수 있으니 유의하자.

$\large \int^L_0 A^2\sin^2\left(\frac{n\pi}{L}x\right)dx$

$\therefore A^2\frac{L}{2}=1$

$A=\sqrt{\frac{2}{L}}$

이 A 값을 $\psi(x)$에 대입하면,

$\large \psi(x)=\sqrt{\frac{2}{L}}\sin \frac{n\pi}{L}x$

위 식을 두 번 미분하면,

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{n^2\pi^2}{L^2}\sqrt{\frac{2}{L}}\sin\frac{n\pi}{L}x$

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{n^2\pi^2}{L^2}\cdot \psi(x)$

양변에 $\large -\frac{h^2}{8\pi^2m}$을 곱하면,

$\large -\frac{h^2}{8\pi^2m}\cdot \frac{d^2\psi(x)}{dx^2} = E\psi(x)$

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{8\pi^2m}{h^2}E\psi(x)$

$\large -\frac{n^2\pi^2}{L^2}\cdot \psi(x)=-\frac{8\pi^2m}{h^2}E\psi(x)$

$\large E=\frac{n^2h^2}{8mL^2}$

Intermission

본 포스팅에서는 1차원 상자 속 입자의 전자 발견 확률에 대해 다뤘다.

다음 포스팅에서는 3차원으로 넘어가 보자.

양자역학 (3) - 슈뢰딩거 파동 방정식

Scian — Thu, 9 Feb 2023 19:05:26 +0900

Intro

우리는 일반화학에서 다루는 양자역학 중에서 암기해야 할, Point 부분만을 골라 학습할 것이다.

앞으로 약 3~4개의 포스팅을 통해 양자역학에 대해 배우게 (암기하게) 될 것이다.

준비가 되었다면, 아래로 스크롤을 내리자!

* 이전 편 (흑체 복사 편)을 보고 오시는 것을 권장드립니다!

2023.02.07 - [ Study/Chemistry] - 양자역학 (2) - 흑체복사, 자외선 파탄

양자역학 (2) - 흑체복사, 자외선 파탄

scian.xyz

특히 이번 편은 밑도 끝도 없이 (?) 제곱을 하는 등 상당히 부자연스럽게 전개되는 과정이 많을 수 있다.

이번 편 만큼은 그냥 과정의 암기 정도를 목적으로 하는 것이 좋을 것으로 보인다.

슈뢰딩거 파동 방정식

슈뢰딩거 파동 방정식. 간지용.

전자가 파동성을 갖는 것에 대한 슈뢰딩거 파동 방정식을 두 번 미분해 보자.

$\large \psi(x)=A\cdot \sin(\frac{2\pi}{\lambda}\cdot x)$

$\large \frac{d\psi(x)}{dx}=\frac{2\pi}{\lambda}A\cos(\frac{2\pi}{\lambda}x)$

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{4\pi^2}{\lambda^2}A\sin(\frac{2\pi}{\lambda}x)=-\frac{4\pi^2}{\lambda^2}\psi(x)$

여기서, $\lambda=\frac{h}{p}$이므로, 이를 대입하면,

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{4\pi^2p^2}{h^2}\psi(x)$

이를 p에 대해 정리하여 $p^2=2m(E-v(x))$에 대입하면,

$\large \frac{d^2\psi(x)}{dx^2}=-\frac{8\pi^2m}{h^2}(E-v(x))\psi(x)$

$\large \left(-\frac{h^2}{8\pi^2m}\frac{d^2\psi(x)}{dx^2}+v(x)\right)\psi(x)=E\psi(x)$

위 식에서 좌변의 괄호친 부분을 H(헤밀토니안 연산자)로 치환하면,

$H\cdot \psi(x)=E\psi(x)$

그냥 이런게 있다...

Intermission

이번 포스팅은 다음 포스팅의 준비 단계라고 볼 수 있다.

다음 포스팅으로 넘어가자..

(슈뢰딩거의 고양이는 안보여줄꺼당)

양자역학 (2) - 흑체복사, 자외선 파탄

Scian — Tue, 7 Feb 2023 23:09:31 +0900

Intro

우리는 일반화학에서 다루는 양자역학 중에서 암기해야 할, Point 부분만을 골라 학습할 것이다.

앞으로 약 5~6개의 포스팅을 통해 양자역학에 대해 배우게 (암기하게) 될 것이다.

준비가 되었다면, 아래로 스크롤을 내리자!

* 이전 편 (보어 모형 편)을 보고 오시는 것을 권장드립니다!

2023.02.07 - [ Study/Chemistry] - 양자역학 (1) - 보어 원자모형 (Bohr Model)

양자역학 (1) - 보어 원자모형 (Bohr Model)

scian.xyz

흑체복사

이번 내용은 실험 결과에 맞춰 만들어진(?) 어느 정도는 끼워 맞춰진 것처럼 보이는 내용이 있어 부자연스러울 수 있으나, 받아들이도록 노력하자. (암기 중점!)

흑체

흑체(blackbody)는 이론상 모든 빛을 흡수하여 검게 보이는 물체를 의미한다.

열평형과 자외선 파탄

흑체는 열평형 상태에 따라 다음과 같이 파장을 처리한다.

열평형 도달 전: 모든 파장의 별을 흡수한다.
열평형 도달 후: 모든 파장을 방출(복사)한다.

레일리-진스 법칙과 자외선 파탄(자외파탄)

위 그림에서 무지개 색으로 칠해진 부분에서 자외선 파탄(자외파탄이라고도 함.)이 일어난다.

위 그림의 'Classical Theory' 부분이 고전적인 이론에서 '레일리-진스 법칙'에 의해 이상적인 흑체의 복사 에너지를 계산할 때의 그래프인데, 짧은 파장대에서 발생하는 오류를 '자외선 파탄'이라고 한다.

흑체에서 방출된 복사선

흑체에서 방출된 복사선은 흑체 온도에 의존하게 된다.

흑체 온도가 높으면 → 더 강한 에너지의 빛 방출
$M=\rho\cdot T^4$ (슈테판-볼츠만 법칙) [$J/m^2\cdot s$: 단위 면적당, 초당 발생하는 에너지 총량]; 여기서는 빛의 세기를 $\rho$로 적음. (시그마로 표현하는 경우가 많기는 함.)
흑체 온도가 높으면 → 더 짧은 파장의 빛 방출
$T\cdot \lambda_{max}=k$ (빈의 변위 법칙)

* 슈테판-볼츠만 법칙과 빈의 변위 법칙은 고등 지구과학 범위이므로 자세한 설명은 생략한다. (필요한 경우 아래 스크랩 및 위키백과 참고 — '더보기' 클릭)

슈테판-볼츠만 법칙: 흑체의 단위 면적당 복사 에너지가 절대 온도의 4제곱에 비례한다는 법칙

슈테판-볼츠만 법칙 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 슈테판-볼츠만 법칙은 흑체의 단위 면적당 복사 에너지가 절대 온도의 4제곱에 비례한다는 법칙이다. 정확한 식은 다음과 같으며, 식에서 j*는 흑체 표면의 단

ko.wikipedia.org

이 때, 흑체 속 진동자(전자기파) 수와 흑체 속에서 방출하는 에너지는 다음과 같다.

레일리-진스 법칙의 식을 미분한 결과와 같으며, 그 자세한 증명 과정에 대해서는 아래 링크된 해외 논문(Deriving the Rayleigh-Jeans Radiation Law)를 참고하도록 하자.

Deriving the Rayleigh-Jeans Radiation Law

The Rayleigh-Jeans Radiation Law was a useful, but not completely successful attempt at establishing the functional form of the spectra of thermal radiation. This formula fits the empirical …

chem.libretexts.org

흑체 속 진동자 수 (dN)

$dN=\frac{8\pi\nu^2}{c^3}d\nu$ (c: 빛의 세기, $\nu$ (누): 진동수)

흑체 속 방출하는 에너지

$\rho=dN\times kT$ ($\rho$: 빛의 세기, $k$: 볼츠만 상수)

여기에 위 식의 dN을 대입하면, $\large \rho = \frac{8\pi\nu^2}{c^3}\cdot kT \cdot d\nu$로, 레일리-진스 법칙 식의 미분 결과가 나오게 된다.

이 식에서 문제점을 찾아보자.

이 식의 문제점은 파장이 짧아지면 $\nu$ 값이 커지고($\nu$는 진동수로, 고등 물리학 때 배웠던 파장과 진동수 사이의 관계를 떠올리면 된다.), 이에 따라 빛의 세기가 무한히 커진다는 문제가 발생한다. 즉, 자외선 파탄을 설명할 수 없는 문제가 발생하는 것이다!

(장파장인 경우에서는 $\nu$값이 작아지고, 빛의 세기가 0에 수렴하게 되어 장파장은 설명이 가능하다.)

이제, 맥스웰-볼츠만 분포를 적용해 이러한 문제를 처리해 보자.

맥스웰-볼츠만 분포의 적용

위에서 구한 $\rho$에 관한 식을 맥스웰-볼츠만 분포와 적절히 섞으면 아래와 같은 식을 도출할 수 있다. (자세한 전개 과정은 넘어가도록 하겠다.)

$\large \rho=\frac{8\pi h\nu^3}{c^3}\left(\frac{1}{e^{h\nu / kt}-1}\right)d\nu$ (본 섹션에서 편의상 '위 식'으로 표현하겠다.)

여기서, 파장이 긴 경우와 짧은 경우를 나누어 살펴보자.

장파장에서의 적용

파장이 긴 경우에는, $\nu$ 값이 작아지게 되고, $h\nu\ll kT$가 된다.

이를 위 식에 적용하게 되면, $e^x\simeq 1+x$로 근사할 수 있게 되어 위 식의 괄호 안이 $\frac{kT}{h\nu}$로 근사된다.

이를 다시 위 식에 대입하면,

$\large \rho= \frac{8\pi h\nu^3}{c^3}\times\frac{kT}{h\nu}\cdot d\nu = \frac{8\pi r^2}{c^3}\cdot kT \cdot d\nu$

즉, '흑체 속 방출하는 에너지' 섹션에서 봤던 레일리-진스 법칙의 미분식을 다시 볼 수 있다! (장파장은 마찬가지로 설명할 수 있음)

그렇다면, 레일리-진스 법칙의 미분식에서의 자외선 파탄 오류를 설명하기 위해 파장이 짧은 경우를 살펴보자.

단파장에서의 적용

단파장에서는 $\nu$ 값이 커지게 된다.

이에, 위 식에서의 괄호 안, 즉 $\left(\frac{1}{e^{h\nu / kt}-1}\right)$이 0에 수렴하게 되고, 이를 위 식에 대입하면

$\rho=0$이 되어, 자외선 파탄을 설명할 수 있게 된다!

Intermission

이 포스팅에서는 흑체 복사와 자외선 파탄에 대해 알아보았고, 자외선 파탄을 설명하는 방법에 대해 소개하였다.

다음 포스팅에서는 슈뢰딩거의 파동 방정식에 대해 살펴보도록 하겠다.

상당히 수식적인 부분이 많으니 마음의 준비(?)가 필요할 것이다.

양자역학 (1) - 보어 원자모형 (Bohr Model)

Scian — Tue, 7 Feb 2023 00:35:35 +0900

Intro

우리는 일반화학에서 다루는 양자역학 중에서 암기해야 할, Point 부분만을 골라 학습할 것이다.

앞으로 약 5~6개의 포스팅을 통해 양자역학에 대해 배우게 (암기하게) 될 것이다.

준비가 되었다면, 아래로 스크롤을 내리자!

보어 원자 모형

원자의 구조를 마치 태양계처럼 양전하를 띤 조그만 원자핵 주위를 전자들이 원형 궤도를 따라 돌고 있는 것으로 묘사하는 원자 모형
— Wikipedia

보어의 가정

보어는 자신의 원자모형에 대해 다음과 같은 가정을 하였다.

전자는 특정 궤도(에너지 준위)에서 원운동하며, 궤도 사이에는 전자 존재하지 않는다.
구심력 = 원심력 (힘의 평형)
원자핵과 전자 사이의 정전기적 인력, 즉 쿨롱의 힘이 작용
$\large Q=\frac{Z\cdot e^2}{4\pi \epsilon_0 \cdot r^2}$
(이 때, $Z$: 원자번호, $e$: 전하량, $\epsilon_0$: 유전율, $r=r_n$; 즉 n번째 껍질의 반지름)

또한, $\large Q= \frac{mv^2}{r}$을 대입하면 다음이 성립한다.

$\large \frac{mv^2}{r}=\frac{Ze^2}{4\pi \epsilon_0 r^2}$
전자가 다른 궤도로 이동할 때, 전자는 에너지를 방출하거나 흡수한다.

여기서 보어의 가정 1번을 설명하려면 두 가지 개념을 이해할 필요가 있다.

드브로이 물질파

쉽게 말하자면, 양자역학에서 말하는 물질의 파장으로, 다음과 같은 식으로 나타낼 수 있다.

$\large \lambda = \frac{h}{p}=\frac{h}{mv}$

원형정류파

허용된 파장이 정수배임을 알 수 있다.

$n\lambda = 2\pi r$

$\large r_n=\frac{n\lambda}{2\pi}$

위에서 설명한 드브로이 물질파와 원형정류파를 이용하면, 특정 궤도에 전자가 구속됨을 알 수 있다.

(다만, 위의 두 내용은 고등 물리학 범위이므로 자세히 언급하지는 않겠다.)

이제, 뤼드베리 공식에 대해 간단히 소개한 후, 수소 원자에서 n번째 껍질의 에너지 준위($E_n$)를 구하는 과정을 정리해 보고자 한다.

뤼드베리 공식

뤼드베리 공식은 입자 물리학에서 대부분의 원소 스펙트럼 계열의 파장을 정확하게 구할 수 있는 공식으로, 1888년 스웨덴의 요하네스 뤼드베리가 발견하였다.
- Wikipedia -

$\large \frac{1}{\lambda}=R\left(\frac{1}{n_1^2}-\frac{1}{n_2^2}\right)$

각운동량

$\large L=m\cdot v\cdot r_n=\frac{h}{\lambda}\cdot \frac{n\lambda}{2\pi}=\frac{nh}{2\pi}$

$\large r_n=\frac{n\cdot h}{2\pi\cdot m\cdot v}$

(이 때, $n$: 주양자수(전자껍질 번호), $h$: 플랑크 상수 ($6.63\times 10^{-34}$ J/s), $m$: 전자 1개 질량, $v$: 전자의 속도)

이를 $v$에 관한 식으로 정리하면,

$\large \color{red} {v=\frac{nh}{2\pi m r_n}}$

$r_n$ 구하기

아까 언급한 보어의 2번 가정 식을 가져와 보자.

$\large \frac{mv^2}{r}=\frac{Ze^2}{4\pi \epsilon_0 r^2}$

여기에 '각운동량' 섹션에서 구한 전자의 속도 $v$를 대입하고, 정리하면 아래와 같은 식을 도출할 수 있다.

$\large r_n=\frac{\epsilon_0 \cdot h^2}{\pi \cdot m \cdot e^2}\cdot\frac{n^2}{Z}$

이 때, $\large \frac{\epsilon_0 \cdot h^2}{\pi \cdot m \cdot e^2}$을 보어반지름 $\bf a_0$로 치환하면 다음과 같이 정리된다.

$\large r_n=a_0\cdot\frac{n^2}{Z}$

여기서 바닥 상태의 수소 원자의 값을 대입한 보어반지름(바닥 상태의 수소 원자의 반지름을 의미함; $a_0$)은 $5.292 \times 10^{−11} m$ (약 0.529 Å, 52.9 pm)이다.

역학적 에너지 보존

$E=E_k+E_p$

위 역학적 에너지 보존 공식에 $\large E_p=-\frac{Ze^2}{4\pi\epsilon_0 r}$, $\large E_k=\frac{1}{2}mv^2$을 대입하면,

$\large E=\frac{1}{2}mv^2-\frac{Ze^2}{4\pi\epsilon_0 r}$

보어의 2번 가정에서

$\large \frac{mv^2}{r}=\frac{Ze^2}{4\pi \epsilon_0 r^2}$ 이므로,

$\large mv^2=\frac{Ze^2}{4\pi \epsilon_0 r}$이다.

이를 위의 역학적 에너지 보존 식에 다시 대입하면,

$\large E=\frac{Ze^2}{8\pi \epsilon_0 \cdot r}-\frac{Ze^2}{4\pi\epsilon_0 r}$

$\large E=-\frac{Ze^2}{8\pi \epsilon_0 \cdot r}$

여기에 '$r_n$ 구하기' 섹션에서 구한 r 값을 대입하면,

$\large E=-\frac{Z^2 e^2}{8\pi \epsilon_0\cdot a_0 \cdot n^2}=-\frac{e^2}{8\pi \epsilon_0 a_0} \cdot \frac{Z^2}{n^2}$

여기서, $-\frac{e^2}{8\pi \epsilon_0 a_0}$를 R로 치환하면, 다음과 같은 식을 도출할 수 있다.

$\large E=R\cdot \frac{Z^2}{n^2}$ ($R=-2.18\times 10^{-18}$J)

이를 이용하면, 뤼드베리 공식을 도출할 수 있다.

$\large \frac{1}{\lambda}=R\left(\frac{1}{n_1^2}-\frac{1}{n_2^2}\right)$

Intermission

이 포스팅을 통해 보어 원자 모형과 가정 뤼드베리 공식, 수소 원자의 에너지 준위 증명 과정에 대해 살펴보았다.

다음 글에서는 흑체 복사에 대해 알아볼 것이다.

[다음 글] 2023.02.07 - [ Study/Chemistry] - 양자역학 (2) - 흑체복사, 자외선 파탄

양자역학 (2) - 흑체복사, 자외선 파탄

scian.xyz

[대학물리학] 평행축 정리

Scian — Sat, 4 Feb 2023 00:31:20 +0900

평행축 정리

질량중심에서의 관성 모멘트를 이용하여 질량중심을 지나는 축과 평행한 다른 축에서의 관성 모멘트를 구할 수 있는 정리이다.

평행축 정리의 증명

위 그림을 참고하면 평행축 정리를 알 수 있으며, 결론적인 식은 아래와 같다.

$\large I=I_{CM}+MD^2$

[대학물리학] 수직축 정리

Scian — Sat, 4 Feb 2023 00:28:51 +0900

사각형 판에서의 관성 모멘트 유도

사각형 판

$I_z=\int r^2dm$

$=\int (x^2+y^2)dm$

$=\int x^2 dm + \int y^2 dm$

$I=I_y+I_x$

$\large \color{red} {=\frac{1}{12}M(a^2+b^2)}$ (수직축 정리)

[대학물리학] 회전 운동 공식, 병진 운동과의 관계

Scian — Sat, 4 Feb 2023 00:23:53 +0900

회전 운동과 병진 운동과의 관계

병진 운동에서 사용되는 운동 공식을 회전 운동에서도 유사하게 적용할 수 있다.

간단하게 생각하면, 병진 운동과 회전 운동은 아래처럼 대응된다고 생각해 볼 수 있으며, 웬만하면 아래를 병진 운동 공식에 적용하면 대충 들어 맞게 된다.

회전 운동	병진 운동
$\omega$ (각속도)	$v$ (속도)
$\alpha$ (각가속도)	$a$ (가속도)
$\tau$ (돌림힘)	$F$ (힘)
$\theta$ (각)	$s$ (변위)
$I$ (관성 모멘트) = $mr^2$	$m$ (질량)

관성 모멘트

$I=mr^2$ (단일 입자의 경우)
$I=\sum_im_ir_i^2$

등가속도 운동 공식

회전 운동	병진 운동
$\omega_f=\omega_i+\alpha t$	$v_f=v_i+at$
$\theta_f=\theta_i+\omega_i t + \frac{1}{2}\alpha t^2$	$x_f=x_i+v_it=\frac{1}{2}at^2$
$\omega_f^2=\omega_i^2+2\alpha (\theta_f-\theta_i)$	$v_f^2=v_i^2+2a(x_f-x_i)$
$\theta_f=\theta_i+\frac{1}{2}(\omega_i+\omega_f)t$	$x_f=x_i+\frac{1}{2}(v_i+v_f)t$

회전 운동 에너지

$KE=\frac{1}{2}mv^2=\frac{1}{2}mr^2\omega^2=\frac{1}{2}I\omega^2$

일-운동에너지 정리

$\tau(\theta_f-\theta_i)=\frac{1}{2}I\omega_f^2-\frac{1}{2}I\omega_i^2$

인스타 미국 계정 만들어서 DM 답장과 슈퍼 공감 사용하기

Scian — Tue, 31 Jan 2023 13:40:08 +0900

이 글에서는 인스타와 페이스북 미국 계정을 만들고, 국내에서 대부분 사용할 수 없는 “크로스앱 통합”을 통해 DM에서 답장, 하트 이외 공감 및 슈퍼 공감(이를 사용하면 화면 전체가 이모티콘으로 가득참), 사라지는 모드를 사용할 수 있는 방법을 소개합니다.

기존에 사용하던 폰은 지역이 한국으로 되어 있고, 이는 임의로 변경하기 어려우므로 가상 기기를 통해 미국 계정을 새로 만들어야 합니다.

간단히 방법을 소개하자면 다음과 같습니다.
1. PC에 안드로이드 에뮬레이터 설치
2. 에뮬레이터에 Instagram, Chrome, VPN 앱 설치
3. VPN을 이용해 IP 위치를 미국으로 우회
4. 에뮬레이터에 위치 가상화 기능이 있다면, 지역을 미국으로 설정, 안드로이드 언어 및 지역 미국으로 설정
5. 에뮬레이터의 Chrome 시크릿 탭에서 FaceBook 계정을 새로 만들기
6. Chrome 시크릿 탭에서 Instagram에 접속하고, FaceBook으로 계정 만들기 기능 이용해 Instagram 계정 생성 (이메일 주소를 하나 준비해야 합니다)
7. 에뮬레이터의 Instagram 앱에서 만든 계정으로 로그인하고, 계정 센터에서 FaceBook 계정 연결 확인
8. 계정 통합 후 Instagram 앱에서 DM 아이콘(비행기 모양)이 아닌 메신저(페메) 아이콘으로 표시되는지 확인
9. 원래 사용하던 기기에 “계정 추가”로 새로 만든 계정 추가하기

필자는 Genymotion이라는 에뮬레이터를 사용했는데,,, 이게 라이선스 땜에 스샷을 올릴 수는 없을 거 같습니다ㅠ
시크릿 탭에서 하지 않으면 왠지 모르게 오류가 나니 주의해 주세요.
참고로, 에뮬레이터 종류에 따라 방법이 다를 수 있습니다!

* Device: MacBook Pro / macOS Ventura / Genymotion Personal / Android 11.0 Version / Virtualbox Installed

질문 있다면 댓글로 달아주세요! (라이선스땜에 친절하지는 못하게 글을 쓰네요 ㅠ)
대략 30분 정도 소요됐던 것 같습니다.. (중간에 오류가 좀 났어서요ㅠ)
인터넷 찾아봐도 안나와서 직접 시행착오로 알아낸 방법입니다!

아래는 미리보기입니다!

[일반화학] 서로 다른 두 온도에서의 속도 상수를 이용한 활성화 에너지 구하기

Scian — Mon, 30 Jan 2023 23:03:50 +0900

$T_1$에서의 속도 상수: $k_1$, $T_2$에서의 속도 상수: $k_2$

$\ln \left(\frac{k_1}{k_2}\right)=\left(\frac{-E_a}{R}\right)\left(\frac{1}{T_1}-\frac{1}{T_2}\right)$

($R=8.314 J/mol\cdot K$, 단위 환산 필요!)

[일반화학] 반응 속도에 영향을 주는 요인

Scian — Mon, 30 Jan 2023 22:57:28 +0900

반응물 종류

이온결합: 속도 증가

공유결합: 속도 감소

온도 (T)

온도가 높을수록 활성화 E가 증가하여 유효 충돌 수 증가, 따라서 속도 증가

온도가 낮을수록 활성화 E가 감소하여 유효 충돌 수 감소, 따라서 속도 감소

압력 (P)

압력이 높을수록(V가 낮을수록) 유효 충돌 수가 증가하여 속도 증가

압력이 낮을수록(V가 높을수록) 유효 충돌 수가 감소하여 속도 감소

촉매

정촉매: 활성화 E 감소, k 증가, 속도 증가

부촉매: 활성화 E 증가, k 감소, 속도 감소

반응물의 농도

반응물의 농도: 높을수록 유효 충돌 수 증가, 속도 증가

반응물의 농도: 낮을수록 유효 충돌 수 감소, 속도 감소

[일반화학] 아레니우스 식과 활성화 에너지

Scian — Mon, 30 Jan 2023 22:52:10 +0900

* 반응 속도: Rate

$Rate=p\times f\times Z\left[A\right]^m\left[B\right]^n=k\left[A\right]^m\left[B\right]^n$

$p\times f\times Z\left[A\right]^m\left[B\right]^n=A\times f\left[A\right]^m\left[B\right]^n$ (pZ=A; 아레니우스 속도 상수)

정리하면, 정말 중요한 아레니우스 식이 나온다.

$k=A\times e^{-\frac{E_a}{RT}}$ (아레니우스 식)

아레니우스 식을 다시 정리하면,

$\ln k=\ln A-\frac{E_a}{RT}$

$\ln k=-\left(\frac{E_a}{R}\right)\left(\frac{1}{T}\right)+\ln A$

이 때, 아레니우스 속도 상수 A는 k와 같은 단위를 가지게 된다.

[수학 I] tan 이용하여 sin, cos 구하기

Scian — Thu, 26 Jan 2023 22:01:57 +0900

tan 값을 알고 있는 경우, $\theta$가 속해있는 사분면에 따라, 올싸탄코 이용하여 부호를 결정하고 그 부호에 다음을 붙이면 sin, cos을 결정할 수 있다.
(단, $\tan\theta=m$)

* 올싸탄코(삼각함수의 각변환)의 경우, 다음 참고.

[수학 I] 삼각함수의 각 변환

삼각함수 각 변환 순서 각을 $\frac{n}{2}\pi \pm \theta$꼴로 나타내기 ($n\in \mathbb{Z}$) $n$이 짝수이면 그대로, 홀수이면 아래처럼 고침. sin → cos cos → sin tan → cot (=$\frac{1}{tan}$) 얼싸탄코(얼싸안코; all-

scian.xyz

$\sin\theta=$(부호)$\frac{m}{\sqrt{1+m^2}}$
$\cos\theta=$(부호)$\frac{1}{\sqrt{1+m^2}}$

ex. $\theta$가 제3사분면에 속해있을 때 (sin<0, cos<0)
$\sin\theta=-\frac{m}{\sqrt{1+m^2}}$
$\cos\theta=-\frac{1}{\sqrt{1+m^2}}$

KEY
탄젠트로 사인 구하기
탄젠트로 코사인 구하기
탄젠트로 싸인
탄젠트로 코싸인
tan sin cos

[수학 I] 부채꼴 공식 (호의 길이, 넓이)

Scian — Thu, 26 Jan 2023 21:39:46 +0900

Symbols & Definitions

$\theta$: 중심각의 크기 (rad)
$r$: 반지름
$l$: 호의 길이
$S$: 넓이

호의 길이 공식

$l=r\theta$

부채꼴의 넓이 공식

$S=\frac{1}{2}r^2\theta=\frac{1}{2}rl$

Wikimedia Commons

[대학물리학] 추진력과 로켓의 추진

Scian — Wed, 25 Jan 2023 00:34:03 +0900

$Mdv=v_edm=-v_edM$

$\int^{v_f}_{v_i}dv=-v_e\int^{M_f}_{M_i}\frac{dM}{M}$

$v_f-v_i=v_e\ln\left(\frac{M_i}{M_f}\right)$

(추진력)=$M\frac{dv}{dt}=\left|v_e\frac{dM}{dt}\right|$

M: 계의 전체 질량, $v_e$: 배기 속력

* 위 식들은 로켓뿐 아니라 물을 발사하는 상황 등 유사한 상황에서도 적용이 가능하다.

[대학물리학] 질량중심 구하기

Scian — Wed, 25 Jan 2023 00:26:27 +0900

크기가 있는 물체의 질량 중심의 위치 벡터 구하기

$\overrightarrow{r}_{CM}=\frac{1}{M}\int \overrightarrow{r}dm$

위 식에서 r벡터를 x에 대한 식으로 나타내면, (아래 예시에서는 r벡터=x로 표현함.)

$\overrightarrow{x}_{CM}=\frac{1}{M}\int \overrightarrow{x}dm=\frac{1}{M}\int^{L}_{0}x\lambda dx$

$\lambda$: 단위 길이당 질량, L: 크기가 있는 물체의 길이

이 때, $M=\int^{L}_{0}dm$을 이용하여 측정 대상 부분의 전체 무게를 구할 수 있다.

물론, $\lambda$가 변하는 경우에도 그 식을 대입하면, 질량 중심을 구할 수 있다.

[수학 I] 삼각함수의 각 변환

Scian — Wed, 18 Jan 2023 00:58:43 +0900

삼각함수 각 변환 순서

각을 $\frac{n}{2}\pi \pm \theta$꼴로 나타내기 ($n\in \mathbb{Z}$)
$n$이 짝수이면 그대로, 홀수이면 아래처럼 고침.
sin → cos
cos → sin
tan → cot (=$\frac{1}{tan}$)
얼싸탄코(얼싸안코; all-sin-tan-cos) 이용해서 각에 해당하는 동경에서 처음 주어진 삼각함수의 부호 판별

올싸탄코/얼싸탄코/얼싸안고.. 아무거나..

위 그림에서 all: sin, tan, cos로 생각해서 각각의 사분면에 해당하는 삼각함수가 +, 나머지는 -부호로 판별함.

[고급 지구과학] PS시와 P파, S파의 속력을 이용한 진앙거리의 계산

Scian — Mon, 16 Jan 2023 17:09:45 +0900

진앙거리 : d
P파의 속력: $v_p$
S파의 속력: $v_s$

$d=\frac{v_p \cdot v_s}{v_p - v_s} \cdot$(PS시)

미적분 공식집 무료 배포

Scian — Sun, 15 Jan 2023 22:31:53 +0900

미적분 공식집 (지수로그함수, 삼각함수의 극한과 미분)을 무료로 배포합니다.
암호는 글 공감 후 (카카오 계정 로그인 후 구독도 부탁드려요! (선택)) support@scian.xyz 로 이메일 주시면 보내드립니다! (거의 당일에 보내드립니다)

PREVIEW

미리보기

미적분 공식집.pdf

0.05MB

[2022.1.17. 수정: lim sin ax/bx 수식 오타 수정]
[2022.1.19. 수정: 비댓 확인 불가로 이메일로 대체]