JAY⌨️CODE

1️⃣ flex의 구조 flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃. 공간에 맞추기 위해 축소되거나 여백의 공간을 채우기 위해 변형된다. 즉 유연한 비율로 사이즈를 조정하는 기능! 부모 요소는 flex-container 자식 요소는 flex-item 2️⃣ flex-direction 아이템을 배치할 때 주축과 방향을 지정! ➡️ row 기본값. 왼쪽에서 오른쪽 배치. ⬇️ column 위에서 아래로 배치. ⬅️ row-reverse 오른쪽에서 왼쪽 배치. ⬆️ column-reverse 아래에서 위로 배치. 3️⃣ Justify-content row, column의 주축을 기준으로 배치. flex-start 기본 값, 시작 축 기준으로 배치. flex-end 마지막 축 기준으로 ..

1️⃣ if, else if else조건문은 JS에서 가장 기본적인 제어문 중 하나. if문은 조건식이 True인 경우에 코드를 실행. else문은 조건식이 False인 경우에 실행. //조건문 구조 if (num > 10) { console.log('🔍 num이 10보다 크다.'); } else { console.log('🔍 num이 10과 같거나 작다.'); } const won = 1000; if (won > 800) { console.log('🥖800원에 구매 가능'); } else if (won > 400) { console.log('🧀400원에 구매 가능'); } else { console.log('돈이 없는 분은 구매할 수 없습니다...'); } // = 🥖800원에 구매 가능 //2중 조건..

1️⃣ for문 가장 보편적인 반목문! for() 조건이 true 반복문 실행, false면 실행 안 함. for( 초기화; 조건; 종료식 ) { 반복 실행 내용 } 구조 종료식에서 숫자 + ++ 는 한 개씩 증가시킨다는 뜻. for(;;) for문 무한 반복 //기본 구조 for( let i = 0; i < 10; i++) { console.log(`😀Hello for ${i}`) } // = '😀Hello for 0' ~ '😀Hello for 9' //구구단 예제 // 9단 for (let i = 1; i

HTML 삽입 미리보기할 수 없는 소스 1️⃣ 함수, function 이란? 자바스크립트에서 function은 재사용 가능한 코드 블록을 의미. 아키텍처 파악, 유지 보수에도 유리! function 은 변수처럼 선언 가능. 입력값 parameter 을 받아 결과값을 출력 return 하는 방식. 보통 function(인자)라고 말하는데, parameter는 선언할 때, argument 는 실제 사용될 때의 용어. 파선아실! 암기. function은 다른 function의 (prarameter)로도 전달 가능. 2️⃣ 자바스크립트의 호이스팅 Hoisting 과 함수 선언 Hoisting은 변수와 함수 선언이 Scope의 맨 위로 옮겨지는 것. function 은 변수 var let const 와 마찬가지로..

Object를 학습하다가 나온 Map! Map이 유용한 건 알겠는데 뭔지 잘 모르겠다... (비전공 입문자의 눈물🥲) 간단하게 정리하면 Map은 {Object}와 다르게 기본 Key를 포함하지 않고 입력된 내용만 포함한다. Map의 Key는 모든 값(function, array …등) 설정 가능! Key - value 데이터 추가,제거 성능도 object보다 우수하고 자체 순회도 가능하다. 👍 1️⃣ Map 생성 Map 생성 구조는 변수명 = new Map() → 변수명.set(key, value) Map의 .get 메소드는 Map 객체 내에서 특정 key의 value를 반환. // 신규 Map 생성 let weather = new Map(); weather.set('sunny', '🌞') weather..

[ Array ]와 { Object }는 각각 JS에서 여러 개의 값을 하나의 변수에 저장할 수 있게 하는 데이터 구조이다. 항상 보는 구조지만 비전공자 JS 입문자는 헷갈려서 이해를 위해 정리해본다. 1️⃣ [ Array ] 배열 [대괄호]를 통해 표현. 대괄호 안의 항목의 명칭은 [ element ] 0부터 시작해서 [0, 1, 2 ]… 와 같은 형식으로 데이터 저장. JS에서는 Array도 Object에 포함! 특별한 Object로는 Array나 Function이 있다. Array 접근 및 수정 예제 // Array 생성 const fruit = [ '🍑Peach', '🍒Cherry', '🍋Lemon']; // 맨 앞에 신규 element 추가 fruit.unshift('🍇Grape') // 맨 뒤..

😰 겨우 평정심 유지 중인 예비합격자 오늘 멋쟁이 사자처럼 프론트엔드 스쿨 5기 발표가 3시에 있기 때문에 아침부터 계속 테킷 홈페이지 접속을 오갔다. 결과는... 예비합격! 구글링해보니 예비에서 최종합격까지 달성한 분들도 계신 것 같지만.. 주로 합격한 분들이 글을 게시했을 거라고 생각한다. 그래서 나는 최종 결과가 불합격으로 나오더라도 데이터를 남겨두려고 한다. 🤓 아직 최종 결과가 남았다! 예비합격이라는 결과에 아쉬운 마음은 어쩔 수 없지만 후회는 없다. ...... 그래서 내 예비 순번은 몇번째인지...? 결과와 관계 없이 주어진 시간과 환경 안에서 내가할 수 있는 만큼은 했다고 생각한다. 아쉬움은 그만 이제 할 일을 하자 .... 지치지 말고 JS복습 가보자고! ✏️ 🥳 예비합격에서 최종합격으로..

💡 스스로의 가치를 확장하고 싶은 욕구 지방에 거주하는 30대 여성인 내 주변 환경은 둘로 갈리기 시작했다. 직종을 바꾸거나 사업을 시작하는 이들. 그리고 현업에서 꾸준히 전문성을 유지하거나 출산 등으로 일하기를 멈춘 이들. 나는 누구나 도태될 수 있는 업계에서 언제라도 대체될 수 있다는 불안감이 항상 있었다. 업무 후 남는 시간에 사이드잡에 도전해서 꽤 많은 수익을 얻는 경험도 했지만 경쟁이 심한 업계 특성상 언제든 대체될 수 있다는 불안감은 여전했다. 이 일을 하는 게 너무 즐거운데 전문성을 더 확장할 수 있는 방법이 없을까? 단 기간 돈을 많이 버는 것보다 스스로 만족스럽게 일할 기술을 갖고 싶다는 고민 끝에 나는 프론트엔드 개발 영역에 뛰어들기로 결심했다. 업무와 병행해 자바스크립트 학습을 시작했..