개발하는 리트리버

우리가 많이 보는 크롬의 url 창이다.

익숙한 naver.com 등 앞에는 항상 추가로 붙는 부분이 있다.

뭐 항상 봐서 그렇게 신경이 쓰이지 않지만

한번 속 썩이는 일이 생겼다.

localhost와 같이 말이다.

간단히 정의만 체크해보쟈

HTTP

hyper text trasfer protocol의 약어로 서버 간에 통신을 위한 규칙이나 프로토 콜을 의미한다.

유저가 브라우저에서 무슨 행동을 하면 브라우저는 

웹 서버에 HTTP요청을 하고, 웹 서버는 또 그에 대한 HTTP 응답을 해요. 데이터를 텍스트로 교환해 주는데

그냥 네트워크 통신이 가능하게 하는 기본 기술이다! 생각하면 편하다

하지만 이 방식은 브라우저에서 전송된 정보를 나쁜 제삼자들이 가로챌 수 있어서 보안성이 떨어진다.

그래서 나온데 HTTPS!!

HTTPS

HTTP에 Secure 가 붙은 단어이다.

이 프로토 콜에서는 보안을 위해서 데이터를 교환하기 전에 인증서를 공유하여

SSL(Secure Sockets Layer) 인증서 암호화 정보도 함께 담아서 보내주죠! 그래서 함부로 제삼자가 볼 수 없는 게 되었다

웹뷰 작업을 하기 위해 개인 로컬 웹뷰를 react-native에 연결할 일이 생겼었다. 

내 로컬에 주소를 연결하는데

https://localhost:3000.......

로 작성해 두었다. 과연 연결이 잘 되었을까?

NOPE.

뭔가 연결이 잘 안 된 건가 싶어서 다른 원인들을 찾았지만

정답은 https 이 녀석이다.

localhost는 https대신에 https를 사용한다.

위 정의에 따라서 https는 인증서가 있어야 하는데,

로컬에서 인증서가 필요로 하지 않는다

그렇기에

http://localhost..로 연결해주어야 하는 것이다.

개발자 모드가 없었다면 어찌 프런트 개발을 했을까

콘솔도 찍어주고, warning , error에 대한 디테일한 부분까지 보여준다.

또한 로컬 스토리지, 쿠키 등의 정보도 표시해준다.

좀 더 맛있게 개발자 모드를 사용 하기 위해 한 가지를 추천한다.

렌더링 탭 진입하기

기본적으로 상단에 요소, 소스, 콘솔 등과 표시 되지 않는다. 따라서 렌더링 탭을 확인하려면 우상단 세로로 된 more(...) 아이콘을 클릭해서 열어야한다. 렌더링 탭의 다른 옵션들도 좋으니 한번 정도 클릭해보는 것을 추천한다.

렌더링탭 / 코어 웹 바이탈

해당 부분에 대해서 약간 살펴보고자 한다. 해당 기능을 체크하면 성능을 표시해주는 상자가 나온다.

저 중에서 Largest Contentful Paint, 줄여서 LCP라고도 하는 이 친구는 로딩 성능을 측정하는 지표이다.  

로드 시작을 기점으로 가장 큰 이미지나 텍스트의 렌더링 시간이다.

2.5s 이내의 값이 나와야 좋은 사용자 경험을 제공하는 페이지라고 할 수 있다. 한번 정도 자기프로그램의 LCP를 확인해보기 바란다.

네이버는 많은 정보를 불러옴에도 불구하고 평균적으로 0.8s 이전의 값들이 나온다.  

개발중인 페이지가 이미지를 많이 불러오고 있기는 한데 8.80s 이라는 말도 안되는 수치가 나와서 당황.. 

해당 부분들에 대해서 수정이 필요함을 절실하게 느낄수있다

개발중인 페이지가 2.5s 이내로

나오는지 체크해보고 넘는다면

리소스를 줄이거나 (이미지 크기 최적화), 스타일 시트의 크기를 줄이는 등의

방법으로 LCP를 줄여보는것을 권한다!! (일단 저부터)

기본적인 스킨 중 하나인 나의 블로그

유독 아래 recent posts 사진 비율 깨지는 게 눈에 보인다.

으윽... 이런 블로그의 첫인상에서 일그러짐이 보이게 나둘수는 없다.

물론 애초에 올릴때 대표사진이나, 첫 사진을 이쁜 비율로 잘라 올릴 수도 있지만.. 너무 귀찮

수정해 보자 조금만 이쁘게..!

1. 스킨 편집 클릭!

블로그 설정하는 사이드 바에서 스킨 편집을 클릭한다!

2. HTML 편집 클릭

3. CSS 클릭!

그러면 css 관련된 코드가 아래 쭈르르르르륵 보인다. 쫄 필요 없다!

4.  min-height: 100% 삭제

 #recent-post ul li img에 있는 내용 수정할 것이다!!!!

그중에 min-hight: 100% 

해당 라인을 지우고 나서 ctrl+S 를 눌러준다. 아예 삭제!!

그러고 나서 왼쪽에 있는 미리 보기 화면을 보면 이렇게 정상적인 비율의 사진이 나온다. 유후~

하지만 아직 뭔가 애매하다. 다 천장에 붙어있다..

5. 사진 정렬 중앙에 맞춰주기!

이번엔

그리고 적용을 누르면 사진이 가운데에 잘 배치된 것을 볼 수 있다. 그리고 [적용]을 클릭하고 블로그 홈으로 돌아오면

쌈뽕 한 내 AK.. 아아

야무지게 배치된 사진들을 볼 수 있다!

생각보다 html css 수정 자유도가 높아서 원하면

커스터마이즈를 조금 더 해볼 수도 있을 것 같다.

일단은 여~까지.

돌고 돌아온 VSCode 업데이트 맛보기

오늘은 v1.87 입니다.

정확히는 오늘 날짜로 Update 1.87.2까지 나왔군요

바로 확인해 보시죠!

제가 재밌어하는, 제 위주의 몇몇 부분만 가지고 왔기에

전체 릴리즈 노트를 보고 싶으신 분들은 아래를 참고해 주세요

https://code.visualstudio.com/updates/v1_87

Multiple Cursors Completion

기존에도 맥북 기준으로 여러 라인을 동시에 타이핑 및 수정할 수 있었어요.

[option] + [command] 누른 상태에서 위아래 방향키를 누르면 해당 라인까지 같이 수정이 가능하죠.

하지만 그렇게 작업 시 자동완성이 메인 라인에만 적용되는 현상이 있었어요.

이제는 패치가 되어서 동시에 가능하답니다! 

Setting in Release Note

릴리즈 노트를 읽다 보면 아하 이런 게 추가되었구나.. 하지만 또 직접 해보기는 귀찮은 게 사실에요.

하지만! 이제 릴리즈 노트에서 바로 새로운 세팅을 설정해 볼 수 있어요.

릴리즈 노트에서 톱니바퀴를 클릭하면 관련 세팅페이지로 바로 넘어갈 수 있어요!

새로운 기능을 이제 편리하고 빠르게 적용시켜 볼 수 있겠죠?

참고로 릴리즈 노트 빠르게 여는 저만의 방법은

맥 기준 [command] + [shift] + [p] 누르고 'release' 치면 최상단에 나온답니다! 

나오면 바로 X 누르던 그 릴리즈 노트, 오늘 한번 열어보는 건 어떨까요 ㅎㅎ

Command duration tracked

실행한 명령어에 한해서 기록을 볼 수 있습니다.

저 라인 가장 왼쪽 파란색 원에 마우스를 hover 하면 해당 명령어에 대해,

언제, 얼마나 걸렸는지에 대한 정보가 보입니다.

Close all Unmodified file

개인적으로 제일 맘에 드는 기능입니다.

작업하다 보면 수정하지 않은 많은 파일들이 탭에 쌓여 있어서 원하는, 작업하는 파일 찾기가 귀찮아집니다.

이때!!! close all unmodified file 명령어를 실행하면 모두 닫을 수 있습니다!!!

실행방식은 위에 릴리즈 노트 여는 것과 같습니다.

맥 기준 [command] + [shift] + [p] 누르고 Close all unmodified editors 명령어를 실행하면

작업하지 않은 탭들이 정리됩니다!!!!!! 멍꿀멍꿀

copilot 관련한 패치가 많은데,

해당 부분은 제가 사용하지 않아서 올릴 수가 없군요..

써봐야 하나...

사용하는 분들은 한 번씩 참고해 봐도 좋을 것 같아요

그럼 오늘도 열코딩!

vscode로 개발하다 보면 간간히 올라오는 업데이트 팝업,

중요 업무중이라면 'Later'

아니라면 'Install Update'를 진행한다. 

한번 껐다 켜지면서 열리는 영어로 가득한 릴리즈 노트, 

조용히 X 누르고 하던 작업으로 돌아간다.

생각보다 자주 있는 업데이트, 과연 무엇을 이렇게 자주 업데이트 시켜주는가?

뭐 자세히 볼필요는 없겠지만~ 신박한 내용들만 입맛에 맞게 정리해보려 한다

내가 쓰는 IDE와 조금만 친해져 보자!

그럼

VSCode Update 시리즈 시작

[2024 2월 업데이트_version 1.86 ]

요약 (업데이트내용들 중 제 입맛대로 골라 담았습니다)

1. 폴더 Sticky Scroll

2. zoom in/out 윈도우별 작동

3. autosave 설정 강화

4. extension별 notification 설정

5. Custom Bar visibility

6. 파일 변경점 한눈에 보기

7. 말로 코드 짜기

8. 파이썬 conda 환경설정

vscode 릴리즈 노트

https://code.visualstudio.com/updates/v1_86

1. 좌측 폴더 Sticky Scroll

스티키 스크롤 기능을 파일 전체 트리에서 사용할 수 있습니다!

가끔 파일이 많은 폴더에서 어지러웠는데.. 좀 편해지겠는걸요?

세팅에서 아래 부분을 통해 키고 끌 수 있어요

workbench.tree.enableStickyScroll

최대 높이의 40퍼센트만 차지하도록 설정되어 있어요! 

또한 최대 개수를 따로 설정해 둘 수 있습니다

workbench.tree.stickyScrollMaxItemCount

2. Zoom In / Zoom Out / Zoom Reset  윈도우 별로 따로 작동

하단바나, 맥 기준 [command + or -] 단축키로 화면을 확대하고 축소할 수 있는 기능이 있었는데요, 

기존에는 하나의 윈도우에서 동작시키면, 모든 윈도우에서 zoom in, zoom out 등의 기능이 활성화되었어요.

작업하는 윈도우에서만 작동하기를 원했는데... 하시는 분들!

이제는 각각의 창에서 따로 동작한답니다~ 

3. Autosave 기능 강화

autosave는 기존에 있던 기능이나, 조금 더 디테일 해졌어요

세팅을 특정 파일별로, 언어별로, 또는 workspace에 있는 파일만 오토세이브가 가능하게끔 설정할 수 있어요! 

4. Extension 별로 보내는 notification 제한하기

사용하는 extension 별 notification을 끄는 기능이 생겼어요!

5. Custom Title Bar Visibility

[기존] 

[windowed]

최상단바가 사라지는 세팅을 추가할 수 있어요! native bar를 좋아하는 맥유저에게 특히 좋을 거라고 하는군요?!

6. 파일 변경 부분 한눈에 보기(Git)

source control 쪽에 보시면 새로운 아이콘 [파일+] 이 추가되었습니다. 해당 버튼을 누르면 

여러 파일의 변경점들을 한눈에 볼 수 있어요! 마치 깃허브에서 MR 올릴 때 보이는 것처럼 말이죠~

커밋하기 전에 한 번에 보기 편하겠죠? 개인적으로 참 마음에 드는 패치인 것 같아요!!!!!

7. 이젠 말로 코드짜볼까~

새로운 extension이 추가되었습니다! copilot과 연동되어 사용할 수 있다고 하는군요!

8. 파이썬 conda 환경 선택 표시

언제나 함께하지만 잘 몰랐던 IDE, 

오늘 한 발짝 가까워진것 같지 않나요?ㅎㅎ 

-끝-

장고에서 값을 받아 리엑트로 작업 중이었는데

받은 값들 중에 0E-8 발견.

 그냥 0으로 생각하면 된다고 한다.

과연 무슨 값인 걸까??

[결론] : 0E-8는 0에 가까운 값. 

해당 값의 정확한 의미는 0을 10의 -8 거듭제곱 한 의미이다. 

그렇다 우리가 고등학교 수학시간에  배운, 바로 그 e이다. 

(대문자로 되어있어서 그런지, 예상치 못한 곳에서 등장해서 그런지 그 e 일 줄이야)

물론 기억이 나지 않으니 가볍게만 살펴본다면,

무리수 e는 x가 0에 가까워질 때....

(1+x)^(1/x)의 값이 일정값에 가까워지고...

극한의 값을 e, 그때 e는....

e=2.718.....

PASS,, 아래 그림으로 가볍게 아~ 만 하고 넘어가자. 굳이 이 부분을 다시 공부할 필요는 없으니,

그래서? 예를 들어 1.23e3이 있다면

1.23을 10의 3승으로 곱한 것과 같다.

다시 돌아와 0E-8을 이에 대입해 보면

0을 10의 -8으로 곱한 것과 같다.

결과론적으로 0에 매~우 근사한 값을 갖는다고 생각하면 된다.

근데 그럼 그냥 0을 보내주면 되지 왜 저런 이상한 값으로 보내주는 걸까?

그건 디비 같은 곳에서 숫자를 처리하는 방식에 기인한다

데이터 베이스나 다른 데이터 소스에서매우 작은 소수를 표현하기 위해

이러한 표기법을 사용한다. 이 과정에서 해당값이 보내진것이다.

이러한 값들은 주로 금융 데이터나 과학 연구 데이터 등에서 나타날 수 있다.

이를 통해서 매우 작은 값을 효율적으로 저장하고 표시할 수 있게 되는 것이다.

프런트에선.. 뭐라고 보여줘야 할라나.. 

끝

전 이 단어를 면접에서 처음 들어보았어요.. "브라우저 렌더링 순서에 대해서 설명해 보세요"

...? sry...

지금 생각해도 아찔하군요

여러분은 그럴 일 없도록..

자 그럼, 웹 브라우저 렌더링 순서에 대해서 살짝 알아볼까요?

브라우저 렌더링이라 함은 Html, CSS 그리고 JS 등의 파일들을 받아와서 읽고 사용자가 보는 화면을 그리는, 일련의 과정을 의미합니다. 

각각의 순서와 정의를 알아보죠.

순서는 아래와 같아요

Parsing ➙ Style ➙ Layout ➙ Paint ➙ Composite

하나씩 훑어보죠!

Parsing

처음 단계는 파싱단계입니다. 단어 뜻 그대로 파싱 한다는 것으로, 받아온 HTML 파일을 파싱 즉 해석하는 단계예요.

이렇게 파싱을 통해서 DOM(Document Object Tree)를 구성해요. 우리가 돔돔 거리는 바로 그 돔 DOM이에요! 

추가로 CSS가 포함되어 있다면 CSSOM (CSS Object Tree)도 함께 구성하죠!

Style

DOM 트리와 CSSOM 트리를 매칭시켜서 Render Tree를 그리는 과정이에요. 참고로 meta 태그나 display: none과 같은 속성은 사용자에게 보이는 요소가 아니죠? 그렇기에 Render Tree에 포함시키지 않아요!

여기서 visibility : hidden 같은 요소는 Render tree에 포함된다는 사실! 왜? 해당 특성은 보이지는 않지만 특정 장소를 차지하고 있는 요소이기 때문에 Render Tree 포함됩니다!

Layout

Render Tree를 화면에 어떻게 배치해야 할지 노드의 정확한 위치와 크기를 계산하는 단계예요.

사용자가 쓰는 모든 화면이 같지 않기 때문이죠. 웹에서 볼 수도 앱에서 볼 수도 있고, 또 각각의 기기 마다도 화면이 다르니까요!

css에 % 나 vh 같이 상대적인 값으로 설정했다면 이 단계에서 픽셀 단위로 변환해요.

후에 화면 크기의 변화, DOM 추가/삭제 등의 행동에 따라서 Layout 이 다시 발생하기도 하는데 이를 Reflow라고 해요! 후에 알아보죠

Paint

layout 단계를 통해서 계산된 값들을 단어 그대로 실제 픽셀에 그리는 단계예요. 렌더 트리의 요소와 텍스트가

픽셀로 그려집니다. 첫 발생하는 Paint를 FMP(First Meaningful Paint)라고 해요. 

2048 x 1536 해상도 기준으로 iPad는  3,145,000개의 픽셀을 가지고 있어요.

이렇게 무수히 많은 픽셀들을 짧은 시간 안에 채우기 위해서 여러 개의 Layer를 만들어고

각각 픽셀을 합치고 계산하는(composite) 하는 단계를 거치죠. 

❗TMI❗ 성능을 높이는데 주요한 역할을 하지만 메모리를 많이 차지하는 편이기에 남용하면 안 된다고 하는군요!

Composite

앞 단계에서 만든 여러 개의 Layer를 하나로 모으는 단계예요.

이 단계에서 Layer 들을 계획된 순서로 합치면서 최종적으로 사용자가 볼 화면을 보여줘요

여기까지가 1차적인 화면 그리기 순서였어요. 하지만 한 번만 그리고 끝나지 않죠? 사용자의 액션이나 화면크기 변화로 인해서

다시 그려야 할 때면 또다시 순서가 시작돼요.

Reflow

페이지의 크기, 폰트 크기등의 Style 변화에 의해서 일어나요. 크기가 달라짐으로 인해 방금 했던 전체 순서를 다시금 그려야 하죠. 

이를 Reflow라고 해요.  전체 순서를 다시 하는 건 성능 면으로 좋지 않겠죠? 인라인 스타일을 사용하지 않는 것이 Reflow를 줄이는 방법 중 하나라고 하니 참고하세요! (하지만 CSS 파일 따로 만들기 귀찮은걸..).

Repaint

반면 레이아웃에 영향을 미치치 않고, 색의 변경이나 visibility 같은 성격이 변경된 경우 이를 Repaint라고 해요.

아마 이런 것들을 React를 처음 사용하고 배울 때 들어봤을 거예요.

layout, repaint, reflow 발생을 최소화하기 위해서 Virtual DOM을 만들어서 연속적 변경을 한 번에 처리하는 것이죠!

❗TMI❗ [크롬 개발자 도구] -> [성능] -> [렌더링]을 보면 페인트와 레이아웃을 시각적으로 확인할 수 있어요.

해당 부분을 체크하고 화면에서 마우스를 움직이고 해 보면 변화되는 곳에 표시가 된답니다

개발자 도구에 생각보다 다양한 도구들이 들이 많아요.

다음엔 이 부분을  파보아도 좋을 것 같군요.

참고 : https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work

#0 목표

오늘의 목표는 계좌번호를 입력시킬 Input 컴포넌트를 제작하는 것! 조건은 아래와 같다

1. 표시방식 (우리 125-123-5123 => 1251235123) 이와같이 숫자만 표시되도록!

2. 모바일 기기로 해당 Input 을 클릭했을 때 숫자로 된 키패드가 나오도록!

3. 계좌번호를 복사해서 붙여넣는 경우!

#1 TMI

숫자를 받아야하는 input 태그에 보통 type="number" 를 지정하고 시작하는 경우가 많다.

하지만 상황에 따라 이 방법은 좋지 못하다 ㅜ

숫자가 아니어도 입력된 값은 순간적으로 보여주기도 하고

위 그림처럼 포커스를 해제했다가 이러가면 숫자가 아닌 값을 계속 입력시킬 수도 있다.

또한 가장 애 먹었던 부분 ( 또한 이 게시물을 남겨나야겠다고 다짐하게 만든) 은

웹에서 복사/붙여넣기, 모바일에서의 클립보드 이용 등으로 값을 한번에 붙여넣을 때이다. 

 type="number" 인 상태에서, 숫자 외의 값이 입력되면  e.target.value 으로 값을 받아올수가 없다. 🥺

#2 구현

구현 방식은 아래와 같다.

MUI의 Textfeild 태그를 사용할 때의 예시이다.

const [number, setNumber] = useState();

<TextField
  label="계좌번호"
  type="text"
  value={number}
  onPaste={handlePaste}
  onChange={handleOnChange}
  inputProps={{ pattern: '[0-9]*', inputMode: 'numeric' }}
/>

const handlePaste = (event) => {
  const pastedText = event.clipboardData.getData('text/plain');
  const filteredValue = pastedText.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
  event.preventDefault();
};

const handleOnChange = (e) => {
  const { value } = e.target;
  const filteredValue = value.replace(/[^0-9]/g, '');
  setNumber(filteredValue);
};

- type

'number' 대신에 'text'를 사용하여 숫자가 아닌 값을 받더라도 e.target.value 값을 받아올 수 있도록 한다.

- onPaste

input 태그의 onPaste 속성을 이용하여 붙여넣기 이벤트를 추가해 준다.

이때 preventDefault()를 사용하여 해당 onPaste 변경 후에 다른 변경은 발생하지 않도록 해준다!

- inputProps

        - inputMode

         이 속성을 'numeric' 으로 설정해 줌으로 모바일 기기에서 숫자 키패드가 올라오도록 할 수 있다! 

참고로 안드로이드 기기에서 단순 '붙여넣기'를 사용하면 onPaste가 작동하지만

클립보드를 활용해서 붙여넣기를 하면 onPaste가 발동하지 않는다!

#코멘트는 언제나 환영입니다!