천쓰의 개발동산

React 18.3.1 (2024년 4월 26일)react act를 내보내는 기능 추가React 18.3.0 (2024년 4월 25일)React 18.2와 동일하나, React 19를 위한 API 사용 중단 경고 및 기타 변경 사항 추가주요 변경 사항Reactthis.refs에 쓰기 허용StrictMode 외부에서 findDOMNode 사용 시 경고테스트 유틸리티 메서드 사용 중단 경고StrictMode 외부에서 레거시 컨텍스트 사용 시 경고StrictMode 외부에서 문자열 참조 사용 시 경고함수형 컴포넌트의 defaultProps 사용 중단 경고키를 스프레딩할 때 경고테스트 유틸리티의 act 사용 시 경고React DOMunmountComponentAtNode 사용 중단 경고renderToStatic..

웹프론트 개발자를 준비하면서 정리했던 면접정리입니다.면접을 준비하기앞서, 개인적으로 포트폴리오사이트를 만들고 직접 배포하는것을 추천드립니다!(하고 안하고 차이가 면접부르는 연락오는 빈도수가 컷음..)준비하면서 프론트 신입개발자는 JAVA신입개발자보다 문턱이 조금 높다고 생각이들었습니다.(뽑는 회사들이 백엔드보다 상대적으로적음) 기본적으로 알아야하는것 브라우저 렌더링: 브라우저가 HTML, CSS, JavaScript 등의 자원을 받아서 화면에 그리는 과정입니다. 이 과정은 크게 DOM 생성, CSSOM 생성, 렌더 트리 생성, 레이아웃, 페인팅으로 이루어집니다.호이스팅: JavaScript에서 변수와 함수 선언이 스코프의 최상단으로 올라가는 현상을 말합니다. 이로 인해 선언 전에 사용할 수 있지만, 값이..

리액트 네이티브의 웹뷰로 업로드하기에앞서 그래도 네이티브를 맛보기위해 하단바는 네이티브스럽게 버튼으로 url 을 이동하는게아닌 웹뷰를 이동할수있게 하는 CreateBottomTabNavigator를 사용해보도록 하겠다 . 탭이라는 개념은 리액트에선 다뤄보지못햇던 것이라 처음 사용해보았는대 네이티브안에서의 탭은 컴포넌트의 스크린을 비춰준다의 의미가 강한것 같았다 . 그리고 나는 expo/vecor-icons 라는 아이콘을 사용하여 간단한 하단바를 만들어 탭으로 웹뷰를 이동하는 코드를 만들어보았다 export default function MyTabs() { return ( ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ( ), }} /> ); } 헤더는 웹뷰내에 미디어쿼리사..

이번 프로젝트때 진행햇던 react-calender 라이브러리 리뷰입니다 . dayjs(date).format('DD')}/> 사용한 속성에대해 다뤄보겠습니다 . 1. 날짜 속성 변경 부분입니다 .( 주말 토요일 일요일 색을 넣어주기위한 작업 ) tileClassName={tileClassName} const tileClassName=({ date })=>{ // 일요일(0) 또는 토요일(6)인지 확인하여 클래스를 지정합니다. if (date.getDay() === 0 /* 일요일 */) { return 'sunday'; // 일요일에 해당하는 클래스 } if (date.getDay() === 6 /* 토요일 */) { return 'saturday'; // 토요일에 해당하는 클래스 } return ''..

종합 프로젝트 이후 이번에 개선할점은 최적화 였다! 팀원들과의 규칙과 전역관리를 조금더 최적화시키려고 노력을 하다보니 저번에 하고싶었지만 못했던 리덕스로 리액트 전역관리를 해보려고 공부에 들어갔다 . Redux의 세가지 원칙 하나의 애플리케이션 안에는 하나의 Store 만 사용해야 합니다. state는 읽기 전용 입니다. state를 변화시키는 유일한 방법은 Action을 전달하는 것 뿐입니다. 이를 통해 모든 state 변화를 중앙에서 관리 할 수 있으며, state 변경에 대한 추적이 용이해 집니다. state 변화를 일으키는 Reducer는 순수 함수로 작성되어야 합니다. Reducer는 현재 state와 Action을 전달 받아 다음 state를 반환하는 순수 함수 입니다. 즉, 이전 state를..

모바일 반응형 웹을 프로젝트를 끝내면서 이제 앱을 만들기로 했다 . 시간이 적은 관계로 간소화 시켜서 하이브리드 웹앱을 만들기로 하다보니 EXPO라는것을 사용하게 되었습니다 . Expo란? 리액트 네이티브 애플리케이션을 더 쉽게 개발하고 빌드하고 배포할 수 있도록 도와주는 도구입니다. Expo는 리액트 네이티브의 기능을확장하고 여러 기능과 서비스를 제공하여 개발자가 앱 개발에 필요한 다양한 작업을 간소화하는것 . 개발 환경 구축 일단 깃 베쉬로 EXPO 를 설치해볼꺼입니다. 배쉬환경 > npm install -g expo-cli expo --version expo init 앱이름> 오류가 난다면 npx create-expo-app --template 해보는것도 좋습니다. (NPX는 테스트 작업할떄 많이쓴..

리액트로 미니 프로젝트중 무한 스크롤 /페이지네이션 중에 구현하기위해 고민을하던 찰라 , 추후 하이브리드 웹 (앱도가능) 을 위해 무한스크롤을 구현하기로 결정하였다. 일단 이번프로젝트에선 ORACLE / JDBC / AXIOS / REACT 를 사용하여 구현하였습니다. 처음 내 생각으로는 백엔드(JDBC)에서 5개씩 순차적으로 데이터를 리액트로 날려주어 스크롤 마다 이벤트를주어 출력하면 그대로 나온다고 생각하고 작업 진행하였습니다 . public List GoodsList(String world,String area,Integer count) { List list = new ArrayList(); String sql = null; System.out.println("world : " + world); i..