전체 글 345

TIL) JS 기초, let vs const vs var, 함수 선언 3가지 방법, 원시형, 객체형, undefined 와 null의 차이

let 키워드와 const 키워드의 차이 const - always let - sometimes var - never const 재선언 금지, 재할당 금지 let 재선언 금지, 재할당 가능 var 재선언 가능, 재할당 가능 const a = b; const a = c; //재선언 금지 const a = b; a = c; //재할당 금지 let a = b; let a = c; //재선언 금지 let a = b; a = c; //재할당은 가능 var a = b; var a = c; a = d; //재선언, 재할당 가능 함수 선언 방법 함수 선언식 => 호이스팅에 영향을 받는다. - 선언 전에 호출되도 정상적으로 동작! (호이스팅: 자바스크립트의 특징으로, 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올..

컴퓨터 내부의 언어 체계

프로그래머는 컴퓨터가 프로그래머를 위해 할 일을 하는 방법을 컴퓨터에게 가르쳐준다. 컴퓨터는 천재가 아니고, 누군가가 컴퓨터가 이런 일을 할 수 있도록 미리 작성해둔 프로그램이 있기 때문이다. 비트는 2진수를 사용한다. 2진수에서 가장 오른쪽의 비트를 가장 작은 유효 비트(LSB :least significant bit)라고 부르고, 가장 왼쪽의 비트를 가장 큰 유효 비트(MSB: most significant bit)라고 부른다. 4비트는 0부터 15까지 16가지 수를 표현할 수 있다. 3비트는 0부터 7까지 8가지 수를 표현할 수 있다. 2진수 (1111) 부호와 크기 => -7,+7 1의 보수 => -0 2의 보수 => -1 인코딩은 다른 비트 패턴을 표현하기 위해 사용하는 비트 패턴을 뜻한다. 유..

실력있는 개발자가 되기 위한 첫걸음, 질문하는 법, 페어프로그래밍 하는 방법, 구글 검색 잘하는 법, stackoverflow 사용방법, 마크다운 사용법

왜 좋은 질문을 할 줄 알아야 하나요? 실력이 뛰어난 개발자는 잘 질문합니다. 좋은 질문하는 방법 질문하기 전에 먼저 검색하자! 내 문제를 설명하는 키워드를 찾자! (구글에 how to resolve ~~, how to use -- in js?, difference between a and b ) 일단 질문하세요. JUST ASK! (틀릴 수 있는 용기를 가지자!) 질문에 좋은 제목을 달자! ( Bad : "코플릿 알고리즘 00번 질문입니다." 답변자는 여러분이 어떤 문제를 풀고 있는지 알 필요가 없습니다. 어떤 것을 질문할지도 예상할 수 없는 제목입니다. Good : "array의 reduce 메서드 사용 시 accumulator 인자의 작동이 이해되지 않습니다." 제목만 보고도 어떤 답을 해 줘야 할..

깃헙 배포할 때 에러 해결방법

1. html 파일을 index.html로 바꾸자 2. 이렇게 삽입하자. 3. 깃허브를 올릴 땐 경로를 잘 확인하자. (1) html 안의 js 파일들의 경로 예를들자면 가 아니라 왜냐면 깃헙에 커밋할 때 폴더 그대로 안올리기 때문 (2) 파일의 대소문자 확인하기 (3) 이미지 파일을 삽입했다면 경로 잘 확인하기 4. 그래도 문제라면 콘솔창을 잘 확인해서 문제를 파악하자!

Javascript에서API키를 숨기는 방법

아래 사이트 참고해서 해결했습니다! 👇👇👇👇👇 https://stackoverflow.com/questions/41255861/how-to-pass-variable-from-one-javascript-to-another-javascript-file How to pass variable from one Javascript to another Javascript file I tried the following, trying to pass a variable from one JavaScript file to another JavaScript variable. My first JavaScript file: var x = "sachin"; My other JavaScript file can't access tha..

javascript로 html body 요소 찾기, 추가하기 // js에서 linear-gradient 사용하기

오늘은 javascript로 html 안에 있는 body 요소를 찾고 추가하는 방법에 대한 포스팅입니다. 나의 목표! html에 있는 버튼을 누르면 js에 쓴 함수인 function 실행하고 이걸 html에 넣기! 1. html 요소를 가져오자. 나는 html - body - button을 가져올겁니다. const button = document.querySelector("button"); // html의 button을 불러오고, 이걸 js에서 button이라고 부를거야! const body = document.querySelector("body"); // html의 body을 불러오고, 이걸 js에서 body라고 부를거야! 2. js에 button을 누르면 기능이 나타나게 하자. button.addEv..

미디어쿼리로 만드는 반응형 웹 만들기 / 웹 디스플레이 크기별 색 바꾸기

1. 디스플레이 크기에 따른 body요소의 background-color 변경하기 0~767px 이면 : gold 768px~1024px 이면 : lightblue 1025px~ 이면 : lightpink @media screen and (max-width: 767px) { body {background-color: gold;} } @media screen and (min-width: 768px ) and (max-width: 1024px) { body {background-color: lightblue;} } @media screen and (min-width: 1025px) { body {background-color: lightpink;} } ⬆️위 식처럼 정직하게 크기별로 3가지 색상에 대한 식을..

자바스크립트로 만드는 디데이 카운트다운 페이지 만들기

어린이날을 기준으로 카운트다운 웹페이지를 만들어봤어요! const clockTitle = document.querySelector(".js-clock"); function getClock() { const dday = new Date("December 25, 22 00:00:00").getTime(); const today = new Date().getTime(); const gap = dday - today; console.log(gap); const day = Math.floor(gap / (1000 * 60 * 60 * 24)); const hour = String(Math.floor((gap / (1000 * 60 * 60)) % 24)).padStart( 2, "0"); const min = S..

미디어쿼리와 반응형 웹

미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것이다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다. @media(at media) 미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일하다. @media mediaqueries { /* style rules */ } @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻이다. 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어간다. 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나..

반응형