본문 바로가기

전체 글123

220509 - 220513 주간 공부 메모 정리 📌 220509 인사이드 자바스크립트 책 리뷰 Chapter01 [ 자바스크립트 기본 개요 ] 📌 220510 인사이드 자바스크립트 책 리뷰 Chapter03 [ 자바스크립트 데이터 타입과 연산자 ] 📌 220511 인사이드 자바스크립트 책 리뷰 [ 함수와 프로토타입 체이닝 ] 📌 220512 WebStorm 개발 초기 설정, Webpack 🤬 nodeJS, nvm, npm 설정 다 까먹었다는 사실을 알게 됌 nodeJS 환경 조성 순서 바로잡기 1. nvm 설치 후 nvm 명령어로 node 설치 2. npm 설치 후 각종 모듈 이용 😝 어려울줄만 알았던 webpack 설정, 공식문서보고 따라하니 재밌어 .. webpack 초기 설정 📌 220513 package.json 파일 설정, WebStorm 익.. 2022. 5. 12.
오늘 배운것들 정리 💡 0부터 원하는 숫자까지 모든 수를 요소로 갖는 배열 만들기 // Array.from()으로 길이가 10, 값이 (0~9)인 배열 생성 const arr = Array.from({length: 10}, (val, idx) => idx); console.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] console.log(arr.length); // 10 불러온 데이터의 인덱스를 가진 배열을 한번에 생성 or 삭제해야하는 이벤트가 있었는데 이 때 이 방법을 유용하게 썼다. 더 좋은 방법이 있을 수도 ..?!! 💡 checkbox 타입의 input 태그는 'checked' 속성을 갖는다 체크 X 체크 O 리액트에서 useRef 훅으로 체크박스를 관리해야하나 .. 고민했었는데 .. 2022. 4. 18.
Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE (styled-components & React 에러) 📍 오늘의 에러 Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE 노트북에서는 잡히지 않던 에러가 데스크탑에서는 잡힌다 ..! (CPU 용량 부족인가..) 화면 렌더할 때는 문제생기지 않지만 파일을 컴파일할때는 문제가 생긴다 ㅎㅎ JSX 문법은 파스칼 케이스나 스네이크 케이스로 꼭 써주자 😊 2022. 4. 17.
검색 Debounce 직접 구현하기 (feat. 재할당 & 비동기) 👀 검색창 자동완성 기능 만들 때 서버에 너무 많은 요청을 보내게 되는 문제 발생 ❗ lodash의 debounce 함수를 이용할 수도 있지만 직접 구현할 수도 있다 ㅎㅎ 😊 그런데 구현하다가 아차 싶었던, 내가 실수했던 부분이 있어서 기록에 남긴다. const handleSearchBar = (event: React.ChangeEvent) => { // 내부 let timer: any = 0; const searchValue = event.target.value; if (timer) { console.log('clear time'); clearTimeout(timer); } timer = setTimeout(() => { axios({ method: 'get', url: '서버 URL' }) .then.. 2022. 4. 12.
커링 Currying 과 클로저 📍 클로저 간단 복습 클로저는, 현재의 유효범위를 넘어 스코프 체인으로 연결된 객체나 변수를 참조할 수 있게 해준다. 간단하게는 "함수와 함수가 선언된 어휘적 환경의 조합" 으로 정의된다. ✔ 장점 • 함수 내에 있는 변수를 재활용할 수 있다. • 참조하고 있는 변수를 외부에 노출시키지 않을 수 있다. 은닉 가능 ✔ 단점 • 클로저 함수를 남발하면 메모리 누수가 발생한다. 📌 커링을 공부하게 된 계기 코드를 작성하면서 은연중에 클로저를 사용하고 있다는 건 안다. 하지만 효과적으로 사용하고 있냐는 질문에는 자신있게 대답을 못하겠더라 .. ㅎ 그래서 실제 클로저 예시를 찾아보게 되었다 !-! 📌 커링 Currying 커링은 f(a, b, c) 처럼 단일 호출로 처리하는 함수를 f(a)(b)(c) 와 같이 각.. 2022. 4. 11.
22.03.10 [읽기 좋은 코드가 좋은 코드다] - 더스틴 보즈웰, 트레버 파우커 📍 책을 읽게 된 계기 팀 프로젝트 진행에 앞서 팀 규칙을 정하게 된다. 이때 변수명, 파일명 등 얕은 코드 스타일을 통일시켜놓고 시작할 수 있는데, 어떤 걸 기준으로 정해야되는지 모르겠더라. 읽기 편하다는 기준도 엉망이고 ..!! 팀 단위 작업을 할때 적어도 좋은 규칙을 제안할 수는 있어야겠다는 생각에 읽게 되었다. 💡 목차 1. 표면적 수준에서의 개선 ✔ 이름에 정보 담기 ✔ 오해할 수 없는 이름들 ✔ 미학 ✔ 주석에 담아야 하는 대상 ✔ 명확하고 간결한 주석 달기 2. 루프와 논리를 단순화하기 ✔ 읽기 쉽게 흐름제어 만들기 ✔ 거대한 표현을 잘게 쪼개기 ✔ 변수와 가독성 3. 코드 재작성하기 ✔ 상관없는 하위 문제 추출하기 ✔ 한 번에 하나씩 ✔ 생각을 코드로 만들기 ✔ 코드 분량 줄이기 4. 선택.. 2022. 4. 10.
22.04.09 타입스크립트와 함수 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 4. 9.
MAU, DAU, MCU, ACU 지표성 언어 정리 ✍🏻 왜 ? IT 기술 뉴스레터를 읽다보니 내가 모르는 약자들이 너무 많이 보이더라. 😂 한번 정리해두면 좋을 것 같아 기록하게 되었다. +그리고 그렇게 어렵지도 않음 !! 📍 MAU [ Monthly Activity User ] 월별 사용자 실제 활동하는 사람의 수를 추적하기 때문에 월별 회원수와는 다른 개념임. 📍 DAU [ Daily Activity User ] 일별 사용자 하루 단위, 실제 사용자 수. 📍 MCU [ Maximum Current User ] 순간 동시 접속자 단순한, 순간의 추이. 📍 ACU [ Average Current User ] 순간 동시 접속자의 평균 순간적으로 접속하는 유저의 평균값. 📍 PV [ Page View ] 페이지 내에서 사용자의 요청 수 한 사이트 내에서 사.. 2022. 4. 7.
Bundler 번들러란 ...? create-react-app 생각없이 사용하던 나를 반성하며, Bundler 개념이 나왔을 때 고개 갸우뚱했던 나를 반성하며 ... 공부 !-! 📌 Bundler ? 여러개의 파일을 하나로 묶어주는 역할 ex. Webpack, Parcell, Rollup, Browserify ✔ 번들러는 왜 탄생했는가 ? ✔ 왜 굳이 여러개의 파일을 하나로 묶어줘야 하는가 ? 2022. 4. 5.
자바스크립트 프로토타입 Prototype (2) 📌 프로토타입 (객체) ? ❗ 객체 간 상속inheritance을 구현하기 위한 핵심 개념 ❗ ❗ 프로토타입의 프로토타입은 언제나 Object.prototype ❗ 프로토타입은 어떤 객체의 상위 객체(부모 객체)의 역할을 하는 객체로, 다른 객체에 공유 프로퍼티/메서드를 제공한다. 프로토타입을 상속받은 하위 객체(자식 객체)는 상위 객체의 프로퍼티/메서드를 본인의 프로퍼티/메서드처럼 자유롭게 사용할 수 있다. 📌 객체 생성 방식과 프로토타입 결정 😮 (진심으로 너무 다양한) 객체 생성 방법들 ... ✔ 객체 리터럴 ✔ Object 생성자 함수 ✔ 생성자 함수 (new 연산자) ✔ Object.create 메서드 ✔ 클래스(ES6) 📍 객체 리터럴 객체 리터럴에 의해 생성되는 객체의 프로토타입은 Objec.. 2022. 4. 4.
Babel 과 Babel 이 필요한 이유 📌 Babel 이란 ? Babel is a JavaScript Compiler ...? Babel is a JavaScript Transpiler ...! 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다. 📍 Babel 등장 이유 Cross Browsing 을 돕기 위해 등장하였다. 🤔 Cross Browsing (크로스 브라우징) ? 브라우저나 기기의 종류에 관계없이 사이트가 의도대로 보여지고 작동되게 하는 작업. (호환성) 브라우저마다 렌더링 엔진이 다르기 때문에 개발자의 의도대로 작동하지 않는 경우가 발생한다. 그래서 크로스 브라우징 작업이 추가로 필요함. 😂 📎 Babel 이 빌드하는 과정 1. Parsing (파싱) : 코드 → AST 변환 과정 2. Trans.. 2022. 4. 3.
this 와 this binding 📌 this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing-variable 이다. this 를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 property 나 method 를 참조할 수 있다. 단, this 가 가리키는 값 (this 바인딩) 은 함수 호출 방식에 의해 동적으로 결정된다. 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. Function.prototype.apply/call/bind 메서드에 의한 (간접) 호출 📎 일반 함수 호출 기본적으로 this 에는 전역 객체(global object)가 바인딩된다. (어떠한 함수[중첩 함수, 콜백 함수 포함]라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩.. 2022. 4. 2.
22.03.24 [읽기 좋은 코드가 좋은 코드다] - 더스틴 보즈웰, 트레버 파우커 📍 책을 읽게 된 계기 팀 프로젝트 진행에 앞서 팀 규칙을 정하게 된다. 이때 변수명, 파일명 등 얕은 코드 스타일을 통일시켜놓고 시작할 수 있는데, 어떤 걸 기준으로 정해야되는지 모르겠더라. 읽기 편하다는 기준도 엉망이고 ..!! 팀 단위 작업을 할때 적어도 좋은 규칙을 제안할 수는 있어야겠다는 생각에 읽게 되었다. 💡 목차 1. 표면적 수준에서의 개선 ✔ 이름에 정보 담기 ✔ 오해할 수 없는 이름들 ✔ 미학 ✔ 주석에 담아야 하는 대상 ✔ 명확하고 간결한 주석 달기 2. 루프와 논리를 단순화하기 ✔ 읽기 쉽게 흐름제어 만들기 ✔ 거대한 표현을 잘게 쪼개기 ✔ 변수와 가독성 3. 코드 재작성하기 ✔ 상관없는 하위 문제 추출하기 ✔ 한 번에 하나씩 ✔ 생각을 코드로 만들기 ✔ 코드 분량 줄이기 4. 선택.. 2022. 3. 24.
자바스크립트 프로토타입 Prototype (1) (원시 타입을 제외했을 때) 자바스크립트를 이루고 있는 모든 것은 객체다. 📌 객체지향 프로그래밍 특징? 명령형 프로그래밍 객체지향 프로그래밍 ✔ 그래서, 객체지향 프로그래밍이 뭔데 ? 프로그램을 객체의 집합 으로 표현하려는 프로그래밍 패러다임 이다. 📎 객체 Object 📎 메서드 Method 📎 속성 Property 객체지향 프로그래밍은 실제 세계의 실체를 인식하는 철학적인 사고를 프로그래밍에 접목한 결과다. 현실에서 사물이나 개념은 각자의 '속성'을 가지고 있기 때문에 이를 기준으로 실체를 인식하거나 구분한다. 이 방식을 프로그래밍에 접목시켜보면, 하나의 객체(사물)는 상태(사물의 색상, 너비, 무게)와 동작(사물의 부피를 구하는 수식)으로 표현할 수 있다. 상태 state는 속성 property/.. 2022. 3. 9.
주소창에 URL (www.google.co.kr) 을 입력하면 무슨 일이 벌어지나요 ? 📌 브라우저 주소창에 www.google.co.kr을 입력하면 무슨 일이 벌어질까 ? 1. 브라우저 주소창에 www.google.co.kr을 입력. 2. 브라우저는 총 4개의 cache에서 DNS기록 확인. 3. 요청한 URL이 cache에 없으면 ISP의 DNS server는 재귀적으로 도메인 이름을 찾음. 4. 알맞은 IP주소를 찾으면, 브라우저는 해당 서버와 TCP연결을 시도. 5. TCP연결에 성공하면, 브라우저가 웹 서버에 HTTP요청 보냄. 6. 웹 서버는 처리한 HTTP응답을 브라우저에게 보냄. 7. 브라우저는 응답에 기반, HTML 컨텐츠를 랜더링해서 우리 눈에 보여줌. 📍 브라우저 주소창에 www.google.co.kr 이라는 도메인 이름을 검색한다. 📍 해당 도메인 주소의 IP주소를 찾.. 2022. 3. 4.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (2) 📌 이전 내용 2022.02.26 - [Dev-diary/일상] - 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이 code-designer.tistory.com • Bare-minimum Requirements ✔ 스크롤 이벤트 : up & down 에 따라 위치 이동 ✔ 텍스트, 컴포넌트 transition 애니메이션 추가 ✔ 사용자 후기 볼 수 있는 버튼 구현 ✔ 체험하기 버튼, Footer 디자인 • Advanced Requireme.. 2022. 2. 27.
기능추가 : 4주차 플젝 메인페이지 애니메이션 구현 (1) 📍 오늘 도전할 기능 프로젝트를 소개하는 메인페이지 디자인은 사실 가장 늦게 도출되었다. 노션처럼 [ 기능 + 간단한 소개 + gif ] 기능을 컴팩트하게 표현하는 건 어렵지않다고 느꼈기 때문이다. 텍스트 몇 자랑 gif 넣지 뭐 .. 라고 생각했으나 결과물은 꽤 빈약해보였다 🤔 😨 진짜 안일한 생각이었다 !! 개인적으로 아쉽기도 하고, 스크롤 애니메이션 공부도 할겸 메인페이지 전체를 수정하게 되었다. 그리고 프로젝트를 더 적극적으로 소개하려고 한다 !! 메인페이지는 첫인상을 좌우하니까 중요하다 !! 📎 참고 레퍼런스 UI 컴포넌트가 많은 우리 프로젝트랑 잘 맞겠단 생각을 했다 !! 😊 스크롤 이벤트로 인해 스크린 전체의 이미지가 부드럽게 바뀌는 것도 마음에 들었고, 특히 저 서서히 튀어나오는한 애니메이.. 2022. 2. 26.
자꾸 까먹는 Git 명령어 모음 📌 Git 로컬 저장소 branch 이름 변경하기 git branch -m [기존 브랜치 이름] [새로운 브랜치 이름] 📌 Git 원격 저장소 branch 이름 변경하기 추가 | git push origin [새로운 브랜치 이름] 삭제 | git push origin --delete [기존 브랜치 이름] / git push origin :[기존 브랜치 이름] 2022. 2. 23.
22.02.22 타입스크립트의 시작 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 2. 22.
리팩토링 : 4주차 플젝 마커 정보창 css 변경 📍 오늘 고칠 문제 웹 전체 분위기에 맞게 간단한 css 변경 --> 가독성을 높이면서 포인트 컬러 적용하기 😨 BEFORE 😊 AFTER 🤨 느낀점과 오늘 하루 정리 프론트엔드의 가장 큰 장점 : 노력한만큼 눈에 보인다 & 디자인 잘 된 컴포넌트보면 보람을 느낄 수 있다. 오늘 2D 도면은 3D화 하는 기술을 가진 기업을 발견했다 !-! 너무 흥미로워서 이것저것 기업에 관한 정보 서치하다 하루를 다 보냈다. 기업 서치하는 건 시간을 정해두고 해야겠다. 꼬리에 꼬리를 무는 질문들을 따라가다 어느새 스타트업 관련 용어를 외우고 있었다. 😓 내일 할 일 ✔ 오늘 쓰던 이력서 마무리 후 지원 ✔ 방 구조 바꾸기 (새 침대 + 𝟃 인테리어) ✔ scratch now 무한 스크롤 기능 설계 ✔ CS 관련 서적 읽.. 2022. 2. 21.
22.02.17 면접 Q & A 📌 자바스크립트는 동기적 언어인가 비동기적 언어인가 ? 📌 자바스크립트의 "동기"와 "비동기"에 대해 아는대로 말해보기 자바스크립트는 동기적 언어입니다. 자바스크립트의 엔진이 싱글 스레드로 동작하기 때문에, 코드를 순서대로 읽을 수밖에 없습니다. 동기적인 언어의 문제점은, 해당 태스크를 끝내기 전까지는 아무것도 처리할 수 없다는 점입니다. 일례로 데이터를 불러오는 작업과 UI 컴포넌트의 렌더링 작업이 차례로 진행된다고 했을 때, 데이터가 모두 불러오기 전까지 화면이 하얗게 뜨는 문제가 발생할 수 있습니다. 반대로 UI 컴포넌트를 먼저 렌더링하더라도 컴포넌트에 할당된 이벤트가 동작되지 않는 문제를 야기할 수 있습니다. 이를 해결하기 위해 브라우저 엔진에 내장된 비동기 메서드를 사용합니다. fetch( ) .. 2022. 2. 18.
리팩토링 : 4주차 플젝 input 창 텍스트 길이 제한 📍 오늘 고칠 문제 ✔ 장소에 해당하는 제목의 길이를 제한했지만 적용되지 않은 에러 --> 사진을 저장할 때 해당 사진과 장소를 묶어 제목을 정할 수 있게 설계하였다. 이 제목은 태그의 느낌으로 짧게 짓도록 유도하기 위해 텍스트의 길이를 제한해놨었다. input 태그에 max-length 속성을 넣어 13으로 설정했는데 적용이 안되는 문제 발생. --> 분명 설정 당시에 작동이 되는 걸 알고 넘어갔는데, 리팩토링하면서 보니까 안되더라 😂 가끔 적용이 안된다고는 하는데 흠 ... 언제나 동작하게 함수를 만들어 해결하자 !!! 😨 BEFORE 분명 저는 max-length 속성을 넣어놓은 상태구요 .. 동작 안하구요 .. ㅎㅎ 이렇게 되면 사이드바에 탭이 추가될 때 글자가 넘쳐 UI가 무너지는 문제가 발생한.. 2022. 2. 17.
리팩토링 : 4주차 플젝 kakao Map API 마커 상태 관리 (1) 📍 프로젝트가 끝난 후 아쉬웠던 것들 당연히 부족하고, 아쉬운 것들 투성이다. 스스로 자책하기 보단 차근차근 고쳐나가기로 마음을 다잡고 고칠 점들을 리스트업 해본다. 그날 그날 고친 점들을 적고 어떻게 고쳤는지, 또 어떤 식으로 발전할 수 있을 것인지 등을 기록한 리팩토링 로그를 시작한다 👀 ✔ 루트 생성 페이지, 루츠 수정 페이지 : 마커 여러개 (5개 이상) 추가했을 때 화면이 하얘지는 에러 --> 이거 정말 심각한 문제였다. 프로젝트가 거의 끝날 때즈음에 만난 에러라 기간 내에 해결하지 못하고 제출했었다. 😓 심지어 팀원분이 "마커를 여러개 추가하면 화면 동작이 느려져요 !" 라고 알려주셔서 발견하게 됐다. 노트북에서, 혹은 모바일에서 네트워크 부하를 어떻게 감당할까 ?-? 를 고민하지 않은 대가였.. 2022. 2. 16.
자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식) 📍 당신이 선언한 변수는 스스로에게 할당된 값을 모 른 다. 우리가 변수로 선언하고 지정하는 모든 것은 "식별자"이다. 식별자란, 메모리 공간에 저장되어 있는 어떤 값을 구별(식별)해 낼 수 있는 고유한 이름이다. 즉, 식별자는 값이 아니라 값이 저장된 메모리 주소를 기억한다. --> 원시 타입과 객체 타입 모두에 해당되는 내용이기 때문에 굉장히 중요함 다음과 같은 방식으로 원시 타입의 값을 복사하게 되면 1또는 2와 같은 일이 일어난다. const num = 5; const copyNum = num; console.log(num === copyNum) // true // 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 "깊은 복사"라고 부르기도 한다. (공식 x) 1. 새로운 메모리 공간을 할당하여.. 2022. 2. 15.
HTML .env 변수 넣기 (feat. React) 🔊 HTML script 태그에 env 변수 넣기 테스트 용으로 써오던 카카오 map api 자바스크립트 키를 env 파일에 넣어 관리하기로 함. 진즉에 했었어야 했는데 방관. 새로운 api 키를 발급받아서 교체해주었다. 이미 깃헙에 올라간 코드는 삭제할 수 없으니, 발급받은 테스트용 api키를 파기하지만 절대 이런 실수는 용납안됨 ..! 👀 ❗ 오늘의 교훈 : 중요한 설정은 잊지말고 초기에 해주자. 1. dotenv 설치 2. .env 파일에 키,값 넣어주기 (리액트만의 규칙 있음) 3. gitignore 폴더에 .env 추가 1. npm install dotenv 2. // HTML // .env REACT_APP_KAKAO_JAVASCRIPT_KEY=leeKey .env 변수 이름 반드시 REACT.. 2022. 2. 14.
22.02.14 면접 Q & A 📌 원시 자료형과 참조 자료형의 차이 말해보기 원시 자료형은 (할당 후에) 변경 불가능한 데이터 타입이고, 참조 자료형은 (할당 후에) 변경 가능한 데이터 타입이다. 원시 자료형은 메모리에 저장될 때 값 그 자체가 저장되지만, 참조 자료형은 값의 참조 값, 즉 값의 주소가 저장되는 차이가 있습니다. 📍 과거 학습 내용 복습 2021.08.12 - [Front-end/JS] - 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/re.. 2022. 2. 14.
22.02.13 면접 Q & A 📌 자바스크립트의 자료형[data type]이 필요한 이유 말해보기 모든 언어가 다 그렇지만, 원하는 값을 메모리에 저장하고 읽고, 사용하게 된다. 메모리에 값을 저장하기 위해선 저장되는 데이터의 크기를 알아야한다. 저장하기 위한 공간을 확보해야하기 때문이다. 데이터의 크기를 알 수 있게 하는 지표가 데이터 타입이다. -> 그래서 데이터 타입이 중요하다. 📌 자바스크립트의 자료형[data type]에 대해 말해보기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 1. 숫자 타입 [number] | 모든 수를 64비트 실수 처리. 2. 문자열 타입 [string] | 16비트 유니코드 문자로 표현. 3. 불리언 타입 [boolean] | True / False 4. undefined 타입 [undefine.. 2022. 2. 13.
Github profile 꾸미기 & 정리 ing 📍 github profille 정리 리스트 ✔ 프로필 미모티콘 생성 ✔ 프로필 README 꾸미기 ✔ 2주 프로젝트 README 정리 ✔ 4주 프로젝트 README 정리 ✔ 2주 프로젝트 리팩토링 ✔ 4주 프로젝트 리팩토링 (ing) 📎 프로필 미모티콘 생성 사회적인 (?) 나의 모습을 그리고싶었는데 캐릭터에 화장하는 게 어렵더라 ㅎ.. 😂 제페토보다는 사람같아서, 만족 ! ^__^ 📎 프로필 README 꾸미기 개인적으로 미니멀한 디자인을 좋아해서 나를 소개할 때 꼭 필요한 정보만 골라 컴팩트하게 구성해보았다. + 공식문서 밥 먹듯 보자는 의미에서 각 언어의 공식문서 링크도 연결해놨다. 😉 📎 2주 프로젝트 README 정리 📎 4주 프로젝트 README 정리 📎 2주 프로젝트 리팩토링 📎 4주 프로.. 2022. 2. 11.
프로젝트 수기 기록을 정리하며. 📍 재정비 시간 본격적으로 취업 준비에 앞서 이전 기록들을 정리하는 시간을 가졌다. 복잡하게 얽혀있던 폴더와 파일들, 어지럽게 적어놨던 메모들, 일기들 ... 📍 프로젝트 수기 프로젝트 초반에 생각나는대로 이것저것 적어놨던 기록. ✍🏻 프로젝트 후반의 기록. ✍🏻 확실히 로직이 정리된 느낌이 강하다. 페이지네이션 구현 로직 💡 lodash의 chunk 메서드를 활용했다. react-grid-layout 쓰기전 redux로 배열 상태 전역 관리할 때 .. 결국 redux를 쓰지 않게 된 그런 슬픈 이야기 😂 서버 API 를 수정하면서 작업 + 보내야할 데이터 많음 = 환장 조합 메모해가면서 진행했다 😉 2022. 2. 10.
kakao Map API Geocoder CORS Error 📌 문제 상황 프로젝트 리팩토링하면서 localhost 환경에서 웹을 테스트하고 있었다. 카카오 지도 자체는 잘 뜨는데 마커가 안찍히는 문제가 발생했다. ??? 뭘까 ??? 자바스크립트 키도 있고 지도도 잘 뜨는데 ... 뭐지 ??? 콘솔창을 확인해보니 Response to preflight request dosen't pass access control check : Redirect is not allowed for a preflight request 에러 메세지가 떴고, 그 내부를 들여다보니 geocoder 를 불러오는 과정에서 오류가 나고 있었다. 📌 해결 방법 문제는, 배포된 프로젝트 도메인에서는 모든 기능이 잘 동작했다. 카카오 Developer 안에서도 도메인 등록을 잘 해놨기에 내 문제는 아.. 2022. 2. 1.