본문 바로가기

웹 프로그래밍96

[JS] 자바스크립트로 보색 찾기 (Color) 보색 이론 및 알고리즘 보색을 찾는 알고리즘은 컬러 이론에서 쉽게 구할 수 있습니다. 보색은 색상 공간 상에서 주어진 색과 정확히 반대되는 색상을 의미합니다. 다른 말로 보색은 색상 원에서 한 색상에서 정확히 180도 떨어진 위치에 있는 색상입니다. RGB 색상 모델을 기준으로 보색을 구하는 방법은 다음과 같습니다: 주어진 RGB 색상의 각 채널 값을 255에서 뺍니다. (예: R 채널 값이 100이면 보색의 R 채널 값은 255 - 100 = 155입니다.) 위에서 얻은 값을 다시 R, G, B 채널로 사용하여 보색을 얻습니다. 예를 들어, 주어진 RGB 색상이 (100, 150, 200)이라고 가정해봅시다. 이 경우 보색은 다음과 같이 계산할 수 있습니다: R 채널: 255 - 100 = 155 G .. 2023. 7. 29.
포트포워딩 하는 방법, 잘 정리된 블로그 소개 https://kibbomi.tistory.com/219 [Web server] 외부에서 내 웹서버(PC)에 접속하기 (포트포워딩, 방화벽) 최근 VPN 서버를 만들일이 있어서 이것저것 세팅하다가 구글에 제대로 된 정보가 몇 없어서 다른 분들께 도움이 되고자 글을 남깁니다. Apache 웹 서버를 사용했습니다. 공유기 밑에 있는 내 서브 kibbomi.tistory.com 포트 포워딩에 대해 이리저리 헤매고 있다가 발견한 블로그 글. 차근차근 하나씩 설명해주시기 때문에 이해도 잘 되고 따라하기 좋았다. 공유하기 위해 글을 쓴다. 2023. 3. 4.
[PM2] PM2 사용하기 여러개의 node.js 서버를 돌리고, 관리할 때 사용 1. npm i pm2 -g 2. 해당 프로젝트 폴더에 들어가서 서버 실행파일 실행 - pm2 start app.js 3. 서버 자동 재실행이 안되어있어서 죽였다가 다시 실행 - pm2 stop app.js 4. 재실행 - pm2 start app.js --watch 5. 라즈베리파이 실행 시, pm2 자동 시작 - pm2 startup 6. 실행해야 할 command 가 나옴 7. 위 command를 입력하고, 성공 결과가 나오면 설정 저장 - pm2 save 2022. 9. 20.
[Project] 습관 만들기 서비스 (feat.Firebase) 요즘 독서를 하다보니 습관에 관하여 좀 읽게 되었다. 습관을 만들 수 있고, 한번 만들면 유지하기 쉬워 성공에 한걸음 더 가까워진다는 것이다. 그래서 나는 종이로 프린트를 해서 체크할 수 있는 칸을 만들었다. 그런데 생각해보니 나는 웹 개발자고... 이 정도는 만들 수 있다고 생각했다. 그래서 미루고 미루다 5일전에 시작해서 오늘 1차본을 완성했다. dailycheck-18aa9.web.app/ 맨날하란말이야 맨날 하란말이야 버그는 여기에 적어주세요! dailycheck-18aa9.web.app 웹 개발자 3년차이지만, 내가 쓰고싶은 앱을 완성한 것은 처음이다. 그동안은 DB연결 없이 프론트로만 뭔가를 만들고, 내 포트폴리오를 만든 것이 전부였다. 물론 DB연결도 한 것은 있지만, 공부를 위해 따라한 것.. 2020. 11. 14.
Postman에서 JWT 포함해서 보내기 이슈 및 해결 방법 위와 같이 JWT를 같이 보내야 하는데 보내지 않을 경우 Auth 문제가 뜬다. 같이 보내는 방법은 Params가 아닌 Header에 보내야 한다. 사진과 같이 KEY는 'Authorization' 라고 주고, 값은 'Bearer' 라고 쓴 뒤 한칸 띄우고 토큰값을 쓴다. 예로 'Bearer [토큰값]' 'Bearer sdfzxcvnwlrngawgasd.asdfoznxcvoznxcvz.asdfnwoenfsadf' 적용을 하면 원하는 값이 온다. 다른 방법 위 방법은 직접 넣는 방법이고, 편하게 넣을 수 있는 방법이 있다. Authorization 칸에 와서, Type에서 편하게 골라 넣는 것이다. Bearer Token을 선택한 다음, 오른쪽에 바뀌는 화면에 토큰을 넣으면 된다. 이때.. 2020. 10. 20.
JWT Claims 클레임 클레임 이름 설명 iss (issuer) 토큰 발급자. 누가 토큰을 만들었는지 나타내며, 많은 경우 인가 서버의 URL이 이 클레임의 값으로 설정된다. 이 클레임은 단일 문자열값이다. sub (subject) 토큰의 대상, 누구를 위한 토큰인지를 나타내며, 많은 경우 리소스 소유자를 위한 고유한 식별자가 이 클레임의 값으로 설정된다. 대부분의 경우, 이 클레임 값은 토큰 발급자의 범위 내에서만 고유하기만 하면 된다. 이 클레임은 단일 문자열값이다. aud (audience) 토큰 수신자, 누구에게 토큰이 전달되는 것인지를 나타내며, 많은 경우 보호된 리소스의 URL 또는 토큰을 전달받을 수 있는 보호된 리소스들의 URL이 이 클레임의 값으로 설정된다. 이 클레임은 문자열 배열 또는 하나의 값만 설정해야 .. 2020. 10. 19.
Auth0 Token (ID tokens, Access tokens) { "iss": "http://YOUR_DOMAIN/", "sub": "auth0|123456", "aud": "YOUR_CLIENT_ID", "exp": 1311281970, "iat": 1311280970, "name": "Jane Doe", "given_name": "Jane", "family_name": "Doe", "gender": "female", "birthdate": "0000-10-31", "email": "janedoe@example.com", "picture": "http://example.com/janedoe/me.jpg" } auth0.com/docs/tokens Auth0 Docs Get started using Auth0. Implement authentication for a.. 2020. 10. 15.
[CSS, mobile] 모바일 웹에서 시스템 폰트에 따라 웹폰트의 크기가 달라질 때 해결 방법 배경 모바일 웹을 다 만들었다. 그런데 갑자기 오류가 있다고 한다. 그것도 JS등의 로직 오류가 아닌 CSS 오류? 그것도 모든 페이지에서? 알고보니 사용자가 휴대폰 자체의 폰트 크기를 키워서 난 오류였다. 알고보니 전의 회사에서도 있던 문제였는데, 잊어버렸다. 다시 알아봐야한다. 그런데 정말 열심히 찾아봤는데 이에 대한 자료가 없다. 그래서 네이버, 사람인 등을 들어가보며 개발자 도구를 열고, 뭐가 다른지 찾아보았다. font-size를 em으로 썼나.. px로 썼나... 다 다른걸 보니 이 문제는 아니다. 어찌됐든 비교하고 비교해서 결국 찾아냈다. width의 문제였다 하지만 거기서도 width를 %로 주냐.. px로 주냐.. 고민했다. 공통점은 display: block인 아이들이었다. width:.. 2020. 9. 4.
[CSS] keyframes | slide-in, slide-out 만들기 평소에 CSS에는 관심이 많았지만, animation에는 큰 관심이 없었다. 그런데 잘하고는 싶었다. 그래서 이번에 시간이 조금 남은 관계로 해보려고 간단하게 슬라이드로 화면이 들어오고 나가는 것을 구현해보았다. 배경과 modal 창을 가져올것이다. keyframes 세팅 @keyframes bg1_slideIn{ from{ left: -100%; } to{ left: 0%; } } @keyframes bg1_slideOut{ from{ left: 0%; } to{ left: -100%; } } @keyframes filter_box_slideIn{ from{ left: -100%; } to{ left: 50%; } } @keyframes filter_box_slideOut{ from{ left: 50%.. 2020. 8. 21.

티스토리툴바