프로젝트 썸네일형 리스트형 구글 검색 1등! 검색하면 바로 나오기! 영어로 juckgum이라고 치면 내 사이트가 가장 먼저 나온다! 더보기 Proptypes를 이용한 타입 체크 JavaScript를 사용하는데 TypeScript 처럼 타입 검사를 하고 싶을 때는 Proptypes를 쓸 수 있다. 예시를 들어보자. "use client" import React from "react" import PropTypes from 'prop-types'; export default function Home(props){ // 서버단에서 불러온 데이터를 props내려주기 했을때 const {data} = props; // 구조분해할당으로 원하는거 가져오고 const datamap = data.map((a,i) => ( {a.title} )) return( {datamap} ) } Home.propTypes = { data: PropTypes.array.isRequired, }; 자 여기서 .. 더보기 반응형 웹 구현하기 전에 알아야할것! 반응형이란 반응형 웹이란 크롬창을 줄이거나 늘릴 때 웹 페이지가 반응해서 사용자의 화면에 맞춰 크기가 변하는 것을 말한다. 미디어쿼리 미디어 쿼리는 사용자 화면의 크기에 맞춰 css를 보여주는데 조건문과 비슷하다. 조건문 같은 부분에는 max-width와 min-width를 쓰는데 max는 내가 설정한 것 이하일 때, min은 이상일 때 적용된다. 그렇기 때문에 주로 max는 데스크탑이 주요할 때 쓰고 min은 모바일이 주요할 때 사용한다. // max-width 에서 모바일 화면 구현할때 @media only screen and (max-width: 425px) { // 화면이 425px 이하인것에 이 css를 적용시킨다. .box{ display: flex; flex-direction: column;.. 더보기 DI! DI DI는 의존 관계 주입이라는 뜻으로 의존 관계를 외부에서 결정(주입)해주는 것을 말한다. 탕짬면에서 탕수육 고기가 돼지고기가 아니라 닭고기로 바뀌면 유린기가 되는데 이럴 때는 탕수육이 돼지고기에 의존성을 가지고 있다고 한다.(돼지고기가 아니면 탕슉이 안되기 때문) DI를 하려면? 탕수육에 DI라는 의존 관계 주입을 해줘서 DIP라는 의존관계역전을 만들어주는 것이다. 메뉴를 탕짜면이 아니라 튀김짜장면으로 바꾸면 닭고기를 튀겨도 돼지고기를 튀겨도 튀김짜장면이 된다. 주문한 사람, 튀김재료들이 '튀김'짜장면에 의존하게 된다. 하위에 의존하는 게 아니라 상위에 '튀김'짜장면이라는 것에 의존하게 된다! 더보기 코드 리팩토링 비동기편 (await과 병렬) 비통기 통신 await과 병렬통신 프로젝트 코드를 보던 중 비동기에 대해 생각하고 있었는데 await이 지금 내 프로젝트에 어울릴까 하는 생각이 들었고 await 보다 병렬 통신이 더 잘 어울린다 생각해 병렬 통신으로 바꾸게 되었다! 비동기이란? 두 가지 작업이 동시에 실행되거나, 하나의 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 말한다. 탕짜면 주문이 들어왔을 때와 볶음밥과 짜장면이 하나씩 주문 들어왔을때 써야할 비동기 통신이 다르다! await은 탕짜면? await은 비동기적으로 데이터베이스 쿼리를 실행하고 결과를 가져오는 방식이다. 특징은 아래와 같다. - 개별 데이터 호출에 대해 순차적으로 처리 - 코드의 가독성이 좋음 - 데이터 호출이 순차적으로 처리되므로, 데이터 호출 간의 .. 더보기 Next.js .env 파일 관리! Vercel을 이용해 배포를 하던중 GitHub에 .env 파일이 없어 배포가 되지 않는 현상을 발견했다! .env 파일을 gitignore 로 안보이게 하니 Vercel 에서 배포를 하지 못하고 에러가 났다. 이유는 Vercel은 git repository에 연결하면 새로 변경한 코드를 메인 브랜치에 병합 시 자동으로 빌드 후 배포 해주기 때문에 그런것이다! gitignore 를 이용해야 한다 생각해 한참을 삽질 했지만 답을 찾지 못했는데 문득 GitHub에 .env파일이 없어서 안되는 거면 Vercel에 등록할 수 있겠다는 생각이 들었고 검색해보니 답을 찾을 수 있었다. 해결법 Vercel로 들어가 프로젝트로 이동해 Settings 메뉴에서 Environment Variable 페이지로 이동한다. 그.. 더보기 JSON 데이터 합치기 2탄! 저번시간! 데이터를 합치기 위해 여러 시도가 있었다! 1차 시도 처음에는 아래처럼 스프레드 문법을 썼다. // 따로 변수로 담아서 const bankBaseList = api.data.result.baseList const bankOptionList = api.data.result.optionList // 이런식으로 const combined = [... bankBaseList, ...bankOptionList]; 하지만 이렇게 되면 하나의 배열 안에는 들어가지만 내가 원하는 모양인 데이터가 하나의 객체로 모이지는 않기 때문에 고민이 필요했다. // 결과 [ { "aa": "bb" }, { "cc": "dd" } ] // 내가 원하는 모양 [ { "aa": "bb", "cc": "dd" } ] 2차 시도.. 더보기 금융감독원 API 사용하기! 적금저금 프로젝트에 시중에 판매되고 있는 적금상품이 있어야 한다고 생각해 금융감독원에 인증키를 신청했고 프로젝트에 쓸 수 있었다! API를 사용해 보자 금융감독원에 있는 설명을 보고 내가 원하는 요청변수를 적어 요청을 보내야 한다! 나는 적금/json/인증키/권역코드/페이지번호/은행명 이렇게 적었고 아래를 보면 알 수 있다! (은행명은 한글로 적거나 UTF-8로 적어도 된다!) // URL은 변수에 담아 const JUK_URL = `https://finlife.fss.or.kr/finlifeapi/savingProductsSearch.json?auth=${process.env.API_KEY}&topFinGrpNo=020000&pageNo=1&financeCd=%ED%95%98%EB%82%98` // A.. 더보기 이전 1 2 3 다음
