나디아 성장 일기

변수명 변환 ctrl + shift + t translator - Visual Studio MarketplaceExtension for Visual Studio Code - translate for Koreanmarketplace.visualstudio.com 주석  단을 나누는 주석 ctrl + y Comment Divider - Visual Studio MarketplaceExtension for Visual Studio Code - Divide your code by sections with styled separators.marketplace.visualstudio.com    중첩 주석 ctrl + alt + / Nested Comments - Visual Studio MarketplaceExt..

형 변환 1. 문자형으로 변환 명시적  String(값) alert 메서드는 문자열 매개변수를 받음 (다른 형의 값을 받으면 문자형으로 자동 형 변환) let value = true;alert(typeof value); // booleanvalue = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.alert(typeof value); // string  암시적 빈 문자열('') 더하기 덧셈(+)만 문자열로 변환 가능'10' + '5'= '105''10' - '5'= 5'10' * '5'= 50     2. 숫자형으로 변환 명시적 Number(값) let str = "123";let num = Number(str); // 문자열 "123"이 숫자 123으로 변환   암시..

자료형(Data type)  1. 숫자형(Number)정수한계값: 2**53 -1소수특수 숫자값 (Infinity, NaN)let n = 123;n = 12.345;alert("문자열" / 2); // NaN (문자열을 숫자로 나누면 에러)   2. BigInt: (253-1)(9007199254740991)보다 큰 값 / -(253-1)보다 작은 정수를 표현정수 리터럴 끝에 n을 붙이면 만들 수 있다.암호 관련 작업에서 사용const bigInt = 12n;   3. 문자형(String)큰따옴표: "Hello"작은따옴표: 'Hello'역 따옴표(백틱, backtick): `Hello` * `${Template literals}` : 백틱으로 변수/식을 감싼 후 ${…}안에 넣으면 문자열 중간에 변수/식..

Loop Statement: 반복문   Conditional Statement: 조건문   Inheritance: 상속   Object-oriented : 객체 지향   Parameter: 매개변수   Argument : 인자   Local Variable: 지역 변수    Function Call: 함수 호출   Command: 명령어   Asynchronous: 비동기적인    Regular Expression (RegEx): 정규식   Syntax: 구문   Declaration: 선언 [데클러레이션]  Error handling: 예외 처리   Iteration: 반복 [이터레이션]  Operator: 연산자    Abstarction: 추상화 [업스트렉션]  Recursive function: ..

📌 숨김 컨텐츠마크업은 숨기되 스크린 리더가 접근하고 읽을 수 있어야 함 속성화면스크린 리더기타 사항display: none;❌❌사용 지양 👎aria-hidden ⭕❌ overflow: hidden;❌⭕ visibility: hidden;❌❌ width / height / font-size : 0px;❌스크린 리더에 읽히긴 하나 ⭕ 빈 객체에 초점이 갈 수도 있음 (사용자에게 혼돈을 줌) 👎 black hat의 원인 👎text-indent: -9999px;❌스크린 리더에 읽히긴 하나 ⭕ 요소와 초점이 맞지 않음 ⚠검색 엔진 최적화에 좋지 않음(black hat) 👎opacity: 0;❌스크린 리더 활동에문제가 많음 👎사용 지양 👎clip: rect(0, 0, 0, 0);❌⭕더 이상 권장되지 ..

flex : flex container(부모 요소)가 block 요소 부모 요소가 한 줄을 차지하고, 다음 부모 요소는 그 아래에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되어 가로로 채워진다. 컨테이너 안의 자식 요소들이 반응형으로 동작 ⭕  inline-flex : flex container(부모 요소)가 inline 요소 부모 요소가 다른 인라인 요소와 같은 줄에 배치 부모 컨테이너의 크기에 맞게 자동으로 확장되지만, flex와 달리 한 줄을 차지하지 않는다는 점에서 차이가 있다. 컨테이너 안의 자식 요소들이 반응형으로 동작하지 않음 ❌See the Pen iiinlineflexxx by nadia kwon (@nadia-kwon) on CodePen.  참고  display - CSS: C..

📌 tabindex : tab 키로 이동할 때 HTML 요소의 포커스 되는 순서를 지정하는 속성 요소의 포커스 이동 순서를 변경하거나, 포커스를 받을 수 있는 요소를 추가할 수 있다.tabindex가 지정되지 않은 요소는 일반적으로 문서의 순서에 따라 탭 순서에 추가된다.  정수: 숫자 순서대로 포커스 된다. 키보드로 포커스 되며 ⭕, 접근 순서를 해당 값으로 지정 작은 숫자일수록 먼저 포커스를 받는다.  마크업 순서를 거스르기 때문에 주의해서 사용해야 한다. ex. 검색엔진 사이트에서 검색창에 적용 0: 포커스를 받을 수 없는 요소(div, span 등)도 포커스를 받을 수 있도록 한다. (대화형 컨텐츠) 기본값 포커스를 받되 ⭕ 마크업 순서를 따른다.  -1: 포커스를 받을 수 없도록 만든다. 키보..

3주 차에 1차 회고 쓰기...  지원 동기혼자 독학으로 개발 공부하는 것은 전문성이 떨어진다는 생각이 강하게 들었다.아르바이트도 아니고 개발자로 정식 취업하려는 건데 이렇게 혼자 주먹구구식으로 공부해도 괜찮나 싶은 걱정이 컸다. 멋쟁이사자처럼 테킷 프론트엔드 스쿨을 선택한 가장 큰 이유는 부정적인 후기가 없기 때문이었다. 다른 부트캠프에 비해 후기가 (심하게) 적지만 그 적은 후기들 중에서도 부정적인 후기가 없는 것이 멋사를 선택하게 된 가장 큰 이유였다.  개인적으로 사람들이 리뷰나 후기를 적는 이유는 포인트나 혜택을 받을 수 있어서매우 만족스러워서매우 불만족스러워서 내 불만을 세상 사람들에게 알리고 싶어서라고 생각한다.  부정적인 후기가 적은게 무조건 좋은 것은 아니지만 후기를 중요하게 생각하는 내..

📌 text-indent : 문단을 들여쓰기 하는 속성 (텍스트 블록의 왼쪽 여백 거리를 제어)양수 값: 첫 줄을 왼쪽 여백 바깥으로 밀어내어 문단을 빼어쓰기로 만듦 (ex. 리스트, 주석)음수 값: 첫 줄을 왼쪽 여백 안쪽으로 밀어 넣어 문단을 들여쓰기로 만듦(ex. 한 줄 제목, 서브 텍스트)See the Pen text-indent by nadia kwon (@nadia-kwon) on CodePen. 참고  text-indent - CSS: Cascading Style Sheets | MDNThe text-indent CSS property sets the length of empty space (indentation) that is put before lines of text in a blo..

구동사 (Phrasal Verb) : 기존 뜻과 다른 새로운 의미의 동사 동사(Verb) + 부사(Adverb) / 전치사(Preposition)  Sign up : 계정을 등록하다. Sign in : 로그인 하다.  Sign out : 로그아웃 하다.  Opt in : (메세지나 광고의 수신을) 선택하다, (정보 제공을) 동의하다.  Opt out : (메세지나 광고의 수신을) 배제하다,  (정보 제공을) 철회하다.   Go online: 온라인 상태가 되다.Let me get back to you as soon as I go online. Go offline: 오프라인 상태가 되다.   Boot up : 부팅하다, 시작하다. My laptop is booting up.  Hook up : 선을 연결하..