전체 글74 [Tailwind CSS] Tailwind CSS 알아보기 (with React) Tailwind CSS 알아보기 (with React) # Tailwind CSS란 Tailwind CSS란 CSS를 쉽게 다룰 수 있게 해주는 CSS 프레임워크이다. 원래 React 프로젝트에 CSS를 적용하기 위해서는 CSS 파일을 따로 지정하거나, inline style으로 CSS를 적용하지만 Tailwind CSS는 className으로 스타일을 지정한다. 예시를 위해 개인 프로젝트의 코드 일부를 가져왔다. className로 작성된 것이 전부 Tailwind CSS로 작성한 스타일이다. CSS의 flex, width, height, overflow 등등의 요소들을 className으로 적어준 것이다. # 장점1 : 귀찮음 해결 사용해보고 가장 장점이라고 느꼈던 건 당연히 간단함이다. class의.. 2022. 12. 23. [React] useParams 이용하기 useParams 이용하기 useParams는 react-router-dom에서 지원하는 함수로, URL의 매개변수의 키/값 쌍의 개체를 리턴한다. 동적 라우팅 방식으로 페이지 이동 시 URL 속의 값을 이용해야 할 때 유용하다. 예시로 사용법을 알아보자. App.js import React from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./Home"; import User from "./User"; function App() { return ( ); } export default App; 우선 App.js에서 routes를 작성해준다. User/:id라고 작성하면 User 페이지를 동적으로 라우팅할 수 .. 2022. 12. 22. [React] 페이지 이동 후 스크롤 유지하기 페이지 이동 후 스크롤 유지하기 리액트로 프로젝트를 만들던 중 페이지 이동 후 스크롤이 유지되지 않는 문제가 있었다. 메인페이지에서 다른 페이지로 넘어갔다가 다시 메인페이지로 돌아오면 스크롤 위치가 페이지 가장 위로 가있었음🤔 어떻게 하면 스크롤 위치를 유지할 수 있을까 며칠 동안 고민한 결과 다행히 해결했다. 해결 방법은 다음과 같다. 1. 페이지 이동 직전 sessionStorage에 스크롤 위치 저장하기2. 다시 메인페이지로 돌아왔을 때 sessionStorage에 저장된 스크롤 위치 불러오기 (useLayoutEffect) 1. 메인페이지의 HTML 부분에 스크롤 위치를 저장하는 함수 만들기 return ( sessionStorage.setItem("y", window.pageYO.. 2022. 12. 21. [React] useEffect와 useLayoutEffect의 차이 useEffect와 useLayoutEffect의 차이 (+ DOM) # useEffect와 useLayoutEffect의 차이 : 실행 순서 React hooks 중 useEffect와 useLayoutEffect는 비슷한 역할을 하지만 실행 시점에 차이가 있다. 우선 이 둘의 차이를 설명하기 전에 DOM에 대해 먼저 짚고 넘어가자. 브라우저 렌더링 엔진은 HTML 문서를 DOM 트리로 만든다. 그리고 DOM 트리를 이용하여 화면의 레이아웃을 계산하고, 계산된 결과를 화면으로 보여준다. 이 작업을 렌더링이라고 한다. (브라우저 렌더링과 DOM 자세한 내용 : https://inthedev.tistory.com/16) # useEffect useEffect는 렌더링을 마치고 실행된다. 만약 useEffe.. 2022. 12. 20. [React] useRef 이용해서 스크롤 특정 위치로 이동시키기 useRef 이용해서 스크롤 특정 위치로 이동시키기 바닐라 자바스크립트에서는 querySelector를 사용하여 DOM에 접근하지만 React에서는 useRef로 DOM에 접근한다. 특정 컴포넌트에 동작을 수행하고 싶다면 useRef를 이용하면 된다. 그럼 useRef를 이용하여 NavBar의 글자 클릭 시 특정 위치로 이동하는 기능을 구현해보자! 우선, 전체 코드는 이렇게 생겼다. import React, { useRef } from "react";import One from "./One";import Two from "./Two";import Three from "./Three";export default function Home() { const scrollRef = useRef([]); c.. 2022. 12. 13. [네트워크] REST API REST API # API(Application Programming Interface)란? 프로그램들이 서로 소통하는 방법이다. interface라는 단어는 정형화된 버튼이라고 이해할 수 있다. 예를 들어, 우리는 컴퓨터를 사용할 때 글자를 입력하고 싶다면 키보드를 사용하고, 클릭을 하고 싶다면 마우스를 사용한다. 이때 키보드와 마우스가 interface이다. 우리는 interface를 통해 컴퓨터와 소통하고 있는 것이다. API 단어 속의 interface도 같은 의미이다. 프로그램들이 서로 데이터를 주고 받기 위해서는 소통 방법이 필요하다. 프로그램들이 서로 소통을 하기 위한 지정된 형식, 그것을 바로 API라고 한다. # REST API 그렇다면 REST API란 무엇일까? API의 종류 중 하나.. 2022. 12. 11. [Next.js] Next.js 알아보기 Next.js 알아보기 # Next.js란 Next.js는 React를 효율적으로 이용할 수 있도록 도와주는 React의 프레임워크이다. Next.js 서버 측에서 React 코드를 실행한 뒤 pre-rendering하여 HTML을 생성하여 브라우저에게 보낸다. 그 후 브라우저에서 React를 사용해 웹 페이지를 완성하는 과정으로 작동한다. Next.js의 특징을 살펴보며 어떤 장점이 있는지 알아보자. # Next.js 특징 1. SSR (Server Side Rendering) CSR 방식으로 렌더링되는 React와는 다르게, Next.js는 SSR 방식으로 렌더링할 수 있게 해준다. CSR은 첫 로딩 시간이 길고 SEO(검색 엔진 최적화)에 불리하다는 단점이 있는데, SSR을 이용하면 웹 페이지 접속.. 2022. 12. 8. [JavaScript] 자바스크립트의 비동기 처리 자바스크립트의 비동기 처리 callback, Promise, async/await # 동기, 비동기란? 동기(synchronous)란 동시에 일어나는 것, 비동기(Asynchronous) 동시에 일어나지 않는 것이라는 의미이다. 동기와 비동기란 일을 처리하는 순서라고 해석할 수 있다. 예를 들어, 청소를 한다고 치자. 세탁기와 청소기를 돌려야 한다. 어떻게 해야 하는가? 세탁기 작동 버튼을 눌러놓고 세탁이 끝날 때까지 기다렸다가 청소기를 돌려야 하는가? 그건... 너무 비효율적이지 않은가?🤔 세탁기 작동 버튼을 눌러 놓고 세탁기가 돌아가는 동안 청소기를 돌리면 된다. 세탁기와 청소기는 각자 돌아가니까! 여기서 동기, 비동기 개념이 나온다. 하나가 끝나야 그 다음 일을 하는 것을 동기적 처리라고 한다. 세.. 2022. 12. 5. 이전 1 ··· 4 5 6 7 8 9 10 다음
