본문 바로가기

분류 전체보기126

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.
22.01.26 코드스테이츠 4주차 Final Project 회고록 👀 4주차 Final Project 회고록 📌 4주차 두 번째 프로젝트의 시작 2주 프로젝트가 끝나고 쉼없이 4주 프로젝트가 시작되었다. 대화를 많이 하고 기획을 꼼꼼히 하기로 다짐했던 만큼 5일의 시간을 들여 계획했다. 운 좋게도, 내가 하고싶었던 아이디어로 웹을 만들게 되었다. 아이디어를 간단히 소개하자면 : -> 기획 의도 사진은 생각보다 많은 정보를 담고 있습니다. "사진을 저장하다 = 추억을 기억한다" 는 의미가 통하는 시대입니다. 갤러리의 수많은 사진들 사이에서 내가 원하는 사진 한장을 찾아 헤매본 적이 있으신가요 ? 정보의 저장은 쉬워졌지만 해당 정보를 제대로 관리할 수 있는 도구는 많지 않습니다. 블로그와 SNS에서 본 사진을 보고 반해 찾아간 장소의 주변에서 놀거리를 찾지 못해 당황한 적.. 2022. 1. 28.
21.12.26 코드스테이츠 2주차 First Project 회고록 👀 2주차 First Project 회고록 📌 2주차 첫 번째 프로젝트의 시작 팀원 모두 "첫" 프로젝트 경험이다 보니 배운 걸 복습하면 된다는 가벼운 생각으로 임했다. 그런데 아이디어 이야기를 하면할수록 큰 가닥이 잡히고, 해낼 수 있겠는데 ..? 라는 용기가 생겼다. 스토리 라인을 탄탄히 짰고 업무 분배도 기간에 맞춰 계획했다. 모두들 할 수 있다는 자신감에 부푼 채 프로젝트를 시작했다. 📌 우리팀이 잘한 점 📎 팀프로젝트와 직접적으로 관계없는 내용의 질문이더라도 팀원 모두가 함께 고민했다. 프로젝트를 하면서 대화의 생산성과 상관없이, 대화 자체를 많이 해야한다는 것을 느꼈다. 팀 프로젝트에서 빠질 수 없는 "GitHub 관리" 를 예로 들어보겠다. 우리 팀은 깃허브를 대화 주제로 삼았을 때, ✔ G.. 2022. 1. 27.
Token & Token-based Authentication 의 동작 과정 (feat. JWT) 📌 Token ? 프로그래밍 언어에서의 token 문법적으로 더 이상 나눌 수 없는 기본적인 언어 요소를 말한다. 키워드나 연산자, 구두점 등이 token 이 될 수 있다. 네트워크에서의 token 네트워크를 따라 돌아다니는 암호화된 비트열이다. 각 네트워크에는 오직 하나의 token 만 존재하므로 2개 이상의 컴퓨터가 동시에 메세지를 전송할 가능성을 사전에 차단한다. 보안시스템에서의 token 크레딧 카드 크기의 작은 장치를 말한다. 사용자가 처음에 암호를 입력하면, 카드는 네트워크에 접속할 수 있는 ID를 수시로 변경해가며 표시해준다. --> 공유 자원 접근에 대한 동기화를 보장하기 위해 사용되는 추상적인 개념이다. --> token 을 가진 사람이라면 누구나 특정 자원에 배타적 접근이 허용되고 (선.. 2021. 11. 26.

티스토리툴바