본문 바로가기

프론트엔드

 (21)
#16 [ECMA Script] backtic, optional nullish, export/import, 호이스팅, 구조분해할당, 비동기 코딩 04_optional_nullish 01_backtic.html : 자동 문자열 붙이기 ` $ { 문자열 } ` 문자열을 표현하는 사용법 “ ”, ‘ ’ 와 결과는 같지만 줄바꿈 특수기호를 사용하지 않고 키보드 엔터키가 그냥 적용되어 편리한 사용법임 ` ` : 백틱 (사선으로 홑따옴표처럼 생김) # 연습 1 ) 변수는 $ / 문자열은 그냥 쓰면 됨 # 연습 2 ) 줄바꿈은 그냥 Enter 치면 됨 02_optional_nullish.html 객체가 null일 경우 undefined로 강제로 변경하여 null 에러방지 객체명?.속성 cf) 치명적인 실수!! 개발자는 이렇게 코딩하면 안됨. 서비스가 다운됨. 서비스가 연쇄적으로 전부 다운되게 만들면 안된다. ex) 카카오톡 서비스 부분기능이 에러가 났지만, ..
#15 [ECMA Script] 객체 배열, class 예약어, 화살표 함수, spread 연산자, 향상된 for문, 함수형 프로그래밍 이크마 자바스크립트 폴더 만들기 모던 js / es 6 / ecma_javascript 라고도 부름 savascript의 심화버전 모던 자바스크립트(ECMA Javascript) : 줄여서 ES5, ES6 (ES 다음 숫자가 커질수록 최신버전) - 과거 기본적으로 웹브라우저 환경에서 동작했으나 Node.js 가 개발되면서 웹브라우저 이외의 환경에서도 실행될 수 있게 됨. 그러면서 여러가지 최신 사용법들이 나오게 되었는데 그 사용법들을 ECMA(ES5, ES6…) 자바스크립트라고 부르고, 통칭해서 모던 자바스크립트 사용법이라고 함. - Node.js : 웹 브라우저 이외의 환경에서 실행할 수 있게 해주는 환경 - http://node.js/org/en/사이트에서 윈도우(맥) 환경에 맞는 설치파일을 다운로드..
#15 [Bootstrap] 그리드 세로정렬, 이미지 배치, 테이블, 글자정렬, 메뉴 trade off : 하나의 기술을 얻기위해 다른 하나를 포기 서울대 비전공자 시간과 돈을 투자 자신감 -> 자존감 높이자. 자신을 사랑하고 자존감 높은 사람 + 자신감 가지자 : trade off 를 잘함 다른사람보다 시간을 더 많이 투자. 일과를 8시에 마치고 집에가서 2시간을 더 함 나는 니보다 1시간씩 더한다 + 자신감 -> 발전. 1-2가지는 포기하고 복습 06_layout_grid_align_2.html : 그리드 정렬(세로 정렬) row align - items - 부트스트랩 css cdn만 링크걸었음 1) 중앙 정렬 center : row align-items-center 2) 위쪽 정렬 top : row align-items-start 3) 아래쪽 정렬 bottom : row align-..
#14 [Bootstrap] 균등 배치, 비균등 배치, 그리드 가로정렬 Bootstrap : 트위터 내부에서 각 개발자가 만든 css 디자인을 통일할 방안을 생각하는 중에 만들어진 css 프레임워크. 핵심) css 디자인을 쉽게 사용가능하게 하고 팀 내부에서 대체로 통일된 css 디자인을 유지할 수 있음 class 들을 배우는게 끝 외울필요는 없고 공식 홈페이지에서 찾아보면 됨 03_Bootstrap 01_hello_bootstrap.html : css 프레임워크 : 미리 디자인 해놓은 class 들의 집합 1. Bootstrap 파일 만들기 2. vscode에서 열기 3. Google - 부트스트랩 검색 4. 버전 5.2 선택 5. 스크롤 내리고 나서 CDN 링크 찾으면 css, js 링크 복사해서 vscode에 붙여넣기 6. bootstrap 디자인을 적용함 7. 검사 ..
#14 [Figma] 디자이너들이 피그마 이용하여 시안 작성 -> 피그마 툴 쓰는 법 알기 => 개발자인데 피그마도 쓸 줄 아는구나 ~ 피그마 : 온라인에서 사용할 수 있는 디자인 툴로, UX/UI 디자인 및 프로토타입 제작을 위한 기능들을 제공, 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원 0. Work 파일에 02_Figma 생성 1. 공식 사이트(https://www.figma.com/)에서 계정을 만들고 로그인, 신규 계정은 3가지 플랜이 있으며 무료 플랜을 선택해서 회원가입함 2. 구글 계정으로 로그인 3. 인적사항 작성 - Free 선택 4. create new team - 팀 이름 GreenIT - 초대는 나중에 - Starter 팀은 1-2개밖에 못만듬 5. 오른쪽 위 - Project 버튼 클릭 후 ..
#13 [node] Vue 들어가기 전 node 설치 프론트엔드 기술 기본기술 : HTML / CSS / JS -> jquery 코딩 많이 해옴 + JSP(백엔드) SPA기술 : Vue / React (1위) / Angular (전부 다 js임) => jquery보다 성능이 아주 좋음. 속도 빠름 => 서비스 업체들이 많이 씀 1. 최초에는 Angular 탄생 Google이 jquery 대체하기 위해 만듬 단점) 배우기 어려움, 사용하기 어려움 2. React Facebook에서 만듬. Si쪽에서는 많이 안씀. 서비스업체가 많이 씀 장점) 사용하기 편함 3. Vue 머리 좋은 재미중국인이 만듬. 전직 Google Angular 소속팀. 중국은 전부 다 Vue 쓰는중. 서비스/Si업체 백엔드 풀스텍을 위해 이거 배우는게 마음이 편함 장점) 더 사용하기 편함 ..
#13 [jQuery] 기본, 클릭, 여러가지 함수 바닐라 js DOM HTML 태그 선택 : document.querySelector("태그") : jquery = js library (함수들을 묶어놓은 것 : 패키지. 함수들을 불러서 코딩하는 방법) : 링크/jq library 다운 ex) 최대값, 최소값 등등... => 코딩 라인이 대폭 짧아짐 => 코딩 효율성이 높아짐 - DOM 을 조작하는 유용한 js 함수들을 제공 - 함수(메소드) 체이닝을 사용해서 편리하게 조작함 - 라이브러리 설치 또는 CDN 링크를 추가해야 사용가능 - $(css선택자) : jquery 로 대상을 선택하면 동일한 태그를 가진 대상이 여러개가 있으면 여러개를 선택하고, 1개면 1개만 선택함 - querySelector ( ), querySelectorAll ( ) 2가지 기..
#12 [JS DOM] 이미지, 이벤트, 코드반복, 자식태그, css 선택자, 윈도우 페어코딩 (프로그래밍) -> 서비스 업체(네카라쿠배) 1) 기술(협의) 코딩 : 시너지 향상 2) 교육 목적 : 사수 - 부사수 * 주의점 : 한명만 집중하는 모습 X, 두명이서 의견조합해서 하기에 조금 피곤해서 자주하진 못함 코드리뷰 : 한사람 코딩 -> GitHub에 업로드, 나머지가 보고 의견 공유 변수 : 1개 값을 저장하는 공간 (num) JS에서 DOM에 접근하는 함수를 배웠음 변수에는 우리가 배운 문자열, 숫자가 저장되지만, 지금 배우는 DOM 접근함수에서는 document.querySelector("h1")로 선택하면, h1 태그가 된다고 보면됨 대표적인 속성 : innerHTML -> A h1 태그가 변수에도 들어갈 수 있음 document.querySelector("h1").innerH..

티스토리툴바