굴러가유...

안녕하세요! 오늘도 역시 토스 강의를 보고 와.. 이렇게도 할 수 있구나를 느껴버린 나머지.. 직접 해보는게 어떨까 해서 따라하게 되었습니다. 근데 이게 모든 소스를 보여주신건 아니라(내가 해석을 못한걸지도..) 제 주관이 섞여 좀 구조가 바뀌었는데 토스 구조처럼 어떻게 짜는지 혹시 아시는 분 있으시다면 공유 부탁드립니다.. 코드 리뷰는 언제든지 환영입니다 :D Effective Components ? 지금의 회사에서 저의 코드를 수정해줄 리더분이 없으셨어서.. 제가 리드해가며 새롭게 리액트로 리팩토링을 하는 작업에서 나는 '설계'부터 잘못했구나 라고 느끼게 된 계기들이 엄청 많았습니다. 우선 제가 만든 컴포넌트들은 재사용에 불리한 구조를 가지고있는 경우가 대부분이였습니다. 재사용에 불리하단 것 중 단점..

우아한 비동기 퇴근하면서 유튜브를 보던 중 나의 꿈의 직장.. '토스' 유튜브에서 흥미로운 주제가 있길래 하나 가져와봤습니다. 토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기 "프론트엔드 웹 서비스에서 우아하게 비동기 처리하기" 라는 주제였는데요, 보자마자 우아한 비동기..? 비동기면 비동기지 어떻게 우아하게 처리한다는 거지? 라는 궁금증이 생겼습니다. 내용이 너무너무 알차고.. 너무 좋은 주제라서 보자마자 아! 이건 공유해야겠다.. 싶어서 가져오게 되었습니다. 다들 한번씩 보는걸 추천드려요, 이거 말고도 토스의 프론트 동영상들이 알찬게많답니다. 들어가기에 앞서 여기서 나오는 예제들의 일부는 위에 있는 토스 동영상의 예제 소스들도 포함되어 있는 점 양해부탁드립니다! 동기와 비동..

안녕하세요! 오늘은 mac 유저라면 흔히? 겪을 수 있을만한 이야기를 하려고 합니다. 회사랑 집에서 쓰는 컴퓨터, 노트북이 구분이 되어있지 않다면 회사에서 지급되는 컴퓨터만 쓰기 마련인데요. 저 또한 집에있는 노트북이 워낙 구형이라 회사에서 제공해주는 macbook pro를 집에서도 사용하고 있습니다. 그렇다보니 github 계정관리에 있어서 많은 어려움이 있었는데요, 최근에는 개인 깃허브에 gitpage를 하려고 터미널에서 작업하는데.. permission denied 가 떠서 많은 시간을 사용했던 적이 있습니다. 원인이 뭐였냐면.. 이미 이 컴퓨터는 초기 세팅때부터 회사계정으로 깃허브를 설정했다보니 터미널에도 키체인에도 github로그인이 회사꺼로 되어있어서 그런거였습니다. 혹시 저와같이 이런 경우의..

안녕하세요! 날이 많이 쌀쌀해진 겨울이 다 되었네요.. 오늘은 자바스크립트에서 시간이 필요할때 자주 사용하기 좋은 API를 하나 공유하고자 합니다. Intl API 란? 여러가지 언어로 서비스를 할 수 있도록 웹 애플리케이션을 설계하고 구현하는 과정에서 우리는 국제화 라는 것을 알고있어야합니다. 한국만 사용하지 않는다는 것이죠! 예를들어, 10/12/14 라는 날짜는 한국에서는 2010년 12월 14일로 해석하게 됩니다. 하지만 미국에서는 10월 12일 2014년 으로 해석할 수 있다는 거죠 만약에 그렇다면 이 웹은 국제화 한 웹일까요? 그렇지 않습니다. 하지만 이것을 언어마다 하나하나 변경하게된다면 그 공수또한 장난이 아닐거란 거죠.. 다행히 이러한 데이터 포멧팅 문제를 해결해주기 위해 Intl API..

안녕하세요! set.. set...! set을 자주 쓰지만 왜? 어떻게 되는지.. 알지 못했다 무지했다 왜 그랬을까..? 우선 Set에 문서를 확인해보면 Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. 라고 되어있습니다.. 설명으로는 Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일합니다. 삽입 순서대로 요소를 순회한다고 합니다. 그리고 Set내에선 한번만 나타낼 수 있다고 하네요! 수학을 배운사람이라면 셋 (집합) 이 뭔지 알 수 있지만, 그렇지 않은 사람은 알 수 없으니.. set의 메소드로는 add, clear, delete, en..

안녕하세요! 이번엔 무한스크롤, 페이지 애니메이션을 줄때 주로 사용하는 intersectionObserver에 대해 설명해보려고 합니다! 애니메이션 효과를 주는 방법은 여러가지가 있죠! Scroll 이벤트도 있고, intersectionObserver도 있구.. 이번엔 intersectionobserver을 사용해보려고 합니다. 듣기론 ..? toss에서 intersectionobserver을 사용한다는것 같기도 하고..? 쨋던 intersectionobserver 가 뭐냐? Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. 공식 문세는 이렇게 정의하고 있습니..

안녕하세요! 오늘은 정말 재밌는걸 들고왔는데요, 개발을 하다 재밌는것을 발견했는데요! 프론트엔드 개발자라면 필수인 크롬의 F12.. 여러분은 이 F12를 얼마나 사용하실 줄 아시나요?? 많은 프론트엔드 개발자분들도 잘 사용하지 못한다는 F12에 대해서 제가 알고있는 정보들을 공유하고자 합니다!! 우선 F12를 누르면 나오는 화면입니다. 화면을 처음 보시는 분들소 있을 수 있으니 상단 탭에 대하여 중요한것들 위주로 설명해보자면 우선 elements 탭, console 탭, network 탭, application 탭이 있습니다. 주로 이렇게 4개를 주로 보실텐데요. 탭에 대하여 설정을 해보자면 1. elements탭 주로 html을 미리보거나, css를 확인할때 사용합니다. elements에서 css를 직..

안녕하세요 :D 오늘은 오랜만에 emotion css를 한번 끄적끄적여 보려 합니다. 최근에 개발 과제등을 진행하면서 탈락의 쓴맛을 보고 스스로 피드백을 진행해보니.. 아무래도 깔끔하지 못했던 소스가 아니였을까 싶네요.. 그 중에서도 가장 문제라 생각하는게 스타일 지정.. 기존에 styled-components를 사용했는데, 너무 많은 styled를 남발했던게 원인이 아닐까 싶습니다. 그래서 요즘 styled-components와 호각을 겨룬다는 emotion을 한번 공부하는 시간을 가져보았습니다. 새롭게 공부하는 emotion으로는 좀 깔끔하고 정돈된 스타일을 만들어보려고 합니다! 요즘들어 느끼는 기초의 부족함.. css랑 js 강의라도 다시 들어야 할까봐요.. 우선 emotion을 사용하려면 설치를 ..

안녕하세요! 오늘은 vue에서 자주 썼던 eventBus를 react에서 만들어서 사용해보려고 합니다. 사실은 eventbus를 사용하는 방식만 안다면 vue, react 구분없이 개발할 수 있지만, 요즘엔 html 기초보다 바로 react를 배우시는 분들이 많아서 eventbus를 사용하는데 어려움을 느끼시는 분들이 있는 것 같아 이렇게 올려봅니다! 우선 eventBus란? eventBus란 다른 컴포넌트끼리 데이터를 주고받을 수 있는 방식입니다. 하지만 이 방식은 부모 - 자식 간의 관계가 필요 없이 전혀 다른 컴포넌트끼리 데이터 전송이 가능하다는 장점이 있습니다. 그럼 eventBus를 주로 어떨때 사용하나요? 라고 물어볼 수 있습니다. 저같은 경우에는 vue와 react를 모두 개발하는 사람으로써..

안녕하세요 :D 오늘은 노드 express를 사용하여 jwt 토큰 인증을 하는 방식과, 기초 세팅해둔 소스파일 공유를 해보려고 합니다.! 평소에 node 환경을 세팅할때 axios, cors, express, dotenv ... 등 설치해야할 패키지가 너무 많습니다.. 매번 세팅하기 귀찮으니 기본적인 패키지 + jwt + mysql 세팅까지 된 템플릿을 만들어 보게 되었습니다. 템플릿을 공유하기 전에! jwt가 뭔지 알아야 사용할 수 있을 것 같아서 간단하게 이야기를 하려 합니다 :D 만약 누구나 API 콜을 칠 수 있다면? 보안상 문제가 있지 않을까..? 만약 로그인한 유저가 장기간 아무 모션을 하지 않을때 로그아웃을 시켜줄 순 없을까..? 개발 초기에 항상 생각하던 내용입니다. api를 만들면서 빠질..