현재 날짜를 자동으로 가지고 오게 만드는 방법
상대의 년월일시를... 아니 현재의 년월일시를 가지고 옵니다...
웹플로우로 노코드 포트폴리오 웹사이트를 만들고 있는 디자이너 이현아라고 함니다.
여러가지 생각해본 것들을 남의 도움 없이 내 리소스를 팍팍 써서... 구현하고 있는 중입니다. 물론 정석법으로 첫 단계부터 천천히 해치워나가도 되겠지만서도... 저는 애자일 방식의 업무를 선호합니다.. 일단 필요한 구멍부터 막고 보는...(네?)
해결하고자 하는 문제(?):
현재 거취가 좀 불분명한 상황이기는 하나, 일단은 한국에 있다는 것을 알리고 싶은 맴. 그런데 뭔가 한국에 있어요~ 라고 쓰는 건 단순하다고 생각. 지금 현재 내가 바로 여기에 있다는 것을 어떻게 표현하면 좋을까?
해결 방안(?):
아 현재 날짜를 자동으로 불러와지게 하면 되겠구나!?!? 하지만 내 ip가 바뀌면 막 홈페이지에서 자동으로 막 업데이트를 하고... 보는 사람들의 지오로케이션을 이용해서 그 나라에 내가 무조건 있다고 막 허위사실을 막....네 안됩니다. 그냥 현재 날짜를 불러오게 합니다
이 기능이 정말 필요한가:
여기까지는 심각하게 들어가지 않기로 하겠습니다...ㅎ... might delete this later...
일단 결론을 먼저 보여드릴까요? 참고로 '대한민국 서울'은 다이나믹 데이터가 아닙니다 (수기작성^^;)
그리고 코드는 아래와 같습니다 - 갈무리를 할 수가 없네요 엔터가 팍팍 쳐져 있어서
<script>
// on DOM ready
document.addEventListener("DOMContentLoaded", function(){
//set your formatting options
//Version 1 output = "Sat, Dec 25, 2019"
const dateVersion1 = {
year: "numeric",
month:"short",
day:"2-digit"
}
//Version 2 output = "12/25/19"
const dateVersion2 = {
year: "2-digit",
month:"2-digit",
day:"2-digit"
}
// Update the text content of our text elements with the formatted date
document.querySelector('.hack22-date-version1').textContent = new Date().toLocaleDateString('ko-KR', dateVersion1);
document.querySelector('.hack22-date-version2').textContent = new Date().toLocaleDateString('ko-KR', dateVersion2);
});
</script>
위의 코드는 아래의 노션 링크에서 바로 복사, 붙여넣기하시면 됩니다
https://www.notion.so/Webflow-283f14b8f2084ed6b309926b5a4e433e#00e178a1f55840d2867bf28886d34d55
구현 과정:
1) 검색했습니다. 넘 당연..
잡힐 만한 키워드는 다 넣어서 검색합니다바로 상단에 뜹니다. 굳... 웹플로우의 특장점이라 함은, 디자이너가 가지고 있는 지식과 + 약간의 코드를 응용하면 내가 원하는 것들을 꽤 그럴싸하게 구현할 수 있다는 점입니다. 게다가 여러가지 튜토리얼과 질의응답이 쌓이고 넘쳐서 데이터베이스도 아주 충분하고요. 내가 궁금해할만한 것들은 이미 다른 사람들이 다 물어보았고 그렇답니다. 단지 언어의 장벽이 있기는 합니다() 그런데 사실 한국어로 검색하는 게 더 까다로울수도
핀스윗. 웹플로우로 웹사이트를 만들어주는 웹플로우 특화 에이전시인데 너무 유용한 팁이나 툴이 많고, 심지어 자체 익스텐션까지 개발해벌임...
아무튼, 위의 영상을 확인합니다
https://www.finsweet.com/hacks/22/
정말 놀랍도록 자세하게, 충분히 이해할 수 있도록 천천히 설명해 줍니다. 상받으시르..
2) 따라합니다
다이나믹 날짜를 넣을 텍스트를 선택해서 클래스를 입혀 줍니다.
임베드를 드래그해서 끼워 넣습니다
붙여 넣었습니다.
핀스윗에서는 버젼을 두가지를 제공하는데요, 두번째 버젼은 2021-08-19 이런 느낌이라 아래와 같은 첫번째 버젼을 선택했습니다. 저렇게 넣고 그냥 퍼블리쉬하면 우선은 그냥 목표 달성입니다
ㅇ ㅏ..... 그런데 한국어로 웹사이트를 만들고 있는 중인데 (영어판은 따로 만들 예정이긴 하지만요) 영어 포맷이 영 아쉽습니다. 그리고 약간 뭐랄까... 요일 / 월 / 일 / 년도라니... 헷갈리기 딱 좋죠?^^ㅎ...
그래서 음~~ 이거 한국 버젼으로 바꿀 수 있는 게 있을 것 같은데~~ 하고 보니 핀스윗에서 친절하게 관련 글 링크까지 코드에 삽입해 주었습니다
머라노? 필요한 것만 보여들임
ㅇ ㅏ 지금 'en-US' 로 되어있는 부분을 'ko-KR' 로 바꿔주면 되는구나!!!!
코드로 들어가서 필요한 부분을 바꾸었읍니다 (버젼2는 사용하지 않지만 코드 지우기도 귀찮으니 그냥 내비두ㅇ). 퍼블리시를 다시 하고 라이브 사이트를 보니 오옷!!!!!
한국어가 떴ㄷ ㅏ!!!! 좋다!!!!
그런데 저 (목) 이 참 거슬립니다. 왜 (목) 일까요? 목요일이 아니고?^^; 괄호 누가 가져왔ㅇ..
답은 이부분에 있습니다. weekday요일: "short(짧은버젼^^)" 오른쪽과 같이 'long' 으로 수정해 줍니다
다시 세이브 앤 클로즈, 그리고 퍼블리시...
성공!!!!!!미션 성공!!!!!! 그런데.... 목요일이 나온 것까지는 좋은데, 가만 보니 너무 길ㄷ ㅏ....목요일이라는 인포메이션은 구지 필요한가....?
롱 윅데이 굿바이
시원~~~~
위와 같은 과정을 거쳐서 내가 원하는 것을 가졌습니다(...) 문장 사이에 자연스럽게 삽입한 방법은 텍스트에 span 을 걸어서 그 부분에 클래스를 입히고 그 클래스를 타겟으로 한 스크립트를 걸어주어 완성했습니다. 먼소리고 싶으신 분들은 그냥 클래스와 스크립트 안에 들어가는 클래스 이름을 동일하게 맞춰주면 된다는 말이오니 심려치 마시옵소서 별거 아니옵니다.
휴 하지만.... 이렇게 구현하는 건 좋은데... 언제 또 취지가 달라져서 싹 없애고 static 으로 바뀔 지는 모르는 일입니다. 그래도! 내가 원하는 것을 알고, 그것을 스스로 구현해나갈 줄 아는 자세 자체가 중요한 거라고 믿습ㄴ ㅣ ㄷ ㅏ.... 나오늘 치킨 먹어도 될까...
