Youngble_개발스토리

위의 사진처럼 전역 window 브라우저상의 스크롤이 아닌 컴포넌트 일정 영역안의 스크롤을 생성할시 보통 window.scrollTo(0,0) 으로 사용하라는 글이 많지만 직접 적용해보면 전체 윈도우에서 스크롤이 생긴게아니라 해당 컴포넌트로 접근해서 스크롤위치를 조절해줘야한다. 따라서 getElementById를 사용하여 시작하는 스크롤 해당 컴포넌트에서 .scrollTo(0,0) 을 해주면된다. 이때 매번 이벤트를 감지하기위해 useLocation을 사용하고, useEffect의 2번째 인자로 해당 경로 path가 달라질때마다 실행하게 하는것이다. 자세한 코드는 아래와 같다. App.tsx> 참고사이트: react에서 scrollTo 메소드로 스크롤 이동이 안될 때 window.scrollTo(0, 0..

메인컨텐츠 랜덤 슬롯머신 구현화면 side effect : React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컫는다. → 랜덤게임 슬롯을 돌릴때 settimeout 을 사용하여 순서대로 0.8, 1.6, 2.4초에 false를 하기로결정했다. 초기에 useEffect에다가 쓰지않고 js 코드를 쓸수있는곳에 함수를 만들어 settimeout을 사용했는데 이때 문제는 동작하는데는 문제가 없지만 만약 시간이 다되어 끝나기전에 해당 컴포넌트를 닫아아버리면(unmount) 해당 settimout에서 state를 업데이트할때 닫혀진 컴포넌트 state 업데이트에 대한 에러가 발생하게된다. 초기한번만 발생하고 새로고침전까진 안뜨긴하지만 어쨋든 이러..

시험 종료 github actions 사용 CI/CD 구축완료 aws bucket의 access key, secret access key 만듬 github에서 settings-> secrets,actions에서 위의 key들을 암호화저장 actions-> new workflow->set up a workflow yourself push or pull request할 브랜치 설정, ci/cd 관련 install, build, deploy 설정(deploy에서 위의 keys를 사용하여 배포위치설정) http 이해를 위한 책 리딩 'HTTP가이드:웹은 어떻게 동작하는가' HTTP: 웹 프로토콜 통신 규약, 인터넷에서 데이터를 주고받을 수 있는 프로토콜 URI: URL, URN으로 나뉨 보통 URL과 URI를 ..

portal은 부모 컴포넌트의 DOM 계층 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 컴포넌트의 HTML 컨텐츠를 다른 곳에 옮길때 사용 이런식으로 jsx코드 노드가 여러가지 있다고 치면 createPortal을 사용하여, 원하는 html 위치에서 렌더링 되게 할수있다. 이를위해 index.html 에서 id 가 “root”과 같은 위치에서 랜더링하고싶다면 옆에 식으로 만들어주고 해당 컴포넌트 js에서 import '원하는이름' from ‘react-dom’ 해주고 js작성 구역에 아래와같이 해당 div 컴포넌트를 Backdrop 컴포넌트 함수안에 return으로 담아주고 return 부분에서 원하는 위치에서 ReactDom.createPortal(, document.getElementBy..

한것 기존 리액트 프로젝트 js 파일에서 tsx 타입스크립트로 교체 적용 타입스크립트 적용하면서 Generic 이라는 개념이 중요할거 같아서 나중에 더 공부할것. 그외에 type, interface 로 재활용, 코드수 감소 , 가독성 증가 활용 import export 로 컴포넌트내에서 코드 사용 최소화 및 image 파일 declare 처리하여 이용 할것 storybook 사용 방법 알아볼것 프로젝트 참고 책 조사할것 (DOM을 깨우치다, HTTP: the definitive guide(웹은 어떻게 동작하는가), 디자인패턴 관련책 ) 자동배포관련 알아볼것 current 값 에러 고치기 1. if 조건으로 null 일때 return 해버리게하면 아래 Id.current.value 부분 에러사라짐 2. o..

할게 너무많다. 한것 지원회사 과제전형 끝내고 다시 리액트+타입스크립트 공부 캡스톤 기능구현 시작->프로토타입 로그인 화면 구현 잔디심기 1천 돌파! 끗

css-module을 이용하면 클래스명이 충돌하는 단점을 극복할 수 있다. css-module은 간결한 클래스명을 이용해서 컴포넌트 단위로 스타일을 적용할 때 좋다. CRA 에서는 {이름}.module.css 라고 이름을 작성하면 css-module이 된다. 이때 module을 꼭써야 적용됨. 기존 css 같은 경우 예를들어 big 이라는 클래스명 css을 넣어줄려고한다고 생각해보자. css 파일이 2개가 있고 하나는 Box1css 하나는 Box2.css 라고 이름을 붙이고 각각 다음과 같이 css 내용을 작성하고 // Box1.css .big{ width : 200px; } // Box2.css .big{ width : 100; } 이것을 각각의 div에 넣어준다고 생각해보자. import ‘./Box..

배운것/한것 udemy 타입스크립트 강의- 모던 자바스크립트 문법 사용 리덕스 사용법 복습 웹프로그래밍 스몰과제를 통한 html 공부 캡스톤디자인 와이어프레임 설계/회의 지원회사 과제진행 전반적인 리액트 컴포넌트 구성 리마인드/Styled-components 응용 json-server 사용 테스트 db.json 로컬 server를 오픈하여 해당 json데이터 req/res 기존 postman 사용하여 똑같이 점검가능 전반적인 자바스크립트 공부가 필요하다고 느낌 코어 자바스크립트 ch01 공부 데이터타입 기본(원시)타입 참조 타입 자세히 공부(중급레벨)해보면 기본타입도 참조형 데이터타입이다. 얕은 복사/깊은 복사 얕은 복사 for 문을 통한 각각의 프로퍼티 복사 1단계 depth 복사 spread oper..

출처: 모던 프론트엔드 테스트 전략 — 1편 프론트엔드를 효율적으로 테스트하기 위한 방법을 알아봅시다. blog.mathpresso.com 모던 프론트엔드 테스트 전략 — 2편 React 컴포넌트 테스트를 효율적으로 작성하는 방법에 대해 알아봅시다. blog.mathpresso.com 모던 프론트엔드 테스트 전략 — 1편(Testing Overview) Introduction 프론트엔드 개발 환경이 최근 몇 년간 급격하게 발전함에 따라 프론트엔드 환경에서 요구하는 애플리케이션 수준이 복잡해지기 시작했고, 이에 따라 테스트 환경 또한 고도화되면서 새로운 테스트 방법론과 도구들이 등장하게 되었습니다. 이번 포스팅에서는 프론트엔드를 테스트하기 위한 방법들과 효율적으로 테스트 할 수 있는 전략을 세우는 방법에..

드디어 웹팩과 번들러에 대한 공부를 정리하려고한다. 많이 본 그림일거다. 웹팩이라하면 말그대로 여러가지 js,css,ts,이미지파일 등등 웹만드는 파일들을 한군데 묶어준다(bundling)라는 개념은 대강 알고있었다. 그런데 언제? 왜? 그리고 어떻게 웹팩으로 번들링을 해주는건지는 모른다. 따라서 다시 기초로 돌아가보자. 예제를 위해 간단한 코드와 파일을 생성해보고 이를 테스트해보면서 다시한번 개념을잡자. 기본적으로 내가 만든 구성은 다음과 같다. 기본적인 index.html 을 만들고 이곳에서 쓸 js파일을 5개 만들었다. Import 하고싶은 script에 type을 module을 작성하고 5개의 js파일을 import해주었다. 각각의 js파일에는 string값이 들은 변수, while문을 도는 함수..