전체 글
-
[GitHub] 카페24 임대형 쇼핑몰 깃허브로 소스코드 버전 관리하기 (FTP Deploy)WEB Dev/GIT | GITHUB 2022. 6. 7. 13:30
카페24 쇼핑몰 쓰면 쓸수록 괴롭기도 하고 진국이라는 생각도 든다. 정말 기능이 많은 어드민을 쓰기 위해 계속 카페24로 작업을 하고 있는데, 개발자 입장에서 소스코드 관리가 안 된다는 점이 너무 괴로웠다. 일단 뭔가 하나 변경하면 별도로 텍스트 파일로 저장해놓고 (주로 노션에) 작업을 해야 했다. 깃허브로 복구를 많이 진행해 본 것은 아니지만 소스코드가 어딘가에 온전히 살아있다는 것이 얼마나 큰 위안을 주는지 개발자들은 알거다. 카페24의 임대형 쇼핑몰은 기본적으로 ftp 를 이용해 배포를 진행한다. 개발자가 아닌 사람들도 쇼핑몰을 쉽게 이용할 수 있도록 만드는 것이 카페24의 특징인데, 모듈-변수 라는 방식으로 각 컴포넌트의 기능들을 이용할 수 있게 해주고 HTML이나 CSS에 지식이 있으면 프로 모..
-
[에러대백과] 리액트 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'; 위와 같이 쓰면 해당 오류가 발생하지 않는다.
-
[카페24] 카페24 배포 위해 git-ftp 사용하기 (실패)StartUP/카페24 2022. 5. 6. 13:37
5월에 작성한 글인데 결론부터 말하자면 이 git-ftp는 작동을 안했고 (세팅이 잘못되었던듯) github에 Action 기능을 통해 배포하고 있다. 워낙 특수한 상태의 배포 형식이라 나중에 한 번 더 작성해볼 계획...? 카페24에 퍼블리싱 되는 디자인 파일들을 로컬에 다운 받아 수정하면 자동으로 업로드 되는 VSCode의 sftp 를 쓰고 있었는데 이제 해당 파일들도 깃으로 관리하기 위해 git을 통해 배포되는 방식을 써보기로 했다. git-ftp의 경우 중앙집중식 배포 프로그램으로 이용하기에는 부적절하다는 코멘트가 있기는 하다. ftp에 모든 파일이 올라가기까지 다른 파일이 수정되어서는 안된다는 부분인데.. 일단 테스트를 해보고 다른 방식을 찾던지 해야할 것 같다. 지금 필요한 것은 1. 버전관리..
-
[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으로 돌려서 렌더링 하고 있고, 중첩을 지원하지 않는 다양한 제약이 있긴 하다. 그래서 다시 한 번 차근차근 개념에 대해 생각해보면서 글을 적으면서 만들어보고 성공이냐 실패냐를 정해야 할 거..
-
[스타트업] 팀 노션 만들기StartUP 2022. 3. 25. 23:16
팀 노션을 전체적으로 정리하는 프로젝트을 진행하고 있다. 겸사겸사 프론트엔드 엔지니어답게 oopy 도메인을 이용해서 회사 브랜딩 페이지도 작업해야하는데 아무래도 주말까지 작업해야할 것 같다. 디자이너도 아니고 CEO도 아닌데 브랜딩 페이지를 왜 만드냐면 회사 백엔드 개발자님을 모시게 되면서 온보딩 자료를 갖춰야 하기 때문이다. 사실 나도 스타트업에 매우 많은 기대를 했었지만 온보딩 키트나 온보딩 커리큘럼이 제대로 갖춰진 곳은 유니콘이 된 급에서나 가능한 것임을 입사하고 깨달았다. 내가 온보딩 하는 과정은 그다지 아쉽지는 않았으나 팀원 소개가 명확하게 이루어지지 않아 직접 '어떤 일을 하시는지' 물어봐야 하는 상황이 있었고 다른 회사 브랜딩 페이지들을 보면서 조금 더 '갖춰놓은' 페이지가 있으면 앞으로 새..