Hi-람👋 High-람☀️

일반화(generalization) 성능을 높이는 정규화 방법들 Early stopping 매 iteration마다 validation performance를 측정하여, 일정 기간 동안 개선이 없을 시 과적합되기 전에 학습을 조기 종료해주는 기능이다. Ensembling 여러 개의 모델을 학습시키고, 그 예측을 결합하여 최종 예측을 만드는 방법 모델을 결합할 때, regression 문제는 output들의 평균을 사용하고 classification 문제는 softmax activation을 거치기 전 값들의 평균을 사용한다. 또다른 방법으로 regression 문제는 output들의 중앙값을 사용하고 classification 문제는 최빈값을 사용하는 방법이 있다. 모델별로 다른 초기값을 주거나, 데이터..

[1] non-convex 함수에서의 문제와 해결 방법 비선형 함수에서 loss function은 두 가지 함정을 갖는다. (1) local minima 이는 기울기가 0인 지점이며, 어느 방향으로 움직이든 loss가 증가하는 지점이다. 하지만 이 지점은 전체 함수에서 가장 작은 값, 즉 global minimum은 아니다. (2) saddle point 이것 또한 기울기가 0이지만, 어떤 방향에서는 증가하고 다른 방향으로는 감소하는 특징을 가지고 있다. 이런 특성으로 인해 최적화 과정에서 종종 문제가 발생한다. 기울기가 0에 가까워지면서 loss가 업데이트되지 않기 때문이다. saddle point와 같은 문제가 발생했을 때, 확률적 경사 하강법(Stochastic Gradient Descent, SG..

지금 하고 있는 프로젝트에서 배포 이후 다양한 환경에서 테스트를 하다 보니 내가 설정하지 않은 css가 적용되어 있었다. ❓ 왜 내가 설정하지 않은 css가 적용된 것일까? 웹 페이지 제작 시에 모든 브라우저에서 의도한 대로 나오도록 하는 '크로스 브라우징'을 신경 쓰지 않았기 때문이라는 것을 알게 되었다! 그렇다면 크로스 브라우징이란 무엇일까? 크로스 브라우징이란? - 다양한 웹 브라우저와 버전, 다양한 운영체제에서 웹 사이트가 일관되게 동작하도록 하는 기술 또는 접근 방식 - 모든 화면이 '동일'하게 표시되게 하는 것이 아닌, '동등'한 수준의 정보, 기능 제공을 목표로 한다. 크로스 브라우징이라는 작업이 필요한 이유 크로스 브라우징을 해야 하는 이유, 즉 일관되지 않은 페이지가 나타나는 원인은 다음..

기존 Input에서 제공하는 RadioButton에서 색만 바꾸고 싶었을 뿐인데, 생각보다 자료들이 많지 않았다. 커스텀했다는 내용을 살펴보면 radio 특유의 동그라미 2개를 사용하는 모양보다, 아예 새로운 이미지를 사용하는 경우가 대다수였다. 그래서 나처럼 고민하는 사람들을 위해 RadioButton 커스텀하는 방법을 정리해보도록 하겠다! 먼저, 내가 만들고자 하는 모양은 다음과 같았다. 고려해야 할 점은 선택되었을 때 1. 내부에 동그라미가 생겨야 하며 2. icon의 색과 label의 색상이 바뀌어야 한다 는 것이다. 다른 것보다 나는 css에 대해 잘 모르고 있어서, 1번을 어떻게 구현해야 하는지 막막했다. 여기서는 다음과 같은 css에 대해 아는 것이 중요하다. 가상 선택자 :after 선택한..

1. 설치 방법 설치 방법은 간단하다. react-datepicker를 사용하기 위해 다음 명령어를 입력하면 된다. npm install react-datepicker 2. 사용 방법 import import DatePicker from "react-datepicker"; // 기본 설정 1 import "react-datepicker/dist/react-datepicker.css"; // 기본 설정 2 import { ko } from "date-fns/esm/locale"; // 한국어 설정 먼저 원하는 파일에서 라이브러리를 import 한다. 위의 두개는 기본적으로 불러준다. 기본 언어는 영어로 되어 있기 때문에 한국어로 설정하기 위해서는 위와 같이 import 해야 한다. 변수 선언 const t..

내가 하는 프로젝트에서 알림 설정을 위해 토글 스위치를 만들어야 했다. 1. 토글 스위치란? 💡 토글 스위치 토글 스위치는 우리가 흔히 아는 물리적 스위치처럼 "ON/OFF"와 같이 두가지 반대되는 상태를 다룰 때 사용한다. 사용자가 스위치를 누를 때마다 상태가 변경될 수 있도록 해야한다. 2. 토글 스위치 구현 결과 3. 중요 Point 🌱 props 이용하기 props로 toggle의 상태(on/off)를 넘겨주어 css 부분에서 조건부로 스타일링이 가능하도록 만들었다. (ex) ${props => props.isToggleOn ? 'background-color: #7BAB6E' : 'background-color: #CECECE' }; 🌱 transition 사용하기 토글 버튼이 자연스럽게 움직일..

❓ 문제 상황 기존에 하던 프로젝트를 이어서 작업하기 위해 git clone을 받고 npm start을 하려고 했는데 다음과 같은 에러 메세지가 떴다. sh: react-scripts: command not found package.json을 봐도 start하라고 나와있고, 항상 react앱을 npm start로 켰기 때문에 꽤나 당황했다. 😳 하지만 당연하게도 새로 clone 받아왔기 때문에 package.json 내의 모든 dependency를 다운받을 필요가 있었는데, 그걸 무시하고 무작정 npm start를 했으니 실행이 될리가 없었다. 🫠🫠 해결방법은 간단하다. 💡 해결 방법 npm intall // or npm i npm intall을 통해 모든 패키지들을 설치해주면 문제는 해결된다! 이번 뿐..

기존에는 API 연결을 위해서 proxy설정을 하고 호출할 때 endpoint 경로를 적어주었다. 그런데 CORS설정이 완료되고 더 이상 proxy가 필요 없게 되어 삭제했더니 매 호출마다 전체 주소를 적어야 했다. 이 문제를 해결하기 위해 환경변수와 axios 인스턴스를 사용하여 공통적인 부분들을 관리하고자 했다. 1. 환경변수 설정 먼저 환경변수를 세팅해줬다. 환경변수를 사용하면 지금의 경우처럼 하드코딩된 값들을 대체할 수 있다는 장점도 있고, 이 외에도 여러 장점이 있다. 오픈 소스에 올리면 안 되는 값들을 .env파일로 관리하며 보안성을 높일 수 있고, 로컬 개발 환경과 실제 배포 환경에서 사용하는 설정도 분리할 수 있다. 작성 방법은 다음과 같다. 먼저 프로젝트의 최상위 루트에 .env파일을 만..

프로젝트를 하다 보면 서버에서 데이터를 받아오고, 보내야 하는 상황이 생긴다. 예시를 통해 axios를 이용하여 API를 연동하는 방법을 알아보자! 1. axios 설치하기 API를 호출하기 위해서 axios라는 라이브러리를 설치해야 한다. // 1. npm을 이용하여 설치하는 경우 npm install axios // 2. yarn을 이용하여 설치하는 경우 yarn add axios 설치했다면 사용하고자 하는 프로젝트에서 import를 해야 한다. import axios from "axios"; 이렇게 API를 사용 가능한 상태가 되었다. 우리는 API를 사용해서 아래와 같은 동작을 할 수 있다. Create : 데이터 생성(POST) Read : 데이터 조회 (GET) Update : 데이터 수정 (..

생년월일을 받는 Input 컴포넌트에서 연도는 4자리, 달은 2자리, 날짜는 2자리로 지정하고 싶었다. 그래서 찾아봤더니 Input태그에 maxlength를 지정하면 길이를 제한할 수 있으나, 타입이 number인 경우에는 불가능하다고 한다. 따라서 직접 onChangeHandler에서 다뤄야 했고, 코드를 다음과 같이 고쳤다. const yearChangeHandler = (e) => { setUserInfo({ ...userInfo, year: e.target.value.slice(0, 4) }); }; const monthChangeHandler = (e) => { setUserInfo({ ...userInfo, month: e.target.value.slice(0, 2) }); }; const d..