분류 전체보기 (18) 썸네일형 리스트형 리프팅 스테이트 업(Lifting State Up) 정리 리프팅 스테이트 업은 React에서 사용되는 중요한 디자인 패턴으로, 하위 컴포넌트들 간에 데이터를 공유하기 위해 상태(state)를 상위 컴포넌트로 끌어올리는 기법이다.기본 개념정의: 여러 자식 컴포넌트에서 동일한 데이터를 사용해야 할 때, 그 데이터를 관리하는 상태를 가장 가까운 공통 부모 컴포넌트로 이동시키는 것목적:여러 컴포넌트 간에 일관된 상태 유지단방향 데이터 흐름 유지상태 관리 로직 집중화실제 예시: 온도 변환기아래는 섭씨와 화씨 온도를 상호 변환하는 컴포넌트에서 리프팅 스테이트 업을 적용한 핵심 코드다.1. 부모 컴포넌트에서 상태 관리function Calculator() { // 상태를 부모 컴포넌트에서 관리 const [temperature, setTemperature] = useS.. 디펜던시(Dependency)와 데브 디펜던시(Dev Dependency) 디펜던시(Dependency)의 심층 이해디펜던시는 애플리케이션이 실행 시점에 필요한 외부 패키지이다. 런타임 필수 요소: 애플리케이션이 실행되기 위해 반드시 필요한 코드배포에 포함: 프로덕션 서버에도 설치되어야 함 사용자 경험에 직접 영향: 이 패키지들이 없으면 애플리케이션은 정상적으로 작동하지 않음예를 들어, React로 만든 웹 애플리케이션에서 React는 화면을 렌더링하기 위한 필수 패키지이므로 디펜던시이다. 사용자가 웹사이트를 방문할 때 React 코드가 브라우저에 로드되어야 하기 때문 데브 디펜던시(Dev Dependency)의 심층 이해데브 디펜던시는 개발 과정에서만 필요한 도구들이다. 개발 도구: 코드 작성, 테스트, 빌드 등을 돕는 도구.배포에서 제외: 최종 사용자에게 전달되는 코드에는 .. TextInput 에서 영어가 대문자로 시작할 때 autoCapitalize="none" 옵션을 넣어 대문자 자동변환을 막아주면 됨 FlatList 뒷배경 처리 라인캘린더의 상위 컴포넌트 뒷배경을 노란색으로 칠해버릴까 했는데, 그 방법 보다는 플랫리스트 내에서 처리하고 싶었음 30분 넘게 CSS 뒤젹거렸는데 결국 저거 하나면 끝남 FlingGestureHandler 사용시 발생되는 ref 에러 사이드 프로젝트에서 제스쳐핸들러 뷰의 'FlingGestureHandler' 이 필요했다. 라이브러리를 설치하고, 공식문서에 있는 초기 세팅까지 완료한 후에 인터렉션이 일어나야하는 View에 감싸줬더니뜬금없이 Ref 관련한 에러가 발생이 됐다. 정말 당황스러운건 TimeLine 컴포넌트는 에러를 내뱉으면서주석한 View 컴포넌트는 에러없이 잘 출력이 되고 있는 거.... 뭐가 문젠지 깃헙 이슈를 좀 뒤져보니 아래와 같은 말이 있어서 에러가 안남.. 이건 쫌 당황스러운데내 30분 돌려내라 ... onChangeText의 Type은 ((text: string) => void) | undefined (e: React.ChangeEvent) => void이거 아님 주의 아이디랑 비밀번호를 받는 로그인 페이지를 만들면서 두 value 를 하나의 state로 관리하고 싶었다. inputs의 정석인 아래 코드를 적용하려고 했는데 const onChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }; (text:string) => void 형식으로 바꿔야 한단다 name을 넘길 수 있는 방법도 없고 해서 이걸 함수로 바꿔서 해보기로 함 const onChangeText = (name: string) => (te.. React-Native / StyledComponent 에서의 disabled 처리법 boolen값을 프롭스로 내려서 제어하는 것이아니라, css 선택자를 사용해서 disabled 스타일 내에서 처리를 하고 싶었다. const ButtonContainer = styled.TouchableOpacity` width: 100%; height: 48px; align-items: center; justify-content: center; border-radius: 50px; flex-direction: row; position: relative; &:disabled { background-color: ${color.separateGray}; }`; 위처럼 진행하니 콘솔에 아래와 같은 오류가 발생함 응 지원안해- 라는 소리 const ButtonContainer = styled(.. 버츄얼 머신으로 해결할 수 있지 않나요? 호스트 운영 체제에 독립적인 자체 셀(shell)을 지닌 캡슐화된 가상 운영 체제, 버츄얼 머신을 설치하면 되는 것이 아닌가?? #버츄얼 머신을 사용하여 독립적인 환경을 구축할 때 App A App B App C 앱을 실행할 때 필요한 라이브러리와 디펜던시 Tools 앱을 실행할 때 필요한 라이브러리와 디펜던시 Tools 앱을 실행할 때 필요한 라이브러리와 디펜던시 Tools 가상의 운영체제 가상의 운영체제 가상의 운영체제 운영체제 버츄얼 머신을 사용한다는 건 호스트 운영체제 위에 버츄얼 머신을 설치한다는 것이다. 말하자면 컴퓨터 내부의 컴퓨터 이 버츄얼 머신에는 그 버츄얼 머신 내부에서 실행되는 자체 운영 체제인 가상 운영 체제가 있다. 우리는 거기에 원하는 무엇이든 설치하고 운영할수 있다. ex ) .. 도커가 정확하게 무엇이며 왜 사용해야하나요? 도커는 컨테이너를 생성하고 관리하기 위한 도구이다. 소프트웨어 개발에서 컨테이너란 무엇이며 왜 사용해야 하는가? 소프트웨어 개발에서의 컨테이너는 '표준화된 소프트웨어 유닛' 을 의미한다. 표준화된 유닛은 기본적으로 코드 패키지이며 코드를 실행하는데에 필요한 종속성과 도구를 모두 포함하고 있다. 말이 참 어려운데, 어떠한 애플리케이션을 실행/개발하기 위한 모든 도구들을 컨테이너에 모아놓고, 필요에 따라 꺼내쓰면서 항상 동일한 환경을 만들어준다는 의미이다. 실 생활을 예를 들어 설명해 보자. 나는 평소에 공원으로 피크닉을 자주가는 사람이다. 피크닉을 가기 위해서는 사전에 준비를 해야 할 것들이 있다. (접시, 컵, 포크, 나이프, 등등등) 매번 피크닉을 갈 때마다 이것들을 하나씩 준비한다면 시간도 많이 걸릴.. 타입스크립트 2 04-1 함수 선언문 자바스크립트에서는 function 키워드로 만드는 함수 선언문과 => 키워드로 만드는 화살표 함수 두가지로 나뉘게 된다. function 함수이름(매개변수1, 매개변수2 [....]{ 함수 몸통 } 타입스크립트 함수 선언문은 자바스크립트 함수 선언문의 매개변수와 함수 return type에 타입 주석을 붙이는 형태로 구성된다. function 함수이름(매개변수1 : 매개변수1타입, 매개변수2 : 배개변수2타입 [...] : return 타입 { 함수 몸통 } ex ) function add( a : number, b : number ) : number { return a+b } 매개변수 let result = add(1, 2) 반환타입 ex) let printMe : (string,.. 이전 1 2 다음 목록 더보기
