꿈꾸는 개발자의 블로그

이미지 파일로 배경을 꽉 채웠는데, 그 위에 텍스트를 화이트로 뿌리니 잘 보이지 않아서 한 방법이다! 배경색을 똑같이 설정하고 알파값만 주어 어둡게 하였는데, 이 때 사용한 그레디언트 방법 외에도 다양한 방법이 있어서 적어본다. 그레디언트 사용하기 1. 선형 그레이디언트 : 직선으로 진행하는 색상 무늬를 생성합니다. background: linear-gradient(blue, pink); 2. 방향 전환 : 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다. background: linear-gradient(to right, blue, pink); 3. 대각선 그래디언트 : 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다. background: linear-grad..

매번 헷갈리는 나누기 연산자를 정리해보았다! 몫과 나머지를 구하는 것 외에도 중요한 것은 데이터 타입과 0으로 나눌때인 것 같다. 특히 0으로 나눌 때는 에러가 나기 때문에 주의해야한다. 나누기 연산자 연산자 설명 / 나누어 몫을 구함 (소수점 포함), 결과가 float 자료형(Data Type)으로 처리됨 // 나누어 몫을 구함 (소수점 이하 버리고, 정수 부분만 포함) % 나머지 코드 예시 print(10 / 5)# 2.0 print(10 // 5)# 2 print(10 % 5)# 0 print(10 / 3)# 3.3333333333333335 print(10 // 3)# 3 print(10 % 3)# 1 print(0 / 10) # 0.0 print(10 / 0)# ZeroDivisionError:..

var, let, const 모두 변수를 선언하는 키워드이다. ES5 까지만 해도 var 변수를 사용했지만, ES6 이후로 let, const가 추가되었다. 그렇다면 차이점에는 어떤 것이 있을까? 간단하게 정리해보면, 아래 표와 같다. var let const 재선언 가능 불가능 재할당 가능 불가능 스코프 함수 스코프 블록 스코프 1. 변수에 재할당 var의 경우에는 변수 재선언과 재할당이 가능하고, let은 변수에 재할당이 가능한 반면 const는 불가능하기 때문에 immtuable하다고 할 수 있다. var number = 10 console.log(number) // 10 var number = 20// 재선언 console.log(number) // 20 number = 30// 재할당 conso..

막연히 사용하던 함수 선언식(Function Declaration)과 함수 표현식(Function Expression)에 대해 알아보고, 차이점을 소개하고자 한다! 호이스팅.. 정말 헷갈렸는데 정리가 좀 된 것 같다 ㅎㅎ 함수 선언형과 함수 표현식 함수 선언형 함수명이 정의되어 있고, 별도의 할당 명령이 없다. function sum(a,b) { return a + b; } 함수 표현식 정의한 함수를 별도의 변수에 할당한다. const sum = function(a,b) { return a + b; } 함수 선언식과 함수 표현식의 차이점 결과부터 말하면, 스코프와 호이스팅에서 차이가 있습니다. 1. Scope 함수 선언식 var와 같이 함수 스코프를 가진다. function func1() { functi..

사실 내가 진행했던 프로젝트는 Next.js + TypeScritp 기반이였기 때문에, 앞서 React로 구현한 코드는 흐름을 이해할 수 있는 연습 과정이였다. Next.js로 구현하려니.. React와는 다르게 html 파일이 없었기 때문에, Script 태그는 어디에 넣어야하는지에 대한 고민이 생겼다. 결과적으론 Script를 생성하여 넣어주었는데, 왠지 더 좋은 방법이 있을 것 같다...! next에는 'next/script'도 제공하니, 다음에는 이를 사용해서 구현해봐야겠다~! TypeScript + Kakao Map API 사용하기 1. script 요소 생성하기 2. 환경변수로 설정한 앱 키 등록하기 그 외 부분은 앞서 React로 구현한 것과 동일하다! MapContainer.js 참고 20..