분류 전체보기
UI 디자인 패턴 구현
Modal기능 구현Tab기능 구현Tag기능 구현Toggle기능 구현Autocomplete기능 구현Modalimport { useState, useRef } from "react"; import styled from "styled-components"; export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const refBackdrop = useRef(null); const openModalHandler = (event) => { event.preventDefault(); setIsOpen(!isOpen); }; return ( {isOpen ? "Opened!" : "Open Modal"} {isOpen ? ( { if (e..
CSS의 변천사
CSS의 변천사CSS 전처리기 (CSS Preprocessor)CSS 전처리기의 대표적인 예, SASS (Syntactically Awesome Style Sheets)CSS 방법론CSS 방법론의 대표적인 예, BEMCSS 전처리기와 BEM의 고질적인 문제점CSS-in-JS의 등장CSS 방법론들의 특징과 장단점CSS의 변천사인터넷이 만들어진 이후 기술의 발달과 함께 사용자들은 다양한 환경(디바이스)에서 인터넷을 사용하기 시작했고, 이에 따라 개발자들의 CSS 작성 방식도 꾸준하게 진화해 오고 있다. 프로젝트의 규모나 복잡도가 점점 커지고 함께 작업할 팀원 수도 많아짐에 따라 CSS를 작성하는 일관된 패턴이 없는 것은 개발자들에게 큰 걸림돌이 되었다. 또한 다양한 디바이스들의 등장에 따라 웹 사이트는 다양..
JSON
JSON(JavaScript Object Notation)JSON의 탄생 배경JavaScript에서의 JSON 변환JSON의 기본 규칙JSON(JavaScript Object Notation)JSON은 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. JavaScript 뿐만 아니라 많은 언어에서 범용적으로 사용하는 유명한 포맷이기도 하다.JSON의 탄생 배경네트워크를 통해 데이터를 주고 받으려면 데이터를 보내는 수신자와 받는 송신자가 사용하는 프로그램이 같거나 문자열처럼 범용적으로 읽을 수 있어야 한다. 하지만 JavaScript에서 객체는 문자열로 변환하면 [object Object]라는 결과를 리턴하기 때문에 제대로 된 데이터 송수신이 불가능하다.이 문제를 해결하는 방..
재귀
재귀?재귀로 문제 해결하기1. 문제를 작게 쪼개기2. 반복하여 문제를 가장 작은 단위로 쪼개기3. 문제 해결하기재귀는 언제 사용할까?재귀의 활용재귀적으로 사고하기1. 재귀 함수의 입력값과 출력값 정의하기2. 문제를 쪼개고 경우의 수를 나누기3. 단순한 문제 해결하기4. 복잡한 문제 해결하기5. 코드 구현하기재귀?재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.재귀의 사전적 정의는 원래의 자리로 되돌아오는 것을 의미하며, 위의 이미지처럼 원래의 상태로 계속해서 되돌아오는 것으로 해석할 수 있다. 코드로 작성하면 아래처럼 표현할 수 있다.function recursion () { console.log("This is"); console.log("recursion!"); recursion(); // 자기 ..
클라이언트 Ajax 요청
상태 끌어올리기 (Lift State Up)React 데이터 흐름단방향 데이터 흐름을 해치지 않는 React의 해결법간단한 방법 : 상태 변경 함수를 props로 전달Effect HookSide Effect (부수효과)Pure Function (순수 함수)React의 함수 컴포넌트React 컴포넌트에서의 Side EffectEffect Hook(useEffect)조건부 effect 발생주의사항Data Fetching: 필터링 예제 살펴보기1. 컴포넌트 내에서 필터링2. 컴포넌트 외부에서 필터링fetch를 이용한 AJAX 요청 보내기AJAX 요청이 매우 느릴 경우엔, 로딩화면상태 끌어올리기 (Lift State Up)React 데이터 흐름앞서 배웠듯 React 개발은 컴포넌트부터 개발을 시작해 하나로 모아..