IT 공부를 위한 블로그

React에서 Firebase를 사용한 로그인 기능을 구현하기 위하여 API 키값이 들어있는 firebaseConfig를 입력하고 .env를 생성하여 환경변수를 만들어 줌으로써 key 값을 보호하여 불러오는 형식으로 진행하려고 했다. 하지만 키값을 정확하게 입력을 했음에도 불구하고 아래와 같이 오류가 발생하였다. const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSend..

지난 포스팅 때 Webpack의 개념과 Loader를 사용하는 방법을 알아보았다. https://for-it-study.tistory.com/93 Webpack 개념정리 및 CSS, 이미지 모듈화 1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 for-it-study.tistory.com 위 포스팅에서는 Webpack 개발환경을 설정할 때 webpack.config.js에 있는 mode 프로퍼티를 통해 제어하는 방식으로 사용하고, 새롭게 빌드하려고 할 때마다 npm run build를 입력해 주어야 해서 불편했다. 하지만cross-env..

1. Webpack - Weppack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러이다. * 모듈 번들러란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이들을 조합해서 하나의 결과물로 만드는 툴이다. - 브라우저의 성능이 높아지고 자바스크립트 애플리케이션이 점점 고도화되면서 유지보수의 난이도가 높아졌다. - 이를 해결하기 위해 자바스크립트를 기능 단위로 분리하여 사용하는 모듈화가 필요해졌다. - 자바스크립트 모듈시스템이 등장하기 전에 모듈 패턴으로 사용했고, 정식 지원하는 모듈 시스템이 생겨났지만, IE 브라우저에서는 지원하지 않았기 때문에 모든 브라우저 환경에서 모듈 시스템을 사용할 수 있도록 만들어진 게 webpack이다. Webpack 공식홈페이지: https://webp..

1. null - JavaScript에서 null은 메모리에 값이 비어있음을 명시적으로 표현하기 위하여 빈 값에 null을 할당되어있는 상태이다. - 또한 typeof로 null의 타입을 알아보면 object를 출력한다. - 이는 자바스크립트 개발자들이 null의 예외처리를 고려하지 못하여 object로 출력되는 버그이다. (아래 페이지 참조) 초기 구현의 결함을 수정하지 않도록 권장하기 때문에 수정하지 않고 있다. https://stackoverflow.com/questions/18808226/why-is-typeof-null-object Why is typeof null "object"? I'm reading 'Professional Javascript for Web Developers' Chapte..

Hook 기존 Class 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수 형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다. Hook을 사용할 때 규칙 1. 최상위 레벨에서만 Hook을 호출해야 한다. 반복문, 조건문 또는 중첩된 함수에서는 Hook의 호출을 권장하지 않는다. 항상 함수의 최상위에서 Hook을 호출하여야 하는데 이는 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되기 때문이다. 예시) function Form() { const [user, setUser] = useState('Hun'); useEffect(function persistForm() { l..

promise와 비동기 처리방식 설명 글: https://for-it-study.tistory.com/88 [JavaScript] 비동기 처리 방식 (callback, setTimeout, promise) 1. 비동기 처리 방식이란? 비동기 처리 방식은 병렬적으로 테스트를 수행하는 것을 뜻한다. 즉, 순차적으로 특정 코드의 연 사이 끝날 때까지 기다리는 동기 처리 방식과는 달리 코드의 실행을 for-it-study.tistory.com - promise 방식은 작업이 많아지면 callback 함수처럼 코드의 깊이가 길어진 않지만 특정 조건에 따라 분기를 나누기가 어렵다는 단점과 어떠 부분에서 에러가 발생했는지 파악하기가 어렵다는 단점을 가졌다. - callback 함수보다는 상대적으로 괜찮지만 프로미스 ..

1. 비동기 처리 방식이란? 비동기 처리 방식은 병렬적으로 테스트를 수행하는 것을 뜻한다. 즉, 순차적으로 특정 코드의 연 사이 끝날 때까지 기다리는 동기 처리 방식과는 달리 코드의 실행을 멈추지 않고 병렬적으로 코드가 실행되는 방법을 뜻한다. 이런 비동기 처리 방식은 자바스크립트 언어가 싱글 스레드 프로그래밍 언어이기 때문에 많이 사용된다. 2. callback 함수 callback은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말하며 자바스크립트에서는 특정한 이벤트가 발생했거나 특정 시점에 시스템에서 호출하여 비동기 처리방식으로 사용 할 수 있다. - Synchronous callback: 즉각적으로 실행하는 동기적 callback 함수 - Asynchronous callback: 언제 실행할지..

1. block 요소 가운데 정렬하기 1) 좌우 margin을 auto로 설정해서 가운데 정렬하기 2) inline-box로 묶어서 align-text: center; 설정 box box box box box 3) position: absolute를 줘서 left, right, top, bottom 값에 모두 0을 주고 margin값에 0을 줘서 가로 세로 가운데 정렬을 할 수 있다.이떄 width와 height 값은 고정된 값이어야 한다. 1 4) 고정 값이 아닌 높이를 가진 요소 가운데 정렬: 정렬 2. 인라인 요소 가운데정렬 1) 패딩을 줘서 가운데 정렬 이때 단위는 em으로 줘서 폰트나 width 값이 변경되어도 반응할 수 있게 만든다. 이때 height값은 auto로 해야 한다. 인라인 가운데 ..

overflow:hidden과 display:none은 모두 요소를 화면상에서 가리거나 보이게 할 수 있는 가시성 관련 프로퍼티이다. 1. display: 요소를 어떻게 보여줄지 정하는 프로퍼티이다. - display: none;은 적용한 요소를 화면에서show/hide 시킬 수 있다. - 화면에서 가려지나 다음 요소가 자리를 차지한다. 즉 안 보이는 요소의 콘텐츠 영역 또한 사라지게 한다. 2. overflow:hidden - 부모 요소의 범위를 넘어가는 자식 요소의 부분을 보이지 않도록 처리한다. 3. 차이점: - 두 프로퍼티들은 모두 요소들의 가시성에 관여하여 특정 요소를 안 보이게 한다는 특징을 가지고 있다. 하지만 overflow:hidden속성은 지정되지 않은 영역을 숨겨준는 것이기 때문에 콘..

HTML의 태그는 크게 인라인 요소와 블록 요소로 나눌 수 있다. 1. 인라인 요소 1) 특징: - 인라인 요소는 블록 요소안에 포함할 수 있다. 인라인 요소 안에는 또 다른 인라인 요소가 들어갈 수 있다. - 콘텐츠에게 맞추어져 있기 때문에 width와 height를 변경 해 줄 수 없다. - 따라서 인라인 요소는 line-length로 줄의 높낮이를 조절하여 콘텐츠의 크기를 변경하거나 text-align으로 좌, 우, 중앙 정렬을 할 수 있다. -인라인 요소는 줄바꿈이 없고 우측에 바로 이어져서 표기가 된다. 2) 인라인 요소: 하이퍼링크를 걸어주는 테그 이미지를 삽입하는 태그 사용자에게서 입력받을 수 있는 입력 폼을 만들어내는 기능 의미 없는 태그 ... See the Pen Untitled by ..