개발 공부 일지

boolean 값에 따라 렌더링 유무가 결정이 된다면 &&연산자를 사용하는게 더욱 효율적이라고 배웠다. 스터디 실습 과제로 숫자야구를 구현했고, 배운대로 && 연산자를 잘 사용하고 조건에 따라 렌더링도 잘 되는 것을 확인 할 수 있었다. 하지만 입력창 하단에 보이는 난데없는 0의 등장…😭 F12를 눌러 개발자 모드에서 html 파일을 봤을 때에 저 0이 단순 텍스트로 나와서 원인을 찾는데에 애먹었었다. 그리고 곧 이게 && 연산자를 조건부 렌더링 시 잘못 사용한 예제라는 것을 파악할 수 있었다. 🎯 원인 분석 리액트 공식문서에 있는 조건부 렌더링에 대해 살펴보자. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 f..

when2Meet이라는 그룹 일정 조율 사이트를 리뉴얼하는 프로젝트에 참여하게 되었다. 해당 웹 사이트에서의 주요 기능 중 하나가 드래그 해서 되는 일정을 선택할 수 있도록 하는 건데, 그 부분이 핵심이라 팀장이 일주일 동안 공부하고, 간단하게 구현까지 해보라는 과제를 내주셨다! 그래서 이것저것 알아보니, 우리 프로젝트에 딱 알맞는 react-table-drag-select 라는 모듈이 있었으나 현재는 deprecated 되어 사용할 수 없었다. dragselect 라는 개인 개발자가 만든 모듈이나, 생명주기를 이용하여 구현을 하신 분도 있었다. 하지만, 리액트에서 생명주기 함수까지 사용하고 싶지는 않았고, 더 대중적인 모듈을 찾고자 했다. 그 와중에 발견한 한줄기 빛이 바로 react-selecto....

💻 리액트 리액트의 가장 큰 장점은 재사용성이다. 화면에 띄워지는 모든 요소들을 '컴포넌트'라는 조각의 형태로 쪼개어 필요한 곳마다 다시 쓸 수 있도록 한다. 이러한 특성 때문에 리액트에서는 "상속"의 개념 대신 "합성"의 개념에 보다 적합하다. 이 합성은 바로 JSX라는 새로운 꼴을 통해 이루어진다. 🎯 JSX란? : HTML과 비슷해보이지만, JS와 XML이 합쳐져 있는 꼴, XML 문법으로 코드를 작성하면 Babel과 같은 도구가 JS로 변환시켜준다. 📚 JSX 특징 열린 태그와 닫힌 태그는 쌍으로 존재 열린 태그와 닫힌 태그 사이에 아무것도 없는 경우 와 같이 한번에 열고 닫는 Self Closing HTML에서는 닫지 않는 input, br도 마찬가지로 닫아줘야한다, ex) , 하나의 컴포넌트에..

교재 리액트 네이티브의 강점 개발자 가용성 새로운 언어를 배울 필요 없는 개발 플랫폼 => why? 자바스크립트로 전부 이루어져있기 때문에 개발자 생산성 기존엔 안드로이드/iOS 팀 모두가 있어야 앱 개발 가능했었음 => react-native의 등장으로 개발자는 안드로이드/iOS 개발자로 제한 필요 X Redux의 사용으로 앱 전용 플랫폼 뿐 아니라 웹에서도 데이터 아키텍처 공유 가능 성능 다른 크로스 플랫폼들은 네이티브 앱의 성능을 못 따라가지만 리액트 네이티브는 이에 크게 뒤지지 않음 단방향 데이터 흐름 단방향 데이터 흐름을 통해 앱의 이해가 쉬움 지난 소개 글에서 설명함. 개발자 경험 (빠른 컴파일) 웹은 새로고침(F5)을 통해 빠른 컴파일이 가능, but 네이티브 앱에서는 컴파일 시간이 매우 긺..

교재 리액트 네이티브 '리액트'라는 자바스크립트 라이브러리를 사용해 자바스크립트를 이용해서 모바일 앱을 만드는 프레임워크 자바스크립트 언어 하나로 앱 전체를 만들어 코드의 재사용성을 높임 크로스 플랫폼 앱으로 전환하는 데 소요되는 시간 절약 컴포넌트 stateful vs stateless stateless 컴포넌트 : 생명주기 메서드 연결X, 자신만의 고유한 상태 유지 X => 화면에 보여지는 모든 데이터를 속성(=props)으로 받아야함 코드의 상단에는 'react'의 React를 가져와야 하며, 컴포넌트들(View, Text, ...)은 'react-native'에서 가져와야함 stateful 컴포넌트의 상태(=state)를 setState()로 바꿀 수 있으며, 메서드의 결과로는 반드시 render..