혜르미온느

[!이시중] 2021년 6월 22일 21:16에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/36 에서 확인할 수 있음. firebase로 timestamp를 찍으면 object안에 secondes라는 변수로 초가 찍혀서 온다. 인터넷을 다 찾고 계산했는데 정확한 값이 나오지 않았다. 그러다가 찾아낸 firebase document !!!! https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp Timestamp | JavaScript SDK | Firebase Reference for Timestamp firebase.google.com 도큐멘트 확인을 생활화화자~!

[!이시중] 2021년 10월 19일 23:02에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/37 에서 확인할 수 있음. 근래 프리마커 (freemarker)라는 단어를 많이 들었다. 말하기 부끄럽지만.. 사실 처음 들은 단어. 다행스럽게도 같이 들은 많은 분들도 처음 들었다고 하였다. 앞으로도 자주 들을 것 같아 대략적인 개념은 알아봐야겠다고 생각했다. 프리마커의 정의 FreeMarker is a free Java-based template engine, originally focusing on dynamic web page generation with MVC software architecture. Wikipedia 위키피디아 정의 기준 프리마커는 자바를 기본으로 하고..

JS 공부를 하면서 혼자 네이버 쇼핑 따라 하기를 진행하던 중 슬라이더 구현에서 멈칫하게 되었다. 네이버처럼 자연스러운 기능을 구현하려 하니 코드가 점점 꼬이는 기분이 들어서이다. https://hyermione.tistory.com/category/Challenge/%EB%84%A4%EC%9D%B4%EB%B2%84%EC%87%BC%ED%95%91 'Challenge/네이버쇼핑' 카테고리의 글 목록 해르미온느같은 혜르미온느 hyermione.tistory.com 여러 슬라이더 관련 오픈 소스를 참고하려고 알아보던 중, 네이버에서 직접 사용하고 관리하는 Flicking에 대하여 발견하게 되었다..! 두둥 호기심이 생겨 간단하게 정리한 바를 포스팅으로 남겨본다-! Flicking 내가 이해한 바가 맞다면, ..

B.F.F란 Best Friend Forever 이라는 뜻의 약어인데, 개발계에서 영원히 함께 할 수밖에 없는 짝꿍을 뽑으라면 Backend와 Frontend가 아닐까 싶다. 개발에서의 BFF란 Backend For Frontend라는 뜻으로 해석 그대로 프론트엔드를 위한 백엔드를 의미한다. 나름대로 자료를 많이 읽어보았지만 읽으면 읽을수록 광범위하고 섬세한 범위를 포함하고 있어 다 풀기에는 아직 더 많은 공부가 필요할 듯싶다. 이번 포스팅은 많은 자료를 기반으로 이해해 본 BFF의 개념을 소개해보고자 한다. 10년 전 즈음, 모바일이 활성화 되기 이전에는 거의 모든 개발 플랫폼은 웹에 한정되어있었다. 당시에는 하나의 백엔드를 통하여 하나의 플랫폼이 1:1 매칭 되어 서비스해도 전혀 무리가 되는 시절이 ..

먼저 나는 CRA(create-react-app)를 통하여 react 기반의 프로젝트를 세팅해두었다. 하단의 코드를 이용하여 스토리 북을 설치해준다. npx sb init 잘 설치되었는지 확인하려면 package.json에 storybook이 들어왔나 확인하거나 폴더 구조에서 storybook 폴더의 생성을 확인하는 것도 간단한 방법이다. .storybook 폴더 하위에는 main.js와 preview.js라는 두 파일이 생성되어있는데, main.js는 스토리북 config 설정들을 하는 스트립트 파일이며, preview.js는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다. 각설하고, 스토리북 설치 확인의 가장 좋은 ..

만약 우리가 IT계열이 아닌 그 어떤 다른 직업을 가지고 있다고 가정할 때, storyBook이라는 말을 처음 듣는다면 어떤 생각이 떠올랐을까? 나는 단연 이야기, 혹은 동화책 등에 관한 내용일거라 생각한다. 이야기를 뜻하는 story라는 단어의 뜻이 가장 크게 와닿기 때문이다. 만약에 우리가 고려해야하는 사용자 시나리오 혹은 기획자 의도 혹은 비즈니스 로직 혹은 테스트 케이스 등등이 하나의 이야기라고 생각하면 본 포스팅에서 소개해 볼 storyBook이 조금 더 쉽게 이해될까? 마크업도 백엔드도 중요하지만 그 사이 다리를 이어주는 프론트는 적당히 백엔드를 커버하면서도 적당히 마크업을 커버하면서도 사용자에게 최고의 경험을 제공하기 위하여 그 이상의 코드를 구현하면서 날이 갈수록 방대해지고 복잡해지는 경험..

[!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해. 나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..) * 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한..

[!이시중] 2021년 11월 20일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/61 에서 확인할 수 있음. https://hyermione.tistory.com/9 axios를 통한 오픈 API 연결하기 [!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나.. hyermione.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은..

[!이시중] 2021년 6월 21일 20:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/34 에서 확인할 수 있음. 보통 vue cli를 이용하여 vue를 설치하면 package.json에 라는 설정이 있기 마련이다. 근데 어찌된 일인지 이번에 설치한 버전은 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 이렇게 적혀있는것이 아닌가. (여담으로 맥 진짜 못 쓸 것 같다 ㅠㅠㅠㅠ 캡쳐를 하고 싶은데.... 30분 째 저거 하나 겨우 캡쳐했다...) 아마 웹팩으로 설치된 것 같다. 아무튼 저렇게 설치되어 여태 하던 방식으로 환경변수 파일이 안 먹는것이다 ㅠㅠㅠ 결론은 co..