분류 전체보기47 [CSS] Flex 마스터하기 Flex레이아웃을 정의할 때 특히, 수평정렬을 할 때 당연하다는 듯이 Flex 를 사용해서 구현하고는 합니다. 웹 페이지는 기본적으로 수직으로 구성되어 있으며 수직으로 스크롤하며 화면을 읽게 됩니다. HTML Elements들은 대부분 display: block 속성을 가지고 있기 때문에 수직으로 Element들을 수직으로 쌓는 것은 쉽게 가능하지만 수평으로 쌓는 것은 다릅니다. Flex를 알기 전에는 주로 요소에 float: left 속성을 주어 수평정렬을 구성하였었습니다.Flex를 사용하면 더 쉽게 레이아웃을 구성할 수 있으며 반응형 디자인에도 적합하다고 생각합니다.모든 속성을 다 배우기보다는 활용하기 좋은 속성을 위주로 진행해보겠습니다.Flex는 Flexible Box, Flex Box 라고도 불리.. 2024. 7. 27. [React] React-Hook-Form으로 폼 관리 편하게 하기 React-Hook-Form을 사용한 이유사소하게는 폼을 제출할 때 자동으로 발생되는 새로고침을 막기위해 당연한 듯이 작성하게 되는 event.preventDefault() 같은 보일러 플레이트를 사용하지 않을 수 있는 것 부터 관리해야할 상태코드를 줄일 수 있고 폼 작성을 위한 여러 기능들을 제공하고 비제어 컴포넌트 로 작성할 수 있으며 보다 선언적으로 코드를 작성할 수 있다. 제어 컴포넌트와 비제어 컴포넌트는 무엇일까?제어 컴포넌트는 일반적인 리액트 컴포넌트라고 할 수 있다. 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 하는 컴포넌트이다. state를 기반으로 하기 때문에 사용자가 입력을 할 때마다 리렌더링을 발생시킨다.비제어 컴포넌트는 리액트에 의해 값이 제어되지 않는 컴포넌트이다.. 2024. 7. 27. [JavaScript] Webpack 알아보기 웹팩은 Javascript 모듈 번들러다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원 (HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 번들러를 사용하면 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제를 해결할 수 있다.최근 사용되는 번들러들은 단순히 의존성 패키지들의 코드를 하나로 묶어 주는 것을 넘어 개발 생산성 자체에도 도움을 주고있다.webpack 설치npm에서 webpack과 cli에서 웹팩을 사용할 수 있게 해줄 수 있게 설치한다.$ npm i webpack webpack-cli --save-dev 다음과 같이 webpack 명령어로 번들링을 실행할 수 있다.$ webpackwebpack.. 2024. 7. 27. [2023 회고] 나에게 있어 2023년 한 해는 개발자가 되기 위한 첫 발걸음을 땐 해였다.기술적인 내용보다는 2023년 한 해동안 내가 했었던 생각들과 현재 생각을 솔직하게 적어보려고 한다.나는 어렸을 때부터 컴퓨터를 좋아하였고 꿈도 개발자였던 나였기에 전공도 컴퓨터공학을 하였지만사정이 생겨서 꿈을 접고 다른 일들을 하며, 어쩌면 방황을 하고 있던 내가 다시 개발자의 꿈을 가지고 돌아온 해였다.개발자가 되기 위해2023년 초 에는 어떻게 하면 프론트엔드 개발자가 될 수 있을까? 라는 고민을 많이 하였고 독학하면서 정보를 많이 탐색하였다.독학으로도 할 수 있다, 컴퓨터공학 전공을 해야 한다, 부트캠프를 들어가야 한다. 정말 많은 의견들을 들었었고현재 내 상황에 어떤 것이 잘 맞을까 고민 끝에 부트캠프가 맞을 것 같다는 .. 2024. 7. 27. [React] 리액트의 메모이제이션 메모이제이션 (memoization)이란메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다. (위키 백과) 쉽게 이야기하면, 컴퓨터의 입장에서 비용이 높은 함수의 호출 결과를 저장해 두었다가, 완전히 동일한 입력으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 두었던 결과를 반환해주는 것이다.리액트의 메모이제이션리액트에서는 부모 컴포넌트가 변경되면 자식 컴포넌트도 무조건 리렌더링된다. React.memo 를 사용해 컴포넌트를 래핑하면 렌더링이 일어나지 않는다. 렌더 단계에서 컴포넌트를 비교를 거쳤지만 .. 2024. 7. 27. [React] React의 Hook들 알아보기 함수형 컴포넌트에서 상태를 사용하거나 생명주기 메서드를 대처하는 등의 다양한 작업을 하기위해 Hook 이란 것이 추가됐다.useState함수형 컴포넌트 내부에서 상태를 정의하고 관리할 수 있게 해주는 훅이다. 클로저를 사용함으로써 외부에 해당 값을 노출시키지 않고 오직 리액트에서만 쓸 수 있고 함수형 컴포넌트가 매번 실행되더라도 useState에서 이전의 값을 정확하게 꺼내 쓸 수 있다.const [count, setCount] = useState(0)return ({count} setCount(count + 1)}>+ setCount((prev) => prev - 1)}>- setCount(0)}>reset); useState의 인수로는 초기화 값을 넘겨주고 반환값으로 배열을 받는다. 반환받은 배열의 .. 2024. 7. 27. 이전 1 2 3 4 ··· 8 다음
