분류 전체보기
-
Git 초기 세팅기타/Git 2022. 8. 24. 19:14
※ 이번 포스트는 Windows 운영체제 위에서 wsl2(ubuntu)를 이용해 실습하였습니다. Git init git을 이용해 버전 관리를 하고 싶은 프로젝트가 있다면, git init을 이용해 버전 관리를 시작할 수 있다. 해당 내용에 대한 실습을 위해 먼저 아래와 같이 새로운 디렉터리를 생성하여 이동하였다. $cd ~/practice $mkdir git $cd git 여기서 ls -al 명령어를 이용해 해당 디렉터리 상태를 확인해 보면, 아무런 파일도 존재하지 않음을 확인할 수 있다. $ls -al total 8 drwxr-xr-x 2 cookie cookie 4096 Aug 24 19:00 . drwxr-xr-x 6 cookie cookie 4096 Aug 24 19:00 .. 이 상태에서 git..
-
CSS text-overflow기타/메모장 2022. 8. 12. 21:49
CSS에서 텍스트가 overflow 될 때 ...과 같은 식으로 뒤에 잘린 부분을 나타내는 방식이다. 먼저 텍스트가 overflow 되는 면적을 확실히 해야 하므로, width 속성을 설정해야 한다. 이후 overflow 속성은 hidden으로 한다. 다음으로 white-space 속성을 nowrap으로 하여 텍스트 줄 바꿈이 생기지 않도록 한다. 마지막으로 text-overflow 속성을 ellipsis로 설정하여 텍스트 부분이 overflow 되었을 때, ...의 방식으로 표현되도록 설정한다. width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 어쩌다 한 번씩 사용해서 그런지, 필요할 때마다 까먹어서 여기저기 다시..
-
Typescript promise generic type기타/메모장 2022. 8. 11. 22:30
문제 Javascript에서 Typescript로 넘어오면서 타입의 사용법을 조금씩 공부하고 있다. 그러면서 promise를 return 하는 경우를 타입으로 표현해야 하는 경우가 생겼다. promise의 경우 제네릭을 이용하여 어떠한 타입을 이후에 넘겨줄지를 미리 지정할 수 있다. 이때 promise에서는 resolve와 reject를 이용하여, 비동기적으로 결과값을 return 하거나, 에러를 return 할 수 있다. 여기서 에러값의 경우 보통 원래 return 하려는 타입과 아예 다른 타입이다. 따라서 promise에 사용하는 제네릭을 어떻게 해야 하나 고민했다. Promise와 같이 '|'를 이용해서 결과값 타입과 에러 타입을 동시에 표현해야 하나 싶었지만, 결론은 간단했다. 결론 그냥 Prom..
-
SVG에 background-image 적용하기기타/메모장 2022. 7. 20. 16:44
내가 svg를 주로 사용하는 이유는 웹 상에서 특정 형태를 자유롭게 그려낼 수 있기 때문이다. 따라서 이런 svg로 만든 특정 형태 안에 background-image를 적용해보고 싶은 경우가 상당히 많았다. 하지만 svg에서는 css의 background-image 속성이 적용되지 않는다. 따라서 아예 다른 방식을 시도해보려 한다. 아래에서 시도한 방식들은 모두 React(CRA)에서 사용된 방식이다. (기본적인 Html이 아니다.) 1. Clip-path svg를 이용해 Element를 생성하지 말고, 일반적인 div Element를 svg모양대로 잘라내는 설계도처럼 사용하는 방법이다. clip-path (CSS) clip-path 속성은 CSS에서 사용할 수 있는 속성이다. 해당 속성은 특정 범위를..
-
Passport session 작동 안함기타/메모장 2022. 7. 9. 00:55
지금까지 passport를 써오면서 아무 문제없이 여러 프로젝트에 로그인을 구현하였다. 근데 이번 프로젝트에서 갑자기 passport가 문제를 일으켰다. 분명히 아무런 문제없이 로그인이 성공했는데, 심지어 유저 정보까지 잘 받아오는데 성공했는데, 로그인 정보가 유지되지 않았다. 이건 분명히 세션쪽에 저장하는 데에 문제가 생긴것이 확실해보였다. 문제는 그 원인을 하루종일 찾지 못했다는 점이다. 해결법 서버와의 통신을 위해 react단에서 axios를 사용했는데, axios의 withCredentials 옵션을 true로 설정했어야 했다. 프로젝트 시작할 때 한번 세팅해두고는 건드리지 않는 부분이라서 그런지 한번 잊어버리니까 도저히 생각이 안났다. 진짜 예전 프로젝트 코드들 다 뒤져보면서 겨우 찾았다. ax..
-
파일시스템 사용하기Archive/메모노트 데스크탑 앱 2022. 7. 2. 17:31
fs모듈 (Node JS) fs모듈은 Node.js에 기본으로 내장된 모듈로, 파일 입출력 처리를 위해 사용하는 모듈이다. 이번에 만드는 메모노트 앱에서 파일을 로컬로 저장하거나 불러오기 위해서는 해당 부분을 반드시 먼저 짚고 넘어가야 했다. fs 모듈은 비동기 메서드와 동기 메서드를 둘 다 제공한다. 따라서 구상한 프로젝트에 맞는 것으로 골라서 사용하면 된다. 비동기 메서드의 경우, 마지막 인자로 콜백 함수를 받아서 실행되며 return 값은 없다. 반면 동기 메서드의 경우, 결괏값을 반환하며 예외를 일으킬 수 있다. (try-catch문 사용) 디렉터리 생성 fs모듈을 이용해 디렉터리를 생성하기 위해서는 mkdir()이라는 메서드를 사용한다. const fs = require("fs"); fs.mkd..
-
Electron과 React간의 데이터 통신Archive/메모노트 데스크탑 앱 2022. 6. 29. 22:17
React에서 Electron의 API 사용 Electron을 이용해 생성한 데스크톱 앱은 일반적인 브라우저에서 동작하는 웹앱과 달리 강력한 기능들을 추가로 지원한다. 사용자의 컴퓨터 자원에 직접적으로 접근이 가능하기 때문에 파일 시스템을 이용하거나, 알림을 보낸다거나, 블루투스를 사용하는 식으로 여러 방식의 활용이 가능하다. 이때 이러한 기능들은 Electron 자체적인 API를 이용해 사용할 수 있는데, React를 이용해 Render를 진행한다면, React에서 어떻게 이러한 기능에 접근할 수 있을까? 이는 IPC 통신이라는 방식을 이용하여 가능하다. IPC(Inter-Process Communication)이란, 프로세스 간 통신이라는 뜻으로, 프로세스들 사이에서 서로 데이터를 주고받는 방법이나 ..