전체 글 117

[React] Hooks 사용하기 - useEffect (업데이트, 마운트 시 함수 실행)

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요 https://ordinary-code.tistory.com/120 [React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기 🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전 ordinary-code.tistory.com useEffect란? Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다. useEffect는 class 생명주기에서 componentDidMount와 componentDidUpd..

FrontEnd 2021.10.21

[React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

FrontEnd 2021.10.20

[Notion]노션이 접속안될 때 확인하는 방법 (노션 서버 불안정 체크)

미국에서 서비스를 시작한 노션이 현재 사용자가 2000만 명 이상 사용하는 엄청 큰 기업 업무 협업툴로 성장하고 있다. 그중 노션은 미국에 이어 두번째로 빠르게 성장하고 있다고 한다. 노션의 사용자가 많아지면서 클라우드 기반의 서비스이다 보니, 노션에 접속이 되지 않는다는 글들이 가끔씩 보이기 시작했다. 이런 사람들이 이제 내 컴퓨터이가 문제인지 노션의 문제인건지 알 수가 없이 노션이 접속이 안되면 멘붕이 오곤 했는데 이번 노션 홈페이지에 노션 서비스 상태에 대한 정보를 제공해주는 것을 확인했다. 👩‍💻노션 서비스 상태 확인하기 노션은 클라우드 기반의 서비스라서 서버에 접속이 안되면 정보를 보지 못하는 큰 단점이 있긴 하다. 노션에 접속했을 때 접속이 안되면 노션 서버 문제인지 내 컴퓨터 문제인지 알 수..

etc./Notion 2021.10.14

[JANDI] 잔디에서 깃헙(github) Organization Repository 연동하는 방법

bitbucket에서 다시 메인 git 저장소를 github으로 옮기면서 사내 메신저인 JANDI에서 커밋 메시지 알람을 받아보려다 보니, organization Repositiory가 보이지 않아서 방법을 찾아보았다. 🌱잔디 커넥션 잔디의 경우 기업 메신저 포지션으로 나온 서비스라 타 서비스와 연동이 가능하다. 구글 캘린더, JIRA 등과 같은 자주 쓰는 서비스는 이미 연동이 가능하도록 서비스가 구현되었고 오늘은 github 연동을 진행해보려고 한다. 🌴잔디(JANDI)와 깃 헙(github) 연동하기 잔디 커넥트에서 github에서 연동 추가하기를 클릭하면 로그인을 하라고 먼저 나오게 된다. 로그인을 해주면 github 연동 창이 뜨게 된다. 알림을 받고자 하는 Repository를 선택해서 연동을 ..

etc. 2021.10.07

[Notion] 노션에서 구글캘린더를 연동해보자 - Indify 이용하기

노션에서 예전부터 구글 캘린더를 같이 쓰는 방법은 없을까 고민 많았을 텐데 이번 Indify라는 홈페이지가 생겨서 해당 홈페이지를 이용하면 손쉽게 나의 구글 캘린더를 노션에 연동할 수 있다. ✨Indify 접속하기 Indify에서는 구글 캘린더 외에도 다양한 위젯들은 제공하는데, 오늘은 먼저 구글 캘린더를 연동해보도록 하겠다. 먼저 홈페이지에 접속해서 회원가입이 필요하다. 회원가입은 구글 아이디로 손쉽게 가입이 가능하다. https://indify.co/ Indify – Notion Widgets Level up your Notion docs with widgets. Fully customizable, and seamless to set up. indify.co 💎Indify 간단 사용방법 Indify를..

etc./Notion 2021.09.30 (2)

[react 간단 예시] input box에 focus 후 초기화 하는 방법 (리액트 ref 이용하기)

react Ref 이용하기 react에서 직접 DOM에 접근해서 작동시켜야하는 때가 있다. 오늘 가져온 경우는 input에 focus를 줘보는 예시를 만들어보았다. react의 ref를 사용하면 컴포넌트 내부에 있는 DOM에 직접 접근을 할 수 있다. 예시 코드 가장 기본적인 App 컴포넌트를 하나 만들어주었다. 이름을 입력받을 input과 버튼을 클릭하면 input 내용을 초기화한 뒤 포커스를 해주는 버튼을 만들어 보도록 하겠다. import {Component} from "react"; class App extends Component { constructor(props) { super(props); this.state = { name:'이름' } } inputFocus = () =>{ this.se..

FrontEnd 2021.09.15 (2)

[Javascript] 자바스크립트 표현식 비구조화할당(Destructuring assignment) 이해하기

ES6에서 등장한 자바스크립트 비구조화 할당이 추가되었다. 오늘은 배열과 객체에서 중복을 없애주고 좀 더 간편하게 값을 이용할 수 있는 비구조화할당에 대해서 알아보겠다. 🔗비구조화 할당이란? 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 명칭 합니다. 기본 문법 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다. 아래처럼 선언하면 결과는 동일하게 나오게 된다. let [x,y] = [1,2]; console.log(x); console.log(y); let {x,y} = {x: 1, y:2}; console.log(x); ..

FrontEnd/Javascript 2021.09.12

[Notion]노션 주요 일정 알람 받는 방법 리마인더 활용하기 (노션 반복알람)

노션에서 일정관리나 TODOLIST를 관리하는 분들이 많아졌다. 중요한 일정의 경우는 잊지 않게 알람이 필요한 경우가 있다. 노션에서는 알람 기능을 제공한다. 노션 리마인더 리마인더를 추가하면 특정 작업에 대한 알림을 받아 볼 수 있다. 업무의 마감일이 있을 경우 리마인더를 이용해서 알람을 받아 잊어버리는 것을 방지합니다. /리마인더를 입력하면 리마인더를 삽입할 수 있다. 노션 리마인더 사용법 라미인 더를 이용하면 내가 원하는 알람 날짜를 설정할 수 있다 마감일을 잃어버릴 것 같을 때 리마인더를 이용해서 알람 받을 시간을 설정해주자. 리마인더를 이용하면 알람을 언제 받을지를 설정할 수 있다. 원하는 날짜와 시간을 설정하고 리마인더를 눌러준 뒤 언제 알람을 받을지를 설정해줄 수 있다. 알림은 이벤트 정각,..

etc./Notion 2021.09.07

[HTML/iframe] 웹 홈페이지 페이지에 구글 지도 연동 하는 방법

홈페이지를 만들다 보면 지도를 연동해야 되는 일이 있을 때가 있다. 지도에서 다양한 마커를 지정한다던지 지도에서 특정 기능을 넣어야 된다고 하면 카카오 지도처럼 API를 이용해서 홈페이지에서 지도를 연동해서 사용해도되지만, 가장 간단하게 그냥 주소 위치 정도만 보여주면 된다고 한다라고 하면 구글 지도를 이용하면 매우 간단하게 홈페이지에 지도를 표시할 수 있다. 🧭구글 지도 웹 홈페이지에 넣어주는 방법 구글 지도 정보 가져오기 https://www.google.com/maps Google Maps Find local businesses, view maps and get driving directions in Google Maps. www.google.com 먼저 구글 맵 사이트에 접속해서 내가 원하는 위치..

FrontEnd 2021.09.03

[노션/Notion] 노션에 지도 데이터를 넣는 방법 (구글 지도 이용)

오늘은 노션에서 지도를 넣어보는 방법에 대해 알아보려고 한다. 지도 데이터의 경우 회사 소개 페이지를 만든다던지, 혹은 나의 맛집 지도를 노션 페이지로 만든다고 하면 지도 데이터가 필요할 때가 있다. 다른 메모어플과 다르게 노션은 지도도 손쉽게 넣을 수 있다. 🧭노션 페이지에 지도 넣는 방법 구글 지도 접속하기 먼저 지도는 구글 지도를 넣어보도록 하겠다. 먼저 구글지도에 접속을 해보자. 구글 지도를 포털에 검색하던지 아래 링크를 눌러서 접속하자 https://www.google.com/maps/@36.6291738,128.3210697,7.72z 구글 지도 내가 원하는 위치 찾기 구글 지도에 들어가면 왼쪽 상단에 주소 검색이 가능하다. 내가 노션에 넣을 주소를 먼저 검색을 한다. 내가 원하는 장소를 선택..

etc./Notion 2021.09.02