profile
애기 프론트 엔드 개발자
post-thumbnail

React.js - 컴포넌트 최적화

이 글은 react todo-list 프로젝트 기준으로 작성되었습니다.아래의 상황에서 컴포넌트 리랜더링이 발생한다.자신이 전달받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링 될 때forceUpdate() 함수가 실행될 때todo list

3일 전
·
0개의 댓글
post-thumbnail

React.js - 컴포넌트 스타일링

리액트에서는 아래 4가지 스타일링 방식을 가장 많이 사용한다.일반 CSS : 가장 기본적인 방식Sass : CSS 전처리기(pre-process) 중 하나로 확장된 CSS 문법을 사용하여 CSS코드를 더욱 쉽게 작성 할 수 있게 해준다.CSS Module : 스타일을

2022년 5월 20일
·
0개의 댓글
post-thumbnail

React.js - 리액트 훅에 대해 알아보자

Hook은 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서 동작하지 않으며, class를 사용하지

2022년 5월 2일
·
1개의 댓글
post-thumbnail

React.js - 리액트 개발환경 세팅하기 (feat. CRA)

리액트 프로젝트 개발환경 구축을 처음부터 설정하는 것은 굉장히 복잡하다. 그러나 create-react-app을 사용하면 쉽게 개발환경을 설정할 수 있다.create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모

2022년 5월 2일
·
0개의 댓글
post-thumbnail

‘Docker란 무엇인가’가 무엇인지 모르겠다

몇 년 전부터 도커는 핫한 기술이었으며, 지금은 거의 업계 표준이 되면서 개발자라면 필수로 알아야할 기술이 되었습니다. 이직 준비를 공부를 하기 위해 도커에 대해 검색 해보니, 아래의 내용들을 알 수 있었습니다.도커는 리눅스의 컨테이너라는 기술(LXC)를 이용한 소프트

2022년 4월 15일
·
0개의 댓글
post-thumbnail

React.js - DOM 엘리먼트 조작(ref, portal)

자바스크릅트에서 제공하는 API를 이용해 DOM 조작을 하는 것이 리액트 방식을 이용하는 것보다 더 쉬운 경우가 있다.이를 위해 리액트는 HTML 엘리먼트에 대한 DOM API에 접근할 수 있게하는 ref라는 도구를 제공한다.또한 페이지 안의 어떤 HTML 엘리먼트든

2022년 4월 13일
·
0개의 댓글
post-thumbnail

Vue.js - 동적으로 테이블 행 병합하기, 동적 rowspan(2)

이전 글과 이어집니다...이전 글에서 내가 구현한 화면은 백엔드에서 데이터를 받아 같은 날짜끼리는 행이 병합되는 테이블이었다.이번에는 아래의 조건을 추가된 화면을 작업해야했다.api 요청 시 백엔드에서 프론트로 위와 같은 형식의 데이터를 내려준다.사용자가 해당 검색 조

2022년 4월 12일
·
0개의 댓글
post-thumbnail

React.js - 리액트에서 이벤트 처리하기

리액트도 결국에는 자바스크립트이기 때문에 이벤트를 처리하는 방식은 순수 자바스크립트와 동일하다. 먼저 이벤트를 리스닝 후 리스너를 작성하는 것이다. 이벤트 리스닝 : 특정 엘리먼트가 어떤 이벤트를 수신할지 결정하는 것이벤트 리스너 : 이벤트 리스너란 이벤트가 발생했을

2022년 4월 11일
·
0개의 댓글
post-thumbnail

React.js - 컴포넌트 생명주기(Life Cycle)

리액트 컴포넌트 생명주기(Life Cycle) 리액트의 컴포넌트는 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

2022년 4월 5일
·
0개의 댓글
post-thumbnail

React.js - state

컴포넌트에 저장하여 사용(변경)가능한 데이터를 상태(state)라고 한다.props는 부모로 부터 전달받은 데이터이며 변경이 불가능한 읽기전용 데이터인 반면, state는 캡슐화 되어있어 비공개이며 컴포넌트에 의해 제어(변경)이 가능하다.클래스 내부에서 생성자를 만든다

2022년 2월 14일
·
0개의 댓글
post-thumbnail

React.js - component와 props

JS에서 함수는 코드를 더 명확하고 재사용 가능하게 해준다. 함수는 함수 안에 다른 함수를 호출 할 수 있는데, 이는 함수가 해야 할 일을 명확히 분리할 수 있게 해준다. 즉 모든 명령을 하나의 함수 안에 다 작성할 필요가 없고, 각 작업에 특화된 여러 함수를 만들어

2022년 2월 3일
·
0개의 댓글
post-thumbnail

Vue.js - 동적으로 테이블 행 병합하기, 동적 rowspan(1)

이 글은 사수 없는 주니어 프론트 개발자가 혼자서 구글링도 해보고 혼자 머리 싸매고 고민해서 겨우겨우 간신히 해결한 경험을 바탕으로 작성되었습니다.나는 JAVA 국비 6개월 과정을 수료하고, 어쩌다보니 프론트 개발자로 취업을 하게 되었다. 입사한 회사(현 직장)에서 내

2022년 1월 25일
·
0개의 댓글
post-thumbnail

React.js - 엘리먼트 렌더링

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알

2022년 1월 24일
·
0개의 댓글
post-thumbnail

React.js - JSX란?(정의, 장점, 문법, 특징 등)

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알

2022년 1월 19일
·
0개의 댓글
post-thumbnail

React.js - React란?

자바스크립트의 영역이 커지면서 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있는 시대가 왔다. 대규모 어플리케에션 중 프론트 사이드에서 돌아가는 애플리케이션 구조를 관리하기 위해 많은 프레임 워크들이 나왔다.이 프레임워크들은 주로 MVC, MVVM, MVW 아키택

2022년 1월 11일
·
0개의 댓글