✍ 공부

[css] mix-blend-mode : 사진 위 글자를 튀게 하는 법;

고정되어 있는 콘텐츠를 눈에 확 띄게 하고 싶을 때 css에서 mix-blend-mode를 이용할 수 있다. 개인 프로젝트를 진행히보다가 글씨가 조금 더 조화롭게 튀었으면 하는 마음에 찾아보게 되었다. 예제 mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: diffe..

[react] .process.env.REACT_APP_KEY undefined

문제 상황 드림코딩 강의를 들으면서 분명히 하라는 대로 했는데 계속해서 문제가 생겼다. firebase도 일부러 다운그레이드를 해서 버전 7로 실행했는데. 계속 process.env.REACT_APP_FIREBASE_API_KEY가 undefined라는 것 key 값이 잘못되었나 확인을 하고 .env 파일에서 값을 복붙해 컴포넌트에 직접 담았을 때는 정상적으로 작동되었다. 따라서 key값에는 문제가 없고, _FIREBASE_API_KEY 뿐만 아니라 .env 파일에 담아둔 키들이 활동을 못하는 것 같았다 해결방법 일단 맨 처음 할 일은 .env파일에 ,를 넣은 것은 아닌지 살펴보고 .env파일을 root에 생성한 것이 맞는지 다시 확인한다. 아무리 해도 코드에 문제가 없다면 'dotenv'를 설치하면 된..

[프론트앤드 공부기록] Javascript 기초 4

16. 객체와 메소드의 관계 const user = { name : 'Mike', sayHello : function(){ console.log(`Hello, I'm ${user.name}`); // 이렇게 user.name을 넣을 수는 있지만 문제가 발생할 수 있음. 그럴 때에는 this라는 키워드를 쓰면 된다. } } user.sayHello(); //로 호출하면 이 user가 sayHello 메소드의this가 된다 // "Hello, I’m Mike" 예제 sayHello = function(){ console.log(`Hello, I'm ${this.name}`); } let boy = { name : 'Mike', sayHello, } let girl = { name : 'Jane', sayHe..

[프론트앤드 공부기록] Javascript 기초 3

11. 함수(function) function sayHello(name){ console.log(`Hello, #{name}`); } function : 함수 sayHello : 함수명 name : 매개변수. 매개변수는 없을수도, 하나일 수도, 두 개 이상일 수도 있다. 두 개 이상이면 쉽표로 구분한다. ex) console.log(name1, name2, name3) function sayHello(name){ let msg = `Hello, 감자야`; if(name){ msg = `Hello, ${name}` } console.log(msg);}sayHello(); //"Hello, 감자야" - sayHello라는 함수명을 가진 함수를 실행시킨다. 그 내용은 msg를 보여주는것. msg는 `Hello..

[프론트앤드 공부기록] Javascript 기초 2

6. 비교연산자, 조건문 비교연산자가 쓰였을 때 반환되는 값은 오로지 불린값 ※ == 가 동등연산자라고 하는데 이상하게 동작할 때가 있다. 1 == "1" // true 숫자형 1과 문자형 1을 비교했을 때 true가 나옴 1 === "1" //false 그런데 === 이렇게 3개를 쓰먄 타입까지 비교하는 동등연산자가 된다 -> 일치연산자 가급적이면 동등 연산자보다는 일치 연산자를 쓰는게 좋다 7. 조건문 if if(age>19){ console.log('환영합니다.')'; } 코드가 한 줄 뿐이라면 중괄호{}를 생략해도 좋지만 가독성을 위해서는 있는게 좋다. ** if뒤 () 괄호 안의 값은 항상 불린으로 변환된 다음에 판단된다 true/false else if문의 조건이 false일 때 실행된다 el..

[프론트앤드 공부기록] Javascript 기초 1

코딩 어제시작한 초보 잘못된 부분이 있으면 알려주세요 모든 내용은 유투브 '코딩앙마' 님의 '자바스크립트 100분 완성' 을 들으며 공부한 것 기울임꼴은 내 생각 1. 변수 변수는 어떤 정보에 이름을 붙혀 사용하고 싶을 때 이용한다. name = "Mike"; age = 30; Mike라는 정보는 name이라는 이름을 가지고 30이라는 정보는 age라는 이름을 가진다 자바스크립트에서 문자는 항상 따옴표로 감싸져야 한다. ' " 둘 다 이용 가능. ※ 그러나 자바스크립트에서 이미 사용하고 있는 것은 변수명으로 사용할 수 없다(예약어_ ex: class) 만약 같은 변수에 다른 내용이 선언된다면 마지막에 선언된 내용으로 덮어씌워진다 ex) name = "Mike"; name = "pottato"; 면 pot..