WEB Dev
-
[에러대백과] 리액트 github page 페이지 배포 시 빈 화면 등장WEB Dev/에러대백과 2022. 5. 27. 01:11
드디어 리액트 앱을 깃헙 페이지에 배포했다. 배포 과정은 어렵지 않았으나 내부에 http 가 있어 보안 오류 때문에 여러번 수정해야 했다. 그리고 나서 보니 배포는 되었는데 주소로 들어가면 아무것도 보이지 않는 빈 화면이 나온다. 찾아보니 대부분 BrowserRouter 를 쓰는 사람들이다. react github page blank page 로 검색해보니 참고할 만한 스택오버플로우는 다음과 같고 https://stackoverflow.com/questions/54427793/getting-blank-page-after-react-app-publish-in-github Getting blank page after react app publish in github My steps are: npm run b..
-
[에러대백과] Attempted import error: ' ' does not contain a default exportWEB Dev/에러대백과 2022. 5. 16. 23:01
api 모듈을 모아둔 컴포넌트에서 export - import 해온 함수를 쓰려고 하니 다음과 같은 에러가 떴다. Attempted import error: '경로' does not contain a default export 이 경우는 export default로 해당 컴포넌트에서 default 로 내보낸 함수가 아닌 다른 함수들을 그냥 쓰려고 하면 나오는 오류로 import axiosLoginAccount from '../../api/apiCommunicate'; 위와 같이 쓰는 것이 아닌 import { axiosLoginAccount } from '../../api/apiCommunicate'; 위와 같이 쓰면 해당 오류가 발생하지 않는다.
-
[MySQL] 엑셀(구글 시트) 이용해서 쿼리 만들기WEB Dev/MySQL 2022. 4. 19. 18:14
CSV 로 import 하면 데이터베이스에 데이터 연동하는 것은 어렵지 않은데 uft-8 인코딩 문제가 자꾸 걸려서 부득이하게 엑셀 파일을 직접 손 대서 쿼리를 만들게 되었다. 이런 일을 겪는 사람들이 많지는 않겠지만 혹시 코딩이 어려운 분들을 위해 구글 시트의 도움을 받아 쿼리문을 만드는 방법을 소개해 본다. 워크벤치로 하나하나 넣는 것보다 쿼리 만들어서 실행하는 것이 더 빠르기 때문에... 현재 데이터는 구글 시트에 연동되어 남아있는 상태고, 해당 파일을 로컬로 다운받아서 가공해보았는데 이모지가 깨져서 구글 시트에서 바로 쿼리를 작성해보자 우선 테이블은 아래와 같다. 각각의 데이터에는 null 값도 있고 공백 값도 있는데, 백업하는 시트에서는 null 값도 공백으로 받고 있어서 주의가 필요하다. ar..
-
[Linux] 사용자 계정 비밀번호 변경하기WEB Dev/AWS 2022. 4. 16. 16:20
1. 내가 로그인 한 계정의 비밀번호 변경하기 1) passwd 명령어 치기 2) New password : 라고 나왔을 때 패스워드 입력 3) 다시 동일한 패스워드 재입력 해줌 2. 루트 계정으로 다른 계정 비밀번호 변경하기 1) sudo su 명령어 쳐서 루트 계정으로 로그인 한다. 2) passwd 변경할아이디 명령어 치기 3) New password 통해서 변경할 패스워드 입력해 진행한다. 참고한 블로그 리눅스 우분투 사용자 이름변경 및 패스워드 변경하는 법 먼저 사용자이름 변경부터 알아보겠습니다. root권한이 필요합니다. root 계정을 로그인합니다. $ sudo su 사용자 이름을 변경해 줍시다. # usermod -l # usermod -m -d /home/
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 3WEB Dev/Javascript | REACT | Node.js 2022. 4. 5. 00:07
이제 드래그는 되도록 만들었으니 드랍했을때 상태를 고정하는 함수를 만들어야 한다. 우리는 함수를 통해 정보를 전달해야하기는 하나 우선 화면을 바꾸는데 집중해서 함수를 만들어야 한다. 현재 적용하고 있는 함수는 onDragEnd 함수 하나밖에 없다. onDragEnd의 인자로 어떤 것이 전달되는지 확인해보면 아래와 같다. const onDragEnd = (res) => { console.log("목표 드래그") console.log("res", res) } 우선 목표 드래그의 onDragEnd 함수에 res 라는 인자를 전달하고 console.log로 찍어볼 수 있도록 했다. 그랬더니 우리가 이전에 지정한 draggableId를 포함해 combine, destination, draggableId, mode..
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기 2WEB Dev/Javascript | REACT | Node.js 2022. 4. 4. 00:08
Goal 컴포넌트를 드래그 할 수 있도록 만들었다. 이제 그 내부의 Todo 부분을 드래그 할 수 있도록 해야하는데 내부도 Droppable 영역으로 지정해야 하기 때문에 Droppable 태그를 넣어준다. 위와 같은 순서가 될 것이다. 이번에 리턴해 줄 Todo 는 Goal 안에서 map으로 돌고 있는 컴포넌트다. 아래와 같이 생겼다. return ( {/* Goal 컴포넌트 시작 */} {data.goalTitle} {/* Goal 컴포넌트 종료 */} {/* Todo 컴포넌트 map 시작 */} {data.todos.map((data, idx) => { return ( ); })} {/* Todo 컴포넌트 map 종료 */} ); 현재 Goal 컴포넌트가 드래그 되고 있고 이번에는 이 내부의 Tod..
-
[React] react-beautiful-dnd 으로 요소 드래그 되도록 만들기WEB Dev/Javascript | REACT | Node.js 2022. 4. 3. 17:57
요소를 드래그 해 순서를 바꾸는 기능을 구현하고 있다. 드래그 앤 드랍은 HTML5에서 기본적으로 API를 제공하고 있다. 하지만 해당 기능을 일일이 적용해서 드래그 기능을 만들게 된다면 시간도 오래걸리고 어렵기 때문에 라이브러리를 사용한다. 엄청 다양한 라이브러리가 있고 여러 라이브러리를 테스트해봤는데 atlassian 의 react-beautiful-dnd 라이브러리가 가장 단순해서 적용하기 쉬웠었다. 하지만 실제로 내 프로젝트에 적용하기가 너무 어려워서 고전을 겪고 있다. 일단 순서를 바꿔야 하는 정보들을 map으로 돌려서 렌더링 하고 있고, 중첩을 지원하지 않는 다양한 제약이 있긴 하다. 그래서 다시 한 번 차근차근 개념에 대해 생각해보면서 글을 적으면서 만들어보고 성공이냐 실패냐를 정해야 할 거..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 38WEB Dev/ToyProject 2022. 3. 21. 23:25
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다. 그동안 한 일은 1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제 수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다. 그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데 이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다. 드래그 라이브러리를 사용해서 대충 만..
-
[에러대백과] Your branch is ahead of 'origin/main' by 1 commit.WEB Dev/에러대백과 2022. 3. 16. 11:17
오늘의 error Your branch is ahead of 'origin/main' by 1 commit. 발생현황 기존에 회사 노트북의 로컬 폴더를 통해 git 백업을 진행했는데, 재택근무와 회사 근무를 병행하게 되면서 회사 노트북과 개인 노트북을 둘 다 사용해야 하는 일이 발생했다. 회사에 회사 노트북을 두고 집에 와서 서버에서 파일 받아 쓰려니 (권한 때문에 깃은 백업용으로만 사용 ^^^) 갑작스럽게 깃허브 에러가 발생했다. 번역기를 사용해서 해석해보자면 ! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://github.com/0000/0000.git' hint: Updates were rejected..
-
[HTML] blockquote 태그 알아보기WEB Dev/HTML | CSS 2022. 3. 14. 10:48
마크업 프로페셔널로 거듭나기 tobyyun 님의 마크업 개발 레벨 테스트 질문을 통해 마크업 역량을 키워보자 ψ(｀∇´)ψ 마크업 개발 레벨 테스트 질문 팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한 tobyyun.tumblr.com 질문 blockquote 태그는 어떤 용도로 사용해야 할까요? 답 blockquote는 block과 quote라는 영단어 두 개를 합성한 합성어로 만들어진 태그다. quote는 인용문이라는 뜻으로 다른 문서의 글이나 다른 사람의 말을 가져와 사용하는 것을 인용이라고 한다. 일반적으로 태그에서는 i 태그와 같은 텍스트를 강조하는 방법을 ..