웹 개발24 다국어 웹사이트를 위한 react-i18next 사용해보기 다국어 웹사이트 다국어 웹사이트는 전세계에 존재하는 많은 국가들에 사이트의 정보를 제공하기 위해서 다양한 언어를 지원 가능한 웹사이트를 말합니다. 구글 번역기를 사용하면 되는 것 아닌가? 라고 생각하실 수 있지만, 번역을 하는 것이 아니라 특정 url로 접속하거나 언어 변환 버튼을 눌렀을 때 원하는 국가의 언어로 보여주는 사이트 입니다. 다국어 기능을 구현하는 방법은 라이브러리를 이용해서 하는 방법을 많이 사용하고 있습니다. 그 중에서도 i18next라는 라이브러리를 이용해서 다국어 기능을 구현해보겠습니다. 저는 react로 웹사이트를 만들 것이기 때문에 react-i18next 라이브러리를 사용해서 개발하도록 하겠습니다. react-i18next 우선 프로젝트를 먼저 만들어줍니다. npx create-.. 2020. 7. 15. 퍼블리셔가 알면 유용한 웹 사이트 (feat. 크롬 확장프로그램) 오늘은 퍼블리셔가 알면 유용한 사이트 및 크롬 확장프로그램에 대해서 알아보겠습니다. 1. Markup Validator Markup Validator는 마크업을 완료한 후에 마크업에 오류가 있는지 없는지 확인할 수 있는 사이트 입니다. 사용법은 위 링크로 들어가서 파일 업로드 메뉴로 들어가서 파일을 업로드 해주면 됩니다. 예시로 아래 코드를 작성해서 업로드를 해보겠습니다. span 안에는 block 요소가 들어갈 수 없어요~ 그러면 위와 같이 Element div not allowed as child of element span in this context. (Suppressing further errors from this subtree.) 라는 에러를 보여줍니다. div는 span의 자식 요소로 올 .. 2020. 6. 20. 슬랙(Slack) API 사용 가이드 (2) - 메세지 보내기 슬랙(Slack) API 사용 가이드 (1) - SlackApp 만들기에 이어서 이번에는 직접 리액트 프로젝트를 만들어서 메세지를 작성해서 Slack Workspace에 보내는 실습을 진행해보도록 하겠습니다. documentation 메뉴로 가준 후에 좌측의 APIs를 클릭하고 methods를 눌러줍니다. 그 중에서도 PostMessage 를 사용해서 메세지를 보내보도록 하겠습니다. Method URL : 요청을 보낼 기본 주소라고 생각하시면 됩니다. Preferred HTTP method : HTTP method 방식을 알려줍니다. post 방식을 사용하면 됩니다. Accepted content types : 적용될 content types라고 하는데 문서의 아래에 어떻게 적용해야 하는지 나와 있기 때.. 2020. 6. 14. 슬랙(Slack) API 사용 가이드 (1) - Slack App 만들기 제가 진행하고 있는 프로젝트에서 슬랙API를 활용해서 문의를 받는 기능을 추가하기 위해 slack api 사용 가이드를 정리해보려고 합니다. 1. App 만들기 slack api 에서 앱을 만들어줍니다. 아래의 내용을 채워주면 됩니다. App Name에는 원하는 이름을 넣어주시고 추가할 Slack workspace를 추가해주시면 됩니다. 앱을 만들게 되면 원하는 기능을 Slack App에 추가해야합니다. 저는 Bots 기능을 구현해야하니 Bots를 추가하도록 하겠습니다. 클릭했더니 App 설치를 하라고 하고 App 설치를 하기 위해서는 앱에 접근할 수 있는 범위를 설정해줘야 한다고 하네요. 저는 메세지를 보내는 기능을 해야하기 때문에 위와 같은 scope를 지정해줬습니다. 이부분은 원하시는 기능에 따라서.. 2020. 6. 14. React 에서 innerHTML 사용하기 리액트에서 HTML코드를 동적으로 추가하기 위해서는 기존에 자바스크립트에서 사용하던 방식과 약간 다릅니다. 기존의 자바스크립트에서는 innerHTML를 사용해서 넣어준다면 정상적으로 동작했지만, 리액트에서 아래와 같이 추가를할 경우 원하는 결과가 나오지 않습니다. import React from "react"; export default () => { const htmlCode = "버튼 "; return {htmlCode}; }; React에서 텍스트로 된 HTML코드를 추가하고 싶은 경우에는 React에서 정해진 규칙을 사용해야합니다. React에는 dangerouslySetInnerHTML={{ __html: htmlCode }} 과 같은 형태로 주가해주어야 합니다. import React, { u.. 2020. 6. 13. 페이지 스크롤 다운 애니메이션 (feat. Animation of scroll) 오늘은 페이지 스크롤 다운 애니메이션을 어떻게 만드는지에 대해서 알아보려고 합니다. 페이지 스크롤 다운 애니메이션이 뭘까? 이것처럼 스크롤을 내릴 때 효과를 줘서 fadein, slidein, slideup 과 같은 동작을 할 수 있게 하는 애니메이션 입니다. 직접 자바스크립트를 사용해서 개발할 수 도 있지만 똑똑하신 분들이 만들어 놓은 라이브러리가 굉장히 많기 때문에 오늘은 그 라이브러리를 사용하는 방법에 대해서 정리해보려고 합니다. 페이지 스크롤 다운 애니메이션 라이브러리 WOW.js Animate.css * AOS kissui scrolltrigger 여기서 AOS를 사용하는 방법을 정리해보겠습니다. 사이트를 가보면 아래와 같이 다양한 페이지 스크롤 다운 애니메이션 종류들을 확인하실 수 있습니다. .. 2020. 6. 13. React 프로젝트에 Scss(Sass) 사용하기 (feat. Webpack) 리액트 프로젝트에서 컴포넌트를 스타일 하는 방법은 Styled-components, Scss, AntDesign 등등 여러가지가 있습니다. 오늘은 그 중에서 Scss를 이용해서 리액트 프로젝트를 스타일 하는 방법에 대해서 정리해보도록 하겠습니다. 리액트 프로젝트를 만들기 위해서는 Create-react-app을 통해서 쉽게 만들 수 있죠? 하지만 오늘은 Webpack 설정을 해보며 직접 프로젝트 셋팅하는 부분부터 해보겠습니다. 1. 설치 우선 npm을 통해서 설치를 해줍니다. yarn을 통해서 설치를 해도 상관 없습니다. 원하시는 패키지 프로그램을 사용해주시면 됩니다! npm i --save--dev node-sass style-loader css-loader sass-loader node-scss : .. 2020. 6. 13. CSS Grid 이해하고 사용하기 이 글은 CSS Grid에 대한 이해를 돕는 글입니다. 자세한 속성과 사용법에 대해서는 참고 사이트 확인해주세요. Grid 가 나오는 이유는 무엇일까? Grid를 도대체 왜 사용해야하는지 알아야 어떤 상황에 어떻게 사용할지 정해지기 때문에 알아보겠습니다. 결론부터 말씀드리면 기존에 float를 이용해서 레이아웃을 만들 때는 수직 즉, 세로 방향에 대해서 만들기 어려움이 있었습니다. 이런 어려움을 해소시키기 위해서 나온 것이 *flex *입니다. Flexbox를 이용해서 레이아웃을 작성하게 되면 수평 혹은 수직 구조를 작성할 때 보다 쉽게 작성할 수 있었습니다. 하지만 수평과 수직 구조를 동시에 작성하기에는 Flexbox를 이용하는데에도 한계가 있었습니다. .flex_container { width: 50.. 2020. 6. 13. HTML, CSS로 사이드바 만들기 버튼을 누르면 왼쪽에서 나오고 다시 누르면 왼쪽으로 사라지는 사이드바를 만들어보겠습니다. 기본적으로 javascript혹은 jquery를 이용해 이벤트 처리를 해서 작업하는 경우가 많은데 HTML/CSS만 사용해서 열리고 닫히는 사이드바를 제작해보겠습니다. 디자인은 신경쓰지 않고 작성하는 점 양해바랍니다. 설계 Html/css만 사용해서 열리고 닫히는 기능을 구현하기 위해서는 input태그를 사용해야합니다. 체크박스와 라벨을 연결해놓으면 라벨을 클릭했을 때 체크박스가 선택되는 점을 이용하는 것입니다. 체크박스가 선택되었을 경우 사이드바를 보여주고 숨기는 css코드를 작성해주겠습니다. label버튼 만들기 .side_toggle_btn::before { content: ">"; display: inline.. 2020. 6. 6. Flexbox로 반응형 레이아웃 만들기 Flexbox란? 기존에 컨텐츠들을 수평으로 배치할 때 float 혹은 inline-block 로 마크업할 때의 불편함을 해결하여 쉽게 배치할 수 있도록 CSS3에 추가된 방식입니다. 크게 컨텐츠들을 감싸는 Flex Container 와 각 컨텐츠들인 Flex Item으로 구성되어있어 각 요소에 적절한 속성과 값을 적용해서 원하는 레이아웃을 구성할 수 있습니다. Flexbox 지원 범위 Flexbox는 좋은 기능인 만큼 이전 버전의 브라우저에서 지원을 안해주기도 합니다. 실제 서비스를 개발하기 위해선 이를 잘 알고 써야합니다. IE는 9버전 이하는 지원을 하지 않으며, 10,11에서도 버그가 존재합니다. 모바일 웹에서는 지원을 잘해주고 있습니다. 서비스가 어떤 브라우저까지 지원하는지에 따라 적절하게 사용.. 2020. 6. 6. HTML CSS로 이미지 슬라이드, 롤링배너 , 캐러셀 만들기(owlCarousel.js) owlCarousel.js 라는 라이브러리를 통해서 이미지 롤링, 케러셀, 슬라이드를 만드는 방법을 정리해보겠습니다. 우선 사용할 라이브러리는 https://owlcarousel2.github.io/OwlCarousel2/ 입니다. 위와 같은 형태의 이미지 슬라이더를 만들어보려고 합니다. 오직 html,css,js 만 사용해서 만들기 때문에 어디에서든 사용하실 수 있습니다. HTML 이미지 슬라이더를 만들기 위한 구조는 아래와 같습니다. owl-carousel, owl-theme은 캐러셀을 사용하기 위해 라이브러리에서 정의된 클래스입니다. 위 코드처럼 두 스타일 파일을 알맞은 경로에 넣고 link태그를 통해서 로드해야합니다. 준비가 끝났으니 알맞은 아이템들을 넣어줍니다. 스포츠클럽과 함께 새로운 여행문화.. 2020. 6. 5. CSS를 이용한 말줄임 처리 방법 말줄임 처리란? 말줄임 처리는 말 그대로 내용의 길이가 길어졌을 때 일정 부분만 보여주고 '...' 과 같은 표시로 뒤에 더 내용이 있다는 것을 표현해주는 처리입니다. 시각적으로 너무 많은 내용을 보여주면 가독성도 떨어지고, 디자인적 통일성을 떨어트리게 되기 때문에 많은 웹서비스에서 필수적으로 사용하고 있는 기능입니다. 일반적으로 말줄임 처리라고 하면 아래와 같이 한줄 말줄임 과 여러줄 말줄임 이렇게 두가지가 있다고 생각합니다. See the Pen ZEQzMqN by 13akstjq (@13akstjq) on CodePen. 하지만 이제는 웹에서 발생하는 수많은 케이스에도 동일한 UI를 제공할 수 있도록 대응 가능한 말줄임 처리가 많이 필요해진 것 같습니다. 1. 고정 사이즈 요소가 좌측에 올 때 많은.. 2020. 6. 2. 이전 1 2 다음
