SSR, CSR, SEO 개념 정리 SPA ( Single Page Application )= 하나의 페이지로 이루어진 홈페이지= CSR(react)에 적합하지만 정적인 페이지(Java, php) 하나로 구성되면 그것도 SPA라고 부른다.<p data-k.. 2023.07.28 임시저장 칸에 쌓여있는 내 일기들... 그리고 벌써 7월말... 저한테 왜그러세요 ... 코딩하려고 마음 먹고 앉았을 땐 분명 왼쪽이었는데 끝은 눈물 콧물만이 남는... 내가 이거랑 다를게 뭔데... 내가 이거랑 다를게 뭐냐고!!!!!!!!!! 몇시간째 에러 쳐내느라 멘탈이 아작 나버린 ... 그래도 어쩌겠어 해야지 ... 배고프다 ... 일어나면 어차피 안고프겠지만 ... [ MongoDB ] MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string. mongo DB 사용법을 배우고 약 3주 뒤... 다시 써보며 무언가를 만드려 코드를 작성하고 서버를 켰더니 MongooseError: The `uri` parameter to `openUri()` must be a string, got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.라는 에러가 뜨기 시작했다 😱 이유는 생각보다 간단했는데... .env파일에 DB url를 변수로 선언해 놓고 넣어놓고 사용하는데 dotenv를 import 안 했던 것 ㅠ.ㅠ 해결하는 순서는 1) 터미널에서 npm i dotenv를 입력해 dotenv 설치해 준다. 2) .. [ react ] js파일에서 element height, width 변경하기 오늘 마주한 문제는 이미지 크기만큼 크기를 가져와 평점과 더 보기 버튼을 담은 element 크기에 똑같이 설정하는 것이었다. ( 오직 평점과 더보기 버튼을 포스터 hover시 포스터 가운데에 두기 위함... ) vanilla js에서만 살다가 react를 사용하니 css도 맘대로 할 수가 없었는데... js에선 element.clientWidth나 element.offsetWidth로 쉽게 가져와 style을 변경할 수 있었는데 여기선 useRef를 사용해야한다. useRef를 통해서 img의 현재 높이와 넓이를 가져오고 그걸 setHeight, setWidth함수를 통해 heigth, width 변수에 집어넣으며 movie-hidden이라는 클래스를 가지는 div의 style에 이 변숫값으로 높이와.. [ JavaScript ] TypeError: [].map is not a function 해결하기 영화 정보를 가져와서 map함수를 이용해 뿌리기 위해 아래와 같이 코드를 짜고있었다. 그런데 난데없이 TypeError라며 movieList.map is not a function이라는 에러가 발생했다. const readMovieList = async ()=>{ const json = await( await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8&sort_by=year`) ).json(); setMovieList(json); setLoading(false); } /////////////////// {movieList.map((movie)=>)} 이유가 뭘까 곰곰히 생각해보다가 movieList 데이터에 문제가 있어서 map이 제대.. [ CSS ] input[type="date"] 커스텀하기 + :valid 작동 안하는 문제해결 input[type="date"]의 기본 모양은 아래와 같은 문구와 캘린더 이모지로 이루어져 있다. 하지만 계정 생성 폼을 만들면서 년/월/일이 아닌 생년월일이라는 문구가 넣고 싶었고 캘린더 이모지도 다른 디자인으로 바꾸고 싶었다. 그러나 css는 역시 쉽지 않은 세계... 일반적으로 적용하는 css코드( placeholder 디자인 변경 )로는 적용이 안되었고 여러 가지 검색해 보고 강의 보면서 커스텀에 성공은 했다. 자주 쓰진 않아서 왠지 까먹을까 봐 정리해 둔다. 🥲 input( type="date",data-placeholder="생년월일" ) [ 아이콘 변경하기 ] input[type='date']{ // 캘린더 아이콘을 클릭해야만 달력이 보이는데 캘린더의 영역을 조절하기위함 position: .. Webpack 소개와 사용법 ( webpack.config.js 작성 ) Module 프로그램을 구성하는 구성요소와 관련된 데이터와 함수를 하나로 묶은 단위 전통 자바스크립트 개발 방식은 기능별 또는 페이지별로 js 파일을 분리하고 html에서 태그로 로드하는 방식이었다. 하지만 이 방식은 의존성이 있는 코드 사이에 순서를 보장하기 어렵고 ( import 하는 여러 파일간에 동일한 이름을 갖는 변수를 만들 수 없음 - 충돌 ) 일부 파일에 문제가 발생했을 때 전체 스크립트를 실행하지 못할 수 있다. 이러한 문제를 하기위해 나온 것이 모듈 단위의 개발이다. bundler 의존성 있는 모듈 코드를 하나 또는 여러 파일로 만들어주는 도구로 브라우저 환경에 잘 실행될 수 있도록 가공해 준다. 즉 웹을 구성하는 파일들을 하나의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만든다... dotenv를 사용해 환경변수를 .env파일로 관리하기 dotenv란? 자바스크립트에서 환경변수를 사용할 수 있도록 하는 npm 모듈로 유저가 .env를 통해 저장해 놓은 환경 변수들을 process.env에 로드한다. 사용하기 1. dotenv 패키지 설치 npm i dotenv 2. .evn파일 작성 키=값의 형식으로 작성되어야 한다. DB_URL="mongodb://~~" DB_USER=root 3. 패키지 불러오기 //ES module import dotenv from "dotenv"; dotenv.config(); //CommonJS require("dotenv").config(); [ 주의점 ] 1. dotenv 라이브러리는 가장 먼저 load 되어야 한다. (특히 .env에 DB와 관련된 환경변수들을 선언한 경우 DB파일보다 먼저 load 되어야.. [MongoDB] (Mac OS) MongoNetworkError: connect ECONNREFUSED, Buffering timed out after 10000ms... 어느 날 노트북 소리 출력이 이상해서 노트북을 재시동하고 만들던 웹에 다시 들어갔는데 갑자기 터미널에 Buffering timed out after 10000ms이라는 에러가 뜨면서 먹통이 되었다. DB랑 통신하면서 생긴 에러라 DB에 뭔 문제가 생겼나해서 터미널에 mongosh를 입력하니 아래와 같은 에러가 떴다. MongoNetworkError: connect ECONNREFUSED [ 주소 ] 아니 연결이 안된다구요?... 왜 되던 게 갑자기 안돼! 하며 해결방법을 찾아갔는데 컴퓨터를 재시동하면서 mongoDB가 꺼져버린 것... 노트북을 안 끄고 항상 잠자기 모드만 해놓기에 몰랐었다😂 터미널에 아래와 같은 명령어를 입력해 주면 DB가 다시 실행이 되면서 연결이 잘된다. brew services r.. 2023.04.10~04.16 0411 오랜만에 간 학교 오랜만에 먹은 부리또 오랜만에 먹은 한솥 그리고 항상 곱빼기를 먹어야하는 그... 분명 우리 솜이는 데려오기전만해도 말라말라깽이였는데 지금은 이런 꿀꿀이가 있을 수가 없다. 간식두 잘 안 먹고 맨날 쫓아다니는데 왜 하리보다 덩치가 3배인지 알 수가 없을 뿐... 그리고 깃헙을 잘못 만졌다가 이때까지 짠 코드를 냅다 날려버린 나 얼마나 절망스럽던지 ^^... 그냥 복습한다는 마음으로 파일이 담긴 폴더를 전부 날리고 다시 필요한거 install했다... 정말 아직까지도 깃헙 사용은 쉽지않다. 0412 이 날은 나와 같이 라섹을 하려던 친구가 수술하는 날이어서 못 건네준 생일 선물을 줄 겸사 수술 전에 만나가지구 밥을 먹었다. 양림동에 있는 마귀할멈이라는 베트남 음식점을 다녀왔구 날.. 2023.03.27~04.09 미루고 미루다 돌아온 일기 이게 일기가 맞는 걸까? 하지만 쓰고 싶은걸… 임시저장에 묵혀놨던 이야기 시작… 🤣 동생이 코로나에 걸렸는데 뭐 가족이 걸려도 안 걸리는 사람도 있고 사실 안 걸릴 줄 알고 아무렇지 않게 지냈는데 결국 일주일 지나서 확진되었다. 진짜 3-4일은 미친 듯이 아파서 고생했던 ㅠㅠ 약을 6시간에 한 번씩 먹으라 했는데 약 먹고 4시간만 지나도 열이 오르고 온몸이 아팠다. 알약도 잘 못 먹는데 아프니까 못 먹고 말고 가 문제가 아니었는지 그냥 다 삼켜졌다 ( 웃긴 게 6일 차쯤부턴 몸이 거의 안 아팠는데 이때부터 약이 잘 안 넘어감 ) 하루는 새벽에 등이 아파서 누워있지도 못하고 머리는 깨질 것 같아서 눈물만 났다. 정말 다시는 걸리고 싶지 않다 ๑꒪⌓꒪๑ 아 그리고 격리기간 동안에 .. [JavaScript] 비동기 호출 - callback, promise, async & await ( 내용 추가 예정 ) callback - 다른 함수의 실행이 끝난 뒤 실행되는 함수 ( 매개변수 값으로 들어가는 함수이기 때문 ) - 코드를 통해서 호출되는 게 아니라 등록만 해놓고 어떤 이벤트가 발생하거나 특정시점에 도달했을 때 시스템에서 호출하는 함수 js에서 사용하는 이유 - 이를 사용하면 비동기적 프로그래밍을 할 수 있기때문 - js는 싱글 스레드를 이용하기에 요청에 대한 답이 없으면 다음 작업으로 넘어갈 수 없다는 문제가 있는데 이를 해결하기 위해 사용 즉 blocking을 방지하여 싱글 스레드가 nonBlocking으로 동작하게 한다. 비동기 처리가 가능한 이유 - js는 이벤트 루프만 실행하지 않고 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기에 동시성을 보장하는 비동기 작업은 js 엔진을 구동.. 이전 1 2 3 4 5 6 ··· 8 다음
