-
문제 해결 네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결 (개발환경 : React / Javascript / Next.js) 게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다. 근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다. 어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다. 허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람? 가끔 그러니 상관 없지 않나?라고 순간 생각했지만... 사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에, 그리고 또 이런 상황이 다시 발생 할 수 있으니까 원인을 알아내서 너무너무 해결하고 싶었다! 개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 대체 뭐가 문제일까... .. -
Javascript [Javascript] 탭메뉴 만들기 이번엔 탭메뉴 만들기! 이번건 검색했을 때 여러가지 방법들이 많이 나와서 고민했다. 이런 저런 페이지들의 코드들을 보면서 어떤게 좋은 코드일까... 어떤게 나은 코드일까... 해보다가 결국 내 마음대로 섞어서 짜보았다(?) 🥸 내 코드는 forEach와 index를 사용한 코드이다. Javascript 코드 // 1. 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabItem = document.querySelectorAll(".tab__item"); const tabContent = document.querySelectorAll(".tab__content"); // 2. 탭 버튼들을 forEach 문을 통해 한번씩 순회한다. // 이때 index도 같이..
-
일상 퍼블리셔 면접을 보며 내가 받았던 질문 리스트 요즘 계속 면접을 보러 다니고 있는데, 그동안 받아왔던 질문을 모아놓으면 좋을 것 같아서 정리해 본다. 질문에 대한 답은 내 개인 노션에 정리해 놓고 보기로... 웹 관련 질문 웹표준이란 뭔지 설명해 주세요. 웹접근성이 뭔지 설명해 주세요. 웹접근성을 고려한 웹 사이트를 만드는 방법은 무엇인가요? 웹접근성 확인은 어떻게 했나요? 크로스 브라우징을 확인하는지와, 확인 시 어떤 브라우징까지 확인하는지 알려주세요. 크로스 브라우징 관련 이슈 중 어려웠던 부분이 있나요? 반응형 웹이란 뭔지 설명해 주세요. 반응형 웹 작업시 어느 단위로 끊어서 작업하나요? HTML 관련 질문 meta 태그가 뭔지 알고있나요? 시멘틱태그는 무엇이며 왜 사용하는지 설명해 주세요. CSS 관련 질문 요즘 flex 를 많이 사용하고 있..
-
문제 해결 body 태그 안, 위쪽에 공백이 생기는 문제 해결 () 작업을 하는데 갑자기 문제가 생겼다. 오잉? 이게 뭐지? 상단에 알 수 없는 여백이 생긴 것이다. 개발자 도구로 확인해보니, 내가 작성하지 않은 알 수 없는 텍스트가 들어있었다. (나같은 경우는 "" 라는 텍스트가 들어있었다.) 작업중인 파일만 계속 살펴보다가 문득 든 생각... 아! 혹시나 저번에 해결했던 것처럼 인코딩 문제일 수도 있지 않을까? 싶어서 그쪽을 살펴보니 UTF-8 이 아닌 UTF-8 with BOM 으로 되어있었다. 그렇다. 이 문제는 인코딩과 관련이 있었다. 해결 방법 해결 방법은 간단하다. 인코딩을 바꿔주면 되는데 (VSCode의 경우) 우측 오른쪽에 있는 인코딩 부분을 클릭하고 뜨는 창에서 'Reopen width Encoding' 을 클릭, UTF-8 을 선택해주면 .. -
Javascript [Javascript] alert창(경고창) 텍스트 줄바꿈 하기 alert창(경고창) 에서 텍스트 줄바꿈 하는 방법 alert창에서도 줄바꿈이 가능하다! 최근까진 잘 모르고 가능하지 않을까~ 라고 어렴풋이 생각하고 있었는데 마침 딱 사용할 일이 와서 알아보았다. 줄바꿈을 하는 방법은 두가지 방법이 있다. \n 을 사용한 줄바꿈 줄바꿈을 할 텍스트 뒤에 \n 를 넣어주면 줄바꿈이 된다. 코드 alert('안녕하세요?\n만나서 반갑습니다.'); 출력물 템플릿 리터럴 ` ` 을 사용한 줄바꿈 템플릿 리터럴 ` ` 을 사용하면 줄바꿈을 한 상태로 입력을 하면 alert 창에서도 줄바꿈이 된다. 주의할 점은 ` 바로 뒤나 앞에서 줄바꿈을 하거나, 가독성을 위해서 탭키를 사용하면 그것 역시 적용이 되므로 주의해야한다! 코드 alert(`안녕하세요? 만나서 반갑습니다.`); 출력.. -
문제 해결 Visual Studio Code 한글 깨짐 문제 해결 (& Live Server) 다른분이 작업하셨던 파일을 받아서 작업을 하려고 vscode의 플러그인인 live server로 index.html 파일을 실행했다. 그런데 페이지가 열리자마자 아주 당황했다. 한글이 전부 깨져서 나온 것이다😂 이게 왜 그럴까? 정말 멘붕이 많이 왔었다. 내가 뭘 잘못 건드렸나? 그렇게 우왕좌왕 하다가 발견한 것이 바로... 이 코드이다. 하지만 왜일까? 이 코드만 적혀있다고 해서 문제가 생긴건 아니었다. 문제가 된 부분들은 아래와 같다. 이 부분들이 문제였다. 궁금해져서 확인을 해보니 Live Server로 실행했을 때 뿐만 아니라 인코딩 방식을 html 파일과 vscode에서 다르게 설정했을 경우, 그냥 index.html 파일을 열었을 때도 한글이 깨지는 현상을 발견할 수 있었다. html 의 me.. -
Javascript [Javascript] 내 사이트에 구글 지도 사용하기 (Google map API) 🗺️ 일단 구글 지도를 사용하려면 구글 클라우드에서 발급하는 API를 발급받아야 한다. API 발급 방법 1. 아래 링크(구글 지도 플랫폼) 에 접속한 뒤, 시작하기 버튼을 클릭한다. https://developers.google.com/maps/gmp-get-started?hl=ko 2. 이후 나오는 화면에서 가입하여 API 키 받기 버튼을 클릭한다. 3. 결제 사용 설정이 안 되어있다면, 결제 계정 만들기 버튼을 눌러서 사용 설정을 해준다. (결제 계정 만들기 부분은 개인정보와 관련된 부분이므로 화면은 생략한다.) 4. 결제 계정 사용 설정을 한 뒤, 이런 창이 뜨면 선택들을 해준 뒤 제출 버튼을 눌러준다. 5. 그럼 이제 API 키 발급은 완료되었다. 이 키를 script 영역에 넣어야 하기때문에, 잘 ..
-
문제 해결 fatal: No configured push destination. 에러 해결 fatal: No configured push destination. 에러 해결 프로젝트를 생성 후 처음으로 git push 를 했는데 해당 에러가 발생했다. fatal: No configured push destination. Either specify the URL from the command-line or configure a remote repository using git remote add and then push using the remote name git push 어떤 에러인가 했더니... 현재 위치의 폴더가 github의 원격 레파지토리와 연결이 되어있지 않다는 듯 하다. 그리고나서 생각해보니 github에서 해당 프로젝트 레파지토리를 생성만 해두고 연결을 해두지 않았었다. ^^; 그..
-
Javascript [Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
-
기타 VSCODE 에서 Remote - SSH 사용하여 SSH 연결하기 Remote - SSH 설치 및 사용 방법 vscode 에서 SSH 연결을 할 일이 생겼다. Remote-SSH 를 설치하면 편리하다길래 바로 플러그인을 설치했다. 설치한 후 F1을 눌러 Remote-SSH 를 검색하면 나오는 것들 중 Open SSH Configuration File 을 클릭한다. 클릭하면 자동으로 설정 파일 경로가 있는 곳이 나오는데 그걸 클릭한다. 그리고 나오는 설정 파일에서 설정을 작성해주면 된다. Host : 내가 알아볼 수 있는 이름으로 지으면 된다. 여러개를 사용할 시 구분하기 좋음! HostName : 나같은 경우는 IP 주소를 사용하여 접속해야 했다. 그래서 IP 주소를 넣었다. User : 유저 ID Port : 포트 번호 ... 이렇게 작성하고 나니 생기는 궁금한 점... -
Javascript [Javascript] .padStart()를 사용한 숫자 앞에 0 넣기 String.prototype.padStart() 란 .padStart() 메서드는문자열이 지정된 길이에 도달할 때까지 이 문자열을 다른 문자열로 채운다. 다른 문자열은 문자열의 시작 부분부터 적용된다. const str1 = '31'; // 문자열이 4자리 길이에 도달할 때까지 앞을 0으로 채운다. console.log(str1.padStart(4, '0')); // '0003' console.log(str1.padStart(4, '영')); // '영영영3' console.log(str1.padStart(2, '1')); // '31' const str2 = '안녕하세요'; // 채워질 문자열(padString)이 너무 길면 뒷부분이 잘린다. console.log(str2.padStart(8, '반갑..
-
CSS [CSS] 텍스트에 그라데이션 효과 주기 작업중인 사이트가 뭔가 밋밋한 것 같아 텍스트 부분을 수정하기로 했다. 고민하다가 텍스트에 그라데이션을 주는 방향으로 결정! CSS 코드 background: linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -webkit-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -moz-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); background: -o-linear-gradient( 307deg, #ff5252 0%, #7700ff 100% ); -webkit-background-clip: text; background-cli..
-
개발일상 [SPAVEL] 날짜 선택 플러그인은 vanillajs-datepicker 로 결정했다 🗓️ 예약 부분의 날짜를 선택할 datepicker 플러그인은 어떤걸 써볼까 하고 검색하다가 발견한 플러그인 사이트 자체에 설명이 잘 되어있어서 놀랐다. 이런저런 플러그인들 중에 내가 이 플러그인을 선택한 이유는 1. 바닐라JS 로 되어있음 2. 날짜를 선택하면 캘린더가 닫히는 옵션이 있음 3. 원하는 날짜의 이전 날짜는 선택 불가능한 옵션이 있음 이 세가지이다. 이 외에도 좋은 옵션들이 많아서 나중에 다른 부분에서 사용할 때에도 좋을 것 같다!😎 사용 방법도 쉬웠고, 특히나 데모 사이트가 옵션들을 적용해가면서 시각적으로 볼 수 있어서 이 부분이 옵션을 설정 할 때 도움이 많이 되었던 것 같다. 좋은 플러그인을 알아둔 김에 잊지 않도록 개발일기에 기록해본다. 👍 vanillajs-datepicker 사이트 주..
-
Javascript [Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기 네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다. a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다. 하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우 해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다. 그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다. Javascript 코드 // 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelec..
-
CSS [CSS] CSS 방법론 - BEM 방식 먼 옛날 퍼블리싱 과외를 받던 시절... 과외 선생님께서 BEM 방식을 추천해 주셔서 그냥 뭐가 뭔지 모르는 상태로 알려주시는대로 썼던 기억이 있다. 최근 다시 포트폴리오를 만들면서 BEM 을 어떤식으로 써야 좋을지 헷갈려서 또, BEM 방식으로 코드를 짜볼 때에도 감이 잘 안 올때가 있어서 내 스스로가 헷갈리지 않기위해 정리를 해보았다! BEM 이란? BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다. Block (블럭) 블럭은 그 자체로 의미가 있는 독립적인 부분이다. ( 예시 : header, container, menu, checkbox, input ) 블럭은 블럭을 감쌀 수 있다. 예를들어 header 라는 블럭 안에 logo 라는 블럭이 들어갈 수 ..
-
문제 해결 ReferenceError: alert is not defined 에러 해결 (& Nothing was returned from render) React 와 typescript 환경에서 작업을 하던 중에 갑자기 문제가 생겼다. 게시글의 id 값을 가져와서 그 값이 string 값인지 확인한 후, 상세 페이지를 보여주는 화면이었는데 나타난 에러문은 바로 이것... Referenceerror: alert is not defined 그래서 어라? 이게 왜 발생했지? 하고 바로 저 에러를 복사해서 검색을 해보았다. Node.js 와 관련되어 있다는 내용들이 대부분... 근데 왜인지 저것과 관련이 있는 것 같지 않았다. 그래서 혹시나하여 아! alert 부분이 문제라면 저 alert 부분을 다른 걸로 바꿔볼까? 라는 생각에 console.log 로 바꿔보았다. 그랬더니... 이번엔 다른 에러가 나타났다. Nothing was returned from r..
-
Javascript [Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기) 예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다. https://happy-hee8.tistory.com/3 그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데 새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다. 이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다. 개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다. 이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고, id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다. Javascript 코드 // 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabIte..
-
Javascript [Javascript] 아코디언 메뉴 만들기 요즘은 참 편리한 시대가 되었다. 다양한 플러그인들은 더 편리한 개발환경을 제공하지만 포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는 직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다. (일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇) 그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥) 사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다. 코드 한줄 한줄을 주석으로 해석해보았다. 작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇 (아래는 예전에 작성해봤던 코드) 더보기 Javascript 코드 (예전 코드) // 1. 아코디..
-
Javascript [Javascript] Map 객체와 map 메서드(반복문)의 차이 공부를 하다가 헷갈리는 부분이 생겼다. 분명 내가 알던 map 은 반복문이었는데?? map을 반복할 때 for...each를 사용한다고? 으잉? map 자체가 반복문 아니였나? 뭐지? map을 사용하는 방법이 두개인 건가? 그리고 검색에 검색을 거쳐... 이 두가지는 다른 것이란걸 알게되었다. Map 객체와 map 메서드 Javascript 에는 Map 객체와 map 메서드, 이렇게 두가지가 있다. 이 둘은 서로 다른 목적과 맥락에서 사용된다. 아래에서 간단하게만 설명해 보겠다. 1. Map 객체 Map 객체는 Javascript 의 표준 내장 객체이다. 데이터를 저장하고 관리하며 키-값 쌍을 추가, 삭제, 업데이트 및 순환하는 등의 작업을 수행할 수 있다. 예시 코드 // 맵을 만든다. const me..
-
Javascript [Javascript] .substring() .split() 메서드는 String(문자열) 객체를 시작 index 부터 종료 index 전 까지 문자열의 부분 문자열을 반환한다. 형태 .substring(indexStart[, indexEnd]) .substring(뱐환문자열의 시작 인덱스[, 옵션. 반환문자열의 마지막 인덱스 (포함하지 않음.)]) 반환값은 기존문자열의 부분 문자열을 반환한다. 예시 indexStart와 indexEnd 값을 지정하여 문자열 반환하기 const str = '행복한 나날들의 연속'; // 2번째 index 부터 6번째 이전 index (5) 까지 반환 console.log(str.substring(2,6)); // '한 나날' indexStart만 지정하여 문자열 반환하기 const str = '행복한 나날들의 연속..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-04] conditional-statement (else if절 - 원두는 착한 어른이) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(age) { if (age
-
일상 '개인적인' 일본 컵라멘 종류별 후기 요즘들어... 계속 라멘이 먹고싶어졌다. 그래서 일본 컵라멘 자체가 맛이 괜찮은 편이라 아예 컵라멘을 몇개 사놓기로 했다! 일본 직구 짱~~~ 요즘은 배송비도 저렴함!!! (근데 이제 물품 가격이 비싼) 여튼 원래 사던것만 사다가 이번에 다른것들도 먹어보고 싶어서 이것저것 사봤는데 와... 이것저것 사보길 잘했다. 그래서 내 입맛 후기를 남겨보려고 한다... 내가 샀던 곳 가격도 같이... 왜냐면 다음에 주문 할 때 참고하려고! 세븐일레븐 프리미엄 - 스미레 삿포로 농후미소 맛 : ⭐️⭐️⭐️⭐️ (4.5점) 직구 가격 : 5,980원 너무 맛있었다!!! 근데 조금 짠 편임!! 물을 정량보다 더 부어서 먹으면 좋을듯. 재구매 의사 매우 있음! 컵라멘 먹는법 1. 뚜껑을 반만 연다. 2. 건더기를 넣는다... -
개발일상 [PORTFOLIO] 풀페이지 사이트의 모바일 사이즈를 고려하자(교훈) 작업을 하다보니 갑자기 문득 생각이 났다. 생각해보니 이건 포트폴리오 사이트라 정보가 많고, 모바일 사이즈에서 보면 정보가 너무 많아서 한 섹션 안에 내용이 넘칠 것 같은데 어떻게 해야하지...? 이건 풀 페이지 사이트로 만들기로 했는데...? 어라? 그렇다... PC 사이즈 화면만 생각하고 있었는데, 그걸 모바일로 작업했을 때의 일을 생각하지 않은 것이다. 그래서 일단 해결책으로 생각해 둔 바로는 모바일 사이즈에선 풀페이지가 아닌 기본 스크롤 방식이 되도록 작업을 해보려 한다. 어떻게 할지는... 반응형 작업을 하면서 고민해보자! 덕분에 앞으로 반응형 작업을 할 때는 이런것들도 생각을 해봐야 겠다는 교훈(?)을 얻었다. 🥲 모바일은 풀페이지가 안 되도록 해서 해결... 결국 모바일 사이즈에서는 풀페이지..
-
CSS [CSS] 사파리에서 기본 input 스타일 제거하기 포트폴리오 작업을 대강 끝내고 크로스 브라우징 확인 중에 모바일 사파리에서 input 스타일이 다른 부분을 발견했다. 데스크탑 사파리로 봤을 땐 분명 괜찮았는데...!! 모바일로 보니까 input 에 border-radius가 들어가 있었다. 분명 input에 border-radius: 0 을 줬는데도.... 그냥은 먹히지가 않았다(😂) 그리고 알아낸 방법! 이렇게 하니까 다행히 잘 먹었다. input[type="text"], input[type="password"], input[type="submit"], input[type="search"], input[type="tel"], input[type="email"], html input[type="button"], input[type="reset"] { ..
-
Javascript [Javascript] Scroll Spy (스크롤 스파이) 적용하기 예전에 작업을 하면서 스크롤 스파이는 플러그인을 사용했었는데 그때 생각했던게 나중에는 직접 구현을 해봐야지! 라고 생각했어서 이번에는 직접 구현을 해보았다😎 Javascript 코드 // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", () => { // 1. 섹션들을 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelectorAll("section"); // 2. Gnb 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 3. forEach 문을 통해 섹션들을 ..
