본문 바로가기

전체 글253

리액트 훅 , 생명주기 import { useState } from "react";function App() { const [count, setCount] = useState(0); return ( setCount(count+1)}>증가 {count} setCount(count-1)}>감소 );}export default App; 간단한 프로그램이다.증가를 누르면 가운데 숫자가 1씩 증가하고, 감소를 누르면 1씩 감소한다. 2019년 2월 이전에는 Hook이 없었다.Class 방식에서는 생명주기가 따로 있었고 클래스형에서는 setState 방식으로 사용했다. 클래스방식 함수에 대응되는 use... 함수들이 존재하므로 염두해두고 공부하고자 기록해논다. 2024. 5. 25.

간단한 GitHub 조회 프로그램 예제 요즘 리액트에 관심이 많이 생겨서 틈틈히 공부하는 중입니다.토요일 아침 간단한 GitHub api 를 이용한 조회 프로그램을 만들어 봄. 소스import React, { useState } from "react";function App() { const [keyword, setKeyword] = useState(''); const [data, setData] = useState([]); const fetchData=()=>{ fetch('https://api.github.com/search/repositories?q=${keyword}') .then(response => response.json()) .then(data => setData(data.items)) .catch(e.. 2024. 5. 25.

페이지 라우팅 라우팅이란? 라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어다. "경로를 진행하는 과정"이라고 이해하면 되겠다. IT 개발자들은 프로젝트를 참여해 진행하다 보면 네트워크 라우팅이라는 말을 자주 듣게 된다. 사실 라우팅은 반드시 IT네트워크 만을 의미하지는 않으며, 상당히 포괄적인 개념이다. 개념 라우팅은 일상생활에서 쉽게 접할 수 있다. 미국에 살고 있는 친구에게 스마트폰 메세지를 를 보낸다고 하면 내 폰에서 친구 폰으로 디렉트로 정보가 전달되는 것이 아니라 중간중간 설치된 "라우터"라는 장비를 거치게 된다. 라우터를 거치는 이유는 데이터를 한 번에 전송하기에는 물리적 거리가 멀다. 쉽게 직행 노선이 존재한다면 좋겠지만 직행을 이용하는 횟수가 적다면 굳이 직행 노선을 만들 이유가.. 2024. 3. 30.

리액트 useRef 으로 돔 요소 조작하기 리액트 useRef 으로 돔 요소 조작하기 https://react-ko.dev/reference/react/useRef useRef – React The library for web and native user interfaces react-ko.dev 리액트의 Ref를 이용하면 돔 DOM 요소들을 직접 조작할 수 있다. 이 기능을 이용해 돔 요소를 제어하는 포스팅. 리액트에서는 useRef 함수를 이용해 Ref 객체를 생성한다. 예제) App.js는 생략한다. import React, { useState, useRef } from "react"; function Body() { const [text, setText] = useState(""); const textRef = useRef(); const.. 2024. 2. 24.

스프레드 연산자 "...변수명" (배열, 문자열, 객체) 스프레드 연산자 "...변수명(반복 가능한 객체)" 리액트를 공부하다가 "..." 이란 기호가 보여 몹시 당황했다. 전문 프런트 개발자가 아니기도 하고, 프로젝트마다 이것저것 프로그래밍 언어를 바꿔가며 일을 하다 보니 그럴 수 있다는 생각에 틈이나 정리해 본다. 반복이 가능한 객체에서 값을 개별 요소로 분리하는 스프레드-연산자. 스프레드 연산자는 "..." 기호로 표기한다. 전개 연산자. 스프레드 연산자를 사용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 편리하게 분리할 수 있다. 스프레드 연산자와 배열, 객체 사용방법 예제 배열의 경우 예) let arrA = [1, 2, 3]; let arrb = [...arrA, 4, 5, 6]; console.log(arrb); 결과.. 2024. 2. 18.

프로미스(Promise) 객체를 이용해 비동기 처리하기 프로미스(Promise) 객체를 이용해 비동기 처리하기 개요 프로미스는 비동기 처리를 목적으로 제공되는 자바스크립트 내장 객체다. 프로미스는 Date 객체와 비슷하게 특수 목적을 위해 다양한 기능을 추가한 객체다. Promise 객체를 이용하면 CallBack 함수를 이용한 비동기 처리를 편하고 쉽게 수행할 수 있다. 프로미스의 비동기 작업은 진행 단계가 3가지 상태로 나누어서 관리/실행 된다. 대기 Pending : 작업을 완료하지 않은 상태 성공 Fullfilled : 작업을 성공 실패 Rejected : 작업이 어떤 이유로 실패 대기 상태에서 작업을 성공하게 되면 resolve 라고 한다. 작업을 해결하면 성공 상태가 된다. 만약 실패가 발생되면 reject 상태 된다. 실습 및 예제코드 프로미스 .. 2024. 2. 18.

리액트 useReducer 2024년 새해. 진지하게 리액트 공부를 시작했다. Hook은 낚아채다는 뜻이다. 프로그래밍에서는 어떤 시점에 일어나는 순간을 인지하고 프로그래머가 그 지점에 원하는 기능을 구현하는 정도로 이해해도 될듯하다. 리액트에서 Hook 으로 불리는 카테고리 안에는 많은 기능들이 존재하는데, 이번 포스팅은 useReducer 다. 리덕스와 거의 비슷한 기능이지만 리덕스를 본격적으로 공부하기 전에 연습하고 기억해두려고 한다. 페이지 상단에 임포트하고 import React,{useReducer} from "react"; 사용할 펑션을 구현한다. 리액트는 변수와, 그 변수를 컨트롤하는 함수 패턴. useState도 동일. function reducer(state, action){ //action.type 값에 따라 .. 2024. 1. 27.

드디어 먹어본 맥켈란 12년 더블 캐스크 - The Macallan Single Malt The Macallan Single Malt 맥켈란 위스키라고 들어보셨나요? 우리나라에서는 조니워커, 시바스리갈, 잭다니엘 등이 유명한데 위스키에 대해 어느 정도 관심이 있으신 분들은 맥켈란이라는 위스키에 대해 잘 아시리라 예상됩니다. 소문만 무성했던 맥켈란을 드디어 먹어보게 되어 이렇게 포스팅을 올립니다. 제 옆자리에서 일하시는 동료분께서 일본 여행을 가신다며 딱히 살게 없으니 위스키하나 사줄까요?라고 고마운 제안을 하셔서 바로 맥켈란 12년 더블캐스트를 구입해와 주세요라고 부탁했습니다. 한국에서는 재수 좋으면 10만원대에 구할 수 있으나 여건 쉽지 않습니다. 물량도 얼마 없고 어디서 판다는 소문이 들리면 이미 없는 경우가 허다합니다. 보통 12만원 정도에 구할 수 있기는 한데, 역시나 이것도 금세 없.. 2023. 11. 21.

꽤 쓸만한 짭플워치 울트라맥스(ZORDAI ZD8 Ultra Pro) 오늘은 짭플워치라 불리는 조다이 ZD8 울트라 프로 제품을 포스팅. 삼성 갤럭시 워치와 애플워치를 2~3 달간 각각 사용해 본 결과를 공유해 본다. 스마트워치를 꽤나 사용하는 편인데 부지런한 사람들에게나 유용하다고 단언한다. 평소 운동을 하지 않거나 건강에 큰 관심이 없다면 자주 사용해 봐야 카톡메시지나 보고 가끔씩 사람 없는 곳에서 워치로 통화하는 수준의 기능 정도만 대부분의 사람들이 사용하지 않을까 싶다. 내 경우는 나름 운동도 하고 활동량이 많은 편이다. 매일 5km 정도 러닝을 하고 하루 10,000보 이상 걷기를 하며 나름 시계를 좋아하고 패션 아이템으로 거의 매일 사용하는 편. 그럼에도 20 ~ 100 만원 정도의 스마트워치가 그 닥 크게 유용함을 못 느끼곤 한다. 애플이나 삼성 제품을 사용해.. 2023. 11. 21.

이전 1 2 3 4 5 ··· 29 다음

티스토리툴바