Per ardua ad astra.

Nodemailer 라이브러리들어가며Node.js 환경에서 메일을 간단하게 보낼 수 있도록 도와주는 Nodemailer 라이브러리에 대해 정리해본다. Nodemailer 라이브러리개념Node.js 환경에서 이메일을 쉽게 보낼 수 있도록 도와주는 라이브러리간단한 설정으로 SMTP, OAuth2 등을 활용한 이메일 전송을 할 수 있다.텍스트와 HTML 형식의 이메일, 첨부 파일 전송 등 다양한 기능을 제공한다.무료로 사용 가능하다.오픈 소스로 관리되고 있다. 주요 특징SMTP, OAuth2, AWS SES, SendGrid 등 다양한 이메일 서비스 지원이메일 본문을 일반 텍스트 또는 HTML 형식으로 작성 가능이미지, 문서 등 파일 첨부 가능기본 인증 외에도 OAuth2를 지원하여 보안성 강화이모티콘이나 다..

EmailJS 라이브러리들어가며간편하게 회원가입으로 무료로 월 200건까지 이메일을 보낼 수 있도록 도와주는 EmailJS 라이브러리에 대해 정리해본다. EmailJS개념사용자가 서버 없이 자바스크립트만으로 이메일을 보낼 수 있도록 도와주는 서비스사용자는 백엔드 설정 없이 클라이언트 사이드에서 이메일을 전송할 수 있다.SMTP 서버를 활용하여 이메일을 전송하며, Gmail, Outlook 등의 이메일 서비스를 지원한다. 주요 특징클라이언트 사이드에서 직접 이메일을 전송할 수 있어 백엔드가 필요없다.Gmail, Yahoo, Outlook 등 여러 서비스와 호환된다.사용자 정의 템플릿을 만들어 동적으로 데이터를 전달할 수 있다.전송 데이터를 암호화하며 API 키를 사용하여 인증을 처리한다.몇 줄의 코드만으로..

Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-app@latest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..

원격 저장소 주소 변경하는 방법들어가며Git 명령어를 이용하여 현재 프로젝트의 원격(Remote) 저장소 주소를 변경하는 방법을 정리해본다. 방법현재 원격 저장소주소 확인하기현재 프로젝트에 연결된 원격 저장소 주소를 확인한다.$ git remote -vorigin https://github.com/old-user/old-repo.git (fetch)origin https://github.com/old-user/old-repo.git (push)  현재 원격 저장소 주소 변경하기@set-url@ 옵션을 사용하여 원격 저장소 주소를 변경할 수 있다.$ git remote set-url origin  사용 예$ git remote set-url origin https://github.com/new-user..

제1유형 시험 준비들어가며빅데이터분석기사 실기 제1유형 시험 준비를 위한 내용을 정리해본다.제1유형은 데이터 전처리와 관련된 내용이 포함된다.제2회 ~ 제8회 기출 변형 문제와 풀이 방법을 함께 정리하였다. 문제📎 문제1 (21년 2회)BostonHousing 데이터@crim@ 항목의 상위에서 10번째 값(상위 10개의 값 중에서 가장 작은 값)으로 상위 10개의 값을 변환하고, @age@가 80 이상인 값에 대하여 @crim@의 평균 구하기소수점 셋째 자리에서 반올림해서 소수점 둘째 자리로 출력하기import numpy as npimport pandas as pddf = pd.read_csv('./datasets/data_q1.csv')# 'crim' 항목의 상위 10번째 값 뽑기top10_value..

help(), dir() 활용하기들어가며빅데이터분석기사 실기 시험장에서 특정 함수명이나 함수의 사용 방법을 잊어버렸을 경우, @help()@ 또는 @dir()@ 함수를 이용하여 확인할 수 있다.이에 대한 내용을 정리해본다. 방법0️⃣ 참고 사항@help()@ 또는 @dir()@ 함수의 인자에 넣을 대상을 우선 @import@ 해줘야 한다.import sklearn # (1) 확인하고자 할 대상 불러오기print(help(sklearn)) # (2) 사용 방법 확인print(dir(sklearn)) # (3) 속성/메서드 목록 확인 1️⃣ help() 함수 사용하기객체, 모듈, 함수, 클래스 등에 대한 도움말 문서(docstring)를 확인하고 싶을 경우 @help()@ 함수를 사용..

corr() 함수와 numeric_only 옵션들어가며판다스(Pandas) 2.0.0 버전부터 @corr@ 함수의 @numeric_only@ 옵션의 기본값이 @False@로 변경되었다.이에 대한 내용을 정리해본다. 설명판다스(Pandas) 2.0.0 버전부터 @corr@ 함수의 @numeric_only@ 옵션의 기본값이 @False@로 변경되었다.이전 버전에는 기본값이 @True@로 설정되어 있어서, 이 옵션을 따로 넣어주지 않아도 됐었다.따라서 판다스 2.0.0 이상 버전이 적용된 빅데이터분석기사 실기 시험 9회차부터 @corr@ 함수를 사용할 경우, @numeric_only=True@ 옵션을 반드시 지정해줘야 한다.import pandas as pddf = pd.read_csv("data/Titani..

React Hook Form 라이브러리들어가며리액트(React.js) 애플리케이션에서 폼(Form)의 상태 관리를 쉽게 해주는 라이브러리인 React Hook Form에 대해 정리해본다. React Hook Form개념리액트 애플리케이션에서 폼(Form)의 상태를 관리해주는 라이브러리간단하고 효율적이며 퍼포먼스가 뛰어나다.리액트의 훅(Hook)을 활용하여 사용하며, 폼 상태 관리를 위한 기본적인 기능과 유효성 검증(Validation) 기능을 제공한다. React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-..

loc, iloc 차이점 비교 (Pandas)들어가며판다스(Pandas)의 @loc@과 @iloc@ 함수의 차이점을 정리해본다.두 함수는 판다스의 데이터프레임(DataFrame) 객체에서 사용할 수 있다. loc 함수개념라벨 기반(Label-based) 인덱싱 방식행과 열의 이름 또는 라벨을 기준으로 데이터를 선택한다.슬라이싱을 할 때, 끝값도 포함된다. (@[a, b]@) 사용 예시 코드import pandas as pddata = { 'A': [1, 2, 3], 'B': [4, 5, 6], 'C': [7, 8, 9]}df = pd.DataFrame(data, index=['row1', 'row2', 'row3'])""" 출력 결과 A B Crow1 1 4 7row..

Hydration 에러 해결하는 방법 (Next.js 15)들어가며Next.js 15에서 생성한 프로젝트에서 아래와 같은 Hydration 에러가 발생할 경우 해결하는 방법을 정리해본다.Console ErrorHydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used- A server/client branch 'if (typeof window !== 'undefined')'.- Variable input such as 'Date.now()' ..

Auth0들어가며인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Auth0 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Auth0개념사용자가 애플리케이션의 인증 및 권한 관리를 간단하고 안전하게 구현할 수 있도록 지원하는 인증 및 권한 관리 플랫폼개발자는 Auth0를 이용하여 복잡한 인증 시스템을 직접 개발하지 않아도 되고, 다양한 인증 방식을 쉽게 통합할 수 있다. 주요 특징다양한 인증 방식 지원이메일/비밀번호소셜 로그인 (Google, Facebook, GitHub, Twitter 등)다중 인증(Multi Factor Authentication)SSO(Single Sign-On)Passwor..

FusionCharts 라이브러리들어가며자바스크립트(JavaScript)의 FusionCharts 라이브러리에 대해 정리해본다. FusionCharts개념웹 기반 대시보드와 데이터 시각화를 위한 자바스크립트(JavaScript) 차트 라이브러리개발자와 기업이 다양한 형태의 데이터를 차트, 그래프, 게이지(Gauge), 지도 등으로 시각화 할 수 있다.무료 및 유료 플랜이 있어 프로젝트의 필요에 따라 선택 가능하다.공식 홈페이지 : JavaScript charts for web & mobile | FusionCharts 특징선 차트, 파이 차트, 게이지, 히트맵 등 100개 이상의 차트 유형 지원복잡한 비즈니스 대시보드나 보고서를 쉽게 만들 수 있다.모든 차트는 반응형 디자인이 적용되어 모바일, 태블릿, ..

시험장 들어가기 전에 보기 빠르게 보기 좋은 강의 모음들어가며시험장에 들어가기 전에 빠르게 보면 좋을 것 같은 (무료) 강의들을 시험 출제 유형별로 정리해본다.유튜브(YouTube)에 올라와 있는 여러 무료 강의들 중, 괜찮게 들은 것들을 정리해보았다. 강의 모음제1유형 (데이터 전처리)강의명URL비고파이썬 기초https://youtu.be/3GSnGaH5yoc?si=JeIYxJJF8faZkHf6파이썬(Python)한 시간 만에 배우는 판다스https://youtu.be/hmKVYEei4Oo?si=cCy-klaPyMS0Y4Lt판다스(Pandas)판다스 100제https://youtu.be/J9XkwoCamuI?si=S1SKTX0eeUJIMmCb판다스(Pandas)아답터 빅분기 실기 대비 필수 영상 (1유..

제6회 기출 변형 문제 (제3유형)들어가며빅데이터분석기사 실기 제6회 제3유형 기출 변형 문제를 올려본다.제6회 제3유형에서는 가설 검정과 관련된 문제가 출제되었다. 문제 1감기약을 복용할 때 부작용에 대한 분류와 비율 데이터위약 효과가 있는지 253건의 데이터를 추출하여 검증하려고 한다.감기 부작용에 대한 비율이 위약 효과 부작용 비율과 같은지 카이제곱 검정하기부작용 유형코드비율두통10.05졸림20.1속쓰림30.05부작용 없음40.8합계1 (1) 위약 샘플 데이터가 @부작용 없음@인 데이터를 0~1 사이의 확률로 출력하기 (반올림하여 소수점 셋째 자리로 출력)(2) 카이제곱 검정으로 검정 통계량 출력하기 (반올림하여 소수점 셋째 자리로 출력)(3) 유의확률(p-value) 출력하기 (반올림하여 소수점 ..

제7회 기출 변형 문제 (제3유형)들어가며빅데이터분석기사 실기 제7회 제3유형 기출 변형 문제를 올려본다.제7회 제3유형에서는 고급 통계(회귀 분석)과 관련된 문제가 출제되었다. 참고회귀 분석에서는 귀무 가설과 대립 가설이 다음과 같이 설정된다.따라서 유의하지 않은 변수를 구하려면 귀무 가설을 채택(p-value > 0.05(유의수준))하는 변수를 선택하면 된다.귀무 가설 : 해당 변수는 종속 변수에 미치는 영향력이 없다. (유의하지 않다.)대립 가설 : 해당 변수는 종속 변수에 미치는 영향력이 있다. (유의하다.) 로지스틱 회귀 분석은 @statsmodels.api.Logit(y, X)@ 함수를 사용하고, 다중 선형 회귀 분석은 @statsmodels.api.OLS(y, X)@ 함수를 사용한다.p-va..

제8회 기출 변형 문제 (제3유형)들어가며빅데이터분석기사 실기 제8회 제3유형 기출 변형 문제를 올려본다.제8회 제3유형에서는 고급 통계(회귀 분석)과 관련된 문제가 출제되었다. 참고회귀 분석에서는 귀무 가설과 대립 가설이 다음과 같이 설정된다.따라서 유의하지 않은 변수를 구하려면 귀무 가설을 채택(p-value > 0.05(유의수준))하는 변수를 선택하면 된다.귀무 가설 : 해당 변수는 종속 변수에 미치는 영향력이 없다. (유의하지 않다.)대립 가설 : 해당 변수는 종속 변수에 미치는 영향력이 있다. (유의하다.) 로지스틱 회귀 분석은 @statsmodels.api.Logit(y, X)@ 함수를 사용하고, 다중 선형 회귀 분석은 @statsmodels.api.OLS(y, X)@ 함수를 사용한다.p-va..

제3유형 시험 준비 (가설 검정, 고급 통계)들어가며빅데이터분석기사 실기 제3유형 시험 준비를 위한 내용을 정리해본다.제3유형은 ①가설 검정과 ②고급 통계의 내용이 포함된다. 1️⃣ 가설 검정☑️ (통계적) 가설 검정관찰된 현상/효과가 우연에 의한 것인지 알아보기 위해 가설을 세우고, 가설의 합당성을 확인하는 과정A 그룹과 B 그룹에서 보이는 어떤 차이가 우연에 의한 것인지, 실제로 다른 것인지 통계적으로 검증하는 것 변수 유형집단 수검정 방식설명수치형(연속형)1개단일 표본 t-검정모평균과 표본 평균이 유의하게 다른지 검정2개독립 표본 t-검정2개의 독립된 집단의 평균 차이 검정대응 표본 t-검정같은 집단에서 2번 측정한 결과의 평균 차이 검정2개 이상일원 분산 분석(One Way ANOVA)3개 이상의..

헤더에 인증 정보 추가하는 방법들어가며Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.이 글은 리액트(React) 코드로 작성되었다. 방법① 파일에 인증 헤더 부분 추가하기API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.// 인증 정보를 담은 변수const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..

Moment.js 라이브러리들어가며자바스크립트(JavaScript)에서 날짜와 시간을 처리하기 위해 많이 사용되는 Moment.js 라이브러리에 대해 정리해본다. moment.js개념자바스크립트에서 날짜와 시간을 처리하기 위해 사용되는 인기 있는 라이브러리날짜 및 시간 계산, 형식화, 파싱, 시간대 변환, 상대적인 시간 표현 등을 쉽게 처리할 수 있도록 도와준다.자바스크립트의 기본 @Date@ 객체와 비교하여 훨씬 더 직관적이고 강력한 기능을 제공한다.2020년부터 Moment.js는 유지보수 전용 모드로 전환되었고, 새로운 프로젝트에서는 Day.js나 Luxon, Date-fns과 같은 다른 라이브러리를 대신 사용하도록 권장되고 있다. (하지만 여전히 많은 프로젝트에서 사용되고 있다.)Day.jsMom..

렌더링 방식 정리 (CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration))들어가며Next.js의 렌더링 방식인 CSR(Client Side Rendering), SSR(Server Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration)에 대해 정리해본다.Next.js에서 페이지를 작성하면 기본적으로 CSR 방식으로 렌더링된다. CSR(Client Side Rendering)개념브라우저에서 자바스크립트 파일을 다운로드한 후, 클라이언트 측에서 렌더링을 ..

객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식들어가며리덕스 툴킷(Redux Toolkit, RTK)의 객체 표기법(Object Notation) 방식과 빌더 콜백 표기법(Builder Callback Notation) 방식에 대해 정리해본다. 객체 표기법(Object Notation) 방식 vs. 빌더 콜백 표기법(Builder Callback Notation) 방식RTK 버전 1.6.0 이상부터 기존의 객체 표기법(Object Notation) 방식에서 빌더 콜백 표기법(Bulder Callback Notation) 방식으로 작성해야 한다.기존의 객체 표기법은 더 이상 사용되지 않는다. 객체 표기법(Object Notation)..

400 오류와 401 오류의 차이점들어가며HTTP 상태 코드(Status Code)인 400 오류와 401 오류의 차이점에 대해 정리해본다. 400 오류 (Bad Request, 잘못된 요청)개념클라이언트가 보낸 요청이 잘못되었거나 서버에서 이해할 수 없을 때 반환되는 상태 코드 발생 원인요청 형식이 잘못된 경우 (JSON이나 XML 등의 데이터 포맷 오류)요청 파라미터가 누락되었거나 유효하지 않은 경우잘못된 URL이나 메서드 사용예를 들어, @GET@ 대신 @POST@를 사용한 경우클라이언트 쪽 오류로 인해 요청이 비정상적으로 구성된 경우 해결 방법요청 데이터를 검토하고 형식이 올바른지 확인한다.API 문서를 참고해 필요한 파라미터와 값이 제대로 전달되었는지 확인한다.URL이나 HTTP 메서드를 확인한..

.js 파일에서 Uncaught SyntaxError: Unexpected token '들어가며@.js@ 파일에서 @Uncaught SyntaxError: Unexpected token '이 문제는 Vite로 만든 프로젝트에 발생하는 문제이다.  문제 발생 상황@/src/utils/links.js@ 파일에서 컴포넌트(Component)가 @value@로 들어 있는 @key@가 들어 있는 객체를 외부 컴포넌트에서 import 하여 사용하려고 할 때, 다음과 같은 오류가 발생하였다. /src/utils/links.js@icon@ 키의 값을 외부 컴포넌트에서 불러올 때 위와 같은 오류가 발생하였다.const links = [ { id: 1, text: 'stats', path: '/', ..

컴포넌트와 컴포넌트 비교 (React Router)들어가며리액트 라우터(React Router)에서 @@ 컴포넌트와 @@ 컴포넌트의 차이점에 대해 정리해본다.  컴포넌트개념리액트 라우터에서 제공하는 가장 기본적인 링크(Link) 컴포넌트특정 경로로 이동할 수 있는 내비게이션 링크를 생성한다.HTML의 @@ 태그와 유사하지만, 페이지 새로고침 없이 SPA(Single Page Application) 내에서 라우팅을 처리한다. 특징페이지를 새로 고침하지 않고, 클라이언트 측 라우팅을 수행한다.단순한 라우팅에 적합하다.선택된 상태에 따른 스타일링 기능은 없다. 사용 예시 코드import { Link } from "react-router-dom";function App() { return ( ..

리덕스(Redux), 리덕스 툴킷(Redux Toolkit)들어가며리액트(React.js)의 전역 상태 관리 라이브러리 중의 하나인 리덕스(Redux)와 리덕스 툴킷(Redux Toolkit)에 대해 정리해본다.  리덕스(Redux)개념자바스크립트 애플리케이션에서 상태 관리를 위해 사용되는 상태 컨테이너애플리케이션의 상태를 중앙에서 관리함으로써 상태 변화를 쉽게 추적하고, 디버깅을 단순화하며, 다양한 컴포넌트 간에 상태를 공유하는 것을 쉽게 해준다.리덕스를 사용하기 위해서는 아래의 명령을 실행하여 관련 패키지를 설치해준다.$ yarn add redux # npm install redux$ yarn add react-redux # npm install react-redux  리덕스..

모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법 (normalize.css)들어가며모든 웹 브라우저에서 공통된 HTML 요소 스타일이 보여지도록 설정하는 방법에 대해 정리해본다. 방법normalize.css 사용하기normalize.css@normalize.css@는 다양한 브라우저에서 HTML 요소의 스타일을 일관되게 보이도록 만들어주는 CSS 파일이다.웹 브라우저마다 기본 스타일이 다르게 적용되기 때문에, 웹 페이지가 각각 다른 브라우저에서 다르게 보일 수 있다.이러한 불일치를 해결하기 위해 @normalize.css@는 각 브라우저의 기본 스타일을 초기화하거나 표준화하여, 웹 페이지가 어디서든 일관되게 보이도록 해준다.@normalize.css@는 모든 기본 스타일을 제..

Recharts 라이브러리들어가며리액트(React) 기반의 데이터 시각화 라이브러리인 Recharts에 대해 정리해본다. Recharts개념리액트(React) 기반의 데이터 시각화 라이브러리다양한 차트를 쉽게 생성하고 데이터를 시각적으로 표현할 수 있도록 도와준다.선언형 방식으로 리액트와 잘 맞으며, 그래프를 구성하는 데 필요한 여러 컴포넌트를 제공해 직관적으로 차트를 구성할 수 있도록 도와준다. 특징리액트 컴포넌트를 사용하여 차트를 구성하므로, 리액트의 상태(State)와 속성을 활용해 동적으로 차트를 업데이트할 수 있다.Recharts는 내부적으로 D3.js 라이브러리를 활용하여 차트를 렌더링한다.D3.js의 강력하고 다양한 기능을 리액트 컴포넌트 형태로 간편하게 사용할 수 있다.차트를 구성하는 요소..

Render들어가며애플리케이션 배포 및 호스팅 플랫폼 중 하나인 Render에 대해 정리해본다. Render개념클라우드 기반의 애플리케이션 배포 및 호스팅 플랫폼개발자들이 웹 애플리케이션, API, 정적 사이트 등을 손쉽게 배포하고 관리할 수 있도록 지원한다.복잡한 인프라 설정 없이도 자동으로 애플리케이션을 빌드하고 배포하며, 확장성과 안정성을 제공한다.스타트업이나 소규모 팀이 빠르게 애플리케이션을 배포하고 관리하는 데 유용하며, 복잡한 인프라 관리에 대한 부담을 줄여준다.Render는 데이터베이스, 백그라운드 작업 등 다양한 백엔드 서비스를 지원하여 풀스택 애플리케이션을 만드는 데에 적합하다. Cloud Application Platform | RenderOn Render, you can build, ..

Mockaroo들어가며가상 데이터를 생성해주는 도구인 Mockaroo에 대해 정리해본다. Mockaroo개념개발자와 데이터 분석가를 위해 현실적인 가상 데이터를 생성해주는 온라인 도구CSV, JSON, SQL, Excel 등 다양한 형식으로 최대 1,000개의 행을 무료로 생성할 수 있다. 주요 기능이름, 주소, 이메일 등 다양한 필드 타입을 제공하여 사용자 정의 데이터 생성이 가능하다.필드 이름, 데이터 타입, 옵션 등을 설정하여 원하는 데이터 구조를 만들 수 있다. CSV, JSON, SQL, Excel 등 여러 형식으로 데이터를 다운로드할 수 있다.가상 API를 설계하여 실제 API와의 상호 작용을 하게 할 수 있다. 사용 방법아래의 공식 홈페이지에 접속하여 필드 이름(Field Name)과 타입(..

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..