방명록

안녕하세요, 처음 뵙겠습니다.

기본적으로 비상업적 사용을 원칙으로 하고는 있습니다만...해당 글에 작성된 스크립트는 별다를 것 없이 기본적인 jQuery, DOM api 사용이라 그냥 사용하셔도 무방할듯 합니다.

여담으로, Twitter를 삽입하려고 하시는 거면, 해당 작업은 Twitter의 느슨한 CORS 정책 때문에 가능했던 거라, 지금도 가능할지 잘 모르겠네요...

제보 감사합니다!

해당 이슈 확인하고 API단에서 URL을 검증하도록 해뒀는데, DB 업데이트를 깜빡했네요.

조만간 클라이언트에서 업데이트도 진행해두겠습니다. 감사합니다~

최근에 IP가 바뀌었는데, 해당 도메인엔 업데이트를 하지 않아 DNS 조회에 실패하고 있었네요.

덕분에 수정해뒀습니다! 감사합니다~

안녕하세요~ 언제나 열려있으니 편하실 때 오시면 됩니다!

먼저 칭찬 감사합니다.

보신 그대로 별도 수익은 발생하지 않고 있습니다만, 코딩하고 글 쓰는 게 취미생활이라 꾸준한 원동력이 되지 않나 싶습니다.

꾸준히 지출이 발생하긴 하지만, 그 이상으로 즐겁기도 하고, 액수 자체도 그렇게 크진 않아서요. 😊

반갑습니다! 기억에 남을 만큼 도움되었다니 좋네요.

워드프레스에서 티스토리로 옮겨가시는 중이신가 보네요.

중립이 님도 행복한 일 가득하시길 바랍니다!

반갑습니다~

아마 앱 제목에 한글이 있어서 그런가 싶기도 한데...정확한 원인은 모르겠네요.

저도 한 번 찾아보겠습니다.

도메인을 변경했는데 결제 관련 심사가 반려되어 재요청 중입니다.

일주일 내로 결과가 나올 것 같습니다. 죄송합니다.

저랑 버전이 같으신데 저한테선 재현이 안 되는군요...😅

다시 한 번 해결할 방법이 있는지 찾아보겠습니다.

이거 이쯤 되면 지워야 하나 싶기도 하네요. 😥

시간과 공이 꽤 많이 드는 작업인데, 덕심으로만 운영하다 시간과 덕심에 이슈가 생기는 탓에 잠깐 쉬고 있습니다...

확인 감사합니다! 이제 프로필 링크가 작동하지 않나 보네요. 😢

ID를 클립보드에 추가하는 방식으로 업데이트해두겠습니다.

감사합니다 😎

제 Firefox에선 문제가 재현되지 않아, 최대한 문제가 안 생기게 기도하며 조치만 취해뒀습니다.

혹시 여전히 문제가 발생하면 말씀해주세요. 😥

확인 감사합니다 😁

whale을 설치해봤으나 같은 문제가 발생하진 않았습니다만, 문제가 발생할 여지를 최대한 없애 다시 디자인해뒀습니다.

혹시 아직 같은 문제가 발생하는 중이면 말씀해주세요!

안 그래도 항상 모바일 웨일을 사용하시기에 모바일 웨일로 확인했었습니다.

저도 웨일은 처음 써봤는데, 크로뮴 기반으로 제작했다길래 안심하고 있었더니 렌더링이 아주 자유분방하더라고요. 말씀하신 것도 렌더링 엔진이 문제인 것 같은데, 디버깅을 어떻게 해야 할지도 막막하고 여러모로 어떻게 고쳐 나가야 할지 감이 잘 안 잡히네요...😭

간혹 화면 확대 / PC 버전 보기 등으로 뷰포트가 수정되면 위 문제가 재현된다는 걸 인지는 하고 있었으나, 흔히 있는 상황도 아니고 수정이 좀 힘들어 보여 내버려두고 있었습니다.

다시 한 번 도전은 해보겠지만, 해결할 수 있을 거란 확신은 없네요. 😥

확인해주셔서 감사합니다!

어쩌다 저런 처참한 오류가 발생했었는진 모르겠지만, 재발하진 않으면 좋겠네요. 😂

Adobe Illustrator를 이용해 제작합니다.

어떻게...라는 질문엔 정확히 어떻게 답을 해야 할지 모르겠네요. 그냥 만들고자 하는 모양을 생각하고 펜 툴 등을 이용해 제작합니다. 😅

로고가 너무 여기저기 많으니 별로기도 하고, 얼굴까지는 그렇게 보호가 필요한 개인정보는 아닌 것 같아 그냥 제 사진으로 해뒀습니다. 😁

저는 직접 구현하였고, 혹 직접 구현하실 생각이라면 IntersectionObserver를 이용하시면 쉽게 제작하실 수 있습니다. 아니면 https://www.npmjs.com/package/lazyload 같은 라이브러리도 많습니다.

전 본문의 이미지들엔 로더가 들어간 svg 이미지를, 본문 외 영역의 이미지들엔 단색 svg를 사용했고, medium 같은 사이트들은 원본 이미지를 10px * 10px 정도로 줄여서 표시하기도 하더라고요.

모쪼록 잘 완성하시길 바랍니다!

https://icomoon.io/app/

위 사이트에서 제작했습니다.

방명록 저 아래에 있는 내용이라 못 찾으셨지 않을까 싶네요. 😂

[##_article_rep_simple_date_##] 등의 치환자를 활용하시면 글의 작성일을 표시할 수 있습니다.

티스토리에선 발행일 수정도 힘들고, 글마다 특정 정보를 넣는 것도 힘들기에 원하시는 날짜를 표시하긴 힘들 수 있습니다.

스킨 수정 관련된 것은

marshall@kakao.com

https://open.kakao.com/me/marshall

등으로 자세한 사항 말씀해주시면 답변해 드리겠습니다. 감사합니다.

table-layout이 아닌 width를 조정하셔야 할 겁니다.

table의 너비를 제한하거나 셀의 너비를 제한해보시길 권합니다.

명확히 아는 것이 없어 답변이 힘드네요.

어디에서 어떤 식으로 문제가 발생하는지 정확하게 말씀해주시지 않으면 저도 문제를 파악하기 힘듭니다. 😥

문제가 발생한 브라우저를 알 수 있을까요?

제가 사용하는 브라우저들에선 버그를 재현할 수 없네요...😓

웨일을 설치해봐도 버그가 재현되진 않네요...😅

최신 버전을 이용 중이신지 확인해주시면 감사하겠습니다.

애초에 높이를 100vh으로 잡아뒀기에 말씀하신 것처럼 브라우저의 렌더링 오류가 아닐까 싶습니다.

맞춤법 검사 기능은 사용자가 설정에서 직접 켜고 끌 수 있는 거라 제가 억지로 끄는 게 맞을지 확신이 서질 않네요.

고려해보겠습니다!

아이콘 폰트 제작은 https://icomoon.io/app/ 이 웹앱에서 진행합니다.

가끔 위 웹앱에 없는 아이콘(예. 카카오톡, 티스토리)같은 아이콘은 Adobe Illustrator에서 직접 제작합니다.

넵, 맥에선 Command와 Caps Lock을, 윈도우에선 Control과 Caps Lock을 바꿔서 사용 중입니다.

컨트롤 키를 누르는 것보다 Caps Lock을 누르는 게 훨씬 손이 편해서 그렇게 사용 중이고, 나머지는 대부분 vim에서 쓰는 방식을 가져온 겁니다.

별도로 두 개를 동기화해주는 걸 제작하시지 않으면 아무래도 하드 코딩뿐이지 않나 싶습니다.

저도 하드 코딩 해둔 게 많은데, 가끔 자질구레한 변화를 깜빡하고 넘어갈 때가 많아 시한폭탄 두르고 사는 느낌이네요.

프론트에 사용하시는 기술 스택과 서버에서 렌더링할 범위를 말씀해주셔야 짐작이라도 해볼 수 있을 것 같네요. 😢

저는 한 번도 그런 문제가 발생하질 않았는데, ifconfig에서 ip가 안 잡히는 건가요 아니면 ip link로 확인했을 때 장치 자체가 안 뜨는 건가요?

글의 작성일이 표시되는 겁니다!

삭제 원하시는 댓글 있으면 댓글, 방명록 포함 아무거나 편하신 방법으로 연락해 주시면 내용 삭제해 드립니다.

제대로 확인해보니 JS에선 작성일과 관계없이 2020년으로 표기하게 해뒀네요.

수정했습니다. 감사합니다!

감사합니다~! 🥳

sswim 님도 즐거운 연휴 되세요!

안 좋다고 하셨던 상태도 하루빨리 좋아지시길 바랍니다.

전 아마 별다른 일 없는 따분한 연휴가 되지 싶네요.

PWA 조건 중 하나가 '오프라인일 때 인덱스 페이지가 200으로 응답할 것'이라, 주소창에 설치 아이콘 뜨는 사이트는 모두 개발자 도구에서 오프라인으로 변경하고 새로고침 해보시면 공룡 대신 저런 오프라인용 페이지가 뜰 겁니다. 😁

꽤 오래 아무 활동이 없으시길래 무슨 일이라도 나셨나 했네요.

이젠 괜찮아지신 건가요?

2021년 시작부터 고생 많으셨습니다.

앞으론 좋은 일 가득하시길 바랍니다! 😁

글 요약이 나오는 부분 제일 아래에 한 줄 높이의 투명에서 배경색으로 가는 그래디언트가 있는 요소를 추가해 만들었습니다.

그래디언트로 덮는다 생각하고 작업하시면 수월하게 만드실 수 있지 않을까 싶네요.

console.log("%cText", "color:red");처럼 %c를 사용하시면 console log에 스타일을 적용하실 수 있습니다.

setTimeout(console.log.bind(console, "%cText", "color:red"),0); 이렇게 로그를 찍으시면 console.log를 호출한 파일이 표시되는 걸 숨기실 수 있습니다.

jQuery를 추가하지 않으셔서 생기는 문제일 겁니다.

2021년에 쓸만한 라이브러리는 절대 아니니, 아래 코드 참고하셔서 바닐라 JS로 짜보시는 걸 추천합니다.

document.querySelectorAll(".hov-anim").forEach((element) => {
    element.addEventListener("mouseenter", () => {
        element.src = element.dataset.animated;
    });
    element.addEventListener("mouseleave", () => {
        element.src = element.dataset.static;
    });
});

그리고 이건 그냥 오지랖인데, vscode에 Live Server 같은 익스텐션 설치하셔서 로컬에서 작업하시는 게 repl.it에서 작업하시는 것보다 훨씬 수월할 겁니다!

저는 HandleLidSwitch를 ignore로 변경하니 아무 문제가 없었는데, 혹시 Settings > Power > Automatic Suspend가 켜져 있거나 하진 않나요?

우분투가 자동으로 절전 모드로 들어가는 게 아닌지 의심되네요.

디스코드 봇 돌리는 용으로 쓰는 서버가 업타임 275일 찍었는데, Cog님 서버도 빨리 구르길 바랍니다. 😁

전 개인적으로 댓글 db는 무조건 제 댓글을 쓰고 싶어서 수많은 CMS를 걸렀는데, 아무래도 저랑은 추구하시는 방향이 다른 것 같네요. 댓글은 워드프레스가 제공하는 것을 사용하고, 백엔드에선 JSON 응답 정도만 손보고 프론트에선 POST 요청 보내는 것 등만 손봤습니다.

보안은 사용자가 할 수 있는 걸 제한하고, 워드프레스와 PHP 등을 최신 버전으로 유지하면 어느 정도 해결되지 않을까 싶네요.

아무래도 disqus나 facebook은 디자인부터 로딩 속도 등 마음에 안 드는 부분이 많아 보이더라고요. 개인적으론 utterances가 제일 깔끔해 보이던데, Github 계정이 필요해서 개발 블로그가 아니면 이것도 좀 별로라...

전 워드프레스를 떠나지 않는다면 쭉 워드프레스가 제공하는 댓글을 쓸 것 같고, 반드시 db를 분리해야겠다 싶으면 그냥 따로 만들어서 쓸 것 같네요.

넵, 조만간 다뤄보겠습니다!

트위터가 조금 독특하게 잘 되는 편인데, 원래 iframe의 수정은 주소가 같을 때만 가능합니다.

marshall-ku.com에서 수정되는 iframe은 marshall-ku.com의 iframe 뿐이란 뜻입니다.

저는 대부분 뭔갈 만들면서 공부를 해왔습니다. 문서는 보통 공식 문서를 많이 참조합니다.

수학 공부처럼 개념만 쌓으면 재미도 없고 피부에 와 닿지도 않더라고요. 깊이가 한도 끝도 없기도 하고요.

전 HTML, CSS를 끝내고, Javascript 공부를 시작했습니다. 그 뒤 Node.js로 백엔드 구성도 해보고, PHP, Ubuntu를 통한 서버 구성 등을 공부해 현재 홈서버에 블로그를 돌리고 있습니다. 현재는 Javascript 대신 Typescript를 사용하고, C 계열의 언어를 공부 중이고요.

중간중간 새로운 언어나, 프레임워크 혹은 라이브러리를 배울 땐 거의 반드시 그를 이용한 간단한 앱이라도 제작하고 넘어갔습니다.

저도 막 체계적으로 공부한 편이 아니라, 도움이 될지 모르겠네요.

건의 감사합니다. 😁 디자인은 조만간 업데이트해보겠습니다!

감사합니다.

상황에 따라 다르지만, 보통 어느 정도 분기점을 두고 미디어 쿼리를 사용하거나, flex box 등을 이용해 디바이스의 크기에 맞게 알아서 레이아웃이 맞춰지게 하기도 합니다.

모바일 중심으로 시작해 min-width로 태블릿과 데스크탑에 대응하기도 하고, 역으로 만들기도 합니다.

만들고자 하는 상황마다 많이 달라 어떤 게 정답이라고 선뜻 말씀드리기 어렵네요.

어떤 브라우저를 사용하시는지 모르겠지만, 웹사이트를 홈 화면에 추가하시면 PWA가 설치됩니다.

크롬은 우측상단의 메뉴를 누르면 나오고, 사파리는 공유 아이콘을 누르시면 나옵니다.

주소창 우측 상단의 메뉴 버튼을 클릭하시면 홈 화면에 추가 버튼이 있습니다.

안녕하세요. 먼저 칭찬 감사합니다. 😁

결국 wasm처럼 탈 자바스크립트를 하는 게 아니고서야 결국 자바스크립트니 쳐다만 봐도 헛구역질 나는 돔 업데이트용 코드 짜고 나니 크게 어렵지 않게 SPA를 제작할 수 있더라고요.

주소를 업데이트하는 건 history.pushState를, 사용자가 뒤로 가기 등을 클릭해 주소가 업데이트되는 걸 제어하는 건 popstate를 검색해보시면 원하시는 결과를 찾으실 수 있을 겁니다.

SPA 구현 응원합니다!

React로 만든 페이지와 비교해보는데, React로 만든 앱은 정적 파일을 받아와서 렌더링하고, 제 블로그는 동적으로 만든 파일을 받아와 렌더링하는데, 성능이 근소하게 제 블로그가 앞서더라고요. 물론 코드를 짜는 건 말도 안 되게 제 블로그가 느렸고요.

프레임워크의 필요성보단 뭐가 빨리 동작해야 하는가에 따라 기술을 선택하면 되겠단 생각이 들더라고요.

개발자가 빨리 동작해야 한다 => 프레임워크 / 라이브러리

페이지가 빨리 동작해야 한다 => 바닐라

근데 사실 바닐라로 다 짜는 거 좀 버겁긴 합니다...😥

sswim 님도 행복한 추석 보내세요!!

큰 힘이 되셨다니 기쁘네요. 저도 공부용으로 만든 블로그라 양질의 글을 많이 작성하지 못해 죄송합니다. 😥

궁금하신 것 있으면 질문 남겨주시면 도와 드릴 수 있게 노력해보겠습니다.

블로그 완성 축하합니다!!

앞으로 즐거운 블로깅 되시길 바랍니다. 😁

스킨 판매 글에 있는 계좌는 여전히 유효합니다. 마음 써주셔서 감사합니다.

반가운 소식이네요.

물론 인용하셔도 됩니다.

좋은 하루 되세요!

홈 서버에 워드프레스를 이용해 제작한 사이트입니다.

테마는 직접 만든 겁니다. 제작하시려면 php, html, css, javascript에 대한 지식이 필요합니다.

서버엔 nginx를 이용했습니다.

반갑습니다.

도움이 되었다니 기쁘네요. 좋게 봐주셔서 감사합니다. 😁

언급이야 당연히 해주시면 감사한 일이죠.

블로그 제작 힘내시길!

https://marshallku.com/web/tips/티스토리-모바일-페이지-완벽히-비활성화하기

관련 글을 작성해뒀으니 참고해봐 주세요.

https://marshall-ku.tistory.com/m/315

여전히 잘 작동 중인데...리다이렉트가 안 된단 말씀이신가요?

"블로그주소/m/37"로 접속해보니 정상적으로 "블로그주소/37"로 리다이렉트 되는 중이네요.

넵 거긴 수정이 불가능합니다.

const $linkPost = $(".link_post");

setInterval(function() {

  $linkPost.each(function() {

    $(this).toggleClass("hi")

  })

}, 1000)

일단 위 코드로 테스트해보니 문제없이 작동했습니다. 혹 중간에 실수하신 건 없었나요?

여담으로, 굳이 setInterval로 스크립트 계속 실행하시는 것보다는,

document에 "DOMNodeInserted", "DOMNodeRemoved" 이 이벤트 리스너 두 개 추가하시면 DOM에 요소가 추가되거나 삭제되면 스크립트가 실행됩니다.

콜 스택이 너무 많이 쌓이는 것에 대비해

let modifying = 0

처럼 글로벌 변수를 하나 추가하시고

modifying || (

modyfing = 1,

doSomething(),

modyfing = 0

)

이렇게 modyfing이 0일 때만 실행되도록 하시면 콜 스택이 터져나가는 것도 방지하실 수 있습니다.

먼저 감사합니다.

주문 제작은 규모에 따라 많이 다릅니다만, 티스토리 스킨은 보통 5만 원쯤 합니다.

주문 제작한 스킨은 재판매하지 않는 게 도의적으로 맞는 것 같으나, 요청하시면 원 주문자분께 질문은 해드릴 수는 있습니다.

자세한 사항은 페이지 우측 상단을 클릭하시면 메일, 카카오톡 등이 나오니 연락해주시면 답변드리겠습니다.

jQuery로 소스를 짜셨나 보네요.

소스가 없어 제대로 확인은 어렵지만, each 없이 어떻게 각각 날짜를 구하신 건지 모르겠네요...jQuery를 마지막으로 건드린 것도 좀 오래돼서 가물가물하고요...ㅠㅠ

$(".date").each로 작업하시고 $(this)를 호출하시면 .date가 호출됩니다. 변수에 $(this)를 담아두고 작업하시는 걸 추천합니다.

시간 차이를 계산하시고 그걸 .date의 텍스트에 적용하시기 전에 title을 설정해주시면 별문제 없이 적용될 겁니다.

참고로 댓글 작성자가 아니라면 rep_date 치환자에 신고 버튼도 포함되니 신고 버튼은 밖으로 빼내시고 작업하시는 것도 잊으시면 안 됩니다!

기회가 되면 제가 다음에 한 번 관련 내용을 다뤄보겠습니다.

new Date()로 현재 시각을 구하시고, new Date() 안에 날짜를 넣어서 두 값의 차이를 구하시면 됩니다.

ms 단위로 결과가 나오니 60000 곱하시면 분 단위로 바뀝니다.

몇 분 이상이면 다시 60 곱해서 시간 단위로 바꾸고, 다시 몇 시간 이상이면 24 곱해서 일 단위로 바꾸고...

뭐 이런 식으로 진행해나가시면 됩니다.

그럴 땐 로딩 중이라는 걸 표시할 수 있는 간단한 이미지를 추가하시는 것도 한 방법이지 싶습니다.

https://marshall-storage.tistory.com/attachment/cfile25.uf@99D044385DAE6A4914A133.svg

전 텅 빈 이미지 대신 위 svg를 넣어두고 이미지가 로딩 중임을 표시합니다.

댓글은 30분 안에만 수정 / 삭제가 가능하도록 해둬서, 그 이상 시간이 지나면 저만 수정 / 삭제가 가능합니다 ㅠㅠ

댓글이야 그냥 마음대로 다시라고 열어두는 건데 굳이 죄송해하지 않으셔도 됩니다.

자바스크립트에 대한 지식이 아예 없으신 거라면 아무래도 힘들지 않을까...싶네요 ㅠㅠ

https://infinite-scroll.com/

제가 자바스크립트 잘 모르던 시절에 쓰던 플러그인입니다.

아마 설명만 읽으시면 큰 무리 없이 적용은 가능할 거에요.

자바스크립트에 대한 이해 없이 Infinite scroll 적용하는 건 이 방법밖에 없지 싶습니다. 😥

bind해두신 이벤트를 unbind하시면 됩니다.

넵 받고 있습니다.

https://open.kakao.com/o/sBfhWJeb 로 연락해주시면 자세하게 말씀드리도록 하겠습니다.

혹 카카오톡을 사용하지 않으시면 marshall@kakao.com 로 연락해주세요.

만들고 성능이나 검색엔진 최적화 문제로 사용 자체를 하지 않던 스크립트라, 저도 잊고 살았네요...;;

좀 뻔한 말이지만, 어지간하면 이미지는 직접 등록하시는 게 여러모로 블로그에 이롭습니다.

강좌글은 나중에 한 번 고려해보겠습니다. 감사합니다.

틈나면 티스토리 스킨도 계속 제작해볼 생각입니다.

감사합니다 ㅎㅎ

1등 축하합니다!!

감사해요 ㅎㅎㅎ

https://marshall-ku.tistory.com/151

참고해주세요.