안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 전체 아티클139 화살표 함수는 대체 언제 사용해야할까? 목차 · 객체의 메서드에서 · 프로토타입에서 · 이벤트 핸들러 함수에서 · 화살표 함수의 리팩토링 · 화살표 함수의 장점 · 화살표 함수의 단점 · 레퍼런스 JavaScript ECMAScript 6부터 도입된 화살표 함수(arrow function)은 function 키워드를 사용하여 함수를 정의하는 것보다 적은 타이핑을 요구하고 깔끔한 코드를 작성할 수 있으며, React 클래스 컴포넌트의 생성자에서 이벤트 핸들러 함수를 바인딩하지 않아도 된다는 장점이 존재한다. 자바스크립트에서 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 동적으로 결정된다. 즉, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 결정된다. 보통 자바스크립트에서 this가 가리키는 것은 전역객.. 2023. 3. 10. 경험의 미학 목차 · 시간을 낭비하고 있었던 것 같은데 · 모든게 새로웠다. · 시간 낭비였을까? · 내 강점은 무엇일까? · 쓸데 없다고 생각했는데, 아니었다. 시간을 낭비하고 있었던 것 같은데 군 전역을 하고, 대외활동에서 쌓았던 모든 것들이 시간 낭비처럼 생각이 들었었다. Ruby on Rails를 꿈꾸면서 동시에 프론트엔드 개발자 진로를 생각하고 있었는데, 전역하고 세상에 나오자마자 프론트엔드의 빠른 기술 변화로 인해 React 라는 기술 스택을 처음 들어보았다. Ruby on Rails는 국내에서 잠시나마 인기몰이를 하고 사라진 후였다. 디자인에 대해서 학습하고, 배워보면서 동시에 개발도 진행을 했다. 디자인과 개발이라는 접목점이 너무나도 좋았고, 그렇게 시각적으로 보여지는 사용자 환경을 고려하는 것이 너무.. 2023. 3. 9. 리덕스(Redux) 미들웨어 레퍼런스 참조 및 작성 중 👏🏻 2023. 3. 8. 리덕스(Redux) 그리고 RTK(Redux Tool Kit)의 등장 목차 · 리덕스(Redux) · 리덕스(Redux)를 왜 사용하고 있을까? · 리덕스(Redux)의 단점 · 리덕스(Redux)의 장점 · 너무 복잡한 Redux, RTK(React Tool Kit)의 등장? · 레퍼런스 리덕스(Redux) 먼저 리덕스는 Flux 아키텍쳐의 구현체로, 대형 MVC 어플리케이션에서 종종 나타나는 데이터 간 의존성 이슈, 즉 연쇄적인 갱신이 뒤얽혀 데이터의 흐름을 예측할 수 없게 만들었던 문제를 해결하기 위해서 고안이 되었다. 잘 알려진 사례 중 하나인 2014년 컨퍼런스에서 소개된 페이스북의 채팅 버그에서 읽지 않은 메세지 상태를 나타내는 카운트를 확인하고 사용자가 메세지를 확인해도 어느새 좀비처럼 카운트 숫자가 되살아나면서 사용자를 괴롭히던 버그가 있었다. 개발자가 버그.. 2023. 3. 8. 함수형 컴포넌트와 클래스 컴포넌트 리마인드 목차 · 왜 함수형 컴포넌트를 선호할까? · 컴포넌트 목적에 따른 종류 (컨테이너 컴포넌트, 프레젠테이셔널 컴포넌트) · 컴포넌트의 차이 (State, Props, 이벤트 핸들링) · Life Cycle 현재 리액트 공식문서에서는 함수형 컴포넌트와 훅(hook)을 함께 사용하는 것을 권장하고 있다. 왜 함수형 컴포넌트를 선호할까? 요즘은 많은 개발자들이 클래스형 컴포넌트보다 함수형 컴포넌트 + Hook을 사용한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에, 상대적으로 복잡한 UI 로직을 갖고 있는 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려준다. Hook들을 필요한 곳에 사용하며 Logic의 재사용이 가능하다는 장점이 있어.. 2023. 3. 5. React JSX 개념에 대한 리마인드 목차 · JSX(JavaScript XML) · JSX 문법 · 자바스크립트 표현식 · 일반 조건문 대신 삼항연산자 사용 · React DOM은 HTML Attribute 이름 대신 Camel-case Property 명명 규칙을 사용한다. · JSX 내에서의 주석 사용 · 마치며 · 레퍼런스 JSX(JavaScript XML) · JavaScript에 XML을 추가해 확장한 문법이다. · JSX는 리액트로 프로젝트를 개발 할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. · 브라우저를 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. · JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다. · 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가.. 2023. 3. 5. 이전 1 ··· 9 10 11 12 13 14 15 ··· 24 다음
