본문 바로가기

WEB

[SSH 접속 실패] SK브로드밴드 모뎀 이슈 해결 2024. 4. 18. 18:32 최근에 집에 있던 모뎀을 SK브로드밴드 기기로 교체한 이후 PC에서 SSH 접속이 되지 않는 오류가 발생했다. 아무리 여러가지 방법을 시도해도 Timed out while waiting for handshake 에러만 발생하고 해결되지 않았다. 여러 우회 시도를 해본 결과, 모뎀 자체에서 22번 포트 아웃바운드를 막았다 라는 결론이 나왔다. 혹시나 해서 고객센터에 문의해본 결과 실제로 22번 포트 아웃바운드가 제한이 되고 있는게 맞았다. SK 계열의 최신 모뎀들이 21, 22, 80번 등의 포트를 막고 있는 것 같다.. 1. 해결 방법들 크게 해결할 수 있는 방법은 4가지가 있다. 참고로 통신사 피셜 모뎀 설정에서 이를 해결할 수 있는 방법은 없다고 봐야한다. 1.1. 접속하려는 서버 설정에서 22가 아..
[웹개발] 7. CSS 레이아웃 - display 2024. 3. 25. 07:30 시작하기 전에... 한동안 블로그 글을 올리지 않게 되어 웹개발 강의글도 올릴 계획이 없었으나.. 최근 몇몇 분들이 후속 포스트도 기대하셔서 조금씩 시간 날 때마다 올려보려고 합니다. 다만 저번 포스트 이후 2~3년이 지난지라, 트렌드도 바뀌고 저도 성장했기에 이전 글과 흐름이 맞지 않거나 제 주관이 강하게 포함될 수도 있습니다. 하지만 가능한 쉽게 배우실 수 있도록 jsfiddle과 같은, 코드를 직접 체험가능한 형태로 제공하고자 합니다. 감사합니다. 개요 이전 포스트에서는 CSS의 요소 배치 (position)에 대해 알아보았다. 이번 포스트에서는 CSS에서 제일 많이 사용하는 속성 중 하나인 "display"에 대해 알아보자. 더보기 Q) position과 display 둘다 요소 배치하는 속성이라..
[Nodejs] VSCode에서 CommonJS에서 ESM 형식 import로 바꾸기 2024. 2. 25. 07:14 가끔 CommonJS 형식 (require 문)에서 ESM 형식 (import 문)으로 손수 일일이 바꿔야하는데 귀찮을 때가 있다. VSCode나 기타 IDE에서는 ctrl+F(찾기)와 replace(대체/바꾸기)를 지원하는데, Regex(.*)로 찾기를 지원할 경우 다음과 같이 replace하면 한번에 변경할 수 있다. 찾고자 하는 Regex로 다음을, const[\s*](.*)[\s*]=[\s*]require\((.*)\); 바꾸고자 하는 Regex로 다음을 설정하면 왠만하면 다 정상적으로 변환된다. import $1 from $2; 결과
[WEB] 세션, 쿠키, 토큰에 대한 이해 2023. 12. 23. 22:57 0. 시작하며 프론트엔드쪽 일이든 백엔드쪽 일이든 종사하거나 웹개발/웹서버를 개발해본 사람이라면 세션 쿠키나 토큰을 한번쯤 들어봤을 것이다. (사실 들어본게 아니라 알고 있어야 함) 필자는 JWT 토큰을 자주 사용하는데, 이번에 처음으로 쿠키를 써보면서 몰랐던 정보를 많이 알게되며 얻은 내용을 공유하고자 한다. 본 내용에서는 "쿠키"만을 사용하여 인증하는 방식은 서술하지 않는다. 1. 쿠키? 토큰? 그게 뭔데 X덕아 대부분의 서비스들은 유저 정보를 필요로 한다. (이유는 다양하다. 유저 별로 제공되어야할 정보가 구분되어야 하거나 등) 그리고 서비스들은 크게 2개의 레이어로 구분된다 → 클라이언트, 서버 클라이언트는 실제 사용자와 마주보는 화면으로 일반적인 웹 페이지가 해당된다. 반면, 서버 측은 사용자와..
SSL/TLS 인증서 발급 - Let's Encrypt 적용 방법 2023. 7. 7. 08:50 간만에 새 글을 쓰는 것 같다. 오늘은 Let's Encrypt를 통해 SSL 인증서를 사용하는 방법을 알아보자. 개인프로젝트를 개발하다가 HTTPS를 적용해야하는 일이 생기게 되었다. 당연하게도 HTTPS를 적용하려면 SSL 인증서가 필요하고, 여러 브라우저에서 차단되지 않으려면 공인된 CA (Certificate Authority, 인증 기관)에서 인증서를 생성해야한다. 공인된 CA는 여럿 존재하나 오늘은 돈을 들이지 않고 무료로 SSL 인증서를 사용할 수 있는 Let's Encrypt에 대해 기술해보겠다. 과정은 단계별로 설명하겠다. 0. 호스팅 서버 준비 & 도메인 설정 HTTPS를 적용하려면 SSL 인증서를 적용하려는 서버 (ex. AWS EC2 인스턴스 등)이 준비되어있어야 한다. 해당 포스팅..
[웹개발] 6. CSS 요소 배치 - position 2021. 9. 13. 21:32 저번 포스트에서는 CSS의 기본적인 문법과 CSS 파일을 HTML에 적용하는 방법을 배웠다. 이번 포스트에서는 CSS를 통해 HTML의 요소를 배치하고 정렬하는 방법을 배울 것이다. HTML의 요소(태그)들을 배치하는 속성에는 3가지가 있으며, 보통 이들을 조합/혼합하여 사용한다. position - 원하는 위치에 배치하는 방식 float - 특정 요소가 다른 요소의 좌/우에 배치할 수 있게 하는 방식 display - 요소들을 디스플레이 하는 방식 3가지 속성을 혼합하여 사용할 때, 몇몇 속성들은 서로 영향을 줄 수 있다. 이번 포스트에서는 position 속성에 대해서 배운다. position position 속성은 4가지의 값을 가질 수 있는데, 다음과 같다. static (정적) - 요소를 좌->..
Node Sass version 6.X.X 호환 오류 2021. 9. 11. 20:45 React 개발 도중 scss 파일을 사용하게 되어 npm을 통해 node-sass를 설치하고 recompile한 뒤에 다음과 같은 오류가 발생했다. Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0. 이는 react에서 사용하고 있는 sass-loader 버전과 node-sass 버전이 서로 호환되지 않아 발생하는 오류이다. 해결방법 해결방법에는 두 가지 방법이 있는데, node-sass 버전을 낮추거나, sass-loader 버전을 올리는 것이다. 1. node-sass version down ↓ # npm을 사용할 경우 $ npm uninstall node-sass $ npm install node-sass@5.0.0 # yarn을 사용할..
[웹개발] 5. CSS 파헤치기 2021. 9. 1. 23:39 강의 첫 편에서도 말했듯이, CSS는 HTML에서 배치된 요소를 디자인하고 재배치하기 위한 언어이다. 해당 언어를 HTML과 함께 쓰면서 어떤 방식으로 사용하는지 파악해보자. HTML에 CSS 적용하기 이 방법에는 3가지가 있다. Inline stylesheet: HTML내 태그의 style 속성에 CSS 코드를 넣는 방법 Internal stylesheet: HTML 문서 내 style 태그 안에 CSS 코드를 넣는 방법 Linking stylesheet: 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법 1번 방법은 다음과 같다. 대부분의 태그에는 style 속성을 적용할 수 있다. 매우 쉽고 빠른 방법이고 CSS 파일을 따로 만들 필요가 없어 간편하지만 별로 추천하지 않는 방식이다. 페이지..

티스토리툴바