# mode

13개의 포스트
post-thumbnail

React Concurrency mode

React 18+ Concurrency Mode 도입 ! 1. Concurrency mode JavaScript는 기본적으로 싱글 스레드 언어입니다. 이것은 주로 브라우저의 메인 스레드에서 실행되며, 이 스레드는 CSS 애니메이션, 사용자 입력 처리, 그리고 JavaScript의 실행 등 다양한 작업을 담당합니다. 따라서 메인 스레드에서 긴 JavaScript 작업이 실행되면, 웹페이지의 반응성이 떨어질 수 있습니다. Javscript의 한계를 극복하고자 React18+ 에서 Concurrency mode 지원을 시작하였습니다. Concurrency란 말 그대로 동시성인데, 싱글 스레드 환경에서 동시에 작업을 한다는 말은 기술적으로 불가능한 말입니다. 작업을 동시에 한다면 무엇이 좋을까요? Concurrency mode의 목표는 오직 사용자 경험의 개선이라고 말하고 있습니다. 브라우저의 UI 스레드는 CSS, 사용자의 입력, Javascript로 인한 화면

2023년 9월 11일
·
2개의 댓글
·
post-thumbnail

[Python] pandas

import pandas DataFrame 기본 사용법 결측값 결측값 처리 방법 **1. 제거(Deletion) : 일반적으로는 결측값을 제거하는 것이 가장 좋은 방법이다. 대치(Imputation) : 결측값을 특정 값(최빈값, 중앙값, 평균)으로 대치하는 것이다. 예측모델 : 회귀 분석 기술이나 기계 학습 방법 등을 활용하는 통계 방법** DataFrame Join (데이터프레임 합치기) **위에 코드에서 DataFrame.merge()를 통해서 데이터프레임을 합치는데, 두 데이터프레임에 있는 공통필드를 기준으로 데이터프레임을 합치는 방식이다. left_on : 왼쪽 데이터프레임에서 공통필드를 작성해 주면 된다. right_on : 오른쪽 데이터프레임에서 공통필드를 작성해 주면 된다. how : "inner", "outer", "left", "right" 중에서 선택해서 작

2023년 5월 21일
·
0개의 댓글
·
post-thumbnail

Stellaris Expansion Traditions Mod

스텔라리스 3.8 패치 기념으로 전통 슬롯을 8개로 확장한 모드를 개발했습니다. https://github.com/ShadowKingdoms/EightTraditionsSlotsStandard_

2023년 5월 10일
·
0개의 댓글
·
post-thumbnail

react-hook-form 유효성 검사하기

🍉 react-hook-form으로 유효성 검사하기 유효성 검사 항목 required : 필수 여부 pattern : 유효성 검사 정규식 min max minLength maxLength validate : 직접 작성한 유효성 검사 함수 유효성 메시지 {errors?.input명.type === 유효성 검사 항목 && 에러 메시지 요소} 형태로 사용 > js import { useForm, SubmitHandler } from 'react-hook-form' > const LoginPage = () => { ... const { register, handleSubmit, watch, formState: { errors }, } = useForm({ mode

2023년 4월 19일
·
0개의 댓글
·
post-thumbnail

webpack-1

🍀 webpack이란? 웹팩은 간단하게 모듈 번들러이다. 여기서 모듈은 웹을 구성하는 모든 자원( html, css, javascript, image, font etc... )이며, 웹팩에서의 번들러는 모듈로 취급된 자원들을 하나의 결과물로 묶어준다. 그리고 하나의 결과물로 묶어주는 행위를 bundling(번들링) 이라 할 수 있다. 웹 개발을 하면서 모듈이라 하면 하나의 javascript file로만 생각하였는데 Webpack에서는 모두 모듈로 취급한다. ** 🍀 webpack이 필요한 이유 webpack이 필요한 이유는 여러가지가 있다. > - 기본적으로

2023년 3월 18일
·
0개의 댓글
·

MVVM

https://velog.io/@haero_kim/Android-깔쌈하게-MVVM-패턴과-AAC-알아보기 https://developer.android.com/jetpack/guide?hl=ko#recommended-app-arch https://haruple.tistory.com/212 https://magi82.github.io/android-mvc-mvp-mvvm/ https://blog.yena.io/studynote/2019/03/16/Android-MVVM-AAC-1.html https://blog.yena.io/studynote/2019/03/27/Android-MVVM-AAC-2.html <- 연습예제 https://developer.android.com/topic/architecture https://developer.android.com/reference/androidx/lifecycle/ViewModel?hl=ko ACC: https://youtu.be/BofWW

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

생활인구 성별 연령대별 분포 시각화

법정동 정보가 포함된 생활인구 데이터에서 연령대와 성별 컬럼을 생성한 뒤 특정 지역의 연령대별, 성별 생활인구 분포를 확인 연령대 / 성별 컬럼 생성 성별 법정동별 성별 집계함수 성별 컬럼 생성 및 컬럼을 값으로 변경 histplot > 평균 생활인구의 성별 분포는 비슷함. 연령대 법정동별 연령대 집계함수 연령대별 컬럼 생성 및 컬럼을 값으로 변경 ![](https://velog.velcdn.com/images/s

2022년 10월 5일
·
0개의 댓글
·
post-thumbnail

[react] create - mode 변경

create, update, delete 부분을 Control 컴포넌트로 묶어본다. App.js) App.js에 Control태그를 두고 onChangeMode라는 속성을 부여한다. onChangeMode 속성 안에 함수를 두고 this.setState를 두고 매개변수에 해당하는 mode를 가져올 수 있는 이벤트를 설치한다. control.js)

2021년 11월 2일
·
0개의 댓글
·
post-thumbnail

Webpack을 공부해보았습니다.

예전부터 React로 프로젝트를 진행하면서 라이브러리를 다운받고 설정하는법 또는 개발을하다가 이상한 오류가 떠서 해결하려 구글링 하다 보면 항상 webpack이 거론되었습니다. 평소 CRA(Create-React-App)로 프로젝트셋팅을 하던 저에게 webpack은 러닝커브가 높은 큰 장벽(?) 이였습니다😂 하지만 미루고 미루다가 결국 언젠가는 공부해야하고 또 나에게 필요한 기술이라고 생각해서 Webpack에 대해서 공부를 했습니다.또 공부한것을 바탕으로 실습겸 평소 만들어보고 싶었던 React & Typescript Boilerplate를 만들어 보았습니다 :) Webpack이 나온 이유는? 예전과 다르게 요즘에는 프로젝트의 규모가 커지고 그에따라 자바스크립트의 모듈화가 진행되었습니다. 또한

2021년 10월 20일
·
0개의 댓글
·
post-thumbnail

Webpack

Webpack 이란? webpack 은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. webpack 이 애플리케이션을 처리할 때 내부적으로 하나 이상의 진입점에서 종속성 그래프를 빌드한 다음 프로젝트에 필요한 모든 모듈을 하나 이상의 번들로 결합한다. 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어주는 것을 webpack 이라 한다. Webpack 을 사용하는 이유 하나의 HTML 페이

2021년 10월 13일
·
0개의 댓글
·
post-thumbnail

웹팩(webpack) config 와 mode

config 파일 생성 >우리는 cli -> npx webpack --en 요런걸로는 제대로 활용할 수 없다!!!! 즉 config를 이용하면 더욱더 멋지게 webpack을 활용할 수 있는 것! webpack.config.js(기본적으로 npx webpack 실행시 이놈의 파일을 찾는다.) 생성 를 config 파일로 표현하자! >그리고 을 실행 시키면 결과는...? 잘 작동한다!!!! mode 설정 >![](https

2021년 8월 30일
·
0개의 댓글
·
post-thumbnail

[ React ] - console.log가 두 번 찍히는 현상(strict mode)

목표 > MongoDB에 저장되어있는 값을 가져와서 그 값으로 setState해 준 후 state 값을 하위 컴포넌트에 props로 넘겨주어 렌더링 해주는 것! 나는 먼저, MongoDB의 데이터를 가져와서 setState를 한 후, console.log로 찍어보는 테스트를 했다. ⚠결과 > 맨 처음에는 undefined가 찍히고 그 다음에 DB에서 가져온 값이 찍혔다. 그리고는 하위 컴포넌트에서 undefined 에러가 났다. (넘겨준 props 값이 undefined여서 하위에서도 undefined 에러가 난다.) 오류가 한번에 두 개가 나니까 이때부터 멘탈이 나가기 시작했다 ... 이유 다시 정신을 차리고 구글링을 해보니 console.log가 두 번 찍히는 현상은 > u

2021년 6월 18일
·
0개의 댓글
·
post-thumbnail

밝은 화면에 눈이 아픈 당신!

슈퍼개발자, 춤추는망고입니다. ( 춤 안춥니다. ) Chrome 을 사용하고 있는데, 너무나도 하양하양한 화면에 눈이 아프시다면! 다크리더를 이용해보세요!! > 링크를 들어가신 뒤, 원하시는 브라우져에 맞춰 설치하시면 끝!

2020년 5월 7일
·
0개의 댓글
·