티스토리

Moon의 개발 일기

검색하기

블로그 홈

Moon의 개발 일기

moonformeli.tistory.com/m

Moonformeli 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

Jest 에서 Extend 를 사용하는 법 ※ 이 글은 How to Use Extend with TypeSript 를 번역한 글입니다. mkdir src && cd src mkdir __tests__ mkdir typings mkdir example Jest 는 현재 가장 인기 있는 테스팅 라이브러리 중 하나 입니다. 코드의 안정성과 신뢰성을 보장해주기 위해서 테스트 코드의 작성 여부는 선택이 아닌 필수가 되어버렸습니다. 기본적으로 Jest 는 여러 환경에서 테스트 코드를 작성할 수 있는 환경을 제공합니다. 물론 이 환경에서는 비동기 호출이나 다소 복잡했던 로직들도 테스트할 수 있는 환경 역시 구축할 수 있습니다. 그런데 Jest 가 제공하는 환경에서가 아니라 좀 더 구체적으로 내가 작업하고 있는 환경에 맞게 테스트하고 싶은 경우는 어떻게 해야할.. 공감수 0 댓글수 0 2019. 10. 19.
바벨(Babel)의 동작 원리 및 흐름에 대해 알아보자. ※ 알림 이 글은 원작자의 허락을 받고 번역한 번역글입니다. 번역의 부드러운 이해를 위해 생략, 의역 및 추가한 부분이 있을 수 있습니다. 원본 글 보러가기 우리가 매일 사용하는 이 아름다운 도구가 실제로는 어떻게 동작하고 있는지 생각해본 적이 있나요? 컴파일러는 실제로 어떻게 돌아가고 있을까요? 입맛에 맞게 컴파일 옵션을 바꾸고 싶진 않으시구요? 이 포스팅이 아마도 제법 도움이 될 거라고 생각합니다. 바벨(Babel)은 실로 굉장히 멋진 녀석입니다. 페이스북, 구글, 넷플릭스 외에도 수 백개의 다른 기업들이 이용하고 있지요. npm 월 다운로드 수는 이미 7백만을 넘어선지 오래입니다. 바벨은 ES6 뿐만 아니라 ES7, JSX, 폴리필(Polyfill), 플로우(flow) 까지 지원하고 있습니다. 만약.. 공감수 5 댓글수 1 2019. 5. 7.
React hooks (리액트 훅) 사용 방법 시리즈(1) - useState 단편 시리즈처럼 React hooks API 의 사용법에 대해서 기록해볼 예정입니다. React Hooks 의 자세한 개요는 공식 홈페이지에서 확인할 수 있습니다. useState state 를 편하게 관리할 수 있는 가장 기본적인 API 입니다. 아마 useState 는 React hooks API 중에서 가장 많이 사용되는 혹은 가장 많이 사용될 API 가 아닐까 싶네요. 기존엔 state 를 사용하려면 다음과 같이 코드를 작성해야 했습니다. 클래스 기반의 컴포넌트를 작성하고 그 안에서 state 를 선언하고 관리하는 방식이었습니다. 이러한 방식의 단점은 관리할 state 가 많아지면 코드의 가독성이 떨어지는 문제가 있었습니다. 그리고 redux, mobx 와 같은 스토어 중심의 상태 관리 시스템이 .. 공감수 1 댓글수 2 2019. 3. 31.
JavaScript(jQuery) - position sticky IE polyfill(폴리필) 방법 새로운 Position Sticky position: sticky 는 정말 유용한 기능으로 고정 픽스 네비게이션 등을 구현할 때 아주 편리합니다. 다음과 같은 코드에 다음과 같이 적용만해주면 바로 적용이 되는데요. 다음과 같은 코드는 스크롤을 내릴 때 nav 엘리먼트가 상단에 고정되어 따라다니게 해줍니다. 참 좋은 기능이죠. 그러나 아주 치명적인 단점이 있습니다. IE 에서 지원하지 않는 기능입니다. 브라우저 지원 현황 이게 얼마나 치명적인 느낌인지 모르시는 분들을 위해.. 위 사진은 2018년 한 해를 기준으로 한국에서 데스크톱의 경우 각 브라우저의 점유율을 나타내주는 지표입니다. 위 지표를 보러가시려면 이 곳을 클릭하세요. IE는 점유율이 지속적으로 낮아지고 있지만 아직까지도 전체 사용량의 약 20%.. 공감수 17 댓글수 2 2019. 3. 31.
평촌 학원가 아구찜 맛집 - 연평도 원조꽃게 다녀온 후기 주말엔 아귀찜을 먹으러 평촌 학원가 근처에 있는 아귀찜 가게에 다녀왔습니다! 연평도 차림상이라는 가게인데 한 번 다녀온 후기를 간단하게 남겨볼까 해요. 그나저나 티스토리 에디터가 새롭게 출시되었는데 솔직히 아직까진 많이 불편하네요.. 돌려줘..! 전화번호 031-384-9333 전화번호2 010-5359-9333 위치 경기도 안양시 동안구 평촌동 921-9 밑에는 지도입니다. 지도가 보이지 않으시는 분들은 구글 맵 지도를 클릭해서 확인해보세요. 가게는 지하철역에서 조금 떨어져있어 지하철로 가기엔 조금 번거롭습니다. 주변에 버스가 많으니 평촌 학원가를 지나가는 버스를 타고 가면 쉽게 도착하실 수 있어요. 주차장은 제공하지 않는 듯 보였습니다. 가게 앞의 공간이 넓지는 않았어요. 가게에서 판매하고 있는 메뉴.. 공감수 0 댓글수 0 2019. 3. 30.
삼성역 일식 맛집 추천 - 스시유 직장인 점심회식 오늘은 삼성역 주변에 있는 맛집을 소개해볼까합니다. 평소에 일식을 좋아하는 분들은 한 번쯤 방문하셔도 괜찮을 것 같아서 가져왔습니다! 영업시간(연중무휴) - AM 11:30 ~ PM 22:00예약문의 - 02-553-7870팩스 - 02-553-7869주소 - 서울특별시 강남구 대치동 949-1 번지 / 삼성역 3번출구에서 250m 오른편 가게 정면에서 바라본 모습입니다. 가게 간판은 깔끔하게 걸려있는 편이지만 벽면과 간판 배경이 줄무늬처럼 되어있어서 실제로 보면 길 건너편이나 조금 떨어져서 봤을 땐 잘 안보일 수도 있어요! 가게 입구엔 메뉴판이 비치되어 있어서 적당히 둘러볼 수도 있습니다. 가게에 들어가면 가장 먼저 정면으로는 여러 종류의 사케를 모아놓은 전시장 같은 것이 보입니다. 가게에서 취급하는 .. 공감수 1 댓글수 0 2019. 3. 27.
삼성역 맛집 추천 - 족발보쌈마을 보쌈정식 평소에 제가 정말 자주가는 보쌈집을 소개해드릴까 합니다! 삼성역 주변에서 식사하실 일이 있으면 꼭 한 번 가보시면 좋을 듯 하네요! 2호선 삼성역 1번 출구로 나가세요. 나가자마자 길을 따라서 약 50m 정도 직진 후 골목길로 들어가 다시 50m 정도 직진하시면 왼편에 건물이 있어요! 2층에 위치해 있고 비교적 찾기 쉬우니 금방 도착하실거에요. 영업 시간 : 오전 11시 ~ 오후 10시 30분 전화 번호 : 02-567-2772 너무 늦게 가시면 족발, 보쌈이 다 떨어져있을 수도 있으니 적당한 시간대에 가시는게 좋을 것 같아요. 가게 입구엔 신선한 농산물을 사용하는 우수지점이라고 팻말을 걸어놨네요~ 자리는 대부분이 4인석 테이블이고, 안 쪽에는 단체석도 앉을 수 있는 공간이 있습.. 공감수 1 댓글수 0 2019. 3. 15.
Git을 사용할 때 꼭 알아두어야 할 개념들 Git은 프로젝트나 파일 등을 관리할 때 빠져서는 안될 매우 중요한 시스템으로 자리잡았습니다. Git을 시작하기에 매우 쉽기도하지만 무엇보다도 다른 사람들과 협업을 해야할 때 진가를 발휘합니다. Git 이전에는 svn이나 ftp 등을 이용해서 파일을 관리했습니다. 그러나 근본적으로 이런 시스템들과 Git은 차별점이 존재했죠. 오늘날 가장 많이 사용되는 VCS(Version Control System)가 Git 임에는 누구도 부인할 수 없을 것입니다. 구글 트렌드의 조사에 따르면, 2004년도부터 현재까지의 통계를 내보았을 때, 현재 가장 많이 사용되고 있는 VCS는 단연코 Git 입니다. 이 정도 수치면 시장 독점에 가까운 압도적인 비율이라고 볼 수 있겠네요. 전 세계의 수 많은 사람이 사용하고 있는 G.. 공감수 3 댓글수 0 2019. 3. 14.
티스토리 구글 애드센스 승인 후기 안녕하세요 ~이번엔 구글 애드센스가 승인난 후기를 알려드릴게요. 이 블로는 최초에 개설한건 제법 전이지만 관리를하고 있지 않아서 유령 블로그처럼 남은 곳이었는데, 최근에 다시 마음을 다 잡고 글을 조금씩 올려보고 있는 상황이었습니다. 그러던 와중에 블로그로 수익을 낼 수 있는 방법을 전해들었죠. 바로 애드센스! 블로그를 네이버로 시작할지, 티스토리로 시작할 지 아니면 개인적으로 만들어 시작할 지 고민이 많았는데요. 저는 티스토리를 선택했습니다. 티스토리가 스킨 꾸미는 것도 그렇고 좀 더 이쁜 느낌이었어요. 그래서 신청한 구글 애드센스! 그러나... 결과는 거절 이유는 정확히 알려주지 않았습니다. 구글 애드센스의 경우 신청은 자유지만 신청을 거절당했을 때 어째서인지 이유를 잘 알려주지 않더라구요. 심지어 .. 공감수 1 댓글수 2 2019. 3. 12.
CSS 애니메이션 효과:: 패럴랙스(Parallax) 효과로 멋진 배경 만들기 안녕하세요! 이번에는 CSS 에서 정말 정말 많이 사용되고 있는 Parallax 효과를 이용해서 표현할 수 있는 멋진 효과에 대해 설명드리려고 합니다. 먼저, 이 번 과정에서 사용되는 개념은 다음과 같습니다. 모르시는 분들은 기초 개념을 먼저 숙지하고 오시면 좋을 듯 합니다!Parallax 란 무엇인가? W3Schools 설명 보러가기background 속성에 대해서 알아 보기background-position 설명 보러가기 - W3Schoolsbackground-size 설명 보러가기 - W3Schoolsbackground-repeat 설명 보러가기 - W3Schools 이번 효과는 간단하니 바로 시작할게요!먼저 바탕이되는 div부터 만들어봅시다. 이미지 2장을 사용하기에 앞서, 각 이미지를 담을 di.. 공감수 4 댓글수 0 2019. 3. 12.
CSS 애니메이션 효과:: 트랜지션 - 펼쳐서 보여주기 [CSS Effect] 순수 CSS와 마우스 hover 효과를 이용해 위 사진의 효과를 만들어보겠습니다. 위 효과를 꾸며내는데에 사용한 개념은 이렇습니다. - flex-box 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [flex-box 설명 보러가기]- transform 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [transform 설명 보러가기]- box-shadow 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [box-shadow 설명 보러가기]- position 효과에 대해서 모르시는 분은 잠시 들렀다 오세요. [position 설명 보러가기] 준비가 되었으면, 먼저 첫 번째 준비물인 HTML부터 준비해봅시다. 우리는 바탕이 되어줄 #wrapper 를 만들고 그 안에 사각형을 총 4개를 만들겁니다. 색.. 공감수 2 댓글수 0 2019. 3. 10.
알고리즘 해커랭크 Hacker Rank - Time conversion 문제 풀이 및 함수형으로 리팩토링 문제 설명주어진 12 시간 (AM / PM) 시스템을 24 시간 시스템으로 변환하시오.참고: 자정은 12 시간제에서 12:00:00AM 로, 24 시간제에서 00:00:00 로 표기하고 정오는 12 시간제에서 12:00:00PM, 24 시간제에서 12:00:00 로 표기한다. 함수 설명아래의 timeConversion 함수를 완성하시오. 반환 값은 입력 값을 24 시간제로 표현할 수 있는 새로운 문자열이어야 한다. timeConversion 함수는 다음과 같은 매개변수를 가진다.s : 12 시간제 형식의 문자열 입력값 형식문자열 s는 12 시간제를 의미하는 시간을 담고 있다. (예를 들면 hh:mm:ssAM 이나 hh:mm:ssPM 과 같은 형식)01 ≤ hh ≤ 1200 ≤ mm, ss ≤ 59 조건모.. 공감수 1 댓글수 0 2019. 2. 27.
CSS효과 - 원(Circle)으로 나타났다 사라졌다 효과 구현하기 ※ 해당 포스트는 http://100dayscss.com/의 4번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.※ 무단 스크랩은 허용하지 않습니다.※ 이번에는 CSS 효과만을 이용해 여러 개의 원이 겹치면서 나타났다 사라지는 효과를 연출해 보겠습니다. 먼저 구현하기에 앞서, 선행적으로 알고 있어야 할 것들이 몇 가지 있습니다. - transform에 대해 모르시면 잠시 들렀다 오세요. - position에 대해 모르시면 잠시 들렀다 오세요. - transition에 대해 모르시면 잠시 들렀다 오세요. 바탕 배경을 먼저 작업을 해봅시다. See the Pen wxxpbJ by Munkyu Yang (@moonformeli) on CodePen. 배경이 되는 .wrapper div를 설정했습니다. .. 공감수 3 댓글수 0 2018. 8. 6.
JavaScript 초보 가이드 글을 쓰려고합니다. 제 블로그에 관심 있으시고 JavaScript를 공부해야겠다고 생각되시는 분들은 읽어보시는 것도 좋을 듯 합니다. JavaScript를 제대로 이해하지 못하고 있는 분들을 대상으로, 기초 내용부터 약간의 심화까지 담아 보려고 합니다. 1. JavaScript 기초- 변수 Scope, 호이스팅, JavaScript에서의 함수란, 프리미티브 값- this- 클로져(closure) 2. Prototype- 프로토타입의 기초 이해- 프로토타입 관계도 실습- 프로토타입을 이용한 상속 3. 성능 향상 / 최적화- for loops- DOM- Event handlers- 기타 4. 그 외의 이야기- ES6- Framework / Libraries 혹시나 질문이 개인적으로 있으신분들은 방명록에 비밀글로 남겨주시면 답변.. 공감수 1 댓글수 1 2017. 11. 22.
jQuery를 이용한 메뉴 접었다 펼치기[더보기 기능] 간단하면서도 쉬운 메뉴 펼치기를 구현해보도록 하겠습니다. jQuery의 클래스 선택자만 이용하면 아주 간단하게 구현할 수 있는 기능입니다. 우선, jQuery의 선택자에 대해 모르시면 잠시 들렀다 오세요. 그럼 시작해보겠습니다. 먼저 틀이 되는 HTML을 작성해보겠습니다. 기본 코드의 바탕은, 네이버 메인사이트의 [더보기]를 참고했습니다. 아래 사진을 보실게요. 사진에서처럼 두 개의 span 태그가 존재하고, '더보기' 라는 텍스트는 자식 태그에 삽입이 되어 있는 상태입니다. 아래에 적용된 CSS코드를 보겠습니다. 위의 그림은 background-image에 적용된 이미지의 url에 실제로 저장되어 있는 그림 파일입니다. 그림 파일이 많아질 경우에는 저런 식으로 하나의 파일에 모두 담은 후에, backg.. 공감수 19 댓글수 2 2017. 7. 5.
CSS효과 - 이미지 마우스오버(hover) 효과 넣어주기 ※ 해당 포스트는 http://100dayscss.com/의 13번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.※ 무단 스크랩은 허용하지 않습니다.※ 이번에는 이미지에 대한 마우스오버 효과를 만들어보겠습니다. 마우스오버는 다양한 곳에서 아주 유용하게 사용될 수 있습니다. 그리고 마우스오버를 만들어내는 방법은 다양하게 있으므로, 제 포스팅에서 소개하는 방법이 유일한 정답은 아님을 생각하시면서 읽어주시면 되겠습니다. 먼저 구현하기에 앞서, 선행적으로 알고 있어야 할 것들이 몇 가지 있습니다. - transform에 대해 모르시면 잠시 들렀다 오세요. -position에 대해 모르시면 잠시 들렀다 오세요. - transition에 대해 모르시면 잠시 들렀다 오세요. 그러면 우선 배경 바탕부터 만들어.. 공감수 14 댓글수 3 2017. 6. 2.
CSS효과 - 다양한 도형으로 폭발하는 것 같은 효과 넣어주기 ※ 해당 포스트는 http://100dayscss.com/의 98번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.※ 무단 스크랩은 허용하지 않습니다.※ 다양한 도형을 이용하여 뭔가 중심에서부터 폭발하는 것 같이 보이는 애니메이션을 꾸며볼까 합니다. 바로 시작할까요? 준비물부터 챙겨보겠습니다. - 삼각형, 사각형 및 다채로운 도형- 애니메이션 활용 방법 : 애니메이션에 대해 모르시면 잠시 들렀다 오세요.- position 활용 방법 : position에 대해 모르시면 잠시 들렀다 오세요.- transform에 대한 이해 : transform에 대해 모르시면 잠시 들렀다 오세요. 먼저, 기본적인 레이아웃 구성에 삼각형을 그려보겠습니다.See the Pen aWeYpV by Munkyu Yang (@.. 공감수 3 댓글수 0 2017. 6. 1.
CSS를 이용한 슬라이딩 효과 넣기 ※ 해당 글은 http://100dayscss.com/ 의 59번째 내용을 설명을 위해 재구성 및 풀이를 적어놓은 포스팅입니다.※ 궁금한 점 있으시면 댓글 남겨주세요. 이번에는 CSS를 이용한 슬라이딩 효과를 넣어보도록 하겠습니다. 슬라이딩 효과는 다양한 곳에서 다채롭게 사용이 가능한 유용한 기능이므로 잘 참고하시면 좋을 것 같네요. 설명을 읽기 전에,jQuery에 선택자에 대해 모르시면 잠시 들렀다 오세요.- jQuery selectorCSS 트랜지션, 트랜스폼에 대해 모르시면 잠시 들렀다 오세요.- CSS3 Transform- CSS3 Transition 우선 기본적인 밑바탕 작업을 하도록 합니다. See the Pen bWJZXL by Munkyu Yang (@moonformeli) on CodeP.. 공감수 1 댓글수 0 2017. 5. 27.
CSS - 햄버거 버튼 만들기 ※ 해당 포스트는 http://100dayscss.com/의 2번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.※ 무단 스크랩은 허용하지 않습니다.※ 햄버거 버튼이라고 불리는 메뉴 버튼을 만들어보겠습니다.우선 눈에 잘 띄도록 배경부터 지정을 해보겠습니다. 먼저 width, height이 150px인 정사각형을 만들었고, 밋밋하지 않게하기 위해 정사각형에 약간의 box-shadow를 입힌 상태입니다. box-shadow를 모르시겠다면 여기를 클릭하세요.다음에는 우리가 만든 녹색 상자 안에 버튼처럼 생긴 컴포넌트들을 안에다가 넣어줘 보겠습니다. See the Pen ybQXLd by Munkyu Yang (@moonformeli) on CodePen. /* 추가된 부분 */ 을 주목해서 봐주세요. .. 공감수 8 댓글수 4 2017. 5. 21.
CSS를 활용한 다양한 효과를 어떻게 만드는지 설명하려고합니다 CSS 카테고리에서는 CSS의 효과를 이용한 다양한 효과들을 어떻게 만드는지 설명하고, 따라서 실습할 수 있도록 설명을 하는 곳으로 활용하겠습니다. 공감수 1 댓글수 0 2017. 5. 19.
React.js - TypeError: map of Undefined 에러에 대한 정확한 이유와 설명 ※ 해당 포스트는 Dave Ceddia 님의 동의 하에 글을 번역한 것임을 알립니다. ※ 자연스러운 글의 흐름을 위해 작성자의 임의로 의역한 부분이 있음을 알립니다. React 컴포넌트가 제대로 렌더링이 안되고 있습니까? 그 전에 잠깐! React 컴포넌트가 componentWillMount 에서 서버로부터 데이터를 받아오는 작업을 아래와 같이 하고 있다면, 과연 무엇이 렌더링이 될까요? 사진의 출처 - Jay Galvin 만약 '아무것도 일어나지 않는다' 혹은 'a console error'라고 생각하셨다면, 정답입니다. 만약 '데이터를 받아온다'고 생각했다면, 이 포스트를 읽으시는게 좋겠군요. State는 초기화되어 있지 않다 우선 여기서 짚고 넘어가야할 두 가지 중요한 사실들이 있습니다: 1. 컴포.. 공감수 11 댓글수 0 2017. 5. 19.
React는 왜 사용을 하고 있는걸까요? React.js를 사용해 개발을 하다보면 사실상 눈에 띌 정도로 '좋다'고 느끼는 것은 그다지 많지 않습니다. React에익숙하지 않은 개발자라면 이러한 현상이 더욱 드러날 것이겠지요. 그런데도 우리가 React를 사용하는 이유는 바로 이런것이 아닐까 싶네요. React의 공식 홈페이지의 내용을 조금만 인용해 등장배경부터 알아 보자면 다음과 같습니다.By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.여러분이 만들어놓은 마크업(markup)과 그에 상응하는 뷰 로직을 하나로 만들 때, React는 실제로 뷰를 더욱 확장성 있고 관리하기 쉽도록 만.. 공감수 2 댓글수 0 2017. 5. 17.
React.js에 대해서 적어나가려고 합니다. 저의 블로그는 React.js에 대한 기초를 강의하지는 않습니다. 다만 개인적으로 React.js를 다루면서 느꼈던 부분들에 대해 어떻게 풀어나가는지를 적어보려고 합니다. 공감수 0 댓글수 0 2017. 5. 17.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.