본문 바로가기
반응형
피그마 사용법과 협업하기(개발자 시점) 디자이너와 개발자의 협업 툴, 피그마(Figma) 웹 브라우저 기반으로 동작하는 피그마는 개발자와 디자이너가 협업하기 정말 좋은 디자인 툴이다. 피그마는 웹 브라우저 기반이기 때문에 작업 환경에 대한 걱정 없이 모두가 사용할 수 있다. 다시 말해 설치할 필요가 없고, 운영체제와 상관 없이 사용할 수 있는 장점이 있다. 또한 피그마는 디자인이 클라우드에 있고 고유한 URL 덕분에 개발자가 항상 최신 버전의 디자인을 빠르게 확인할 수 있으며, 내장된 기능을 통해 디자이너와 개발자가 쉽게 커뮤니케이션을 할 수 있게 되었다. The design lives in the cloud and has a unique URL, so it serves as the source of truth for the entire te.. 2022. 4. 17.
Tailwind CSS 애니메이션 사용법, 커스터마이징 "CSS로 해결 가능하다 생각되는 것은 웬만하면 CSS로 처리하는 것이 좋다" Tailwind CSS에선 애니메이션 중 가장 일반적이고 자주 쓰이는 것들 몇개가 내장되어 있다. 또한 내장된 애니메이션 속성을 변경할 수도 있고, 애니메이션을 추가로 만들 수도 있다. 먼저 내장된 애니메이션을 살펴보고 다음 방법들을 알아보자. Spin Animation 로딩 화면에 자주 쓰이는 기본적인 회전(spin) 애니메이션이 내장되어 있다. Code animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } Ping Animation 알림 배지에 유용하게 쓰일.. 2022. 4. 8.
footer 하단에 고정(feat.flex) content의 양이 적을 때 footer를 페이지 가장 아래에 고정 시키는 방법은 여러가지가 있지만 제일 좋은 방법을 알게 됐다. 바로 flex를 이용하는 방법인데 내가 아는 방법 중에는 가장 간단하고 쉽게 해결할 수가 있었다. html, body에 height: 100%를, body에 display: flex, flex-direction: column 속성을 넣는다. content 영역에 flex: 1을 주면 끝. 이렇게 하면 뷰포트 크기에 상관없이 footer가 항상 하단에 고정된다. 코드 헤더 메인 콘텐츠 푸터 2022. 3. 30.
[JS] switch 사용법(feat.타입스크립트) switch는 하나의 표현식에 대해 여러 조건들이 존재할 때 유용하게 쓸 수 있다. 즉, 어떤 상황에 대해 여러 경우(분기)로 나누어질 때 사용하면 좋다. (과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 등) 구문(syntax)과 예시를 통해 살펴보자. 구문(Syntax) switch (expression) { case value1: // 표현식(expression)의 결과가 value1과 일치할 때 실행 됨 break; case value2: // 표현식(expression)의 결과가 value2과 일치할 때 실행 됨 break; // ... case valueN: // 표현식(expression)의 결과가 valueN과 일치할 때 실행 됨 .. 2022. 3. 27.
VS Code 커서 스타일 및 애니메이션 변경하기 Visual Studio Code에서 커서의 스타일(색상, 너비 등)과 애니메이션을 변경할 수 있다. cmd(윈도우는 ctrl) + shift + p로 명령 팔레트 실행 json 검색 기본 설정: 설정 열기(JSON) 커서 스타일 색상 코드 "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" } 커서 색상 선택 참고 - Color Tool 너비 코드 "editor.cursorWidth": 6 스타일 line(기본값) block underline line-thin block-outline underline-thin.. 2022. 3. 18.
[프로그래머스] 신고 결과 받기 | JavaScript 문제 풀이 이게 정말 레벨1 문제인가..? 카카오 기술 블로그에서는 해시 자료구조를 활용할 수 있는지에 대한 문제라고 설명한다. (게다가 정답률이 80.13%다. 😲) 1. userList 만들기 const userList = id_list.reduce((result, currentId) => { result[currentId] = [0, []]; return result; }, {}); 먼저 신고된 횟수와 신고한 유저를 담을 userList를 만든다. reduce() 메서드를 통해 이런식으로 객체를 만들 수 있다는 것을 다시 한번 배우게 됐다. 2. userList에 신고된 횟수, 신고한 유저 ID 담기(중복 제거) for (const id of new Set(report)) { const [REPOR.. 2022. 3. 10.
개발자가 알아야 할 광고 용어 모음(feat.광고 플랫폼 개발자) 회사에서 면접을 볼 때 나는 이런 말을 했다. "제가 전혀 모르는 분야인 광고라는 플랫폼에 개발이 접목되면 재미있을 것 같고, 호기심이 생겨서 지원하게 되었습니다." 그렇게 디지털 광고 회사를 다니게 되었고, 모르는 광고 용어가 굉장히 많았다. 자주는 아니더라도 광고 용어들을 접하다보니 어느 정도는 알아야 개발을 더 수월하게 할 수 있을 것 같았다. 완전히 외우지는 못하겠지만 '까먹기 때문에 살려낸다'라는 생각을 갖고 정리를 해보자. 매체사(Media Company) - 광고 플랫폼을 가진 회사 광고를 진행할 수 있는 플랫폼을 가진 회사들을 뜻한다. '광고 매체 + 회사 = 매체사'인 것이다. 구글, 네이버, 카카오 등을 매체사라고 부른다. 퍼블리셔(publisher)라고도 하는 것 같다. 🤔 비딩(Bi.. 2022. 3. 6.
반응형

티스토리툴바