(수근수근)

Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) 모듈1에서는 기본적으로 사용하는 CSS를 전체적으로 요약한 내용이다. 스타일 규칙 해부하기 사실 CSS용어에 대한 정리가 잘 되어있지 않은 상황이었는데 해당장에서는 아주 자세히 설명해주고 있다. property : Css에서 property는 특정한 값을 지정할 수 있는 속성이다. (like font-size) selector : selector는 페이지의 특정 타겟 요소를 설명한다. 헷갈리는 것은 선택자라는 것은 .(class), #(id)를 같이 포함해주어야한다. /*여기서 selector는 apple이 아닌 .apple이다 (어떤 요소인지 선택까지) */ .apple { background-c..

Transform 기능 - translate 요소 이동시키기 transform을 통해 요소들을 이동시킬 수 있는데, transform: translate(x.px, y.px) -> 양수는 아래, 오른쪽, 음수는 위 왼쪽으로 이동을 합니다. transform 특이한 점으로 한가지는 백분율을 사용할 때 상위 컨테이너의 공간이 아니라, 요소 자체의 크기를 나타냅니다. Transform 기능 - scale로 요소를 줄이고 늘리기 독립적으로 x, y 축을 조정할 수 있다. height와 width 와 다른 점은 상자의 모형만 변형하는 것이 아니라 요소와 하위 요소도 변경을 한다는 것이다. Transform 기능 - Rotate 로 요소 회전 시키기 요소를 회전시키는 기능이다. 단위는 deg와 turn 이 있다. ..

토스 디자인 시스템 관련 영상 정리 글 입니다. 해당 영상을 접하면 좋은 사람들? 디자인 시스템을 구축하면 뭐가 좋아질지 궁금하다 디자인 시스템을 도입하고 관리하는데 어려움을 겪고있다. 큰 규모의 조직에 디자인 시스템을 적용하는데 어려움을 겪고있다. 운영하는 디자인 시스템을 한층 더 고도화 하고 싶다. 디자인과 프론트엔트 개발 작업의 생산성을 높이고 싶다. UI 개발의 일반적인 문제 개발의 규모가 커지고 화면이 많아질수록 반복적인 작업이 많아진다. 같은 버튼인데, 텍스트나 색상이 다른 경우가 많음 하나의 앱이나 서로 다른 서비스 처럼 보인다. UI가 많아지고 파편화가 심해져서 개발 생산성이 떨어지게 된다. → 일관성을 맞추기 어렵다. 재활용이 쉽지 않다. 디자인 일관성이 떨어진다 → 중복코드, 파편화가 ..

1. 개발프로젝트를 build 한다 → 빌드를 하면 build파일 이 생기고 해당 폴더 안에는 css, JS, HTML, 이미지파일 등 정적파일이 생성된다. 2. 웹페이지 열기 사실 빌드를 생각해보았을 때, 빌드를하고 정적파일(JS, HTML, CSS)파일이 만들어지고 index.html을 실행하면 끝이라고 생각이 들었다. 하지만 실제로 페이지를 열어보면 아래처럼 흰 페이지만 나오는 것을 확인할 수 있다. → 다시 콘솔을 확인해보자 해석을 해보자면, build 폴더는 배포될 준비가 되었다. 정적서버와 함께 제공될 수 있습니다. Server 설치 (npm serve 패키지 활용) build폴더의 정적파일들을 실행시키기 위해서는 웹서버가 필요하다. 웹서버란 HTTP 프로토콜 기반으로 하여 클라이언트(웹브라우..

목차 Cookie란 무엇이고 어떤 문제가 있는가? Cookies의 구성요소 및 동작방식 브라우저 저장소란? 브라우저 저장소의 특징 브라우저 저장소의 종류 LocalStorage SessionStorage COOKIE Cookie와 그에 대한 문제점 쿠키는 클라이언트 로컬에 저장되는 key-value의 데이터 파일이다. 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠기값은 4KB까지 저장한다. → 쿠키는 용량과 개수에 제한이 있다. → 대용량은 저장이 불가능하다.* Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠기를 만들 수 있다.쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request HEader를..

Redis(Remote Dictionary server)? 레디스는 NOSQL데이터베이스의 일종으로 비관계형 데이터베이스이다. Redis는 key-value의 형태로 데이터를 저장하며, 메모리기반의 저장방식이라는 것이 큰 특징이다. 메모리 기반의 'key-value' 구조관리 시스템 메모리에 저장하고 조회하기 때문에 read-write가 속도빠름 → MySql보다 10배정도 입력삭제가 빠르다. 스냅샷기능을 제공하여 .rdb파일로 저장하여 해당시점의 데이터를 저장할 수 있다. node.js에 Redis 설치하기 node.js와 redis 설치하기는 되어있다고 가정한다. 커멘드 창에 설치명령어 입력 → npm i redis 2. 모듈 불러오기 코드 작성 const redis = require('redis')..