맨땅에 헤딩

오늘은 API불러오는 연습을 하기 위해, 키워드를 검색하면 그에 알맞는 책이 나오는 사이트를 만들어보았다. 이 과정에서 구글에서 API를 key를 생성해서 불러오는 방법, 그리고 그것을 .env를 통해서 숨겨서 안전하게 가져오는 방법을 더 익혔다. 원래 키값으로 받아오는것은 잘됐는데 이것을 .env로 숨기는 과정에서 자꾸 에러가 발생했다. 이거 해결하려다가 시간이 30분은 걸린거같은데 🥲 해결법은 완전 간단했다 1. 서버를 껐다켠다. (나는 npm start를 다시 해주니 정상적으로 작동했다) 2. .env의 위치를 확인한다. 나는 1의 방법으로 해결함!! 자세한 해결기는 아래에 적어두었다. API Key not valid. Please a valid API key ❌ 에러코드 ❌ error: {code..

❌ 에러코드 ❌ error: {code: 400, message: 'API key not valid. Please pass a valid API key.', errors: Array(1), status: 'INVALID_ARGUMENT', details: Array(1)} [[Prototype]]: Object ✅ 해결방법 1. 서버를 껐다가 켠다. - vsCode를 껐다가 다시 켠다. - npm start를 다시 한다. 2. .env의 위치가 올바른지 확인한다. - .env를 루트 폴더로 옮긴다. (pakage.json과 동등한 위치) 나의 경우 이 에러가 발생했을때 30분을 헤맸는데, 1의 방법으로 간단하게 해결했다 🥲 npm start를 다시 해주니 잘됨 ㅋㅋ (console.log를 통해 확인하면..

1. 렌더링 정의 렌더링이란? 사용자 화면에 뷰를 보여주는것 2. 렌더링 엔진 & 목표 - 웹브라우저마다 다른 렌더링 엔진 - 렌더링 엔진의 목표 사용자 동작으로 인해서 입력발생, 스크롤발생, 애니메이션 동작, 비동기요청으로 인한 데이터로딩등의 상황 3. 렌더링 과정 렌더링엔진은 크게 다음의 과정을 거치는데 이를 Critical Rendrering Path라고 한다. DOM Tree생성 먼저 브라우저에서 사용자가 요청한 웹페이지에 문서를 불러오고 파싱을 한다 1️⃣ 코드는 어휘분석을 통해서 HTML5에 표준으로 지정된 고유한 토큰으로 변환된다 예를 들어 StartTag html이라는 태그는 html이 열렸다라는 의미를 가지고, Endtag body는 body태그가 닫혔다는 의미를 가진다. 2️⃣ 그리고 ..

일기를 매일 쓰는일은 쉬운일이 아니다 역시.. ㅋㅋ 지난주는 약간 땅굴을 판 관계로 공부도 덜하고 일기도 조금밖에 안썼지만..!! 어제부터 다시 열공시작이다..!! 코딩하면서 힘들때가 사실 많았지만 그때마다 옆에서 잡아주는 고마운 사람들이 있어서 그래도 다시 제길로 돌아올 수 있어서 나는 어떻게보면 참 인복이많은 사람인거같다 (사주에도 주위에 도와주는 사람들이 많아서 잘될거라던데 맞는것인가..!!🤔 ㅋㅋ) 오늘은 리액트 공부도 하면서 프로젝트도 작게 하나 만들고 있다. 대단한 기획은 아니지만 그래도 아이디어도 내고 평소에 만들어보고 싶었던 이런저런 기능들을 구현하고 있다. 이해하는 공부를 좋아해서 그렇게 했는데 코딩은 또 너무 그렇게만 하면 많은 기능을 익히기는 어려워서 좋지 않은거같다 일단은 많은 것들..

DOM (Document Object Model) Elements = html 하나하나의 요소 Document = 이 모든 요소들을 담고 있는 웹페이지 브라우저는 이 페이지에 해당하는 html을 분석해서 화면에 멋지게 띄어준다. DOM이란 이렇게 웹페이지에 들어있는 html element들을 트리형태구조로 표현한것. 가상돔 Virtual DOM 리액트는 가상돔을 사용하여 실제돔을 조작하는 일을 엄청나게 빠르게 해준다 가상돔 = 실제 돔과 같은 내용을 담고 있는 복사본 ( 이 복사본은 실제돔이 아닌 JS객체형태로 메모리안에 저장되어있다) 가상돔은 복사본이기 때문에 실제 돔안에 들어있는 모든 elements들과 속성들을 똑같이 가지고 있다 (하지만 가상돔은 실제돔과는 다르게 브라우저안에 있는 문서에 직접적으..

오늘은 프로그래머스를 풀면서 자바스크립트의 내장함수인 unshift(), push(), shift(),pop()에 대해 공부했다. 유사하면서도 반대의 기능을 가지고 있어서, 잘 알아둬야할것같다. 나는 크게 추가/제거라는 공통점으로 묶어서 정리했다. 🔫 공통점: 추가 💡 unshift() ↔️ push() 맨앞 맨뒤 🔫 공통점: 제거 💡 shift() ↔️ pop() 맨앞 맨뒤 포트폴리오 사이트를 리액트로 간단하고 만들려고 구상하고, 공부중이다. 일단 포폴 자체도 부족하다고 느껴서 사이트에 아직 올릴것이 많은건 아니지만 만들면서 채워나가려고 한다. 깃허브에 만들면서 푸쉬하는법이나 기본적인것들을 만들어보는 연습을 하는데에 도움이 될 것같다. 주말동안 잘놀고 즐겁게 잘 보냈는데 이상하게 잠이 잘 안온다. 피곤..

요즘에 운동을 안해서 그런지 체력이 너무 떨어졌다. 그리고 이런 저런 고민이 많아서 잠을 푹 못자서 그런지 진짜로 혈색이 달라졌다 ㅠㅠ 주말동안은 잠도 좀 충전을 해야겠다 (그래도 프로그래머스는 한문제씩 풀것이다!) 운동도 조만간에 시작해야지 확실히 운동을 할때랑 안할때랑 집중력이 차이가 난다. 요즘 다크서클이 너무 심해서 고민이다 ㅋㅋㅋㅋ 이 시기만 지나면 다시 괜찮아질거라고 생각하긴 하지만 일단은 그래서 브로콜리라도 먹고 있다 🥦🥦 얼른 이 고민들이 해결돼서 다시 혈색을 되찾고 싶다!! 오늘은 새로 시작할 프로젝트를 어떻게 만들지 기획했는데, 하고 싶은 프로젝트는 있는데 기술력이 아직 그건 무리일거같아서 조금 더 있다가 해야할거같다 그래서 다른 아이디어를 또 생각해야할거같다. 일단 다음주에 프로젝트를..

오늘은 이론스터디를 하는 날이라 이론 공부를 하였다. 이론 주제는 이렇게 4개 ㅋㅋ 내 노션에 공부하는것을 정리하는데 그걸 캡쳐한것이다. (블로그에는 조금 더 정돈된 내용을 올리고, 덜 된것은 복습을 위해서 노션에 올린다) 자바스크립트의 메모리는 크게 콜스택과 힙이라는 구조를 가지고 있다. 원시타입과 같이 정적인 메모리는 콜스택에 저장하고, 객체타입과 같이 동적인 메모리는 힙에 저장한다. 자바스크립트는 고급언어로, 가비지콜렉터가 존재한다. 그래서 제거해야 할 메모리를 직접 설정해주는것이 아니라, 더이상 쓰지 않는 메모리는 가비지컬렉터가 알아서 정리해준다. 원래 가비지컬렉터는 더이상 참조하지 않는 것을 삭제하는 원리로 작동하였는데, 순환참조가 문제가되어 2012년 부터는 Mark-and-Sweep 알고리즘..

1. 정의 IIFE (IIFE, Immediately Invoked Function Expression) 함수 정의와 동시에 즉시 호출 되는 함수 🔫 언제 사용? 🔫 ✅ 단 한번만 사용할 함수 ✅ 자바스크립트 모듈 2. 형식 //익명 즉시 실행함수 (function () { var a = 3; var b = 5; return a * b; })(); - 이름이 없는 익명함수를 사용하는것이 일반적 (이름이 있는 기명 즉시 실행 함수도 사용은 가능하지만, 어차피 다시 호출할 수는 없다.) 3. 사용이유 1️⃣ 필요없는 전역 변수 생성 ❌ ➡️ 전역 스코프 오염 ❌ (IIFE ➡️ 내부변수가 전역으로 저장되지 않음) 2️⃣ private한 변수 생성 외부에서 접근할 수 없는 자체 스코프, 내부를 private하..

오늘은 리액트로 shopping basket을 만든것을 netlify를 통해 배포까지 해보았다. 간단한 기능만으로 구성되어 어려운 페이지는 아니지만, 배포는 처음으로 해보는거라 더 의미가 있는 프로젝트였다. 자세한 내용은 아래에 기록해두었다. shopping basket 프로젝트 프로젝트 소개 쇼핑목록을 관리하는 메모장이다. 👉 배포사이트 보러가기 👉 깃허브보러가기 🖥 제작기간: 2일 (2023.3.21-3.22) 제작인원: 1명 (개인프로젝트) 기술스택: React, styled-components 추가 hihiha2.tistory.com 기능을 많이 추가하지는 않아서 앞으로 여기에 계속 추가할 예정이다. 앞으로 수정을 해도 지속적인 배포(CD)를 할 수있다..!! 오늘은 프로그래머스를 풀면서 map(..