파이어족의 경제적 자유 찾기

1. 공유하기 버튼이 위치할 웹페이지를 정합니다. 예) 온라인 이커머스 마켓 웹사이트라면, 상품 상세 페이지에 공유하기 버튼을 만듭니다. 예) 소셜미디어 앱이라면, 개별 포스팅마다 공유하기 버튼을 생성합니다. 2. 공유하기 버튼을 클릭했을 때, 어떤 공유 기능들이 떠야 하는지 결정합니다. 이에 따라 아이콘 모양, 버튼을 누른 직후 발생하는 이벤트가 달라집니다. 1. 공유하기 버튼을 누르자마자 카카오톡 앱이 바로 열리면서 친구에게 메세지를 보내고 싶습니다. 아이콘 버튼을 카카오톡 로고 이미지로 설정합니다. 2. 공유하기 버튼을 눌렀을 때, 카카오톡, 페이스북, URL 복사하기 등 다양한 공유 기능 옵션들이 나왔으면 좋겠습니다. 앱 중간이나 하단에 새로운 팝업 창이 떠야 합니다. 그 팝업 창 안에, 카카오톡..

리액트에서 URL 링크를 클립보드에 복사하는 기능을 구현해 보았다. 현재 페이지의 웹사이트 주소를 복사하고 다른 앱이나 브라우저에서 붙여넣기할 수 있도록 만든 기능이다. 이 기능을 만드는 방법은 여러가지이다. 하지만 이 블로그에서 만드는 방법을 핵심만 요약하면, 아래와 같다. 1. 현재 페이지의 url 주소를 라는 html 태그에 담아둔다. 2. document.execCommand 기능으로 url 주소를 복사한다. 3. 복사하는 내용이 담긴 태그가 사용자에게 보이지 않도록 처리한다. 자세한 방법과 코드는 아래에 설명되어 있다. 1. 준비 과정: 어떤 버튼을 누르면 링크 복사하기 메뉴가 떠야하는지 파악한다. 이 스크린샷은 인스타그램 예시 사진이다. 1번이라고 쓰여져있는 상단 우측 버튼을 누르면, 화면 하..

사용 기술 및 라이브러리 리액트 React 스타일드 컴포넌트 Styled Component 버튼 컴포넌트를 모두 모아두는 buttons.js 파일 현재 상황 각 버튼마다 미리 buttons.js 에서 사이즈를 정의한다. background 설정에서 center/contain 으로 썼고, 아이콘의 너비와 높이를 이미 정한 상태이다. 아래는 buttons.js 파일의 코드 중 일부이다. const shareKakaoButton = css` background: url("${shareKakaoImage}") no-repeat center/contain; width: 34px; height: 34px; ` const shareCopyUrlButton= css` background: url("${shareCopy..

개발자란 무엇인가 유머란 무엇인가 개발 직군에 대한 환상, 장벽, 과대평가, 선입견이 만들어내는 것 '헐 개발자세요? 개발자처럼 안 생겼어요' 라는 말을 듣고 개발자란 무엇일까 생각해보게 되었다. 필자 개인적으로는 왜 기분이 나쁘지 않았는지에 대한 이유도 찾아보았다. 결론적으로는 개발자를 바라보는 관점과 선입견이 미치는 영향까지 서술해본다. 참고로 이 글은 개발자라서 큰 무시를 당했거나 기계 부품 취급을 당한 사람들의 경험과는 다른 배경의 인사이트를 가지고 있다. 물론, 기본적인 매너는 개발자처럼 '생겼다' '안생겼다' 라는 평가적인 말 자체를 안하는 것이다. 개발자란 무엇인가. (반드시 '추석이란 무엇인가' 칼럼의 박사님의 표정으로 읽어주길 바란다.) 그들이 생각하는 컴퓨터 프로그래머는 패션이나 뷰티에..

1. 크롬, 사파리 개발자 툴 사용하기 크롬 개발자 툴 창 여는 단축키 맥: ⌘ + ⌥ + J , 커맨드 + 옵션 + J 키를 누른다. 윈도우: Ctrl + Shift + J , 컨트롤 + 쉬프트 + J 키를 누른다. 혹은 브라우저에서 마우스 오른쪽 클릭: 검사 요소 혹은 inspect 메뉴를 클릭한다. 단축키를 누르면 오른쪽에 사진과 같은 창이 뜹니다. 각 탭을 선택해서 원하는 정보를 찾으면 됩니다. 크롬의 다양한 단축키는 이 링크에서 확인할 수 있습니다. 사파리 브라우저 개발자 툴 창 여는 단축키 1. 맥: ⌘ + ⌥ + I , 커맨드 + 옵션 + I 키를 누른다. (사파리는 애플 환경에서만 설치되는 브라우저이므로 윈도우 단축키는 없다.) 2. 상단 메뉴 중에 Develop / 개발 버튼을 클릭해서 ..

*Udacity 온라인 무료 강의를 듣고 번역 및 요약했습니다. 1. GET Request 란 무엇인가 클라이언트 (브라우저) -> 인터넷 (통신): 중간자 -> 서버 (데이터를 보관하는 곳) 클라이언트는 서버에게 '내가 누구인지'와 '내가 무엇을 원하는지' 정보가 담긴 GET request 요청을 보낸다. 인터넷이 이 요청을 서버에게 전달해준다. 서버는 클라이언트가 보내는 요청 메시지가 valid 유효하면, response 응답을 다시 보낸다. 2. 비동기와 동기의 차이점: Asynchronous, Synchronous 만약 브라우저가 이 get request 를 synchronous 하게 보낸다면, 서버로부터 응답을 받을 때까지 다른 작업을 수행하지 못하고 계속 기다려야 한다. 하지만 비동기로 요청한..

카카오 프로젝트 100일 서비스를 통해서 지난 100일간 1일 1커밋을 했다. 결론부터 말하자면, 플백 참여를 하면서 좋은 습관을 많이 체화할 수 있어서 좋았다. 1일 1커밋을 해야겠다는 생각이 든 것은 작년 후반에 보았던 이 영상 때문이었다. 나는 개인적으로 1일 1커밋을 하면서 개발 습관을 넘어서 생활 습관과 가치관도 많이 향상된 것 같아서 뜻깊었다. www.youtube.com/watch?v=V9AGvwPmnZU&t=5s 태용 유튜브 개발자 1일 1커밋 배달의 민족 리드 개발자 1. 풀타임 이외에 내가 따로 하는 사이드 프로젝트를 놓치지 않게 된다. 나는 마침 지난 3개월간 포트폴리오 모임을 만들어서 운영하고 있었다. 워드프레스나 윅스 같은 웹사이트를 사용하는 것이 아니라 개츠비 gatsby js ..