브리의 성장기

😀 TIL 221120 - 자바스크립트 인프런 강의 수강 오늘은 논리연산자에 대해 학습했다. 프로그래밍의 세계랑 친해지자 ! Boolean 연산자로 형변환 됐을때, false를 반환하는 경우이다. ** NaN, false, ''(빈 문자열), 0, undefined, null 나머지는 형변환하면 true를 반환한다. 그리고 아래 예제를 풀어보았다. Q 5 + 4 * 3 === 27 논리연산자만을 이용하여 true가 되게 만들어보세요 A (5 + 4) * 3 === 27; // true 5 + 4 * 3 !== 27; // true !(5 + 4 * 3) === 27 // true 5 + 4 * 3 < 27 // true

😀 TIL #221118 - 자바스크립트 인프런 강의 수강 오늘은 숫자열/문자열의 차이와 연산자 우선순위에 대해 학습했다. 수업 중 아래 퀴즈가 재미있었다. Q 연산자 우선순위를 참고해 3 ** 2 + 1 의 결과를 27로 만들어보세요. A 3 ** (2 + 1) **는 거듭제곱 할 때 쓰인다. ✨ 오늘 한 일 - 건강에 대한 회고.. 2-3일 정도 몸이 좀 아팠다. 자꾸 잠이 오고, 피곤하고, 으슬으슬 온몸이 다 아팠다. 코로나도, 흔한 감기도 아닌것 같은데. 갑자기 몸살이 찾아왔나보다. 회사를 조퇴할 정도로 아픈건 아니고, 슬슬~ 아파서 안좋은 기운을 품고 다녔다. 몸이 안좋으니 아무것도 손에 잡히지 않았다. 회사 업무도 집중이 안되고, 개인적인 공부는 아예 손도 못댔다. 개인 루틴이 망가지는 것에 ..

😀 TIL #221114 - 자바스크립트 인프런 강의 수강 오티, 세미콜론, 주석, 들여쓰기, 문자열 기본(따옴표, 백틱, typeof)에 대해 학습했다. 명령어 뒤엔 습관적으로 세미콜론(;)을 붙일 것. 붙여서 문제될 건 없지만 안붙여서 문제될 건 많다! * 백틱(`)이란? 맥 기준 탭 위에 위치한 키 :: 한글 상태일땐 원화(₩)로 나타나지만 영문 상태일땐 백틱(`) 으로 표시된다. 백틱을 사용하면 문자열 사이에 변수만 따로 구분할 수 있다. // 일반적인 문자열 console.log("나는 " + city + " 에 거주중이고, 이름은 " + name + ", 나이는 " + age + " 살 이다."); // 백틱 사용 console.log(`나는 ${city} 에 거주중이고, 이름은 ${name}..

😀 TIL #221113 - 피그마 인프런 강의 수료 3주간의 피그마 인프런 강의 수강이 끝이 났다! 😆 피그마 강의를 듣기 전 나는 디자인 툴 관련해서는 초초초보자였다. 포토샵이나 일러스트를 더듬더듬 사용해 아이콘을 간신히 만들 수 있는 수준이었다. 한 달이 지난 지금은 어색하지만 프로토타입을 만들 수 있고 협업을 위한 라이브러리 생성, 디자인 확장을 위한 컴포넌트 사용의 개념에 익숙해졌다. 또 업무효율성을 향상하기 위한 다양한 플러그인의 존재도 알게 되었다. 뚝딱뚝딱 예제 실습하고 만들어진 것을 export 해내고 있는 것이 정말 감계무량 하다. 디자인은 혼자 할 수 있지만, 작업은 결국 여러명의 구성원들이 함께하는 것이다. 어떤 툴을 사용하든 협업은 매우 중요하다. 물론 피그마는 협업에 최적화된 툴..

😀 TIL #221111 오늘은 날짜가 보기 좋다. 22 11 11. 기분좋게 하루 시작! - 피그마 인프런 강의 수강 오늘은 레이아웃 그리드 등록과 수정 방법에 대해 공부했다. 컬러 팔레트, 텍스트 스타일 등록과 똑같이 레이아웃도 그리드를 미리 설정해두고 등록해 쓸 수 있다. ✨ 오늘 한 일 - 오휘의 관람 ohui www.ohui.co.kr 화장품 브랜드 오휘에서 VR 전시회를 기획했다. 프랑스 궁전같은 가상 공간 비주얼로 근사한 시각적 경험을 할 수 있고, 오케스트라 연주 등 다양한 청각적인 요소를 제공한다. 오프라인을 넘어 VR 로 나아가는 오휘, 앞으로 화장품을 비롯한 여러 업계에서 오감을 자극하는 마케팅이 진행될 것 같다. 소비자로써 굉장히 기대되는 부분이다. 😁

😀 TIL #221110 - 피그마 인프런 강의 수강 오늘은 컬러팔레트를 만들고 타이포를 정의했다. 텍스트 스타일도 등록해보았다. 브랜드 색상에 일관성을 주고 작업의 효율을 높이기 위해 컬러팔레트를 미리 지정했다. 컬러를 미리 지정하면 우측 패널에서 클릭 한번으로 활용 가능하다. 타이포 정의에 앞서 구글의 Materal Design 과 애플의 Human Interface Guideline 을 확인할 필요가 있다. 각각은 애플과 구글에서 일반 사용자도 알아보기 쉽도록 디자인 가이드 라인을 제공하는 사이트이다. 애플의 가이드라인의 경우 인터페이스 디자인을 설명하면서 그렇게 디자인한 이유도 간략하게 설명하고 있다. 작은 테마나 기능까지도 세세하게 설명하고, UX나 인터렉션까지 디자인한 이유와 근거가 작성되어 ..

피그마에는 Outline Stroke 이라는 기능이 있다. Outline Stroke 은 언제 사용하는걸까? 이해가 쉽도록 아래 예제를 만들어보았다. 왼쪽은 Outline Stroke 이 적용되지 않은 도형의 크기를 키웠을때의 모습이고, 오른쪽은 Outline Stroke 이 적용된 도형의 크기를 키웠을때의 모습이다. 차이가 보이나요? Stroke 속성을 그대로 살려둔 왼쪽 도형은 크기가 줄어들어도 선 굵기가 일정하게 유지된다. Outline Stroke 하여 면속성으로 만들어준 오른쪽 도형은 줄어든 크기에 따라 선 굵기의 비율도 함께 줄어든다. Outline Stroke 는 도형의 선속성을 면속성으로 바꿔주는 기능이다! 아래에서 보다시피 좌측 도형을 클릭하면 Fill 이 하얀색으로 되어 있는 반면 우측..

😀 TIL #221107 - 피그마 인프런 강의 수강 오늘은 auto layout, constraints, resizing 에 대해 공부했다. 위 기능들을 활용하면 피그마로도 반응형 웹사이트를 만들 수 있다. 웹, 모바일, 태블릿 버전 등 크기에 따라 자유자재로 변화한다. 활용하는게 조금 어려워, 따로 개념을 복습해볼 예정이다. ✨ 오늘 한 일 - 경제기사 읽기 : 금리 인상, 왜 하는거야? 빠르게 인상되고 있는 미국 기준금리. 연방준비제도(Fed)가 자이언트 스텝을 또 단행했다. 4연속 자이언트 스텝인건데, 15년 만에 최고치인 4%에 닿았다. 파월 의장의 여러 매파적 발언("금리 최상단은 더 높아질 것이다.")으로 금융 시장이 출렁이고 있다고 한다. 물가 상승세가 꺾일 때까지 금리 인상을 추진한다는 ..