본문 바로가기
  • 삽질하는 자의 블로그
2. MongoDB 연결과 API 를 통한 fetch(1) - MongoDB 연결 데이터베이스를 연결해보자 1. MongoDB Atlas 에서 데이터베이스를 만든다. 2. Project 를 생성하고 3. DataBase Access 를 세팅해준다. 유저를 만들었다면, 그 id 와 비밀번호를 반드시 저장해두자. 나중에 MongoDB 에 접근할때, 필요한 아이디와 비밀번호가 될 것이다. 4. Access 할 수 있는 유저를 만들었다면, 해당 유저의 권한을 세팅해준다. admin 유저로 만들수도, Read and Write 가 가능하게 할 수도, Read 만 가능하게 할 수도 있다. 5. 이제 Network Access 로가서, 어떤 IP 주소에서만 접속 할 수 있는지 설정한다. 0.0.0.0/0 은 모든 IP 주소에서 접근 가능하게 만들어준다. 6. 마지막으로 connect 를 들어가서,.. 2023. 1. 28.
1. Google OAuth 구현하기 [TypeScript + Next.js + Next-auth] 매번 OAuth 를 사용하지 않고, 이메일, 비밀번호 로그인을 주로 사용해보았다. 남들 다하는 OAuth 도 해보고 싶어서, 간편하기도 하고 보안성도 더 좋아보여 도전해본다. 하나씩 하나씩 기록해가며 해보자. 1. TypeScript + Next.js 의 구성 https://nextjs.org/docs/basic-features/typescript#create-next-app-support Basic Features: TypeScript | Next.js Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here. nex.. 2023. 1. 27.
0. 프로젝트를 시작해보자! 이번 프로젝트의 목적은 1. SASS 를 사용해보고 ** 2. Next.js 에 TypeScript 와 Redux-Toolkit 을 사용해 볼 것이며! 3. 개 정보 API 를 활용하여, 개 정보를 받아와보고 4. OAuth 를 통해, 구글 로그인을 구현해볼 것이다! 5. MongoDB 를 이용해 DB와의 연동도 해볼 것이다! 6. 애니메이션을 기깔나게 해볼것이다! 7. CSS 패턴(BEM)과 MVVM 패턴을 생각하며 만들어 볼 것이다! 이번 프로젝트는 언어는 TypeScript 를 사용하고 DB 는 MongoDB 라이브러리는 Next.js 를 사용해본다! 이번 프로젝트의 구현하고자 하는 목표는 심리 검사(personality behavior test) 를 통해 성격유형을 알아내고 그에 따른 강아지를 추.. 2023. 1. 27.
1. 특성 선택자 [ ] 와 결합자 ~, + , * 1. 결합자 바로 자기 아래 자식인 노드만 선택하는 결합자 [ > ] ul > li {// ul 의 바로 아래 li 에만 적용된다. ... } 서로 형제관계인 코드중, 해당 코드의 "이후" 로 적용되는 것을 선택하는 결합자 [ ~ ] p ~ span { color: red; } 이건 빨강이 아닙니다. 여기 문단이 있습니다. // p 이후로 시작 ( 아직 선택 X, 이후의 span은 전부 빨강) 그리고 코드도 있습니다. 이제 빨강입니다! // p 이후의 형제관계인 코드 (이제 빨강) 더 많은 코드가 있습니다. 이것도 빨강입니다! // p 이후의 형제관계인 코드 (이것도 빨강) 서로 형제관계인 코드중, 해당 코드의 "이후" 로 "단 하나만" 적용되는 것을 선택하는 결합자 [ + ] li:first-of-ty.. 2023. 1. 27.
1. SCSS(SASS) 를 사용해보자! [사용방법] 기본적인 사용법에 대해 알아보자. 1. 글로벌 sass 의 적용 styles 폴더에, "global.scss" 를 만들고 직접 css 처럼 적용하여 사용하거나, body { color : red; } 혹은 $custom : red; body { color : $custom } 처럼 사용할 수 있다. 후에, "_app.tsx" 에 가서 import "../styles/globals.scss"; 로 import 하여 사용한다. 2. 모듈 CSS 의 적용 똑같이 .module.scss 로 만들어서 적용시킨다. 3. 중첩되게 사용 .NumberTest { font-size: 1rem; color: green; .NumberTest__title { color: red; } } ==> ".NumberTest .Nu.. 2023. 1. 27.
0. SCSS(SASS) 를 사용해보자! [준비] CSS 를 매번 똑같이 정의하고, 반복하고, 복잡한 CSS 규칙에 하루종일 치덕여 살다가, SCSS 를 알게되었다. SASS 를 사용하면 SCSS 구문을 사용하여, 어썸! 한 스타일 시트를 만들 수 있다. https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS : Syntactically Awesome Style Sheets SCSS : Sassy CSS 말그대로 어썸! 한 스타일 시트이자, 아주 쿨! 한 스타일 CSS 을 말한다. .. 2023. 1. 27.
VSCODE 아주아주 편한 단축키 모음 1. 사이드 바 숨기기 ctrl + B 2. 위치마다 커서 만들기 alt + click 3. 코드 위아래로 옮기기 alt + ↑ / ↓ 4. 똑같은 코드 선택해주기 ctrl + D 5. 코드 위아래로 복사하기 alt + shift + ↑ / ↓ 6. 드래그한 모든 위치에 커서 만들기 alt + shift + I or alt + shift + drag하기 7. 페이지 최상단, 최하단 ctrl + HOME / END 8. 주석으로 만들기 ctrl + / 2023. 1. 26.
10. [ Redux-toolkit ] createSelector !! memoization된 값을 반환한다 Store 에서 오는 객체값이 너무나 커서, 리렌더링 될때마다 새 객체값을 생성시키고, 엄청난 양의 메모리를 소모하게 되었다. 그러므로, 평소처럼 useMemo 를 사용하여, memoizition 을 하는 방향을 모색하려는데, 나는 Redux-toolkit 을 사용한다! Redux-toolkit 에는, 메모이제이션 을 미리 사용하여, 내보낼 수 있는 좋은 기능이 있다. 바로 createSelector 이다. https://react-redux.js.org/api/hooks#using-memoizing-selectors Hooks | React Redux API > Hooks: the `useSelector` and `useDispatch` hooks` react-redux.js.org createSele.. 2023. 1. 25.
16. 타이머 만들어 보았다. import React, { Fragment, useRef } from "react"; import { useState, useEffect } from "react"; let initial = true; function Solution() { const inputMin = useRef(); const inputSec = useRef(); const [min, setMin] = useState(0); const [sec, setSec] = useState(0); // useRef 로 받아오고, 계산을 다시 해서 min ,sec 로 넣어줘야겠다. const [start, setStart] = useState(false); const startTimer = () => { setStart(true); const.. 2023. 1. 18.
9. [실전] - 택배상자 문제 택배상자를 트럭에 싣는다. 크기는 모두 같으며, "1번 부터 n번 상자"까지 "번호가 증가하는 순서대로 컨테이너 벨트에 놓여, 영재에게 온다." "컨테이너 벨트는 한방향으로만 움직인다". 상자는 "1번부터 내릴 수 있다" "1번부터 내려, 트럭에 싣게되면, 배달순서와 달라져 곤욕을 치른다." 따라서, "택배기사의 오더에 따라 택배상자를 실어야한다." 만약 벨트의 맨앞에 놓인 상자가, 현재 실어야 할 상자가 아니라면, "보조 컨테이너 벨트"에 올려둔다. 보조컨테이너 벨트는 양방향으로 전부 움직이지만, 입구가 하나다. 즉, "가장 마지막에 벨트에 보관한 상자부터 꺼낼 수 있다." "보조 컨테이너 벨트를 이용해도 기사님이 원하는 순서대로 상자를 싣지 못 한다면, 더 이상 상자를 싣지 않습니다." 택배기사.. 2023. 1. 18.
8. [실전] - 문자열 나누기 문제 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, "x"와 "x가 아닌 다른 글자들이 나온 횟수"를 각각 셉니다. "처음으로 두 횟수가 같아지는 순간 멈추고", "지금까지 읽은 문자열을 분리합니다." s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. s는 영어 소문자로만 이루어져 있습니다. 예시 s result "banana" 3 ".. 2023. 1. 18.
7. [실전] - 우박수열 문제 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2.결과로 나온 수가 1보다 크다면 1번 작업을 반복합니다. 5 ⇒ 16 ⇒ 8 ⇒ 4 ⇒2 ⇒ 1 우박수열을 좌표 평면 위에 꺾은선 그래프로 나타내보려고 합니다. 초항이 K인 우박수열이 있다면, x = 0일때 y = K이고 다음 우박수는 x = 1에 표시합니다. 이런 식으로 우박수가 1이 될 때까지 점들을 찍고 인접한 점들끼리 직선으로 연결하면 다음과 같이 꺾은선 그래프를 만들 수 있습니다. 이렇게 만든 꺾은선 그래프를 정적분 해보고 싶어졌습니다. x에 대한 어떤 범위 [a, b]가 주어진다면 이 범위에 대한 정적분 결과는 꺾은선 그래프와 x = a, x = b, y = 0 으로 둘러 쌓인 공.. 2023. 1. 18.

티스토리툴바