전체 글53 Mac 사용중인 포트 찾아서 연결끊기 mac을 사용하여 개발을 하다보면 이미 사용중인 포트라서 프로젝트 시작이 안되는 경우가 많은데요. 그런 경우에 사용중인 포트를 찾아서 연결을 끊는 방법에 대해서 정리해보겠습니다. 아래 "3000" 대신에 원하는 포트번호를 넣어주시면 됩니다! lsof -i:3000 그러면 아래 이미지처럼 나오는데요. 이제 연결을 끊고 싶은 포트번호의 PID를 확인했으니 해당 PID의 연결을 끊어주면 됩니다. 여기도 동일하게 "73362" 대신 원하는 PID 텍스트를 넣어주시면 됩니다. kill -9 73362 이제 다시 프로젝트를 실행하면 포트가 연결이 끊겨서 정상적으로 동작할 수 있게됩니다. 2020. 11. 18. css filter 속성으로 이미지 블러처리 구현하기 오늘은 css filter 속성을 사용해 배경 블러처리 구현하는 방법에 대해 정리해보겠습니다. .container { display: flex; } .box { width: 100px; height: 100px; background: no-repeat url("./img_1.png") 0 / cover; } .box + .box { margin-left: 20px; } 해당 경로에 이미지는 아무 이미지나 넣어주면 됩니다. 그런 상태로 실행시키면 아래처럼 노출되는데요. filter 속성 블러처리는 시각적인 효과를 주기 위해서 많이 사용하고 있지만 브라우저 지원 범위가 좁아서 많이 사용하지는 못하는데요. 이 글에서는 filter 속성을 사용해서 블러처리를 구현해보려고 합니다. .container { disp.. 2020. 11. 18. javascript touch event 사용해보기 자바스크립트에서는 모바일화면에서의 인터렉션을 구현하기 위해 touch event 를 제공해줍니다. 이를 활용하면 모바일에서 터치를 이용한 인터렉션을 구현할 수 있습니다. 1. event 등록하기 false로 하는 이유는 event가 상위 엘리먼트로 전달되지 않도록 하기 위함입니다. canvas.addEventListener("touchstart", handleStart,false); canvas.addEventListener("touchmove", handleMove,false); canvas.addEventListener("touchend", handleEnd, false); 2. touchstart event function handleStart(evt) { console.log(evt); evt.p.. 2020. 11. 10. react-native 에서 react-navigation 사용하기 Navigation Navigation이란 React에 존재하는 Router와 동일한 역할을 합니다. 기존에 나온 RN에서 제공해주는 navigation이 복잡하다고 해서 다양한 곳에서 navigation라이브러리를 만들었고, 그 중 facebook에서 만든 react-navigation을 정리해보도록 하겠습니다. TabNavigation ? StackNavigation ? 이 두개가 어떤 관계가 있는지 정리해보도록 하겠습니다. TabNavigation 위와 같은 형태가 tabnavigation이고 HOME 혹은 BOOKMARKS를 눌렀을때 새로운 화면을 보여주는 방식입니다. StackNavigation 위 사진 같이 새로운 창이 아닌 기존 화면에 새로운 화면을 쌓아놓는 방식이 StackNavigatio.. 2020. 11. 10. react-transition-group을 이용한 router간 animation구현 요즘 만들어지는 사이트들을 보면 페이지를 이동하는데 아래 gif 처럼 자연스럽게 페이지 이동하는 것을 구현해놓고 있습니다. 오늘은 react-transition-group 라이브러리를 이용해서 router간 animation 을 구현하는 방법에 대해서 정리해보려고 합니다. React-Transition-Group 이란 무엇인가? react의 component에 transition 효과를 쉽게 줄 수 있는 공식 라이브러리 입니다. 이것을 이용해서 컴포넌트가 appear, enter, exit될 때 원하는 효과를 줄 수 있습니다. 이것을 페이지에 적용하면 페이지가 appear(나타날 때), enter(만들어졌을 때), exit(사라질 때) 의 상황에 접근해서 애니메이션을 줄 수 있습니다. 1. Transit.. 2020. 11. 7. aws ubuntu에 war 배포 방법 오늘은 aws에 war를 배포하는 방법에 대해서 정리해보려고 합니다. AWS란 무엇인가? AWS(amazon web Service) 란 아마존에서 제공하는 클라우드서비스 왜 AWS를 이용할까? 웹 프로젝트를 제작하면 서버를 필요로한다. 내가 알기론 예전엔 컴퓨터를 이용해 직접 서버를 운영했는데 비용적인 측면에서 aws를 사용하는 것 같습니다. 시스템 구성 크게 클라우드 컴퓨터(AWS) 와 remote git 과 war파일이 필요합니다. AWS에 linux(인스턴스) 생성하기 linux에 java jdk tomcat 버전을 알맞게 설치하기 legarcy 프로젝트라면 war파일을 linux의 tomcat에 넣고 tomcat start boot 프로젝트라면 원격 git 에서 linux로 clone 한 후에 m.. 2020. 11. 7. passport-jwt 로 토큰인증하기 안녕하세요. 오늘은 서비스에서 현재 유저가 로그인이 되어있는지 확인할 수 있는 방식 중에서 토큰을 사용해서 인증하는 방식을 알아보려고 합니다. 두가지 라이브러리를 사용해서 토큰인증해보겠습니다. - jsonwebtoken : 암호화된 토큰을 사용하기 위한 라이브러리 - passport : passport는 jwt인증을 쉽게 할 수 있도록 도와주는 라이브러리 1. 설치 yarn add passport passport-jwt src/passport.js import passport from "passport"; import { Strategy as JwtStrategy, ExtractJwt } from "passport-jwt"; 공식사이트를 참고해서 passport-jwt의 Strategy와 ExtractJ.. 2020. 11. 7. 애플워치6 나이키 실버 44mm 구매 후기 오늘은 최근 구매한 애플워치6 나이키 에디션 구매 후기를 작성해보려고합니다. 저는 애플 공식 홈페이지에서 구매했으며, 나이키 에디션 > 실버 > 44mm 모델을 구매했습니다. 밴드는 스포츠 루프 옵시디언 미스트 색상을 선택했습니다. 색상이 너무 예뻐보이더라구요,, 배송은 일주일 정도 걸렸고 예상 배송 일정보다 좀 빨리 왔었습니다. 역시 애플이라 그런지 패키징이 너무 깔끔하게 온 것 같아요. 박스에 감싸진 비닐 뜯는게 너무 기분이 좋아요!! 모두들 그럴 것 같아요. 박스를 열게 되면 깔끔하게 시계만 그려진 박스가 나옵니다. 저는 나이키 에디션을 구매했기 때문에 나이키 페이스가 있는 박스가 있네요. 시계 케이스가 예전에는 융(?) 같은 재질에 감싸져 있었던 것으로 알고 있었는데, 6부터는 환경을 생각해서인지.. 2020. 10. 25. 아이폰 12 미니, 아이폰 12 프로 스펙 및 가격 아이폰 12 & 아이폰 12 미니 이번 애플 이벤트에서는 베젤을 줄이고 측면을 아이폰 4 스타일로 플랫하게 만든 아이폰 12가 등장했습니다. 아이폰 12는 6.1인치 제품입니다. 디스플레이 유출된 것과 달리 OLED를 사용했고, 1200니트의 밝기, 돌비 비전과 HDR10을 지원합니다. 해상도는 아이폰 11의 두배라고 하는데 이 말은 애플의 교묘한 발언이라고 하네요... 아이폰 11이 원래 11 프로보다 해상도가 절반이었기 때문에 크게 차이가 없다고 합니다. 이번에 애플은 아이폰 12에 코닝 사와 협의해 유리 위에 세라믹 실드를 부착한 단단한 유리를 선보였습니다. 나노 크리스탈을 유리 위해 도포한 뒤 녹여서 붙인 것입니다. 이는 기존의 글라스보다 4배 더 단단하다고 합니다. 이제 주위에서 깨진 아이폰을 .. 2020. 10. 16. 갤럭시 s20 fe 스펙 (노트20, s20 비교) 삼성에서 판매하는 요즘 스마트폰 중에서 유일한 100만원 이하 제품 S20 FE 는 노트20보다 조금 작은 6.5인치에 인피니티-O 디스플레이를 탑재하였습니다. 노트20과는 많은 차이를 느끼지 하고 배터리도 노트20보다 200mAh 더 증가했습니다. 카메라 기능에서도 노트20과 비슷하지만 전면카메라가 노트20에 비해서 3배가까이 증가했습니다. S20 FE의 색상은 5가지로 다른 S20시리즈들 보다 선택의 폭이 넓은 것이 특징입니다. 여러모로 노트20과 닮았지만 시리즈로는 S20에 속해있는 갤럭시 S20 FE입니다. 무엇보다도 이번 S20 FE 구매시 갤럭시핏2가 제공될 것으로 보입니다. 저는 애플워치6를 살 계획인데 애플도 이런 이벤트를 해주면 좋겠네요.. 모든 팬들을 위해 탄생한 스마트폰이라는 이름으로.. 2020. 10. 7. 10월 13일 애플 이벤트 초대장 - 한국 출시일은? 9월에 애플워치와 아이패드 발표 이어 드디어 많은 분들이 기다리셨던 아이폰12 소식이 오늘 새벽 공개되었습니다. 바로 아이폰12의 출시를 예고하는 초대장을 공개한 것인데요. 5G의 갖충 아이폰의 탄생을 말하는 듯한 초대장 이미지가 눈에 띄기도 했습니다. 코로나19로 인해 힘든 시기에도 꾸준히 제품을 발표하는게 대단하네요. 아이폰12의 초대장으로 예상되는 초대장에는 애플로고 옆에 통신망을 암시하는 듯한 물결 표시와 아이폰12의 다양한 컬러를 암시하는 듯한 이미지를 주었습니다. 애플워치에서도 새로운 컬러인 블루 컬러를 암시하는 듯한 초대장을 배포하였고 역시나 새로운 블루컬러가 출시되는 것을 볼 수 있기도 했습니다. 이번 초대장 대로라면 블루 컬러 및 새로운 컬러의 등장도 예상해볼 수 있겠네요. 코로나19로 .. 2020. 10. 7. 아이폰 12 가격 및 스펙 최근소식 블룸버그 의 '마크 거먼' 는 트위터를 통해 10월까지는 아이폰12 발표가 없을 것이라는 트윗을 올렸는데요. 2020년도에는 애플에게 지금까지 나타나지 않았던 다양한 일이 있었습니다. 최근 퀄컴과의 분쟁으로 새로운 제품을 제작하는데 애플의 너무 많은 시간적 비용을 지불 했습니다. 이러한 사태로 인해서 5G 부품 수급에 어려움을 겪고 있는 것 아니냐는 추측들이 나돌고 있는 상태입니다. 이런 이유로 공개행사와 출시 스케줄 역시 딜레이되는 것 같은데요. 그러면서 소비자들도 전작을 구입해야할 것인지, 아니면 새로 나오는 모델을 구할 것인지 고민이 깊어지는 것 같습니다. 그렇다면 지금까지 알려진 아이폰12 스펙과 가격 대략적인 출시일을 유추해보는 시간 가져보겠습니다. 스펙 가장 중요한 것은 내부에 어떤 첨단 기술.. 2020. 9. 24. 이전 1 2 3 4 5 다음
