mystery

1. 사건의 발단 기존 CRA를 사용해 만들던 프로젝트를 parcel 기반으로 수정하고 빌드 했는데, 이후 프로덕션 환경에서 경로 관련 문제가 발생했다. 1-1. 아무것도 보이지 않았다. 로컬 환경에서는 문제 없이 실행되던 프로젝트를 빌드 후 github pages에 배포했는데 github.io/~~~~ 같은 프로덕션 환경에서 로드 되지 않았다. 1-2. 이미지 파일 엑박 로컬 환경에서는 문제 없이 로드 되던 이미지 파일들이 프로덕션 환경에서 엑박을 시전했다. 2. 문제의 원인 2-1. index.html 파일 내 번들 된 xxx.css, xxx.js 의 경로가 올바르지 않았다. CRA로 생성한 프로젝트에서는 빌드 시 다음과 같이 자동으로 index.html 파일 내 코드의 경로들이 수정됐었다. 하지만 ..

별안간 개고생을 했더랬다. 1. 사건의 발단 최근에 자바스크립트 기본을 다시 공부하기 시작하면서 기존에 CRA로 만들고 있던 쇼핑몰 프로젝트를 2개월 정도 만에 들어갔는데, 이게 웬걸..? 'ERR_OSSL_EVP_UNSUPPORTED' 라는 에러와 함께 로컬에서 실행이 안됐다. 찾아보니 node.js 17 이후의 버전에 적용되는 Open SSL3.0의 기준에 나의 어떤 모듈들이 입구컷 당한 모양이었다. 이후 package.json의 scripts를 다음과 같이 바꿔서 실행하세요~ 라는 해답을 찾아 package.json을 열어보았다. replace "start": "react-scripts start" by "start": "react-scripts --openssl-legacy-provider sta..

어떤 에러나 문제점을 만났을 때 마다 구글링 한번 정도로 해결되는 정도면 좋지만, 그렇지 않을 때가 있습니다!! 분명 이 방대한 웹 어딘가에는 있는 자료겠지만, 도저히 나의 구글링 능력으로는 찾을 수가 없는 해결법들..ㅠㅠ 그러다 결국 찾아내기라도 하는 날에는 엄청난 희열과 함께 속썩이던 문제를 해결해 버리고는 눈앞에서 치워버렸었습니다. 여태까지는 그랬습니다. 보이던 창 다 꺼버리고 '어우 드디어 끝났네' 하고는 덮어 버렸습니다. 앞으로는 이 카테고리에 저를 고통속에서 힘들게한 에러나 문제점들에 대해서 삽질했던 추억을 기록 하려고 합니다. 당장에는 눈앞에서 치우고 싶겠지만 그만큼 힘들게 찾은 자료이기도 할테니 말이에요! 무엇보다 똑같은 걸로 2번 삽질하면 멍청한 거니까유~~ 자 그럼 드가자잇!

이런 글을 쓴다는게 어딘가 상당히 어색하고 부끄럽기도 하다. 초등학교 시절 쓰던 일기 이후에는 내 생각을 정리하는 글을 써본적이 없기 때문이다. 이곳에는 정말 하고 싶은 아무 말이나 다 하려고 한다. 18년 8월 첫 회사에 출근했다. 스물 셋 나이에 첫 회사에서 일을 시작해 2년간 돈을 벌고 써보기도 하면서 세상을 익혔다. 20년 8월 퇴사 했다. 25살 이었다. '앞으로의 삶도 재미있겠느냐' 라는 질문에 '아니오' 라고 답을 낸 후에 2년간의 회사 생활을 마무리했다. 20년 10월 새로운 회사에 출근했다. 본가에서 나와 나혼산을 시작하면서 진짜 세상을 맞이했다. 무엇을 하고 싶은지 여전히 몰랐다. 그래서 무엇이든 도전했다. 그렇게 두 번째 회사에 입사했다. 새로운 분야였고 내가 원하는 게 무엇인지, 또..

자바스크립트는 객체의 프로퍼티 키로 문자형과 심볼형만을 허용합니다. Symbol ? 심볼은 유일한 식별자를 만들고 싶을 때 사용합니다. let test = Symbol('테스트 심볼') console.log(test) // Symbol(테스트 심볼) 심볼은 Symbol() 로 만들 수 있고, 괄호안에 '심볼 이름' 이라고 불리는 심볼의 대한 설명을 붙일 수 있습니다. 심볼은 유일성이 보장되는 자료형입니다. 때문에 심볼 설명이 동일한 여러 개의 심볼을 만들어도 각 심볼값은 다릅니다. let test1 = Symbol('테스트 심볼') let test2 = Symbol('테스트 심볼') console.log(test1 == test2) // false console.log(test1 === test2) //..

옵셔널 체이닝( ?. )은 프로퍼티가 없는 중첩객체에 에러 없이 접근하고 싶을 때 사용합니다! let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2.name.firstName) // Cannot read properties of undefined 위 코드에서는 아직 이름 정보가 없는 객체에서 값을 가져오려 했기 때문에 에러가 발생했습니다. 옵셔널 체이닝이 등장하기 전에는 이런 에러를 막기위해 &&연산자를 사용했습니다. let user1 = { name:{ firstName: 'John', lastName: 'Lee' } } let user2 = {} console.log(user2 && use..

개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 이럴 때 사용하는 것이 new연산자와 constructor함수 입니다. constructor ( 생성자 함수 ) 생성자 함수와 일반 함수에 기술적인 차이는 없습니다. 대신 생성자 함수에는 2가지 관례가 있습니다. 1. 함수 이름의 첫 글자는 대문자로 시작합니다. 2. 반드시 'new' 연산자를 붙여 실행합니다. function User(name){ this.name = name; this.isGood = false; } let user1 = new User("Lee"); console.log(user1.name)// Lee console.log(user1.isGood)// false new 함수명( ... ) 을 사용해서 함수를 ..

객체는 실존하는 개체를 표현하고자 할 때 사용합니다! * 개체(entity)란? 현실 세계에서 조직을 운영하는 데 꼭 필요한 사람이나 사물과 같이 구별되는 모든 것을 의미한다. * 메서드(method)란? 객체의 프로퍼티에 함수를 할당할 수 있습니다. 객체 프로퍼티에 할당된 함수를 method 라고 부릅니다! method 만들기 1. 객체 밖에서 함수 표현식으로 생성 let user = { name : 'Lee', age : '26' } user.hi = function(){ console.log(`hi! ${user.name}`) } user.hi(); // hi! Lee 2. 이미 정의된 함수를 사용해서 생성 let user = { name : 'Lee', age : '26' } function hi..

자바스크립트에서 우리가 만든 모든 것 ( 원시값, 객체 , 함수 등 ) 들은 메모리를 차지합니다. 자바스크립트 엔진 안에서는 우리가 만든 것중 더 이상 쓸모 없어진 것 들을 처리하는 가비지 컬렉터 ( garbage collector ) 가 끊임없이 동작합니다 ! 가비지 컬렉션 기준 자바스크립트는 도달 가능성 이라는 개념을 통해 메모리 관리를 합니다. 도달 가능한 값은 어떻게든 접근,사용이 가능한 값을 의미하는데, 도달 가능한 값이라면 메모리에서 삭제되지 않습니다. root( 루트 ) root라고 불리는 값들은 태생부터 도달 가능한 값 이기 때문에 명백한 이유 없이 삭제되지 않습니다. root 의 예시 1. 현재 함수의 지역 변수와 매개변수 2. 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 ..

객체와 원시타입의 가장 큰 차이점은 원시 타입이 '값 그대로' 저장되고 복사되는 반면에 객체는 '참조에 의해' 저장되고 복사된다는 것입니다. 참조에 의한 값 복사 ( 객체 ) 문자열을 할당한 변수를 복사한 결과입니다. let msg = "hi" let phrase = msg phrase = "hello" console.log(msg)// hi console.log(phrase)// hello 각자 다른 문자열이 출력 되었습니다. 객체를 할당한 변수를 복사한 결과입니다. let msg = { msg : 'hi'} let phrase = msg phrase.msg = 'hello' console.log(msg)// {msg: 'hello'} console.log(phrase)// {msg: 'hello'} ..