(수근수근)

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

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

우선 나는 2년간 회사의 C++솔루션을 유지보수하고 개발하던 일을 했다. 비전공자인 내가 개발을 시작한 이유는 웹개발을 너무너무 하고싶었다. 하지만 취업을 한 회사에서 갑자기 C++솔루션을 맡으라고 했다.. 정말 회사내에 웹이라는 것이 거의없었다..(이건 취업사기인가요...?) 그런데 왜 2년이나 내가 원하는 것을 진작의 찾지 않고 회사에서 있었을까? 우선 내일채움공제... 제일 1순위었다. → 나에게는 현실의 벽인 학자금이라는 것이 있었다.. 분명히 여기서도 배울 게 있을거야~! 맡은 솔루션이 다양하게 발전시킬수 있는 솔루션이라고 생각했고 배워보고 싶었다. → 실제로 통신에 관련 인프라에 대해서 많이 배웠다. 시간이 왜이렇게 빨리가나... 한 건 없고 시간만 가버렸다... 현실에 불평하지 말고 할 수 ..

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

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다 이벤트시스템이란 브라우저가 제공하는 시스템 사용자가 UI에 언제 반응할지 알 수 없으므로 나온 시스템 보통 addEventListener의 형태로 DOM에 어떤 요청이 들어왔을때 어떤 함수를 호출해줘라고 등록하는 형태를 취한다 이벤트 버블링 버블링은 안쪽의 있는 요소가 클릭이 됐을 때, 발생한 이벤트가 바깥쪽으로 확산되어 나가는 것 아래와 같은 형식의 HTML의 형태를 가지고 있고, 해당 DIV태그 마다 addEventListener를 통해서 클릭이벤트를 시스템을 등록해 놓는다면 let divs = document.querySelectAll('div'); divs.forEach((div) => div.addEven..

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다. 동기코드란? 앞에 것이 확정되기 전에 뒤에 코드가 실행할수 없는 상태 앞뒤가 종속적으로 묶여있는 상황 따라서 동기코드는 순차적으로 실행될 수 밖에없다. function double(x){ return x*2; } const x = double(100); const y = x; 비동기코드란? 동시에 실행될 수 있는 것을 비동기라고 할 수 있다. function calcValue(a, b) { setTimeout(()=>{ return a + b; },100) } const r = calcValue(10, 20); const z = r; 비동기와 동기를 한번에 진행시키고 싶다면? 콜백이라는 함수를 통해서 결과값이 일..