Who I really am
Lodash - javascript 인기 라이브러리 - array, date, object 등 순수자바스크립트의 데이터 구조를 손쉽게 다룰 수 있도록 돕는다. - 특히 프론트엔드가 백엔드로부터 받은 데이터를 핸들링할 때 많이 쓰인다. - 바닐라 자바스크립트 함수에 비해 성능이 떨어질 수 있지만, 함수의 확장성 때문에 편리하게 사용이 가능하다. (ex. 자바스크립트의 map은 배열에서만 사용할 수 있지만, lodash의 map은 객체도 받을 수 있음) - 제이쿼리에서 변수를 $ 기호로 감싸는 것처럼, 로대쉬는 _를 사용한다. (_.map, _.uniq ...) - 공식홈페이지(링크) 또는 메소드 정리한 사이트(링크)에서 함수 종류 확인 가능 실제 프로젝트에서 유용하게 썼던 2가지 함수를 소개한다. _.is..
크리에이티브 코딩에서 알게 된 인스타에서 아티스트를 위한 딥러닝 강좌가 열린다고 하여 참여해봤다. (인스타그램 @okdalto) 김성현 연사 뭐하는 사람인가? (사실 내가 이 강좌에 참여한 가장 큰 이유는 '이런 류의 일을 하는 사람은 뭐라고 명료하게 정의할 수 있을까, 직업으로써 얼만큼의 확장성이 있을까, 어떤 방향성을 가지고 있는가' 같은 것들이어서 주의깊게 들었다.) - 자신을 컴퓨터 그래픽스 리서처라고 소개한다. - 현재는 anigma ai라는 회사 창업한 상태 - 어릴적 장래희망은 그래픽디자이너, 학사는 국민대 영상디자인, 석박사는 카이스트 비쥬얼 미디어 랩(=원래부터 공대 베이스는 아니었다) - 취미는 코드를 사용한 렌더링 - 디자이너는 디자이너가 잘할 수 있는 일을 해! 네가 컴공 전공자만큼..
조건 - 위 이미지에서 흰색박스(ADT Total untamount...) 영역의 width는 가변적으로 늘어나고 줄어들 수 있다. - 흰색박스의 길이에 따라 아래 텍스트(description...) 영역의 max-width가 맞춰지고 줄바꿈 되어야 한다. - 고정 width는 부모, 자식 어디에도 쓸 수 없다. 해결책 1. 부모요소에 max-width: min-content 속성을 준다. 2. 줄바꿈되면 안되는 요소에 white-space: nowrap 속성을 준다 (=하늘색 박스) HTML 삽입 미리보기할 수 없는 소스 뭐 자바스크립트로 흰색박스 영역 width를 구해서 그걸 max-width로 줘야하나... 이런 복잡한 생각을 했었는데 너무나도 간단하게 해결 완!
아르코에서 인공지능 퍼포먼스라는 하루짜리 강의가 열린다고하여 등록해서 들어보았다. 예술과 인공지능...? 창제작과정? 커리큘럼을 읽어봐도 어떤 내용일지 잘 상상이 가지 않아 일단 가서 들어보기로... 강의 내용은 서울예대 김제민 교수님이 개발자와 함께 프로그램을 만들면서 어떤 시행착오를 겪었는지, 또 앞으로 우리들이 인공지능을 어떤 식으로 창작물에 활용할 수 있을지 가볍게 훑어보는 자리였다. (약 20여 명이 모였는데, 개발자는 나 혼자였다. 다른 사람들은 전부 예술이나 기획쪽 직군..) [백조편의 시 - 레이몽 크노 무한의 텍스트 조립] 이라는 영상을 보여주었는데, 여기서 뭔가 영감을 얻을 수 있을 것 같아 적어두었다. 근데 집에 와서 유튜브 찾아보니 검색에 안나오네... 강의 들으면서 소개받은 사이트..
const myObject = { first: 'apple', second: 'banana', third: 'carrot' } type KeyType = keyof typeof myObject; type ValueType = (typeof myObject)[keyof typeof myObject]; // 결과 // KeyType = "first" | "second" | "third" // ValueType = "apple" | "banana" | "carrot"
니즈 - 해당 화면을 모바일 화면크기로 보고있는지 앱 전체에서 알 필요X.. 일부 컴포넌트에서만(=부분적으로) 필요했음 - 무슨 디바이스로 접속했는지 등의 자세한 정보는 필요하지 않았음 - '모바일' 또는 '모바일아님' 이렇게 두 가지 상태로만 나뉘는 간단한 반응형 웹이었음 뭐 대단한 걸 요구하는 게 아니었기 때문에.. react-responsive와 같은 외부 모듈을 가져다 쓰는 것 보다는 간단한 custom hook을 만들어 쓰기로 했다. 커스텀 훅 만들기 // useMobile.ts import { useState, useEffect } from 'react' import { mobileSize } from 'src/styles/theme' const useMobile = () => { const ..
App/Index.tsx 파일 등이 themeProvider로 감싸져있는 상태에서 시작 // App.index import { theme } from 'src/styles/theme'; ... 자주쓰는 컬러 팔레트 만들기 1) theme.ts 파일에 원하는 색상값 설정 // theme.ts const myColor = { main: '#546de5', light: '#778beb', deep: '#3146ad', }; export const theme = { myColor, }; export type Theme = typeof theme; 2) styled.d.ts 파일에 인터페이스 설정 (타입스크립트 사용을 위함! styled.d.ts 파일 위치는 자신이 편한 곳에다 만들기) import { Theme..
let buttonX, buttonY, buttonRadius, buttonH; let sliderStartX, sliderEndX, sliderY, handleX, handleRadius; function setup() { createCanvas(windowWidth, windowHeight); init(); } function windowResized(){ resizeCanvas(); } function init(){ buttonX = width * 0.5; buttonY = height * 0.5 - 100; buttonRadius = 50; buttonH = 10; sliderStartX = width * 0.5 - 150; sliderEndX = width * 0.5 + 150; sliderY ..
scroll-snap-type 를 사용해서 스크롤 시 다음 섹션의 상단이 화면 위에 착! 붙는 액션을 구현해본다. MDN 문서 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-type - CSS: Cascading Style Sheets | MDN The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one. developer.mozilla.org 포인트 - 부모인 콘테이너의 높이는 100vh고, 자식들(=각 섹션 div들)의 높이는 부모의 100%이다. HT..
