hail2y.log

계산된 속성 이름(Computed Property Name)계산된 속성 이름: 객체 리터럴에서 속성 이름을 동적으로 할당할 수 있게 한다. 즉, 속성 이름을 고정된 문자열이 아니라, 변수나 표현식의 값을 사용하여 동적으로 결정될 수 있도록 한다. 계산된 속성 이름을 사용할 때는 대괄호('[]')를 사용하며, 대괄호 안의 표현식은 항상 문자열로 변환된다.const ID = 'task_1';const newTask = 'Learn React Native';const newTaskObject = { [ID]: { id: ID, text: newTask, completed: false },};console.log(newTaskObject);// {// task_1: { id: 'task_1', text: ..

1. alignSelf, alignItems, alignContentalign-self: grid나 flex item를 정렬, flexBox 내에서 교차 축에 정렬 즉, flexDirection에 따라 교차 축이 달라짐align-Items: 상위 요소에서 아이템들을 일괄적으로 적용align-content: flexBox의 교차축을 따라 content items 사이의 간격 설정, 두 줄부터 사용해야 의미있다, flex-wrap: wrap;인 상태에서 사용(nowrap이면 의미 없음)https://dkrnfls.tistory.com/247 css align-content, align-items, align-selfcss속성중 위의 3개 속성들은 flexbox 혹은 grid에서 컨텐츠 들을 정렬시킬때 사용합..

확장 프로그램 손 보는 데 많은 시간이 걸렸다... 이곳저곳 손 보면서 기 좀 빨렸더니 나도 prettier이 이제 실행이 됐다! 나는 확장 프로그램에서 prettier를 설치하고 루트 디렉터리의 .vscode>settings.json에서 필요한 속성들을 입력하는 방식을 택했다. 설정(mac; cmd + ',')-prettier에서 필요한 것들을 체크하면 settings.json에 자동 반영된다고 한다. 나도 처음에 몇몇 개는 자동 반영이 되었지만 나중에는 잘 되지 않아서 답답한 마음에 직접 추가했다. 결정적인 문제 또한 이 파일에서 수정하면서 해결했다. 계속... 1. default formatter (기본 포맷터) 를 prettier로 설정한다. 처음에 null로 되어 있으면 실행이 안될텐데 defa..

https://miiingo.tistory.com/337 [Node.js] javascript: 비교 연산자 ==, ===, !=, !==의 차이점비교 연산자 ==와 ===, !=와 !==는 비슷해 보이지만 자세히 보면 서로 다른 연산자이다. 그동안은 둘의 차이를 잘 모르는 상태에서 그냥 사용했지만, 오늘은 이에 대해 알아보도록 한다. javascript는miiingo.tistory.comhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN NaN - JavaScript | MDN전역 NaN 속성은 Not-A-Number(숫자가 아님)를 나타냅니다.developer.mozilla.orgNaN: Not-A-Numb..

Props에 중괄호 {}를 사용하여 속성 전달요점만 바로 파악할 수 있도록 필요한 부분의 코드만 가져왔고, 시뮬레이터를 제외한 터미널의 출력 화면으로만 살펴볼 것이다. 터미널을 통해 props가 값으로 들어오는 것인지, 객체로 들어오는 것인지를 확인할 것이다. // App.jsconst App = () => { return ( );};export default App; 위의 코드는 메인 함수인 App.js에서 각각의 컴포넌트로 age와 name을 전달한다. 이때 숫자를 전달할 때는 중괄호로 감싸야지 빨간 줄 오류가 안 생긴다. // Ages.jsconst Ages = ({age}) => { console.log(age); return ( ..

Button 표현 방법리액트 네이티브에서는 다양한 내장 컴포넌트(core components)를 제공한다.ex. View, Text, Button.. 같은 컴포넌트일지라도 iOS, 안드로이드에서 다르게 표현될 수 있기 때문에 두 플랫폼으로 다 테스트해 보는 것이 중요하다. 즉 컴포넌트 속성이 다르게 표현될 수 있기 때문에 커스텀 컴포넌트를 만들어 문제를 해결해 볼 수 있다. 아래는 그 예시이다. 의 color 속성은 iOS에서 text color를 나타내지만, 안드로이드에서는 버튼의 배경색을 나타낸다. 따라서 의도한 결과와 다르게 나오기 때문에 Button 컴포넌트를 대체할 TouchableOpacity + Text 조합을 만들 수 있다. Button   →   TouchableOpacity + Text..

https://www.youtube.com/watch?v=YFNQwo7iTNc깃: 파일의 모든 변화를 기록한다, 같은 파일에 대한 각기 다른 버전을 관리할 수 있다, 즉 버전 관리 시스템깃허브: 클라우드에 있는 깃 제공자 (GitLab, Bitbucket도 같은 역할을 수행)=> 내 컴퓨터에 있는 깃 히스토리를 가져와서 클라우드에 있는 깃허브 웹 사이트에 푸쉬한다 https://www.youtube.com/watch?v=EjIncNR1k4s깃(git)을 얼마나 알아야 하는지- 소스코드를 저장하고 원격 리포지토리에 올리는 방법- 깃을 통해서 협업하는 방법 ex) 명령어- 깃 충돌 해결하는 방법, 충돌을 피하는 방법- 버전 관리하는 방법feat. 모두의 깃&깃허브 책

컴포넌트, 와이어프레임컴포넌트(component): 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소와이어프레임(wireframes): 최종 화면에 구성될 콘텐츠를 간단히 요약해 보여주는 것JSX 문법JSX: 자바스크립트 파일 안에 HTML과 같은 마크업 언어처럼 쓸 수 있게 해주는 자바스크립트를 확장한 문법         리액트 컴포넌트는 마크업을 표현하기 위해 JSX라 불리는 확장 문법을 사용한다. rendering logic and                           markup을 한 공간, 즉 컴포넌트 안에서 같이 해 준다.const name = 'Josh Perez';const element = Hello, {name}; 1.  하나의 부모 여러개의 요소를 표현할 경우 반드시..

React 컴포넌트는 함수형 컴포넌트(Functional Components)와 클래스형 컴포넌트(Class Components), 두 가지 주요 형태가 있다. 최근 React 버전에서는 함수형 컴포넌트와 훅(Hook)을 사용하는 것이 일반적이라 한다. 훅(Hook) .. 코드에서 사용했던 훅의 종류 - useState() ex. const [count, setCount] = useState(0); 상태 관리, 초기값 설정, 상태 변수와 그 상태를 업데이트하는 함수 - useQuery() ;데이터를 가져오고 관리, React Query에서는 쿼리 결과를 자동으로 캐시, 캐시된 데이터가 필요할 때는 useQuery의 data 속성을 통해 접근 할 수 있다. - useNavigation() ----- - u..