프도

최근에 듣는 강의에서 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..

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 등)의 단점 몇..

안녕하세요 Unsplash open api로 React, NextJS, TypeScript로 미니 프로젝트를 만들어 보았습니다. unsplash 제공하는 쿼리부분 검색페이지를 만들었습니다. 페이지네이션을 활용하면서 다음 페이지를 볼 수 있습니다. 사진 클릭시 모달창이 뜨면서 상세 페이지를 확인할 수 있습니다 태그에는 유저이름, 사진기 브랜드, 간단 설명이 있습니다. 헤더 창에 부분에 Collection 부분 클릭하면 사진, 컬렉션 사진 Unsplash 통계가 있습니다. Unsplash 제공하는 쿼리부분이 많아서 최대한 요약해서 사진 첩을 만들었습니다. cat, dog, smoke, star등 상당한 많은 수의 영어 단어(한글도 가능합니다)들로 검색할 수 있으니 필요한 사진이 있으면 모달 오른쪽 상단에 다..

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 } }) } ..

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로 리턴해줍니다. 마지막으로 객체형태에서 최대값을 가져..

덧셈, 뺄셈 수식들이 '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 [연산자]는 + ..

프로그래머스에서 코딩테스트 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의 가로 크기가 ..

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 이라는 곳을 클릭해서 로그인을 해줘야 합니다. 클릭해서 파일을 업로드 해주세요! 부분을 클릭말고 파일을 올려줘도 파일 업로드가 가능합니다. 삭제 기능도 있습니다 테이블 끝에 휴지통 아이콘을 클릭시 파일 삭제가 가능합니다. 파일명 수정도 파일이름 클릭시 저장하고 싶은 파일명을 수정할 수 있..

SPA는 하나의 웹 브라우저 와 하나의 도큐먼트만 로드하는 싱글 웹페이지, 웹사이트 또는 웹 어플리케이션입니다. SPA는 유저가 사용하는 동안 페이지의 리로딩reloading이 필요없고, 컨텐츠의 변경, 변화가 필요할 때만 그 부분만 업데이트가 됩니다. 이는 자바스크립트의 API를 통해 구현할 수 있습니다. 리액트는 SPA를 구현하는 자바스크립트 라이브러리 중 하나로 현재 가장 많이 사용되고 있습니다. SPA의 장점으로는 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스 등의 장점이 있습니다. 새로운 페이지 요청 시 전체를 렌더링 하지 않고 변경되는 부분만 갱신하기 때문에 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 가진다. 새롭게 갱신되는 부분만..

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 요즘 많은 분들이 캠핑여행을 즐겨 하시길래 캠핑 후기를 올리면서 공유할 수 있는 프로젝트를 만들어봤습니다. 캠핑을 좋아하시고, 곧 계획하실 분들은 참고하면서 계획을 짜면 좋을 것 같습니다. 먼저 홈 화면 입니다. 비로그인시 게시글만 볼 수 있습니다. 이렇게 화면을 볼 수 있고요. 화면을 ..