더 많은 포스팅 보기 자세히보기

분류 전체보기 68

Mac 사용 툴

머릿말 맥에서 사용하는 툴을 정리해보았다. Chrome 근본 브라우저 기존에 사용중인 북마크, 플러그인 등을 잘 정리해두어서 락인효과에 당했다. Adguard 광고차단 프로그램 예전에 저렴하게 구매하여 사용중이다. Magnet 프로그램 창 이동 예전에 구매하여 사용중이다. 단축키가 편리해서 적응되면, 윈도우의 기본 기능보다 좋은 듯 하다. Ballast 맥 좌/우 사운드 중앙 조절 나만 그런지 모르겠는데 소니 WH-1000XM4를 사용하다보면, 자기 맘대로 사운드 벨런스를 망처놔서 사용중이다. macs fan control 맥 펜 속도 조절 m1이 너무 팬을 안돌려서 가끔 강제로 돌려서 식힌다. Spark 메일 관리 맥에도 깔고 폰에도 깔고 하나의 계정으로 여러 메일 계정을 관리할 수 있고, 기본 Mai..

T자형 개발 2022.05.15

Mac 기본 세팅

머릿말 맥북을 처음 사용하기 시작한 지 4년 정도 되었고, 벌써 5년 차 맥 오너이다. 지금까지 새로운 맥으로 교체하거나, 오류로 인하여 OS를 밀어버린 것까지 합산하면, 대충 세팅을 10회 넘게 하였을 것이다. 그리고 곧 또다시 세팅을 해야 할 경우가 생겨버렸기 때문에 이번 기회에 정리를 해야겠다고 생각했다. 맥에 마이그레이션 기능이 있지만, 그것을 사용하는 것을 신성모독이다. 그런데 처음부터 세팅하게 되면, 이전에 되던 게 설정하는 방법을 까먹어서 안되면 또 찾아야 하고, 그럼 또 귀찮다. 그러므로 마크다운 연습하는 겸 해서 정리해보려고 한다. 사실 공부하기 귀찮아서 쓰는 것이다. 언어설정 한국인이라면 한국어지만, 맥에 문제가 생기거나 검색한 결과의 자료를 따라 해야 하는데 기본 설정이 한국어라면, ..

T자형 개발 2022.05.15

git 멀티계정 사용 정리

회사에서는 회사 깃허브 계정만을 사용하여야 하여서, 하나 만들게 되었다. 그리고 재택을 하다 보니 큰 문제가 생겼다. 내 깃헙계정이랑 회사 계정이랑 공존을 해야 한다는 것이다. 그래서 정리해보게 되었다. 많이 간략화 해보았다 맥 기준이고 윈도는 모른다 1. ~/ 경로에서 .ssh 폴더를 만든다. 2. ssh-keygen -t rsa -C "계정1@email.com" -f "계정1" 그 폴더에서 이 명령어를 계정의 개수만큼 각각 입력해준다. 도중에 입력하라는 내용은 그냥 엔터 쳐주는 것이 편하다. 3. vim config Host github.com-계정1 HostName github.com User 계정1@email.com IdentityFile ~/.ssh/계정1 Host github.com-계정2 H..

T자형 개발 2022.04.10

nvm으로 node 버전관리 하기

상황에 따라 최신 노드를 사용하지 못하는 상황이 발생하기도 합니다. 그럴 경우 A 프로젝트에서는 매우 짱짱한 버전을 사용하지만, B 프로젝트에서는 언제 나온 것인지 가늠하기 힘들기도 합니다. A와 B 프로젝트를 교차하며 개발해야할 경우 노드를 매번 다시 설치할 수도 없습니다. 그래서 나온 것이 nvm입니다. 여러 버전의 노드를 설치해둘 수 있고, 프로젝트마다, 전역 설정 또한 원하는 버전으로 미리 설치해 둔다면, 사용할 수 있습니다. brew가 설치 되어있다는 가정하에 진행합니다. brew install nvm 설치 후 ~/.zshrc 에 추가 라인을 적어주라는 설명이 나오고, 따라 하면 됩니다. ~/.zshrc export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nv..

ejs

ejs는 embedded javascript의 약자이다 주로 node.js 서버에서 웹 페이지를 구축할 때 사용한다. view 데이터 넘기는 방법 module.exports = function(app, fs) { app.get('/', function(req, res) { res.render('index', { test: 'hello' testLength: 5 }) }); } view에서 렌더링 방법 요 안에다가 자바스크립트 코드를 작성하면 된다. ejs 말 그대로 embedded 서버에서 보여줄 미리 실행되어 결과물 html만 들어오기 때문에 콘솔을 확인하려하더라도 개발자 모드로 볼 수 없다 *(node.js - DevTools로는 확인 가능함) %뒤쪽에 여러 선택자를 붙여 사용하지만 보통 안붙이거나,..

스타트업이 망해가는 과정(모예 6개월간 회고)

2021-09 ~ 2022-02 모예에 올라탄 이유 처음 구직을 시작할 당시 시리즈 A 정도의 작은 기업에 들어가서 기업이 성장하는 과정을 보며 함께 발전해야겠다는 생각이었다. 그래서 50인 미만에 년수 적고 시리즈 A급의 투자를 받은 기업을 중점적으로 지원하였다. (사실 50인 이상 기업의 공고가 별로 없...) 지금 지원했던 이력서를 보면 정말 개판이었는데, 그래도 대회활동을 중점적으로 좋은 평가를 받아서 면접을 볼 수 있었다. 면접에서 대회활동에서 개발한 리액트 네이티브 서비스의 코드를 같이 보며 코드에 관해서 질문을 받았고 나는 그에 대해 설명했다. 그리고 리액트 문법 정도를 면접에서 물어봤던 것 같다. 퇴사하기 전 면접을 보았던 분께 합격의 이유가 뭔지 물어보았더니 다른 사람들과 다르게 물어본 ..

회고 2022.03.03

무한 슬라이드의 개념

제한된 화면 크기에서 다양한 정보를 보여주기 위하여 슬라이드 UI를 많이 사용한다. 보통 화면을 쓸어 넘기면 다음 화면을 보여주는 식이다. 다른 스케일과 같은 부분을 제외하고 슬라이드가 여러 장 있다면 요런 식의 배열의 값이 들어있을 것이다. const images = [ 'https://image.com/image_1.png', 'https://image.com/image_2.png' ]; images를 리스트로 보여주려면 이러한 코드가 되겠다. {images.map(( image, index ) => ())} 여기서 의문점이 생긴다. 보통 화면을 넘기면 애니메이션이 나오는데 마지막 지점에서 쓸어넘기면, 어떻게 되겠는가? 양쪽 마지막에서 더이상 움직이지 않게 하거나, 마지막 페이지면 첫 번째 페이지로 ..

프론트엔드 2022.03.01

[React] 스무스한 가로스크롤 버튼

데스크탑 가로스크롤이 필요한 UI에서 가로스크롤이 있다는 것을 알려주기 위함과 사용자 편의성을 위하여 스크롤 버튼을 사용한다. 이를 구현해보고자 하였을 때 x-overflow: scroll;인 태그안에서 현재 x위치값을 파악하여 원하는 만큼 이동할 수 있었으면 하였다. useRef로 엘리멘트를 가져와 함수를 동작하게 하는 방향으로 구현해야겠다고 생각했다. const handleNextButtonClick = (nextType: 'prev' | 'next') => { if (!horizontalScrollRef.current) return; if (nextType === 'prev') { horizontalScrollRef.current.scrollTo({ left: horizontalScrollRef.c..

반응형