개발자가 되고 싶은 새

객체, 배열안의 값을 추출해서 변수, 상수에 바로 선언하는 문법 객체를 설정하고 그 객체 안에 key 값을 변수 혹은 상수에 선언해야하는 상황이라면? const object = { a : 1, b : 2 }; const a = object.a; const b = object.b; console.log(a); console.log(b); 객체 안의 key, value 값이 많아질수록 불편해진다. const object = { a : 1, b : 2 }; const { a, b } = object; 이렇게 비구조화 할당을 통해 객체 안에 있는 값을 쉽게 함수나 변수 안에 설정할 수 있다. const array = [1,2]; const [one, two] = array; console.log(one);// ..

함수는 동작을 나타내며, 값처럼 취급할 수 있으고, 값처럼 할당, 복사, 선언할 수 있다. 함수의 용도는 중복 코드를 피하기 위함이다. 함수를 만들기 위해서는 1. true / false 값을 빨리 구별해낼 줄 알아야함 2. 값을 잘게 쪼갤 수 있어야 함 🎈 함수 선언문 Function Declaration 과 호출 함수 선언문으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 된다. function functionName(매개변수){ function body } // 함수 선언 functionName(); // 함수 호출 함수를 호출하면 함수 본문이 실행됨 ( ) : 함수실행연산 sum1(); function sum1(a,b){ returen a+b; } 함수 자체가 통째로 lexical env..

과제를 하던 도중, README 작성법을 찾아보다가 다음에 내가 보기 위해 작성합니다. ( 사실은 저번에 정리해서 포스팅 해둔 줄 알고 보러왔다가 포스팅 안해놔서 급히 포스팅합니다 ) vscode 를 사용하였습니다. 오른쪽 위의 Markdown Preview Enhanced 칸을 이용해 미리보기를 켜면 수월합니다! 🎈 Heading 제목 # 개수를 이용하여 작성 heading 1 - 글자 아래 수평선 자동 추가 heading 2 heading 3 heading 4 heading 5 heading 6 🎈 줄바꿈 혹은 띄어쓰기 두 번 후 엔터 🎈 Paragraph 문단 아무것도 작성하지 않고 텍스트 바로 입력 🎈 Line 가로줄 --- ---------- - - - *** ********** * * * 가로..

Sass 에서 버튼, 색깔 등등으로 파일을 분리해 작성해주고 나중에 한꺼번에 css 파일로 바꿔서 썼듯이, js 에서도 용도별(?)로 쓰는 함수들의 파일을 분리해준다. 이 때 분리된 파일 각각을 모듈 (module) 이라고 부른다. 이렇게 하나하나 연결해줘야 하는것들을 `type="module"` 모듈 프로그래밍으로 사용해보자! 모듈 프로그래밍에서는 `defer` 가 기본값이기 때문에 생략할 수 있다. dom 파일에 있는 attr,bindEvent,, 등등 많은 폴더가 있다. 🎈 모듈 내보내기 폴더 안에서 꺼내주고 싶은 함수나 변수 앞에 `export` 를 작성해준다. 이 폴더에서 불러오고 싶은 파일들을 index.js 로 불러와준다 여기서는 dom, error, math 안에 있는 index.js 파일..

- 원시타입 Primitive data type : 변경 불가능한 값 immutable value String Number Boolean null undefined symbol - 객체 타입 Object / reference type object 🎈문자형 String 빈 문자열이나 글자들로 이뤄진 문자열을 나타냄 큰따옴표, 작은따옴표, 역 따옴표 (백틱) 으로 묶어서 표현 " 값 ", ' 값 ' , ` 값 ` 원하는 변수나 표현식을 문자열 중간에 넣는 방법 let name = 'heesae'; console.log( ` Hi, ${name}!` ); // Hi, heesae! console.log( ` The answer is ${3 + 4}` ); // The answer is 7 🎈숫자형 Number..

📃 변수 Variable 📃 데이터 data 를 저장할 수 있는 메모리 공간, 저장된 값은 변경될 수 있음 유지보수, 성능 이슈를 해결하기 위해 사용 🎈선언 방법 🔍 var 변수 재선언 가능 변수 재할당 가능 🔍 let 변수 재선언 불가능 변수 재할당 가능 🔍 const : 상수값을 선언할 때 사용 변수 재선언 불가능 변수 재할당 불가능 🎈 선언부와 할당부 let name = 'hello'; 🎈 변수 명명 규칙 1. 문자와 숫자, 기호 `$` 와 `_` 만 사용 가능 2. 첫 글자는 숫자 X 3. CamelCase 주로 사용 4. 대소문자를 구별한다 ( box != BOX ) 5. 영어 사용 4. continue, break, count, let 같은 예약어 사용 불가 🎈 변수 타입 확인 : `typeo..

연산자와 조건 처리 구문 응용 🎈helper.js 가 필요한 이유 el('figure') 를 입력하면 값을 잘 찾아옴 el() ➡ null el('') 아무 값도 주지 않으면 에러가생김 사용자가 어떻게 쓸지 모르는 상태를 모두 방어적으로 대응하려면 내부적으로 문제가 생기는 코드들을 문제가 생기지 않게 만들어주기 위함. el('body', 'html'); ➡ 에러 helper.js 첨부 후, el() ➡ null el('') ➡ null el(' ') ➡ null el(document) ➡ null el('body', 'html') ➡ 잘 찹음! 🎈문장 해석하기 function els(selector, context) { // selector 유형이 문자가 아니거나, selector 공백을 제거한 길이가 ..

📃 오늘 할 일 📃 코드 최종 수정 Netlify 와 Github를 이용한 배포 🎈 개발 브랜치를 main 브랜치에 병합 main : 게임 돌아가는 서버 dev : 테스트 서버 개인브랜치 : 작업공간 이기 때문에 작업공간 ( 개인브랜치 ex. heeso-footer 등 ) 에서 만든것들을 테스트 서버 ( dev ) 에서 실행해보고 완료되면 게임 돌아가는 서버 ( main ) 에 최종적으로 업데이트를 해준다. 🔽 tailwind 로 보여주신 예시 🔽 + 우리는 input.css 가 없어서 merge 후 commit, push 만 해주었다 git switch main // 메인브랜치로 이동 git merge dev // 데브 브랜치 병합 ls // 확인 시 src 폴더 보임 cd src // src 폴더로 ..

모두들 열심히 해주어서, 특히 나 (?), 오늘 CSS 작성까지 마칠 수 있었다. 오전에는 덜 한 css 작업과 함께 필요한 마크업을 수정하였다. 메인 페이지에 각자가 작업한 페이지들을 연결시킨 뒤, 다같이 화면공유를 하여 디테일한 css 를 수정하였다. 그리고 scss 로 옮기는 작업을 하기 위해 detectvie_2 레포를 모두와 공유하였다. 포크를 떠오면 내 주소만 연결되어 있는 것이여서, 만든 사람의 주소를 연결시켜줘야 한다. 프로젝트를 하며 Git 을 사용하는 방법에 대해서는 50% 정도 익숙해진 것 같은데, 여전히 개념이 탄탄하지 않아 git 으로 안해본 무언가를 하려면 누군가의 도움이 필요하다. git remote -v git remote add 주소 git branch -a git remo..

HTML/CSS 프로젝트를 진행하며 js 없이 버튼 효과를 줄 수 있는 방법을 찾아 헤맸다. 처음 찾은 방법은 :active 였는데 액티브는 버튼을 클릭하는 순간만의 효과를 줄 수 있다. 📃작성예시📃 🎈 기본 CSS 설정 [type="radio"]{ appearance: none; border: 1px solid #c4c4c4; border-radius: 50%; width: 24px; height: 24px; } [type="radio"]:checked{ border: 7px solid var(--primary-color); background: #c4c4c4; } [type="radio"] 라디오 속성을 가진 모든 태그에 적용 apprearance : none; 으로 기본 디자인을 제거 해주었다. 그..