본문 바로가기

웹 개발24

html css로 팝업 레이어(모달) 만들기 웹 서비스를 개발하다보면 필수적으로 팝업 레이어를 사용하게 되는데요. 아래와 같은 팝업 레이어를 다른 라이브러리나 프레임워크를 사용하지 않고 html와 pure css로 만들어보겠습니다. html과 css 는 아래와 같습니다. index.html 레이어 팝업 레이어 main.css .layer { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } .layer_content { width: 200px; height: 300px; background-color: #fff; } 레이어.. 2021. 1. 12.
css Flex IE 이슈 정리 1. IE11 > 말줄임 텍스트가 보이지 않는 이슈 1.1 이슈 내용 flex 구조 내에서 특정 상황에서 말줄임 텍스트가 노출되지 않는 이슈 발생 원인 : 부모와 자식 요소에서 flex 구조를 사용했는데 높이를 잡지 못하는 경우에 말줄임을 하게 되면 overflow:hidden 속성에 의해서 텍스트가 노출되지 않게 됩니다. 1.2 테스트 아래 사진처럼 크롬에서는 정상 노출되지만 IE에서는 말줄임 텍스트가 노출되지 않는 상황을 재현 해보았습니다. 크롬(정상) IE(이슈) IE에서도 높이를 잘 잡고 말줄임이 잘 되던 영역에 flex: 1 을 추가하였더니 아래 사진처럼 사라졌습니다. 다시 flex: 1 을 지우고, 이번에는 노출이 안되던 요소의 flex: 1 을 제거 해보았습니다. 그 결과 정상적으로 노출되는.. 2021. 1. 12.
React에서 Slack채널에 메세지 보내기(Slack api 최신버전) slack 에서 api 를 업데이트 해서 웹에서 슬랙 채널에 메세지를 보내는 방법이 굉장히 간단해졌습니다. slack api 1. 슬랙 앱 만들기 Incoming webhook을 사용하기 위해서는 slack app을 만들어야합니다. App Name 에 원하는 앱 이름을 넣어줍니다. 저는 이미 있기 때문에 임시로 만들었습니다. 그리고 slack workspace 를 선택해주시면 됩니다. 아래 사진이 있는 곳으로 가서 incoming Webhooks 를 on 해줍니다. 그 아래에 있는 Add New Webhook to Workspace 버튼을 클릭해줍니다. 클릭하면 채널을 선택하는 화면이 나오는데, 웹에서 메세지를 보낼 슬랙 채널을 선택해주면 됩니다. 슬랙은 크게 Workspace 로 나뉘고, 그 안에서는 .. 2021. 1. 10.
Nestj로 서버만들기 (2) - 프로젝트 셋팅 Nestjs 공식 홈페이지를 살펴보면 Code First 방식을 확인할 수 있습니다. 저희는 CodeFirst 방식을 사용할 것이기 때문에 아래와 같이 코드를 추가해줍니다. import { Module } from '@nestjs/common'; import { GraphQLModule } from '@nestjs/graphql'; import { join } from 'path'; @Module({ imports: [ GraphQLModule.forRoot({ autoSchemaFile: join(process.cwd(), 'src/schema.gql'), }), ], controllers: [], providers: [], }) export class AppModule {} 위와 같이 코드를 추가하고.. 2021. 1. 9.
Nestj로 서버만들기 (1) - 프로젝트 생성 Nestjs 는 Node계의 Spring 이라고 설명할 수 있는데요. 기존에 자유분방했던 Node express 구조의 서버에서 자바의 Spring 처럼 구조가 명확하게 정해진 프레임워크입니다. 그래서 정해진 방법만 따르면 쉽게 서버를 만들 수 있는데요. 최근 새로운 프로젝트를 진행하고 있는데, 좋은 아키텍쳐를 갖춘 서버를 제작하면 유지보수에도 편할 것 같아 Nestjs를 도입해보려고 합니다. 도입하면서 공부하는 내용들을 정리해보겠습니다. 프로젝트 생성 nest g application {{프로젝트 명}} 위와 같이 생성했으면 프로젝트 경로로 이동해줍니다. cd {{프로젝트명}} 패키지 설치 패키지 설치를 위해 아래 명령어를 입력해줍니다. nestjs는 yarn 보다는 npm 을 사용하시는 것을 권장합니.. 2021. 1. 9.
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.
리액트 반응형 모듈 사용하기 (react-responsive) 리액트 프로젝트를 할 때 반응형 을 좀 더 쉽게 사용할 수 있는 반응형 모듈에 대해서 정리해보려고 합니다. 선정 이유 부터 셋팅까지 정리해보도록 하겠습니다. 1. 반응형 모듈 선정 결론부터 말씀드리면 react-responsive 를 선택하였는데, 그 이유를 react-responsive 와 react-media 두가지 모듈을 비교하며 정리해보려합니다. 1.1 대중성 및 꾸준한 업데이트 npm trends 사이트에서 react-media와 react-responsive의 트렌드를 비교해볼 수 있습니다. 최근 업데이트 날짜를 제외하고는 react-responsive가 다운로드 수도 2배가량 앞서고 있고, 2년 먼저 만들어졌으며, Git의 좋아요인 star 개수도 많은 것을 확인할 수 있습니다. 이런 수치들.. 2020. 7. 29.

티스토리툴바