NOW OR NEVER

디자인 무료 온라인 툴 color space(https://mycolor.space/) 웹사이트를 만들 때 컬러 팔레트를 쉽게 만들 수 있는 툴 하나하나 색상 찾는 수고로움을 덜어주는 툴이다 웹사이트에서 사용할 주 색상을 정해놓으면 그에 맞는 다양한 색상 조합들을 보여줌 css gradient(https://cssgradient.io/) gradient 컬러를 만들 수 있게 해주는 툴 시각적으로 확인하면서 원하는 gradient를 만들 수 있다 다양한 방면에서 사용되지만 버튼에서 특히 많이 사용됨 다 만든 후 아래쪽 copy to clipboard 해서 css에다가 붙여넣어서 그대로 적용 시킬 수 있음 SVC 활용할 수 있는 툴(svc를 활용해 section을 수평적으로 나누는 것이 아니라 다른 모양으로..

JS 프로처럼 쓰는 팁 tenary-operator 삼항 연산자 조건 ? true일시 return 값 : false일시 return값; 사용하는 경우 조건이 두가지인 경우 불필요한 else if 문 사용 자제 바로 리턴하는 경우 nullish coalescing operator 함수안에서 변수 선언 = 함수 선언시 설정한 인자 값이 호출할 때 있는 경우 return 값 ?? 함수 선언시 설정한 인자 값이 호출할 때 없는 경우 return 값; left Expression ?? right Expression value만 넣을 수 있는 것이 아닌 코드를 넣어 실행한 값을 할당하게 할 수도 있다. ?? 기준으로 왼쪽코드가 null이거나 undefined인 경우에만 ?? 오른쪽에 이어지는 문장이 실행됨(defa..

필수로 알아야하는 semantic tags semantic tags(semantic markup) : semantic의 뜻은 의미의, 의미가 있는 이다. 우리가 사용하는 물건에도 언제 어디에 써야하는 지 등의 저마다의 의미를 가지고 있는 것처럼 html 태그 또한 의미를 가지고 있다. sematic tags를 잘 활용해야 하는 중요한 이유 SEO(Search Engine Optimazation) : 검색을 최적화 하기 위해 Accessibility : 웹 접근성 때문이다. screen reader를 이용하거나 키보드만 이용해서 등의 웹사이트를 이용하는 경우 문제없이 잘 동작될 수 있게 하기 위해 Maintainability : 개발자들을 위해서, 개발자가 html 코드를 바라봤을 때 한눈에 웹사이트 구조..

PWA(Progressive Web App) : 새롭고 강력한 소프트웨어 앱을 만드는 방식 모바일 폰에서도 설치해서 실행할 수 있고 desktop에서도 어플리케이션처럼 실행할 수 있다. native apps와 브라우저 웹앱 안드로이드나 아이폰처럼 특정한 플랫폼에서 동작하는 native apps는 플랫폼에서 제공하는 다양한 API를 이용해서 사용자에게 다양한 기능을 제공하는 역량이 크지만 앱스토어를 이용해서 설치해야 하고 그 플랫폼에서만 사용할 수 있다는 단점이 있다. 브라우저에서 동작하는 웹앱은 플랫폼에 상관없이 브라우저만 있으면 사용가능하므로 사람들이 쉽게 접근해서 사용할 수 있는 장점이 있지만 native app처럼 플랫폼 자체의 API를 사용할 수 없다는 단점 이 있다. 개념 html, css, j..

API(Application Programming Interface) 개념 service 내부의 구현사항을 잘 숨겨두고 외부에서 사용하는 사람이 필요한 것만 노출해둔 이것을 인터페이스, API라 부른다. 연도별 API의 역사 API의 시초 : 1964년 거대한 컴퓨터를 쓸 때부터 등장한 단어로 하드웨어 독립성(Hardware Independence)을 위해 사용됨. 예를 들어 서로 다른 하드웨어 부품마다 개발자가 일일이 프로그래밍을 작성하기 보다는 HAL(Hardware Abstraction layer)라는 하드웨어 추상화 계층을 통해 한번만 display 함수를 이용하면 각기 다른 모니터에 출력을 하거나 각기 다른 하드웨어 부품에 작성을 하는 이런 일들을 쉽게 해주는 것이 생긴 것이다. 1980년대 중..

CSS Units 절대적인 단위의 경우 px을 많이 사용하고 상대적인 단위에서는 %, viewport와 관련된 단위, em, rem 주로 사용 Absolute length units 절대적인 단위 Unit Name Equivalent to cm Centimeters 1cm = 96px /2.54 mm Millimeters 1mm = 1/10th of 1cm Q Quarter-milimeters 1Q = 1/40th of 1cm in Inches 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt Points 1pt = 1/72th of 1in px Pixels 1px = 1/96th of 1in px을 제외한 것들은 물리적인 세상에서만 의미 있음, css 주된 용도..

자바를 배워야 하는지 프론트엔드 업무만 할거면 필요가 없다. 전혀 몰라도 문제될 것은 없다. stackoverflow 등을 이용해서 필요한 언어가 무엇인지 찾아보는 것이 좋음 백엔드에서 많이 사용하는 언어 jquery 잘 사용하진 않지만, 만약 배우고 싶으면 css와 javascript 기본만 알면 한두시간 안에 배울 수 있다. 2. 현업에서 자바를 쓸 일이 있는지 kotlin이 나온지 얼마 안되서 안드로이드 프로젝트들은 자바로 쓰여진 경우가 많다. node.js로 구현한 경우도 있다 하지만 프론트엔드 개발자의 경우 필요없다. 3. 자바와 자바스크립트 차이점 Java 자바 다용도의 목적을 가진 언어 객체 지향 class-based 언어 C언어와 같은 함수를 여러개 호출해서 차례대로 실행하는 함수 지향적 ..

왜 프로젝트로 공부해나가야 하는지 실용적인 방법들을 많이 배울 수 있고 결과물이 눈으로 보여서 성취감도 생김 중요한 이유 : 문제 해결 능력을 연습해 볼 수 있음(개발자의 중요한 자질) 포트폴리오를 어떻게 만들어 나가면 좋은지 분야에 필요한 기술 정리 -html+css만 안다면 : 정적인 반응형 웹사이트 javascript : 동적인 웹사이트(서버에서 데이터를 받아옴) -> node.js를 이용해서 백엔드 구축도 해보면 좋음 -> 프레임워크를 이용한 SPA(동일한 프로젝트) 만들어보기 포트폴리오에 추가할 프로젝트는 어떤 것들? 히든카드 프로젝트 가고자하는 분야에서 중요한 기술/스택을 1-2개에 초점 독창적인, 창의적인 아이디어 자주 쓰는 앱들의 주요 기능 카피(가고자하는 분야에서 중요한 기술을 활용하면 ..

반응형 웹디자인 1990 중반은 데스크탑 위주 브라우저 최근에는 태블렛과 핸드폰에서 이용하는 경우가 많아 반응형 웹디자인으로 만들어야 공간 활용을 잘 할 수 있다. 브라우저 컨테이너 사이즈에 따라 컨텐츠가 유동적으로 변화 컨텐츠를 물같이 유동적으로 어떤 컨테이너에 담기든 그것에 맞게 만들어라 웹사이트를 만들 때 고정된 사이즈 보단 유동적으로 레이아웃을 만드는 것이 중요하다. px이 아닌 flex grid, flex box, %, vw, vh 등을 이용해 사이즈를 구성한다. media queries 컨테이너 사이즈에 따라 레이아웃 재배치 : css의 media Queries 이용 데스크탑, 태블릿, 모바일 각각 사이즈 범위 지정해서 그것에 맞게 웹사이트 변화 요즘에는 기준이 되는 사이즈는 없지만 굳이 나누..

short cut key command palette 명령 팔레트 이용(ctrl + shift + p) 축약어로 입력해도 찾을 수 있음 자주 사용하는 것은 외우는 것이 좋음 extensions material theme material icon theme prettier : code를 fomatting 해줌(ctrl + , 으로 setting 창 이동) 저장할 때 자동으로 formatting 하게 해주기 위해서는 format a file on save 체크박스 체크 prettier quote > single quote bracket pair colorizer : 괄호에 색감을 줘서 코드에 가독성을 줌 indent rainbow : 들여쓰기 된 부분이 무지개 색으로 하이라이트 되어 있어 보기 편함 auto..