전체 글 (118) 썸네일형 리스트형 2024.10.23 React State / Render tree 최근 코드 수정 중 useState setter가 말을 안들어서 render가 되지 않는 상황이 발생했다.예전에 겪은 상황은 객체를 초기 useState set을 해놓으면 객체 안에 있는 데이터가 바뀌어도 dependency 참조가 바뀐걸 인지 못해서 set을 못하는 건줄 알았는데, 생각지도 못한 곳에서 해답을 찾았다. React 공식 문서에 따르면,State 는 Render tree 위치에 연결되고, 같은 컴포넌트라면 그 자리에 Rendering 되는 한 state를 유지한다는 것이었다.React는 JSX 마크업이 아닌 UI tree에서의 위치에 관심이 있다는 것을 기억하라고 문서에서도 강조한다. 내가 겪은 상황은 Modal위에 또 다른 Modal을 띄워야 되는 상황이었고, 두번째 Modal의 상태가 .. 2024.08.12 <label> 오늘 일하다가 실수로 label tag 안에 label tag를 넣는 실수를 하였다.그런데 그것도 문제였지만, label tag의 쓰임새를 모르고 단순히 요소 이름을 붙이는것으로만 사용하고 있었다.. label을 클릭하면 그 안에 들어가 있는 children (보통은 input)이 반응하는 것을 모르고 있었다. label tag는 2가지 방식으로 사용 가능하다. 1. 명시적이름 2. 암시적 이름 이렇게 써야되는지도 모르고 label과 input을 분리해서 컴포넌트를 만들어 버렸다...(어쩐지 reactAria에서 TextField에 label이 없다고 경고를 띄웠는데 이유가 있었구나) label tag안에 interactive한 tag (a, button 같은)를 넣으면 label tag와 관련된 .. 2024.08.08 File Download s3에 저장되어 있는 자료를 서버에서 받은 URL로 다운로드를 하려는 상황에서a tag href에 다운로드 링크를 넣으면 손쉽게 끝날줄 알았지만 자꾸 이미지가 열리기만해서 열심히 서칭해봄. 그 중 발견한 글에서보안 이슈로 인하여 2018년 말부터 다운로드할 리소스가 동일한 출처 또는 동일한 서버에서 제공되지 않은 경우링크를 클릭해도 다운로드가 트리거 되지 않고 해당 이미지 주소로만 이동한다는 사실을 알게 되었다. 그럼 결국 직접 blob을 만들어서 다시 URL을 얻어서 해야되나 생각을 했지만, 뭔가 너무 비효율적이라는 생각을 했고그 와중에 Content-Disposition이 눈에 들어왔다.찾아보니 Disposition은 컨텐츠의 성향을 알려주는 속성으로 defalut는 inline인데, 아래처럼 at.. [Text] 글자 수 제한 및 말 줄임 Text 속성 중 numberOfLines를 사용한다. ellipsizeMode 속성을 이용하여 말 줄임(...) 표시를 어느 위치에 할 지 설정한다. 참고 : https://reactnative.dev/docs/text FlatList - FlatList : 다양한 기능들을 가지고 있는 기본적인 List Component ex) `${item.notiId}`} onEndReached={onDataFetch} onEndReachedThreshold={0.6} ListFooterComponent={renderListFooterComponent} ListEmptyComponent={() => } /> - 주요 속성 - data : List로 표현할 data - renderItem : data의 item을 어떤 형태로 render 할 것인지 설정 - onRefresh : refresh (list를 위에서 아래로 당겼을 때) 했을 때 실행시킬 함수를 설정 - refreshing : 새로운 data를 기다리는 동안 true - keyExtract.. Next.js 기본 개념 - Next.js 빠른 웹 어플리케이션을 만들기 위한 React 프레임워크 아래 그림과 같이 빌딩 블록을 제공함으로써 유연한 개발과 좋은 UX를 제공할 수 있도록 한다. Next.js는 CSR(Client Side Rendering)을 포함하여 SSR(Server Side Rendering)과 SSG(Static Site Generation) 기능을 제공함으로써 기존 SPA(Single Page Application)의 단점을 쉽게 보완 할 수 있게 되었다. pages 폴더 안에 js 파일을 만들고 export하면 해당 이름으로 바로 Routing이 가능하다. 를 통해 빠르고 매끄러운 페이지 전환이 가능하다. useQuery 기초 GraphQL 튜토리얼 사이트 : https://www.apollographql.com/tutorials/ Learn with our GraphQL Tutorials, Examples, and Training Level up with Apollo's official GraphQL tutorials. Get practical, hands-on trainings and become an Apollo GraphQL certified developer. www.apollographql.com 기본 프로세스 아래 나와 있는 소스는 튜토리얼 4번째 프로젝트 - Client - index.js import React from 'react'; import ReactDOM from 'react-dom'; import G.. GraphQL + Apollo - GraphQL 페이스북(현 메타)에서 만든 API를 위한 쿼리 언어이며, 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적 1. GraphQL의 구조 - Query : 데이터 요청, CRUD에서 R을 의미 ex) // 요청 (일반 query) { tracksForHome { id title } } // 요청 (operation name query) : 변수 사용 시 query Query { tracksForHome { id title } } // 응답 (둘 다 응답은 같음) { "data": { "hero": { "name": "R2-D2" } } } - Mutation : 데이터 변경 요청, CRUD에서 R 제외한 나머지 Mutation은 반드시 Schema에 정의해야 하며, Resol.. 이전 1 2 3 4 ··· 15 다음
