-
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 를 많이 사용하고 있..
-
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 영역에 넣어야 하기때문에, 잘 ..
-
Javascript [Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기) 예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다. https://happy-hee8.tistory.com/3 그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데 새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다. 이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다. 개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다. 이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고, id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다. Javascript 코드 // 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabIte..
-
문제 해결 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에서 해당 프로젝트 레파지토리를 생성만 해두고 연결을 해두지 않았었다. ^^; 그..
-
문제 해결 네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결 (개발환경 : React / Javascript / Next.js) 게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다. 근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다. 어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다. 허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람? 가끔 그러니 상관 없지 않나?라고 순간 생각했지만... 사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에, 그리고 또 이런 상황이 다시 발생 할 수 있으니까 원인을 알아내서 너무너무 해결하고 싶었다! 개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 대체 뭐가 문제일까... .. -
기타 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] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
-
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..
-
Javascript [Javascript] 아코디언 메뉴 만들기 요즘은 참 편리한 시대가 되었다. 다양한 플러그인들은 더 편리한 개발환경을 제공하지만 포트폴리오를 만들며 스스로의 실력을 가늠하고 싶은 내 입장으로서는 직접 코드를 짜서 아코디언 메뉴를 만들어보고 싶었다. (일단 너무 오랜만에 사용해보는 Javascript... 그동안 사용하지 않아 굳었던 머리를 풀고싶기도 했다. 😇) 그래서 이래저래 구글링을 해보고 만든 나의 아코디언 메뉴!(두둥) 사실 간단한 기능이지만 그냥 처음 아무것도 주어진게 없는 코드를 바라봤을 땐 참 막막했던 것 같다. 코드 한줄 한줄을 주석으로 해석해보았다. 작업을 하다보니... 예전에 작성했던 코드보다 더 간결한 코드를 찾아서 수정했다. 😇 (아래는 예전에 작성해봤던 코드) 더보기 Javascript 코드 (예전 코드) // 1. 아코디..
-
개발일상 [SPAVEL] 날짜 선택 플러그인은 vanillajs-datepicker 로 결정했다 🗓️ 예약 부분의 날짜를 선택할 datepicker 플러그인은 어떤걸 써볼까 하고 검색하다가 발견한 플러그인 사이트 자체에 설명이 잘 되어있어서 놀랐다. 이런저런 플러그인들 중에 내가 이 플러그인을 선택한 이유는 1. 바닐라JS 로 되어있음 2. 날짜를 선택하면 캘린더가 닫히는 옵션이 있음 3. 원하는 날짜의 이전 날짜는 선택 불가능한 옵션이 있음 이 세가지이다. 이 외에도 좋은 옵션들이 많아서 나중에 다른 부분에서 사용할 때에도 좋을 것 같다!😎 사용 방법도 쉬웠고, 특히나 데모 사이트가 옵션들을 적용해가면서 시각적으로 볼 수 있어서 이 부분이 옵션을 설정 할 때 도움이 많이 되었던 것 같다. 좋은 플러그인을 알아둔 김에 잊지 않도록 개발일기에 기록해본다. 👍 vanillajs-datepicker 사이트 주..
-
문제 해결 body 태그 안, 위쪽에 공백이 생기는 문제 해결 () 작업을 하는데 갑자기 문제가 생겼다. 오잉? 이게 뭐지? 상단에 알 수 없는 여백이 생긴 것이다. 개발자 도구로 확인해보니, 내가 작성하지 않은 알 수 없는 텍스트가 들어있었다. (나같은 경우는 "" 라는 텍스트가 들어있었다.) 작업중인 파일만 계속 살펴보다가 문득 든 생각... 아! 혹시나 저번에 해결했던 것처럼 인코딩 문제일 수도 있지 않을까? 싶어서 그쪽을 살펴보니 UTF-8 이 아닌 UTF-8 with BOM 으로 되어있었다. 그렇다. 이 문제는 인코딩과 관련이 있었다. 해결 방법 해결 방법은 간단하다. 인코딩을 바꿔주면 되는데 (VSCode의 경우) 우측 오른쪽에 있는 인코딩 부분을 클릭하고 뜨는 창에서 'Reopen width Encoding' 을 클릭, UTF-8 을 선택해주면 .. -
Javascript [Javascript] 메뉴 클릭시 네비게이션 높이만큼 띄우고 섹션으로 이동하기 네비게이션 메뉴를 눌렀을 때, 원하는 섹션으로 단순하게 이동하는 것은 간단하다. a 태그의 link 에 해당 섹션의 id 값을 넣는 것이다. 하지만 이렇게만 해주면 네비게이션을 fixed로 위치시켜준 경우 해당 섹션으로 갔을 때 네비게이션 높이만큼 섹션이 가려진다는 단점이 있다. 그 단점을 해결하기 위해 Javascript 를 이용하여 코드를 짜보았다. Javascript 코드 // 1. 네비게이션 메뉴들을 querySelectorAll을 통해 변수에 담는다. const gnbItems = document.querySelectorAll(".gnb__item"); // 2. 섹션들을 전부 querySelectorAll을 통해 변수에 담는다. const sections = document.querySelec..
-
강의 간단 정리(추후 복습하면서 수정) [Section04-02] graphql-mutation (& 에러를 해결하는 방법) graphql 요청방식 const [실행함수] = useMutation() 실행함수() const [실행함수] = useMutation(세팅해놓은 API) 실행함수() import { useMutation, gql } from "@apollo/client"; // 세팅 const 나의그래프큐엘세팅 = gql` mutation { createBoard(writer: "작성자", title: "제목입니다.", contents: "내용입니다.") { _id } } `; export default function GraphqlMutationPage() { // useMutation 를 실행시키고 싶은 함수를 [] 안에 넣는다. // useMutation 초기값으로 세팅을 넣는다. const [나의함수] = us..
-
문제 해결 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..
-
CSS [CSS] CSS 방법론 - BEM 방식 먼 옛날 퍼블리싱 과외를 받던 시절... 과외 선생님께서 BEM 방식을 추천해 주셔서 그냥 뭐가 뭔지 모르는 상태로 알려주시는대로 썼던 기억이 있다. 최근 다시 포트폴리오를 만들면서 BEM 을 어떤식으로 써야 좋을지 헷갈려서 또, BEM 방식으로 코드를 짜볼 때에도 감이 잘 안 올때가 있어서 내 스스로가 헷갈리지 않기위해 정리를 해보았다! BEM 이란? BEM이란 CSS 방법론 중 하나로, Blcok, Element, Modifier 의 약자이다. Block (블럭) 블럭은 그 자체로 의미가 있는 독립적인 부분이다. ( 예시 : header, container, menu, checkbox, input ) 블럭은 블럭을 감쌀 수 있다. 예를들어 header 라는 블럭 안에 logo 라는 블럭이 들어갈 수 ..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (연습문제 - 제비뽑기 용지) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(a, b) { // 종이는 1cm 정사각형으로 만들어야 함. // 가로 a, 세로 b // 가위질 몇번 해야하는지 계산 // 가로 가위질 횟수 const row = a - 1; // 세로 가위질 횟수 const col = (b - 1) * a; return row + col; } solution(100, 100); //999 solution(20, 50); //999
-
일상 '개인적인' 일본 컵라멘 종류별 후기 요즘들어... 계속 라멘이 먹고싶어졌다. 그래서 일본 컵라멘 자체가 맛이 괜찮은 편이라 아예 컵라멘을 몇개 사놓기로 했다! 일본 직구 짱~~~ 요즘은 배송비도 저렴함!!! (근데 이제 물품 가격이 비싼) 여튼 원래 사던것만 사다가 이번에 다른것들도 먹어보고 싶어서 이것저것 사봤는데 와... 이것저것 사보길 잘했다. 그래서 내 입맛 후기를 남겨보려고 한다... 내가 샀던 곳 가격도 같이... 왜냐면 다음에 주문 할 때 참고하려고! 세븐일레븐 프리미엄 - 스미레 삿포로 농후미소 맛 : ⭐️⭐️⭐️⭐️ (4.5점) 직구 가격 : 5,980원 너무 맛있었다!!! 근데 조금 짠 편임!! 물을 정량보다 더 부어서 먹으면 좋을듯. 재구매 의사 매우 있음! 컵라멘 먹는법 1. 뚜껑을 반만 연다. 2. 건더기를 넣는다... -
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"] { ..
-
공식문서 간단정리 [Swift] 배열 (Arrays) 배열은 순서대로 같은 타입의 값을 저장한다. 같은 값이 배열에 다른 순서로 존재 할 수 있다. 배열 타입 구문 swift 배열은 Array 형식으로 작성되며, 여기서 Element란 배열이 저장할 수 있는 값의 유형이다. [Element] 로 축약된 형태로 작성할 수 있으며, 둘 모두 기능적으로는 동일하지만 축약된 형태가 더 선호된다. var somInts: Array var somInts: [Int] 빈 배열 생성 초기화 구문을 사용하여 타입을 포함한 빈 배열을 생성할 수 있다. var someInts: [Int] = [] somInts.count // 0 someInts 변수의 타입은 초기화 타입을 통해 [Int] 로 추론된다. var someInts: [Int] = [] someInts.append..
-
Javascript [Javascript] Map 객체와 map 메서드(반복문)의 차이 공부를 하다가 헷갈리는 부분이 생겼다. 분명 내가 알던 map 은 반복문이었는데?? map을 반복할 때 for...each를 사용한다고? 으잉? map 자체가 반복문 아니였나? 뭐지? map을 사용하는 방법이 두개인 건가? 그리고 검색에 검색을 거쳐... 이 두가지는 다른 것이란걸 알게되었다. Map 객체와 map 메서드 Javascript 에는 Map 객체와 map 메서드, 이렇게 두가지가 있다. 이 둘은 서로 다른 목적과 맥락에서 사용된다. 아래에서 간단하게만 설명해 보겠다. 1. Map 객체 Map 객체는 Javascript 의 표준 내장 객체이다. 데이터를 저장하고 관리하며 키-값 쌍을 추가, 삭제, 업데이트 및 순환하는 등의 작업을 수행할 수 있다. 예시 코드 // 맵을 만든다. const me..
-
간단공부 ASP - Set 으로 작성된 코드 해석 코드 해석하기 Set GDB = DB_Open('Happy') Set : VBScript에서 변수에 개체 참조를 할당할 때 사용, 뒤에 변수 이름을 지정한다. Set : 데이터베이스 연결 객체를 GDB 변수에 할당한다. GDB : 데이터베이스 연결 객체를 저장하는데 사용되는 변수 이름 DP_Open("Happy") : 함수 호출. DP_Open라는 함수를 호출하고 "Happy" 를 인수로 전달한다. 즉 이 코드는 1. Set 을 이용해 GDB 라는 이름의 변수에 할당한다. 2. DP_Open 함수를 호출한다. 2. 'Happy' 라는 데이터베이스에 대한 연결을 설정한다. 3. 연결 객체를 변수 GDB에 저장한다.
-
강의 간단 정리(추후 복습하면서 수정) [Section05-05] dynamic routing board mutation, try catch문을 사용한 에러 잡기 게시글 등록 후 해당 게시글 페이지로 이동하기 글 작성시 API 에서 게시글의 number를 받아오기 때문에, 이 number를 사용해서 페이지 이동하도록 작업한다. router.push() 를 사용하고 그 안에 `이동할 페이지 주소 / ${이동할 번호} `를 넘겨준다. 예시: router.push(`/test/${result.data.createBoard.number}`) 그런데 외부에 요청하는 로직들은 문제가 생길이 어떨지 확신을 할 수가 없다. (백엔드 쪽에서 문제가 있을 경우 등) 이런 경우를 대비하기 위해서 항상 시도를 한다. (try catch문 사용) try에 있는 내용을 시도하다가 실패하면, 다음에 있는 모든 줄들을 모두 무시하고 catch에 있는 내용이 실행된다. try { 성공일 경우 ..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-03]number-string (typeof - 계산기가 이상해) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(num1, num2) { return typeof num1 + " " + typeof num2; } solution("9", 10); // string number solution(19, 1); // number number solution("2", "14"); // string string
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (연습문제 - 분기별 일정) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(month) { // 분기는 4분기 (123, 456, 789, 101112) // 각 분기마다 3개의 달이 존재하므로 // 3으로 나누고 올림 처리 return Math.ceil(month / 3); } solution(4); //2 solution(12); //4
-
강의 간단 정리(추후 복습하면서 수정) [Section03] 데이터 통신 실습 restAPI postman 사용 KOREAN JSON 부분의 ROUTES 부분의 Endpoint 부분 보면 /aaa 이런식으로 되어있는데 저 부분은 koreanjson.com/aaa 이렇게 해야 한다. 주소에 /:id 이런식으로 : 가 들어있으면 뒤에 가변성이 있는 숫자 등등이 들어온다. restful 하다 : Endpoint 를 통일 시켰는가? (Endpoint 라는 부분은 백엔드 개발자 마음대로 지을 수 있음.) graphqQL 1-1 . ! 는 무조건 보내줘야하는 필수값 1-2 . **[!]**는 있다면 무조건 보내줘야하는 조건필수값. API 요청 연습 등록 # mutaion 또는 query 할거라고 선언 mutation { # 상품 등록하는 API요청 createProduct ( seller.. -
문제 해결 npm install -g serve 시 permission denied 에러 해결 강의를 듣다가 serve 를 설치하는 부분에서 에러가 났다. 항상 보자마자 긴장부터 되는 빨간색 글자들이지만... 침착하 게 구글링을 해보려다가 익숙한(?) 단어에 내가 해결 할 수 있을 것 같은데? 하고 에러에 대한 설명을 쭈루룩 보았다. (경로) % npm install -g serve npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/serve npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve' npm ERR! [Error: EACCES: permission den.. -
개발일상 [PORTFOLIO] 풀페이지 사이트의 모바일 사이즈를 고려하자(교훈) 작업을 하다보니 갑자기 문득 생각이 났다. 생각해보니 이건 포트폴리오 사이트라 정보가 많고, 모바일 사이즈에서 보면 정보가 너무 많아서 한 섹션 안에 내용이 넘칠 것 같은데 어떻게 해야하지...? 이건 풀 페이지 사이트로 만들기로 했는데...? 어라? 그렇다... PC 사이즈 화면만 생각하고 있었는데, 그걸 모바일로 작업했을 때의 일을 생각하지 않은 것이다. 그래서 일단 해결책으로 생각해 둔 바로는 모바일 사이즈에선 풀페이지가 아닌 기본 스크롤 방식이 되도록 작업을 해보려 한다. 어떻게 할지는... 반응형 작업을 하면서 고민해보자! 덕분에 앞으로 반응형 작업을 할 때는 이런것들도 생각을 해봐야 겠다는 교훈(?)을 얻었다. 🥲 모바일은 풀페이지가 안 되도록 해서 해결... 결국 모바일 사이즈에서는 풀페이지..
-
개발일상 [SPAVEL] 모바일 사이즈는 작업 완료📱 오래 걸릴줄만 알았던 포트폴리오 작업.. 어찌저찌 한 덕에 모바일 사이즈 화면은 퍼블리싱을 끝냈다. 이제부터 태블릿 / PC 화면에 맞게 간격이랑 레이아웃 등등을 조절해주면 나의 작고 소중한(?) 포트폴리오 페이지가 드디어 완성되는 것...!(크으으으) 얼른 완성해서 이력서를 넣고 면접도 보고 취업을 하고싶다!!💪 쫌만 더 힘내자! 아자자~~!!! - 끝 -
-
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 문을 통해 섹션들을 ..
-
개발일상 [SPAVEL] 어제 퍼블리싱을 하며 느꼈던 점 💭 어제 밤 기획과 대충 레이아웃을 잡은 후, 퍼블리싱을 시작했다. 어라라... 근데 왜인지 퍼블리싱 속도가 너무 느리게 진행된다는 느낌이 들기 시작했다. 이상하네? 이전에 했었던 포트폴리오는 빠르게 작업을 했었는데? 그러고보니 이전 포트폴리오를 2개를 만들었었는데, 하나는 반응형 사이트이고 다른 하나는 모바일 사이트였다. 그런데 모바일 사이트가 내용이 더 많음에도 불구하고 반응형 사이트보다 훨씬 작업 기간이 적게 들었다. 이게 왜일까 고민을 해봤는데 (은근히 고민이 되었던 부분이라 자기 전에도 계속 생각을 하다가 잠들었다...🙃) 모바일을 작업하면서 동시에 PC를 작업해서가 아닐까 라는 생각이 들었다. 예를들어 헤더와 메인 비주얼 부분을 작업중인데 모바일 헤더를 만들고 바로 PC 사이즈 미디어쿼리를 잡고,..
