[프론트엔드 테스트] 테스트를 작성해야 하는 이유/테스트 범위/테스트 목적
·
IT_STUDY/개인공부
테스트를 작성해야 하는 이유버그 해결 : 버그가 있는 서비스는 이미지를 추락한다. 한 번 추락한 이미지를 회복 시키는 것은 많은 시간과 비용이 필요하다. 이 때, 테스트 코드가 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을한다.유지보수 : 작성한 테스트 코드가 있다면 기존 기능에 문제가 생겼는지 반복적으로 확인할 수 있어서 적극적으로 리팩터링을 진행할 수 있다.리팩터링 : 결과의 변경없이 코드의 구조를 재조정한다.품질 향상 :어떤 구현 코드의 테스트 작성이 어렵다면 해당 코드가 너무 많은 역할을 한다는 신호이다. 일부 책임을 더 작은 부분으로 나눌 수 있는지 재검토해 더 좋은 코드를 작성할 수 있다.웹 접근성 : 신체적, 정신적 특성에 따른 차이 없이 동등하게 정보에 접근할 수 있게..
[Next.js] Next-Auth (Google)
·
Frontend/Next.js
Next-auth Next.js 애플리케이션에서 사용자를 인증하고 관리하기 위한 오픈 소스 라이브러리`next-auth`를 사용하면 다양한 인증 제공자(소셜 로그인, 이메일, 로그인 등) 손쉽게 통합할 수 있으며, Oauth 2.0, OpenID Connect, JWT(JSON Web Token)와 같은 다양한 인증 표준도 지원을 한다. 기능 - 다양한 인증 제공자 지원 - OAuth 2.0 : Google, Facebook, Twitter, GitHub 등 소셜 로그인 제공자를 지원한다.자체 로그인 : 이메일 기반의 인증 및 비밀번호 기반 로그인을 구현할 수 있다.타사 로그인 : 엔터프라이즈 인증 제공자(Auth0,Microsoft Azure AD)와도 통합할 수 있다. 세션관리 `next-auth`는..
[Next.js] css 모듈 사용 / 데이터 패칭 (geStaticProps, getServerSideProps)
·
Frontend/Next.js
CSS 모듈 사용import styles from './Home.module.css';function HomePage(){ return Hello World;}export default HomePage; - `Home.module.css` 파일을 만들어 `styles.title` 처럼 사용한다. 전역 CSS 사용//pages/app.jsimport '../styles/globals.css';function MyApp({ Component, pageProps }) { return ;}export default MyApp;- `pages/app.js` 파일에서 임포트 한다. 데이터 패칭 (geStaticProps, getServerSideProps) - Next.js는 데이터 패칭 메서드를 제공하여 서버 사..
[Next.js] 라우팅 / getStaticPaths & getStaticProps / userRouter Hook / Redirects & Rewrites
·
Frontend/Next.js
파일 기반 라우팅모든 애플리케이션에서 골격은 라우팅이다. next.js에서 라우팅은 파일 시스템 기반이다. `pages` 디렉터리에 파일을 생성하면, 해당 파일의 이름이 자동으로 URL 경로로 매핑된다. 기본 라우팅`pages/index.js` -> `/``pages/about.js` ->`/about``pages/blog/first-post.js` -> `/blog/first-post`동적 라우팅next.js에서는 파일 이름을 대괄호로('[]')로 감싸면 동적 라우팅이 가능하다.URL 경로의 일부를 변수로 처리하여, 다양한 경로를 하나의 페이지 컴포넌트로 처리할 수 있게 해주는 기능즉, URL의 특정 부분이 고정된 값이 아니라, 요청에 따라 변할 수 있는 경우 사용`pages/blog/[id].js` ..
[Next.js] API 라우트 / 미들웨어 / CORS
·
Frontend/Next.js
API 라우트 - next.js 에서는 API 라우트를 만들어 서버리스 함수를 쉽게 구현할 수 있도록 해주는 기능이다. API 라우트를 통해 별도의 서버 설정 없이도 서버 측 로직을 작성하고, 클라이언트 측과 데이터를 주고 받을 수 있다.  `pages/api` 디렉토리에서 사용할 수 있으며, 파일 기반의 라우팅 시스템을 따른다.서버리스 함수(Serverless Functions) : 클라우드 컴퓨팅에서 서버를 직접 관리하지 않고, 코드만 작성하여 클라우드 제공자가 알아서 실행해주는 일종의 서버 측 로직이다. 개발자는 함수 코드 작성에만 집중하고, 클라우드 제공자가 자동으로 서버를 프로비저닝, 확장, 관리하며, 함수가 호출될 때만 비용이 청구되는 방식으로 동작한다. 특징)자동 확장 : 요청 수에 따라 자..
[JavaScript] JavaScript 시작 / 파일 분리
·
Frontend/JavaScript
JavaScript1.    html 파일과 js 파일을 따로 만들어 준 후, html 안에 소스 작성하면 끝이다.
[MySQL] SQL 코딩테스트 코드리뷰
·
Backend/DataBase
https://school.programmers.co.kr/learn/courses/30/lessons/59045 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr SELECT i.animal_id, i.animal_type, i.namefrom animal_ins ijoin animal_outs o on i.animal_id = o.animal_idwhere i.sex_upon_intake like 'intact%'and (o.sex_upon_outcome like 'spayed%' or o.sex_upon_outcome like 'neutered%')..
[MySQL] SQL 코딩테스트 코드리뷰
·
Backend/DataBase
https://school.programmers.co.kr/learn/courses/30/lessons/144855 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr SELECT b.category, sum(s.sales) as total_salesfrom book bjoin book_sales s on b.book_id = s.book_idwhere s.sales_date like '2022-01%'group by b.categoryorder by b.category 목적 - 2022년 1월 동안의 책 판매 데이터를 기반으로 카테고리별 총 판매액을 계산 - 카..