티스토리

프도

검색하기

블로그 홈

프도

happy8131.tistory.com/m

프도의길 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

우분투 PostgreSQL설치(pgAdmin 설정) 최근에 듣는 강의에서 PstgreSQL 데이터베이스를 사용한다고 해서 우분투(제가 개발환경이 우분투입니다)로 설치를 했습니다. https://www.postgresql.org/download/linux/ubuntu/ PostgreSQL: Linux downloads (Ubuntu) Linux downloads (Ubuntu) PostgreSQL is available in all Ubuntu versions by default. However, Ubuntu "snapshots" a specific version of PostgreSQL that is then supported throughout the lifetime of that Ubuntu version. Other versions of Postgr.. 공감수 0 댓글수 0 2024. 3. 5.
CSS in JS( ex. styled component )의 장단점 CSS-in-JS란? CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다. 기존 방식(css, scss 등)의 단점 몇.. 공감수 0 댓글수 0 2024. 2. 28.
사진첩 Open api 프로젝트 안녕하세요 Unsplash open api로 React, NextJS, TypeScript로 미니 프로젝트를 만들어 보았습니다. unsplash 제공하는 쿼리부분 검색페이지를 만들었습니다. 페이지네이션을 활용하면서 다음 페이지를 볼 수 있습니다. 사진 클릭시 모달창이 뜨면서 상세 페이지를 확인할 수 있습니다 태그에는 유저이름, 사진기 브랜드, 간단 설명이 있습니다. 헤더 창에 부분에 Collection 부분 클릭하면 사진, 컬렉션 사진 Unsplash 통계가 있습니다. Unsplash 제공하는 쿼리부분이 많아서 최대한 요약해서 사진 첩을 만들었습니다. cat, dog, smoke, star등 상당한 많은 수의 영어 단어(한글도 가능합니다)들로 검색할 수 있으니 필요한 사진이 있으면 모달 오른쪽 상단에 다.. 공감수 0 댓글수 0 2024. 1. 21.
안전지대(JS) function solution(board) { var answer = 0; let temp = board const boom = [[-1,1],[0,1],[1,1], [-1,0], [1,0], [-1,-1],[0,-1],[1,-1]] for(let i = 0; i { let [x,y] = item x = x + i y = y + j if(x >= 0 && x = 0 && y < temp[i].length && temp[x][y] == 0){ temp[x][y] = 2 } }) } .. 공감수 0 댓글수 0 2024. 1. 4.
최빈값 구하기 function solution(array) { var answer = 0; const obj = {}; array.forEach(item => { if(obj[item]) obj[item]++ else obj[item] = 1 }) const value = Object.values(obj) const max = Math.max(...value) if(value.filter(e => e === max).length > 1 ) return -1 return Number(Object.keys(obj)[value.indexOf(max)]) } 먼저 객체형태로 key, value 를 만들어줍니다. 그리고 최댓값을 구해서 최대값과 객체 값길이가 1이상이면 -1로 리턴해줍니다. 마지막으로 객체형태에서 최대값을 가져.. 공감수 0 댓글수 0 2023. 12. 26.
OX퀴즈 덧셈, 뺄셈 수식들이 'X [연산자] Y = Z' 형태로 들어있는 문자열 배열 quiz가 매개변수로 주어집니다. 수식이 옳다면 "O"를 틀리다면 "X"를 순서대로 담은 배열을 return하도록 solution 함수를 완성해주세요. 제한사항 연산 기호와 숫자 사이는 항상 하나의 공백이 존재합니다. 단 음수를 표시하는 마이너스 기호와 숫자 사이에는 공백이 존재하지 않습니다. 1 ≤ quiz의 길이 ≤ 10 X, Y, Z는 각각 0부터 9까지 숫자로 이루어진 정수를 의미하며, 각 숫자의 맨 앞에 마이너스 기호가 하나 있을 수 있고 이는 음수를 의미합니다. X, Y, Z는 0을 제외하고는 0으로 시작하지 않습니다. -10,000 ≤ X, Y ≤ 10,000 -20,000 ≤ Z ≤ 20,000 [연산자]는 + .. 공감수 0 댓글수 0 2023. 12. 22.
캐릭터의 좌표 프로그래머스에서 코딩테스트 JS 유연성을 키우기 위해 문제를 풀어보았습니다. 문제설명 머쓱이는 RPG게임을 하고 있습니다. 게임에는 up, down, left, right 방향키가 있으며 각 키를 누르면 위, 아래, 왼쪽, 오른쪽으로 한 칸씩 이동합니다. [0,0]에서 up -> [0, 1], down -> [0, -1] left -> [-1, 0] right -> [1, 0] 머쓱이가 입력한 방향키의 배열 keyinput와 맵의 크기 board이 매개변수로 주어집니다. 캐릭터는 항상 [0,0]에서 시작할 때 키 입력이 모두 끝난 뒤에 캐릭터의 좌표 [x, y]를 return하도록 solution 함수를 완성해주세요. [0, 0]은 board의 정 중앙에 위치합니다. 예를 들어 board의 가로 크기가 .. 공감수 0 댓글수 0 2023. 12. 22.
파일 저장 React, Next.js, Typescript 프로젝트 사용법 https://dropbox-ashy.vercel.app/ DropBox Welcome to Dropbox. Storing everything for you and your business needs. All in one place Dropbox Try it for free Your broser does not support the video tag. dropbox-ashy.vercel.app 우측 상단에 Sign in 이라는 곳을 클릭해서 로그인을 해줘야 합니다. 클릭해서 파일을 업로드 해주세요! 부분을 클릭말고 파일을 올려줘도 파일 업로드가 가능합니다. 삭제 기능도 있습니다 테이블 끝에 휴지통 아이콘을 클릭시 파일 삭제가 가능합니다. 파일명 수정도 파일이름 클릭시 저장하고 싶은 파일명을 수정할 수 있.. 공감수 0 댓글수 0 2023. 12. 21.
SPA란 SPA는 하나의 웹 브라우저 와 하나의 도큐먼트만 로드하는 싱글 웹페이지, 웹사이트 또는 웹 어플리케이션입니다. SPA는 유저가 사용하는 동안 페이지의 리로딩reloading이 필요없고, 컨텐츠의 변경, 변화가 필요할 때만 그 부분만 업데이트가 됩니다. 이는 자바스크립트의 API를 통해 구현할 수 있습니다. 리액트는 SPA를 구현하는 자바스크립트 라이브러리 중 하나로 현재 가장 많이 사용되고 있습니다. SPA의 장점으로는 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스 등의 장점이 있습니다. 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다. 새롭게 갱신되는 부분만.. 공감수 0 댓글수 0 2023. 12. 8.
React, NextJS, TypeScript로 캠핑후기 프로젝트 https://camping-18dbf.web.app/ https://camping-18dbf.web.app/ camping-18dbf.web.app https://github.com/happy8131/WYC GitHub - happy8131/WYC: 캠핌후기 캠핌후기. Contribute to happy8131/WYC development by creating an account on GitHub. github.com 요즘 많은 분들이 캠핑여행을 즐겨 하시길래 캠핑 후기를 올리면서 공유할 수 있는 프로젝트를 만들어봤습니다. 캠핑을 좋아하시고, 곧 계획하실 분들은 참고하면서 계획을 짜면 좋을 것 같습니다. 먼저 홈 화면 입니다. 비로그인시 게시글만 볼 수 있습니다. 이렇게 화면을 볼 수 있고요. 화면을 .. 공감수 0 댓글수 0 2023. 11. 4.
NextJs 배포시 Image Optimization 에러 NextJs + Typescript 를 gh-pages를 통해 배포 진행 중에 생긴 이미지 로더 에러 next/Image에서 임포트하는 컴포넌트의 default loader가 next export에서는 지원되지 않기 때문에 발생하는 에러다. 그래서 next.congif.js에 images 안에 loader: "akamai", path:"/" 이런식으로 설정을 해주면 이미지의 기본 주소값이 설정이 되어 이미지가 잘 로딩이 된다. 공감수 0 댓글수 0 2023. 10. 18.
NextJS invalid src prop next image 에러 Next.js 로 미니프로젝트를 만드는데 Error: invalid src prop next image .... 라는 에러가 떠 버렸다 그래서 해결방법은 위에 에러 부분 hostname "firebasestorage.gooleapis.com" 이있다 next.comfig.js 로 가서 이렇게 하시면 에러가 뜨지 않습니다. 공감수 0 댓글수 0 2023. 10. 14.
firebase Next.js 배포 firbase Next.js 배포하는 법 간략하게 소개하겠습니다! 먼저 Hosting에서 Get strarted 클릭합니다. 그대로 복사해서 작업중인 터미널에 설치 하고 Next를 클릭합니다 차례대로 설치합니다. 다 설치하면 Next클릭 꼭! firebase init 하기전에 npm run build 와 export: next export 를 추가해줘서 npm run export 설치후 out 폴더 생성을 확인합니다. firebase init 설치 할때 next.js는 이렇게 설정 해줍니다 Next클릭 꼭 해주시고 그러면 .firebaserc, firebase.json 파일 생성됩니다 배포 완료됩니다! https://nwitter-48f6e.web.app/ https://nwitter-48f6e.web... 공감수 0 댓글수 0 2023. 10. 3.
개발자 스터디 Book https://next-js-study-book.vercel.app/ 개발자 스터디Book 안녕하세요 프론트엔드 개발자입니다!같이 공부하실까요? 안녕하세요! 현재 프로젝트는 노션 API로 사용해서 블로그나 노션에 개인적으로 스터디한걸 취준생 분들 또는 개인 스터디 하시는 분 next-js-study-book.vercel.app 노션API 사용해서 notion에 스터디한 부분을 프로젝트로 만들었습니다 카드형식으로 무한스크롤로 10개 데이터씩 보이게 만들었습니다 설명 자세히 버튼 누르면 자세히 페이지로 이동합니다. 여기서 좀 더 업그레이드를 할 계획입니다 감사합니다! 공감수 0 댓글수 0 2023. 9. 26.
GraphQL 메시지 대화 삭제 대화창 삭제 기능을 만들어 보겠습니다. 대화리스트 부분에 마우스 오른쪽 클릭시 삭제 부분 클릭시 삭제 하겠습니다. 먼저 백엔드 작업부터하겠습니다. //backend src/graphql/typeDefs/conversation.ts type Mutation { deleteConversation(conversationId: String!): Boolean } type Subscription { conversationDeleted: ConversationDeletedSubscriptionPayload } resolver도 만들어줍니다 //backend src/graphql/resolvers/conversations.ts import { GraphQLError } from "graphql"; import { P.. 공감수 0 댓글수 0 2023. 9. 20.
GraphQL 메시지 읽음으로 표시 먼제 상대방 유저가 메시지를 읽었는지 확인하는 아이콘을 만들껀데 왼쪽에 보라색 아이콘이 보입니다 읽지않은 상태를 말합니다 만들어 보겠습니다. //frontend src/components/Chat/Conversations/ConversationList.tsx import { Box, Text } from "@chakra-ui/react"; import { Session } from "next-auth"; import { useRouter } from "next/router"; import { useState } from "react"; // import { ConversationPopulated } from "../../../../../backend/src/util/types"; import Conver.. 공감수 0 댓글수 0 2023. 9. 18.
GraphQL Subscription이란 GraphQL 쿼리 종류 간단하게 쿼리의 종류를 알아보려고 한다. 자세한 내용은 실제 채팅 서비스를 구현하면서 학습하는게 좋을 것 같아 간단한 설명만 적어놓았다. REST API와 GraphQL 역할을 잠깐 비교하자면 Query REST API의 GET메서드라고 생각하면 된다. 보통 데이터를 조회할 때 많이 사용한다. Mutation REST API의 POST, PUT, DELETE 등의 메서드라고 생각하면 된다. 보통 데이터를 조작할 때 많이 사용한다. Subscription 실시간 통신을 할때 사용하는 쿼리이다. 이름 그대로 구독하는 기능을 가지고 있으며 Mutation쿼리에서 데이터를 조작할 때 그 값을 구독해 변경사항을 실시간으로 가져올 수 있다. query와 mutation은 전통적인 서버/클라.. 공감수 0 댓글수 0 2023. 9. 14.
GraphQL 메시지 보내기 input 메시지를 서버로 보내기 위해서 백엔드에서 먼저 구현해줍니다. //backend src/graphql/typeDefs import gql from "graphql-tag"; const typeDefs = gql` type Message { id: String sender: User body: String createdAt: Date } type Query { messages(conversationId: String): [Message] } type Mutation { sendMessage( id: String senderId: String conversationId: String body: String ): Boolean } type Subscription { messageSent(convers.. 공감수 0 댓글수 0 2023. 9. 5.
GraphQL 대화생성 Subscription 대화생성 Subscription 만드는 방법을 하겠습니다. https://www.apollographql.com/docs/apollo-server/data/subscriptions/ *참고자료 Subscriptions in Apollo Server Persistent GraphQL read operations www.apollographql.com //backend src/graphql/typeDefs/conversation.ts import { gql } from "apollo-server-core"; const typeDefs = gql` scalar Date type Mutation { createConversation(participantIds: [String]): CreateConversatio.. 공감수 0 댓글수 0 2023. 8. 29.
WebSocket/ Subscription 메시지웹을 만들려면 WevSocket이 필요합니다 세팅을 시작하겠습니다. https://www.apollographql.com/docs/react/data/subscriptions Subscriptions Get real-time updates from your GraphQL server www.apollographql.com npm i graphql-ws 설치해줍니다. //frontend src/graphql/apollo-client.ts import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client"; import { GraphQLWsLink } from "@apollo/client/link/subscriptions"; imp.. 공감수 0 댓글수 0 2023. 8. 29.
GraphQL 대화 생성 저번에 유저 검색하는 부분을 하였습니다 검색 한 유저와 대화를 할 수 있게 대화 생성을 만들어보겠습니다. 선택누르시 검색한 유저랑 채팅할 수 있는 대화방 생성을 만들어 보겠습니다. 먼저 schema.prisma에서 테이블을 만들어줍니다 generator client { provider = "prisma-client-js" binaryTargets = ["native","darwin","darwin-arm64","debian-openssl-1.1.x"] } datasource db { provider = "mongodb" url = env("MONGODB_URL") } model Account { id String @id @default(auto()) @map("_id") @db.ObjectId userI.. 공감수 0 댓글수 0 2023. 8. 28.
prisma란 GrapQL 사용하면서 prisma를 같이 사용한다. TypeORM에 이어 타입스크립트 ORM으로 널리 사용되고 있기도 하고, 데이터베이스 마이그레이션에서도 사용되는 Prisma에 대해 알아보고자 한다. TypeORM과는 또다른 사용 방법을 가지고 있으며, 자체적으로 제공하는 스키마 형성 방식을 이용하면 SQL 쿼리를 직접 짜지 않아도 되는 장점이 있으며, 제공하는 ORM 메서드들 또한 다른 ORM과 비교했을 때 풍부함을 느낄 수 있다. 특히 서버리스 오픈소스 플랫폼인 Supabase에서 공식적으로 데이터베이스를 관리할 때 Prisma를 권장하고 있으며, 뿐만 아니라 여느 RDBMS와 같이 Prisma Studio라는 자체 GUI도 제공하는데, 이는 소프트웨어 설치가 필요하지 않아 더욱더 편리하게 느껴졌.. 공감수 0 댓글수 0 2023. 8. 25.
GraphQL- 유저 검색 기능 Message 채팅 웹을 만드는데 유저 검색 기능을 만들었습니다. import { gql } from "@apollo/client"; export default { Queries: { searchUsers: gql` query SearchUsers($username: String!) { searchUsers(username: $username) { id username } } `, }, Mutations: { createUsername: gql` mutation CreateUsername($username: String!) { createUsername(username: $username) { success error } } `, }, Subscriptions: {}, }; searchUsers 라는 q.. 공감수 0 댓글수 0 2023. 8. 23.
APOLLO란 무엇인가? 1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vue를 동시 지원한다는 점에서 인기가 높은 것 같습니다. 특히, 뷰에서 React를 쓸 경우 조합이 금상첨화가 되는데, 그 악명 높은 Redux를 Apollo로 대체가 가능해집니다. (GraphQL과 Apollo를 쓰면, REST API와 Redux를 없애버릴 수 있.. 공감수 0 댓글수 0 2023. 8. 22.
GraphQL이란 요즘회사에서 GraphQL을 많이 사용하고 현재 project에서 저도 사용해서 찾아봤습니다. 1) GraphQL 소개 GraphQL이란 페이스북이 모바일 앱을 재구성하기 위해 노력하던 2012년 개발되어 2015년 오픈소스로 공개된 데이터 쿼리 언어입니다. 자체적으로 서버와 클라이언트를 구축해 애플리케이션 서버 및 데이터베이스와 클라이언트 사이에서 Operation과 Resolve의 과정을 통해 서로 간의 데이터 상호작용을 도와줍니다. 특징으로는 어떤 종류의 Back-End(데이터베이스 및 다른 API 등)에도 연동이 가능하며, 강타입 및 단일 Endpoint를 지향합니다. 특히, REST API가 가진 구조적 문제인 Over-fetching과 Under-fetching을 해결할 수 있다는 큰 장점으로.. 공감수 0 댓글수 0 2023. 8. 22.
Graphql Query, prisma 저번에 구글 로그인을 만들었다 프론트에서 보여준 정보를 백엔드 서버로 보낼 것 이다. src/graphql/operations/user.ts import { gql } from "@apollo/client"; export default { Queries: { searchUsers: gql` query SearchUsers($username: String!) { searchUsers(username: $username) { id username } } `, }, Mutations: { }, }; 쿼리 grapql 만들어준 다음에 Auth.tsx에서 해줍니다. import { CreateUsernameData, CreateUsernameVariables } from "@/util/types"; import .. 공감수 0 댓글수 0 2023. 8. 22.
Graphql 리액트 연결 요즘 이직 준비하면서 Graphql 사용하는 회사들이 많아진 걸 느낍니다. 이번 포스트에서 Graphql 연결 방법에 대해서 알아보겠습니다. npm i @apollo/client graphql 라이브러리 설치를 진행 해줍니다. src/graphql/apollo-client-ts import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; const httpLink = new HttpLink({ uri: "http://localhost:4000/graphql", credentials: "include", }); export const client = new ApolloClient({ link: httpLink, cache: new InMe.. 공감수 0 댓글수 0 2023. 8. 22.
next-auth 적용하여 소셜 로그인 구현하기 NextJS 에서 next-auth 라는 라이브러리를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 관리 및 추가 할 수 있습니다. 이번 포스트에서는 next-auth 를 통해 소셜 로그인을 구현하는 방법에 대해서 알아보겠습니다. 먼저 next-auth 라이브러리 설치를 진행 해줍니다 npm i next-auth pages/api 경로에 auth 폴더를 생성하고 그 안에 [...nextauth].js 파일을 생성 한 뒤 next-auth 관련 설정 작성합니다. 원하는 소셜로그인의 provider를 providers 객체에 추가해줍니다. 여기서는 google 로그인을 기능을 위해 GoogleProvider를 추가하겠습니다. .env 환경 변수에 clientId와 cl.. 공감수 0 댓글수 0 2023. 8. 22.
Props Drilling 이란 무엇인가요? Prop Drilling (면접대답) 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다. import React from "react"; import "./styles.css"; export default function App() { return ( ); } function FirstComponent({ content }) { return ( I am the first component; | ); } function SecondComponent({ content }) { return ( I am the second component; ); } function ThirdCompo.. 공감수 0 댓글수 0 2023. 8. 19.
React 에서 virtual DOM이 무엇인가요? virtual 돔은 Dom에 접근하여 조작하는 대신에 이를 추상화 시킨 JS객체를 구성하여 사용합니다. 그래서 좋은점은 DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영해서 성능 향상에 도움이 됩니다 예를 들어 특정 페이지에 데이터가 변했다면 전체UI에서 가상돔을 리렌더링합니다 이전에 있던 Dom내용과 현재 내용을 비교합니다 그래서 바뀐 부분만 실제 DOM에 적용됩니다. https://dev-cini.tistory.com/11 공감수 0 댓글수 0 2023. 8. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.