728x90 반응형 분류 전체보기136 [Jest] 자바스크립트 테스트 - 비동기코드 보호되어 있는 글 입니다. 2024. 3. 30. [Jest] 자바스크립트 테스트 - Matcher 알아보기 Matcher함수는 테스트 케이스의 예상 결과를 검증하는 함수 Jest에서 제공하는 다양한 Matcher 함수를 사용하면, 값이나 객체의 동등성, 타입, 포함 관계 등을 다양한 방식으로 검사할 수 있음 다양한 Matcher 메서드를 참고할 사이트 https://jestjs.io/docs/expect Expect · Jest When you're writing tests, you often need to check that values meet certain conditions. expect gives you access to a number of "matchers" that let you validate different things. jestjs.io 실습해본 함수들 toBe 숫자나 문자 등 기본 타입.. 2024. 3. 30. [Jest] 자바스크립트 테스트 - 초기셋팅 Jest 는 React 를 만든 페이스북에서 선보인 테스팅 프레임워크 별도 설정없이 빠르게 테스트 케이스를 작성할 수 있다 Jest는 자동화된 단위 테스트를 수행하기 위해 널리 사용되며 리액트(React)와 같은 자바스크립트 라이브러리와 프레임워크와 함께 사용될 때 특히 강력하다 리액트에서는 기본적으로 제공되어있다 폴더를 하나 만든다 vscode를 열고 터미널 실행 초기 셋팅 npm init //초기화 npm install jest --save-dev //개발모드에 jest 설치 package.json 파일 수정 "scripts": { "test": "jest" }, 잘 셋팅 됐는지 테스트해보기 fn.js 파일 생성 const fn = { add: (num1, num2) => num1 + num2, };.. 2024. 3. 30. [react]react-query 보호되어 있는 글 입니다. 2024. 1. 10. 구글 로그인 연동 보호되어 있는 글 입니다. 2023. 12. 15. 유저기능 보호되어 있는 글 입니다. 2023. 12. 11. mongoDB 보호되어 있는 글 입니다. 2023. 12. 5. [next.js]프리렌더링(정적생성, 서버사이드렌더링(SSR)) 프리렌더링(Pre-randering) 웹페이지 로딩 이전에 하는 렌더링 렌더링 과정 서버에서 HTML과 JavaScript 불러오기: 이 단계에서 Next.js는 페이지의 초기 버전을 빌드합니다. 이 초기 버전은 서버에서 생성된 정적 HTML로 구성되며, 클라이언트 측 JavaScript 번들도 포함합니다. 이 과정은 페이지가 빠르게 로드되도록 하며, 검색 엔진 최적화(SEO)에도 유리합니다. 리액트 실행: 사용자의 브라우저가 초기 HTML을 받은 후, 클라이언트 측 JavaScript가 실행되어 리액트를 시작합니다. 이 단계에서 리액트는 서버에서 받은 HTML과 동기화를 시도하며, 필요한 경우 추가적인 데이터를 가져오거나 사용자 인터랙션에 대응합니다. 클라이언트 사이드 렌더링에서 리액트가 화면 조정 (.. 2023. 12. 5. [next.js] Head 컴포넌트와 구글폰트 적용하기 각 페이지 별로 Head 컴포넌트 적용하고 title 변경해주면 페이지 변경할 때 페이지 이름이 변경된다 메타데이터와 외부 리소스 설정 & 연결 import Head from 'next/head'; function HomePage() { return ( {/* 페이지 내용 */} ); } 폰트 적용 기존에 자바스크립트나 리액트, css에서 적용한 방법대로도 가능 나 @import 구글폰트 적용방법 Next.js는 구글 폰트 기능을 제공함 _app.js 에 적용하기 import { Noto_Sans_KR } from '@next/font/google'; const notoSansKR = Noto_Sans_KR({ weight: ['400', '700'], //문자열로 넣기 subsets: [], // 한글.. 2023. 12. 4. [next.js] Image컴포넌트 이미지 컴퍼넌트를 사용하게 되면 주소가 바뀌고 이미지 원본을 바로쓰는게아니라 next.js 서버를 한번 거쳐서 최적화된 크기의 이미지를 가져옴 1. 이미지 크기를 알아서 최적화 해줌 2. lazy 로딩을 지원해서 페이지 로딩 속도도 최적화 해줌 (next.js에는 loading 속성이 적용되어있음, ) ex) 1. Image 컴포넌트를 사용하면 width와 height 속성을 적용해줘야한다 (이미지가 public폴더에 있으면 절대 경로로 지정해준다) import topImage from '@/public/image.jpg'; //import 한 이미지는 width,height 속성 없으면 이미지 크기로 적용됨(에러안뜸) //직접 절대경로로 이미지 넣으면 width,height 없으면 에러 뜸 2. fil.. 2023. 12. 4. [next.js] useContext(다크모드) 다크모드 적용 context 파일 만들기 context/ThemeContext.js import { createContext, useEffect, useState } from "react"; export const ThemeContext = createContext(); export default function ThemeProvider({ children }) { const [theme, setTheme] = useState("dark"); useEffect(() => { document.body.classList.add(theme); return () => { document.body.classList.remove(theme); }; }, [theme]); return ( {children} ); }.. 2023. 12. 4. [next.js] 리다이렉트(redirects), 커스텀 404 페이지 요청 경로를 다른 대상 경로로 리다이렉트 (url을 변경해준다?)를 지정할 수있다 ex) /next/3 => /prev/3 폴더명을 next 에서 prev로 변경하고 참고자료 확인 참고자료 next.js 공식 문서 https://nextjs.org/docs/app/api-reference/next-config-js/redirects 공식문서들어가서 코드 복사해서 next.config.js에 수정하면된다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async redirects() { return [ { source: '/about', //변경되기 전 경로(param 값이 같이 따라올경우 같이 적어준다.. 2023. 12. 4. [next.js] useRouter hook 쿼리스트링 가져오기 & 페이지 이동하기 쿼리스트링이란 키=값 형태, URL에서 ? 다음에 오는 내용이고 데이터 전달 방법입니다. 이동 버튼과 input 칸에 글 입력하고 엔터누르고 url 확인 const router = useRouter(); const { s } = router.query; //쿼리스트링 가져오기 router.push(`/test?s=${value}`); //페이지 이동 콘솔에 router.query 찍어보면 객체로 나온다. 2023. 12. 1. [next.js]Link 컴포넌트 Link 컴포넌트 리액트의 Link와 비슷하지만 몇가지 차이점이 있다 1. 라이브러리차이 React Router의 Link: React Router 라이브러리에 속함. Next.js의 Link: Next.js 프레임워크에 포함됨. 2. 경로 설정 React Router의 Link: to 속성으로 URL을 설정. ex) Next.js의 Link: href 속성으로 URL을 설정함. ex) About 3. 페이지 로드 방식 React Router의 Link: 페이지 전체를 다시 로드하지 않고 내부적으로 페이지를 바꿈. Next.js의 Link: 페이지 전환 시 자동으로 해당 페이지를 미리 로드하는 '프리패칭' 기능이 있어 더 빠른 로드가 가능. Link 와 a태그 차이 1. a 태그를 사용하면 페이지를 이동.. 2023. 11. 30. [next.js]라우팅(Routing) 라우팅 어떤 주소에 어떤 페이지를 보여줄지 정하는 것 Next.js는!!!! 파일시스템 기반 라우팅 파일의 경로가 주소에 매칭되는 라우팅 방식 page폴더에 index.js가 최상위 경로 ' / ' page폴더에 setting.js 와 search.js 파일 만들고 웹사이트 경로 확인해본다 page/products/1 다이나믹 라우팅 여러주소를 하나의 컴포넌트에서 처리하는 방법 next.js에서는 param 이라고 부른다 param을 사용하여 여러 페이지 랜더링 폴더명을 [id] 로 바꾸고 폴더안에 index.js로 바꿔도 똑같이 적용됨 2023. 11. 30. [next.js]Next.js 시작(설치, css 적용 방법, _app과 _document) Next.js를 사용하는 이유 빠른 로딩: 서버 사이드 렌더링과 정적 사이트 생성을 통해 페이지 로딩 속도를 개선합니다. 쉬운 페이지 라우팅: 파일 기반 라우팅으로 페이지를 쉽게 추가할 수 있습니다. 자동 코드 분할: 필요한 코드만 로드하여 성능을 향상시킵니다. API 라우트: 별도의 백엔드 없이 API를 쉽게 구축할 수 있습니다. 개발자 친화적: 개발 중에 빠른 피드백을 제공합니다. 강력한 커뮤니티 지원: 많은 개발자와 리소스가 있어 문제 해결이 쉽습니다. Next.js의 장점 프리렌더링 vercel로 서버 호스팅 파일 시스템 기반 라우팅 Next.js 셋팅 1. vscode 설치(Lts 적힌거 설치) https://code.visualstudio.com/ 2. node.js 설치 https://nod.. 2023. 11. 30. 유닉스 커맨드(참고용) 유닉스 커맨드 commend -명령어 Command Line Interface(CLI) 리눅스와 같이 키보드를 통해 커맨드 입력하는 방식 Graphical User Interface(GUI) 화면과 마우스를 사용하는 방식 리눅스(Linux): 무료 GNU/linux 운영체제 유닉스(unix): 유료 1970년대 초반에 개발된 윤영체제 소프트웨어를 개발하고 실행할 수 있는 편리한 플랫폼 쉽게 수정해서 다른 컴퓨터에 적용가능 유닉스를 기반으로 하는 다양한 운영체제 유닉스 운영체제(유닉스커맨드) ex) macOS , Linux, 우분투(Ubuntu) 윈도우 운영체제 윈도우 커맨드 웹사이트 배포과정에서 유닉스커맨드 사용 서버 컴퓨터를 사용하는데 유닉스 커맨드 사용 ● 커널 CPU에 명령을 내리는 소프트웨어 OS.. 2023. 9. 12. Git(참고용) Git 코드 버전관리 프로그램 git 기능 1. 버전관리 - 지난과정 확인 가능 - 이전 버전으로 돌아갈 수 있음 2. 동시 협업 github 다른컴퓨터에 작업물 보내기 깃으로 버젼관리하는것을 올리는곳이 깃허브 git 1. 레포지토리(repository) 커밋이 저장되는 곳 (프로젝트 디렉토리의 각 버전이 담기는 저장소) .git 2. 커밋(commit) 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위 & 결과물 ex) 프로젝트 작업할 폴더 만들고 git init - 비어있는 레포지토리 생성 커밋하기전 깃에게 커밋한 사람 알려줘야함 git config user.name "nammini" ---이름 설정 git config user.email "tbvhdaos@naver.com" ---이메일 .. 2023. 9. 12. Github 보호되어 있는 글 입니다. 2023. 9. 12. [css]display: grid 플렉스박스는 한 방향으로 배치되지만 그리드는 여러 방향(바둑판처럼)으로 배치가 가능함 원하는 위치에 자유롭게 배치 가능함 한칸을 그리드 셀이라함 grid-template-rows & columnns 격자 나누기 gap 간격 grid-auto-rows & columns 크기 미리정하기 grid-row & column, span 원하는 위치에, 여러칸에 걸쳐서 배치 grid-area, grid-template-areas 이름으로 배치 ex) 3 x 3 그리드 형태 display: grid grid-template-rows: 200px 200px 200px; grid-template-columnns : 200px 200px 200px; 또는 grid-template: 200px 200px 200px / 200.. 2023. 9. 11. [css]display: flex flex-box 유연한 박스 1. container 박스에 주는 속성 *display: flex; ->block에서 flex로 변경 *flex-direction -> 아이템의 배치방향(주축)을 지정 속성 값: row/column / row-reverse/ column-reverse default(기본값) => row *flex-wrap -> 아이템의 배치를 1줄 또는 여러줄 지정 속성 값: wrap/no-wrap/wrap-reverse 여러줄/1줄/줄 반대로 default(기본값) => nowrap *justify-content -> 주축 방향 정렬 속성 값: flex-start/ flex-end/ center/ space-between/space-around (space-between : 아.. 2023. 9. 11. [css]position html요소의 위치를 결정하는 방식을 설정 위치를 결정하는방식 static 정적 위치 - default (기본값) relative 상대위치 (상대 box 기준) absolute 절대위치 (윈도우 기준) fixed 고정 위치 위치 변경 속성 top, left, right, bottom position: static; position: relative; top: 30px; left: 30px; position: absolute; top: 30px; left: 30px; position: fixed; position: sticky; static 처럼 원래위치에 있다가 브라우저 스크롤이 내려가면 fixed 처럼 고정됨 반응 범위는 부모 요소안까지만 반응함 추가 right: 0; left: 0; 를 주게 되면 w.. 2023. 9. 8. [css]크기(size) width, height, font-size, padding, margin 등 css 크기(size)에는 절대적 크기 단위 픽셀(px) - 절대적인 단위. - 화면을 표시하는 기준이 되는 크기 ex) 10px = 정사각형 10개의 길이 상대적인 크기 단위 퍼센트(%) - 부모태그에 대해서 상대적인 크기 - 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면됨 ex) 부모가 200px X 100px 일때 자식이 50% X 50% 면 자식은 100px X 50px em, rem -글자 크기를 기준으로 상대적인 크기를 정함 1. em - css에서 1em = 부모태그의 font-size임 ex) 부모가 16px 이고 자식이 2em이면 16x2 = 32px임 2. rem - css에서 1rem = 최상위 태그(html.. 2023. 9. 5. open graph 사용하여 소셜 공유 미리보기 만들기(메타태그) 카카오톡, 페이스북 등등 sns에 링크를 공유하게 되면 미리보기가 가능하게 함 메타데이터 - 미리 배포해놓은 웹 사이트 주소를 활용함 ex) 나만의 블로그 하하하하하하하 소셜공유 미리보기 확인 사이트(페이스북 로그인해야함) 공유 디버거 페이스북 https://developers.facebook.com/tools/debug/ 공유 디버거 - Meta for Developers 공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요. developers.facebook.com 페이스북 디버거 로그인 후 입력창에 배포한 주소 입력하고 디버그 클릭 짜잔~!!!! 카카오.. 2023. 9. 5. Netlify 웹배포 웹배포를 도와주는 클라우드 서비스 간단한 프로젝트는 무료로 사용 가능 https://www.netlify.com/ Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com 먼저 작업한 파일을 폴더안에 넣어놓는다 1. 회원가입 및 로그인 2. 회원가입 후 Sites 클릭 작업한 파일을 밑에 이미지처럼 클릭후 폴더를 올려주고 기다려주면~!! 3. 아래 이.. 2023. 9. 5. 2. Figma 기능 I 보호되어 있는 글 입니다. 2023. 9. 4. 1. UI/UX 디자인 tool - Figma 장점 1. 웹을 기반으로 사용 2. 작업하던 링크만 있으면 어디서든 수정가능 3. 웹으로 작업하다보니 작업한 것들이 실시간으로 저장 가능 4. 무료로 사용 가능 피그마 사용 1. 피그마 홈페이지(웹 작업용) https://www.figma.com/ Figma: The Collaborative Interface Design Tool Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform. www.figma.com 2. 피그마 홈페이지(데스크탑 / 모바일 작업용) https:/.. 2023. 9. 4. [css]css 선택자 css선택자 {속성: 속성값;} 1. 태그 선택자 ex) div {background: red;} 2.아이디선택자 (tagname)#idname ex> #header {font-size:14px;} div#header 3.클래스 선택자 (tagname).classname ex> .large {font-size: 24px;} p.large 4.모든 선택자 * ex> * {padding:0; margin:0;} (*복합 선택자) 5. 하위 선택자 ex> #header li { width:25%;} (선택자 선택자) 6. 자식 선택자 ex> #header > p {width:200px;} (선택자 > 선택자) 7.형제 선택자 1)인접 형제 선택자 선택자 A+선택자B ex) h2 + p.. 2023. 5. 22. [html]시멘틱 태그 의미있는 요소 장점은 1. 검색 최적화 (seo) 사이트 최적화 (head 태그안에 meta태그 & 시멘틱태그 꼼꼼하게 작성) 네이버에 검색했을 때 상단에 사이트가 검색되게끔하는것 2 웹 접근성(A11y) 스크린리더를 사용하여 시각장애인이 사용할 수 있게 도와줌 장벽없는 인터넷을 만드는데 중요함 1. header html문서의 헤더를 정의하는 요소(로고, 네비게이션바 등등 포함) ex> 2. section html 문서의 sction을 정의하는 요소 section이란 제목이 있으면 html문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합(li처럼 목록으로 묶여있는?) ex) 3.footer html문서의 푸터부분을 정의하는 요소 ex) 4.main html요소의 주요 컨텐츠 부분을 정의하는 요.. 2023. 5. 22. [css]css속성 css 기본구문 선택자 {속성: 속성값;} 1. 태그선택자 h1 2. 아이디 선택자 #title 3. 클래스 선택자 .left ex) text속성 color 글자색상 색상명 red, green, yellow, 16진수 #000000~#ffffff, 컬러함수 rgb(r, g, b) 0~255, rgba(r, g, b, a) 0~1 font-size 글자 크기 단위: px / 기본 14px line-height 줄높이 20px, 1.6 font-weight 글자 두껍게 normal / bold 100~300 가늘게 400~600 중간 그뒤는 두껍게 letter-spacing 글자와 글자사이 간격 px text-decoration 글자 꾸미기 underline(아래라인) none line-throu.. 2023. 5. 22. 이전 1 2 3 4 5 다음 728x90 반응형
