-
문제 해결 네트워크 응답 데이터를 로드할 수 없음(status 400 / Network status cancelled) 에러 해결 (개발환경 : React / Javascript / Next.js) 게시판을 만들고 리스트의 제목 부분을 클릭했더니 상세페이지로 이동이 되지 않았다. 근데 계속 그런 건 아니고 이동이 되다가 안 되다가 하는? 현상이었다. 어쩔 땐 페이지로 이동이 안되고, 또 어쩔 땐 이동이 잘만 됐다. 허허 희한하네... 될 거면 되고 안 될거면 안 되지 됐다가 안 됐다가 하는 건 뭐람? 가끔 그러니 상관 없지 않나?라고 순간 생각했지만... 사용자 입장에서 생각해 봤을 땐 이런식으로 이동이 잘 안 되면 빡칠 수 있는 경우이기 때문에, 그리고 또 이런 상황이 다시 발생 할 수 있으니까 원인을 알아내서 너무너무 해결하고 싶었다! 개발자 도구를 열고, 네트워크탭을 살펴보니 이런 부분들이 확인됐다. 대체 뭐가 문제일까... .. -
문제 해결 body 태그 안, 위쪽에 공백이 생기는 문제 해결 () 작업을 하는데 갑자기 문제가 생겼다. 오잉? 이게 뭐지? 상단에 알 수 없는 여백이 생긴 것이다. 개발자 도구로 확인해보니, 내가 작성하지 않은 알 수 없는 텍스트가 들어있었다. (나같은 경우는 "" 라는 텍스트가 들어있었다.) 작업중인 파일만 계속 살펴보다가 문득 든 생각... 아! 혹시나 저번에 해결했던 것처럼 인코딩 문제일 수도 있지 않을까? 싶어서 그쪽을 살펴보니 UTF-8 이 아닌 UTF-8 with BOM 으로 되어있었다. 그렇다. 이 문제는 인코딩과 관련이 있었다. 해결 방법 해결 방법은 간단하다. 인코딩을 바꿔주면 되는데 (VSCode의 경우) 우측 오른쪽에 있는 인코딩 부분을 클릭하고 뜨는 창에서 'Reopen width Encoding' 을 클릭, UTF-8 을 선택해주면 .. -
문제 해결 Visual Studio Code 한글 깨짐 문제 해결 (& Live Server) 다른분이 작업하셨던 파일을 받아서 작업을 하려고 vscode의 플러그인인 live server로 index.html 파일을 실행했다. 그런데 페이지가 열리자마자 아주 당황했다. 한글이 전부 깨져서 나온 것이다😂 이게 왜 그럴까? 정말 멘붕이 많이 왔었다. 내가 뭘 잘못 건드렸나? 그렇게 우왕좌왕 하다가 발견한 것이 바로... 이 코드이다. 하지만 왜일까? 이 코드만 적혀있다고 해서 문제가 생긴건 아니었다. 문제가 된 부분들은 아래와 같다. 이 부분들이 문제였다. 궁금해져서 확인을 해보니 Live Server로 실행했을 때 뿐만 아니라 인코딩 방식을 html 파일과 vscode에서 다르게 설정했을 경우, 그냥 index.html 파일을 열었을 때도 한글이 깨지는 현상을 발견할 수 있었다. html 의 me.. -
일상 퍼블리셔 면접을 보며 내가 받았던 질문 리스트 요즘 계속 면접을 보러 다니고 있는데, 그동안 받아왔던 질문을 모아놓으면 좋을 것 같아서 정리해 본다. 질문에 대한 답은 내 개인 노션에 정리해 놓고 보기로... 웹 관련 질문 웹표준이란 뭔지 설명해 주세요. 웹접근성이 뭔지 설명해 주세요. 웹접근성을 고려한 웹 사이트를 만드는 방법은 무엇인가요? 웹접근성 확인은 어떻게 했나요? 크로스 브라우징을 확인하는지와, 확인 시 어떤 브라우징까지 확인하는지 알려주세요. 크로스 브라우징 관련 이슈 중 어려웠던 부분이 있나요? 반응형 웹이란 뭔지 설명해 주세요. 반응형 웹 작업시 어느 단위로 끊어서 작업하나요? HTML 관련 질문 meta 태그가 뭔지 알고있나요? 시멘틱태그는 무엇이며 왜 사용하는지 설명해 주세요. CSS 관련 질문 요즘 flex 를 많이 사용하고 있..
-
개발일상 [SPAVEL] 포트폴리오 작업을 마무리하며 회고하기 📝 드디어 포트폴리오 작업을 끝냈다! 예전에 만들었던 사이트 결과물이 아쉬워서 같은 주제로 다시 만들어 본 포트폴리오 사이트. 개인적으로는 어느정도 만족스럽다. 작업을 하다보니 기획했던 것과 달라진 부분들이 있었다. 레이아웃을 조금 더 잘 어울리게 변경했고, 불필요해 보이는 섹션은 다른 섹션의 내용으로 집어넣었다. 검색 부분은 아예 제외를 시켰는데, 원페이지 사이트에서 검색 기능이 굳이 필요할까? 해서 제외시켰다. Javascript 로 직접 만들었던 코드 중 아쉬웠던 부분이 있어서 이 부분은 더 좋은 방법을 위해 점차 수정을 해 나갈 것 같다! 그러면 포트폴리오 작업이 덜 끝난게 아닌가? 싶지만 코드를 짤 때는 다양한 방법이 있고, 생각했던대로 잘 동작을 한다면 그게 틀린 건 아니라고 생각해서 일단 '혼자..
-
Javascript [Javascript] 스크롤 방향 감지하기 (위/아래 방향 알아내기) ↕️ 내 스크롤이 위로 가는가... 아래로 가는가... 알려주세요 Javascript 님...🙂 요즘 사이트들을 보면 스크롤을 올릴때, 혹은 내릴 때 숨겨지는 네비게이션, 버튼들이 자주 보인다. 그리고 내 포트폴리오에도 그 기능을 넣어야했다. 그래서 공부하게 된 마우스 스크롤 방향 감지하기 Javascript 코드 // 이전 스크롤 위치를 변수에 담는다. let lastScrollY = 0; // 윈도우 스크롤 이벤트 (스크롤을 했을 때 발생) window.addEventListener("scroll", (e) => { // 현재 스크롤 위치(스크롤을 했을 경우 위치)를 변수에 담는다. let currentScrollY = window.scrollY; // 이전 스크롤 위치(Y)가 현재 스크롤 위치(Y)보다 ..
-
Javascript [Javascript] 이메일주소 마스킹 처리하기 const email = "happyhee@email.com";// 이메일 형식이 맞는지 검증email.includes("@"); // true// 이메일을 @를 기준으로 나누어서 변수에 담기let emailSplit = email.split("@"); // ["happyhee", "gmail.com"]// 이메일 앞부분(유저 ID)let emailId = emailSplit[0]; // "happyhee"// 이메일 뒷부분let emailCompany = emailSplit[1]; // "gmail.com"// 아이디의 앞부분 + 마스킹 처리할 텍스트를 배열에 담기let maskingId = [];maskingId.push(emailId[0]);maskingId.push(emailId[1]);maski..
-
기타 GitHub / GitLens 에서 정확한 커밋 날짜와 시간 확인하기 Github와 GitLens에서 예전에 커밋한 부분의 날짜가 궁금해서 보려고 했던 적이 있다. 하지만 2주 전... 2개월 전... 이런식으로 애매하게 나와서 이게뭐람 싶었는데 혹시몰라서 그 애매한 날짜 부분에 마우스를 가져다대보니까 정확한 날짜와 시간을 알 수 있었다. GitHub / GitLens 에서 정확한 커밋 날짜를 확인하는 방법은, ~주 전, ~개월 전 이런식으로 되어있는 부분에 마우스를 가져다대고 기다리면 정확한 커밋 날짜와 시간을 알 수 있다. (마우스를 가져자대고 잠시 기다리면 날짜가 나온다.) -
문제 해결 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..
-
기타 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] Map 객체와 map 메서드(반복문)의 차이 공부를 하다가 헷갈리는 부분이 생겼다. 분명 내가 알던 map 은 반복문이었는데?? map을 반복할 때 for...each를 사용한다고? 으잉? map 자체가 반복문 아니였나? 뭐지? map을 사용하는 방법이 두개인 건가? 그리고 검색에 검색을 거쳐... 이 두가지는 다른 것이란걸 알게되었다. Map 객체와 map 메서드 Javascript 에는 Map 객체와 map 메서드, 이렇게 두가지가 있다. 이 둘은 서로 다른 목적과 맥락에서 사용된다. 아래에서 간단하게만 설명해 보겠다. 1. Map 객체 Map 객체는 Javascript 의 표준 내장 객체이다. 데이터를 저장하고 관리하며 키-값 쌍을 추가, 삭제, 업데이트 및 순환하는 등의 작업을 수행할 수 있다. 예시 코드 // 맵을 만든다. const me..
-
Javascript [Javascript] alert창(경고창) 텍스트 줄바꿈 하기 alert창(경고창) 에서 텍스트 줄바꿈 하는 방법 alert창에서도 줄바꿈이 가능하다! 최근까진 잘 모르고 가능하지 않을까~ 라고 어렴풋이 생각하고 있었는데 마침 딱 사용할 일이 와서 알아보았다. 줄바꿈을 하는 방법은 두가지 방법이 있다. \n 을 사용한 줄바꿈 줄바꿈을 할 텍스트 뒤에 \n 를 넣어주면 줄바꿈이 된다. 코드 alert('안녕하세요?\n만나서 반갑습니다.'); 출력물 템플릿 리터럴 ` ` 을 사용한 줄바꿈 템플릿 리터럴 ` ` 을 사용하면 줄바꿈을 한 상태로 입력을 하면 alert 창에서도 줄바꿈이 된다. 주의할 점은 ` 바로 뒤나 앞에서 줄바꿈을 하거나, 가독성을 위해서 탭키를 사용하면 그것 역시 적용이 되므로 주의해야한다! 코드 alert(`안녕하세요? 만나서 반갑습니다.`); 출력.. -
Javascript [Javascript] 옵셔널 체이닝 '?.' 옵셔널 체이닝 '?.' 옵셔널 체이닝 ?. 은 ?. '앞'의 평가 대상이 undefined 나 null 이면 평가를 멈추고 undefined를 반환한다. 옵셔넝 체이닝 '?.' 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다,. 형태 a?.b 앞의 평가 대상(a)이 undefined 나 null 이면 undefined를 반환 예시 코드 1. // 정보가 없는 사용자 let user = { }; // user 안에 address 에 대한 정보가 없어 에러 발생 console.log(user.name.address); // TypeError: Cannot read properties of undefined (reading 'adress') // 옵셔널 체이닝을 사용하면 에러를 발..
-
Javascript [Javascript] nullish 병합 연산자 '??' nullish 병합 연산자 '??' nullish 병합 연산자를 사용하면 여러 피연산자들 중 '값이 할당된' 변수를 찾을 수 있다. undefined 나 null 이 아닌 값을 찾을 때 유용하다. 형태 a ?? b a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b 예시 코드 1. let a = undefined; let b = '하늘'; // 1. a가 null과 undefined 인지 확인한다. // 2. a = undefined 이므로 b인 '하늘'을 반환한다. console.log(a ?? b) // 하늘 예시 코드 2. let firstName = null; let lastName = null; let nickName = '해피'; // 1. firstName은 null 이..
-
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, '반갑..
-
Javascript [Javascript] 탭메뉴 만들기 (id값을 가져와서 만들기) 예전에 한번 forEach와 index를 사용한 간단한 탭메뉴를 만들었던 적이 있다. https://happy-hee8.tistory.com/3 그때 더 좋은 코드를 짤 수 있게 된다면 수정을 하러 오겠다고 했는데 새로운 방법으로 코드를 짜게되어 이렇게 작성을 해본다. 이 방법도 저 방법도 나쁘지 않은 방식인 것 같아 새로 글을 작성하기로 했다. 개인적으로 장기적으로 내용이 추가되거나 삭제 등등 유지보수를 해야한다면 이 방법이 더 좋을 것 같다. 이 방법은 탭 버튼과 탭 내용 부분에 각각 id값을 주고, id값이 같은 탭 버튼과 탭 내용 부분이 활성화가 되는 방식이다. Javascript 코드 // 탭 버튼과 탭 내용 부분들을 querySelectorAll을 사용해 변수에 담는다. const tabIte..
-
Javascript [Javascript] map 과 filter 를 이용한 문제 풀어보기 문제 classmates 라는 배열에 여러 학생의 나이와 이름이 있을 때, 1. 나이가 16살인 학생만 골라낸 후, candy: 10 을 각각 추가하세요. 2. 나이가 19살인 학생만 골라낸 후, name 뒤에 '어린이'를 붙여주세요. 해답 나이로 학생을 골라내는 것은 filter 를 사용하고, 그 골라낸 배열을 순회하면서 새로운 것을 추가할 때 map 을 사용한다. const classmates = [ {name: "유리", age: 19}, {name: "철수", age: 16}, {name: "영희", age: 16}, {name: "수진", age: 8}, ] // 1. 나이가 16살인 학생만 골라낸 후, candy: 10 개씩 각각 추가 const classFilter1 = classmates...
-
카테고리 없음 [Javascript] .filter() filter() 란 map() 메서드는 배열 안의 모든 요소들을 각각 순회하며 주어진 함수의 테스트를 통과하는 모든 요소들을 모아서 새로운 배열을 반환한다. const fruits = ['apple', 'banana', 'cherry', 'orange', 'grape']; // 글자 길이가 5보다 큰 아이템이 있는지 테스트 const result = fruits.filter((item) => item.length > 5); // 테스트에 통과한 요소들을 모아 새로운 배열을 반환 console.log(result); // [ 'banana', 'cherry', 'orange' ] 형태 arr.filter(callback(element[, index[, array]])[, thisArg]) callback:..
-
Javascript [Javascript] .map() map() 이란 map() 메서드는 배열 안의 모든 요소들을 각각 순회하며 그 요소들에게 주어진 함수(callback 함수)를 호출한 결과를 모아 새로운 배열을 반환한다. const arr = [1, 3, 5, 10]; // arr 의 요소들을 각각 순회하며 * 2를 하여 반환한다. const map = arr.map((item) => item * 2); console.log(map); // Array [2, 6, 10, 20] 형태 arr.map(callback(currentValue[, index[, array]])[, thisArg]) callback: 새로운 배열 요소를 생성하는 함수 currentvalue: 처리할 현재 요소 index: 현재 요소 인덱스 [Optional] array: map(..
-
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 [Javascript] .split() .split() 메서드 사용해보기 .split() 메서드는 String(문자열) 객체를 지정한 구분자를 사용해서 여러개의 문자열로 나눈다. 형태는 .split(separator, limit) 형태이다. .split(문자열을 끊어야 할 부분을 나타내는 문자열, 반환 문자열의 마지막 인덱스(인덱스 )) 반환값은 잘라낸 문자열들을 담은 Array가 반환된다. 예시 공백(띄어쓰기 ' ')을 기준으로 문자열을 잘라내기 const str = '잘라낼 문자열을 테스트 해보겠습니다.'; //공백(띄어쓰기 ' ')을 기준으로 문자열을 잘라낸다. const str1 = str.split(' '); console.log(str1); // ['잘라낼', '문자열을', '테스트', '해보겠습니다.'] console.log(st..
-
Javascript [Javascript] 함수 선언식 & 함수 표현식 & 화살표 함수 함수 선언식: function helloA() {} 함수 표현식: let helloB = function() {} 화살표 함수: let hello = () ⇒ {} 함수 선언식 함수 이름을 선언해서 표현하는 방식 💡 호이스팅이 일어난다. // 호이스팅이 일어나 에러가 발생하지 않음 console.log(helloA()) // '안녕하세요.' function helloA () { return '안녕하세요.' } 함수 표현식 함수를 변수에 담아서 표현하는 방식, 호이스팅이 일어나지 않는다. // 호이스팅이 일어나지 않아 에러 발생 console.log(helloB()) // Error let helloB = function () { return '안녕하세요.'; } 화살표 함수 함수 표현식에서 functio..
-
Javascript [Javascript] 호이스팅(hoisting) 호이스팅 이란? Javascript 에서 호이스팅(hoisting)이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. Javascript 매커니즘 상 변수와 함수 선언은 맨 위로 이동된다. 여기서 인터프리터란 뭘까 궁금하여 검색을 해봤다. 인터프리터란 코드를 위에서부터 한 줄씩 읽어 내려가며 실행하는 프로그램을 말하는데 Javascript 는 기본적으로 인터프리터 언어라고 한다. 변수 선언의 호이스팅 Javascript는 초기화를 제외한 선언만 호이스팅 한다. var 의 호이스팅 변수 선언시 var 로 선언한 경우 호이스팅 시 undefined 로 변수를 초기화 한다. 그러므로 호이스팅시 에러를 반환하지 않는다. console.log(num); // 호이스팅한 var..
-
문제 해결 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 알고리즘 이론+실습 [section-06] number (Math.min - 공구 문의는 DM으로 부탁드릴게요) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(prices) { // Math.min : 주어진 숫자들 중 가장 작은 값을 반환 // * 배열을 그대로 넣으면 NaN을 출력 -> 배열을 spread 연산자로 넣어야 정상적인값이 나온다. return Math.min(...prices); // Math.max : 주어진 숫자들 중 가장 큰 값을 반환 } solution([20000, 113000, 67000, 40500, 99000]); // 20000 solution([19900, 54200, 43000]); // 19900
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-06] number (Math.ceil - 이거 하나 드실래요?) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(n) { // Math.ceil : 소수점 올림 처리 return Math.ceil(n / 5); } solution(23); // 5 solution(76); // 16 solution(3); // 1
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-06] number (Math.floor - 이번 달 신작이 나왔잖아?) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(money) { // Math.floor : 소수점 내림 처리 return Math.floor(money / 57000); } solution(230000); // 4 solution(769000); // 13 solution(35000); // 0
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (indexOf, splice, slice - 벌레 퇴치) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(feature) { // 1. 배열의 버그의 위치 찾기 const bug_index = feature.indexOf("bug"); // 버그가 없을 경우는 기존 배열 return if (bug_index === -1) { return feature; } // 2. 그 버그를 제거한 배열 구하기 // 2-1) splice 사용 // feature.splice(bug_index, 1); // return feature; // 2-2) Slice 사용 // 버그의 인덱스 전까지의 요소..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (배열 - 요소 자르기 메서드 설명) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 /** * 배열 자르기 - splice, slice 메서드 */ const arr = [0, 1, 2, 3, 4]; // arr.splice(시작인덱스, 자를 개수); arr.splice(1, 2); //인덱스 1부터 2개를 제거하겠다. -> 1, 2를 제거 // arr : [0, 3, 4] ****** 원본배열을 건드려서 수정함 ****** // 변수에 담으면 제거된 요소를 확인할 수 있다. const 자른거1 = arr.splice(1, 2); // 자른거1 : [1,2] //arr.slice(시작인덱스, ..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (shift, spread 구문 - 좋은 질문? 지적? 아무튼 감사합니다~) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(prev, join) { // [join, 나머지, 지난번 처음 발표자] // 1. 내가 했던 방법 // // 지난번 처음 발표자 // const prev_presentation = prev.shift(); // // 지난번 처음 발표자를 가장 마지막으로 보냄 // prev.push(prev_presentation); // // 새로 참여한 사람 // prev.unshift(join); // return prev // 2. 인강에서 한 방법 // 지난번 처음 발표자 const p..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (sort, reverse - 프로젝트 명세서) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(stacks) { // sort() : 오름차순 정렬 // reverse() : 배열의 순서를 뒤바꿈 // -> 내림차순이 됨 return stacks.sort().reverse(); } solution(["typescript", "express", "node", "react"]); // ["typescript", "react", "node", "express"] solution(["docker", "graphql", "javascript"]); // ["javascript", ..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (includes, length - 오점뭐) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(menuList, today) { // 메뉴리스트에 오늘 메뉴가 존재하지 않고 // && 메뉴 목록 길이가 10 미만인 경우 if (!menuList.includes(today) && menuList.length < 10) { //메뉴리스트에 오늘 메뉴 추가 menuList.push(today); } return menuList; } solution(["돈까스", "마라샹궈"], "마라탕"); // [ "돈까스", "마라샹궈", "마라탕" ] solution(["국밥", "파스타..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-05] array (배열 - 요소 추가/제거 메서드 설명) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 /** * 배열에 요소 추가/제거하기 - push, pop, unshift, shift 메서드 */ const arr = [1, 2, 3, 4]; // 요소 추가 arr.push(5); //arr : [1, 2, 3, 4, 5]; // 요소 제거 (가장 맨 뒤의 요소 제거) arr.pop(); //arr : [1, 2, 3] // 변수에 담으면 제거된 요소를 확인할 수 있다. const temp1 = arr.pop(); // temp = 4 // 맨 앞에 요소 추가 arr.unshift(5); //arr : [..
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-04] conditional-statement (연습문제 - 내 휴가는 너무 소중해) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(year) { if (year === 3) { return 5; } else if (year === 5) { return 12; } else if (year === 10) { return 30; } else { return 0; } } solution(3); // 5 solution(4); // 0 solution(5); // 12 solution(7); // 0 solution(10); // 30
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-04] conditional-statement (else if절 - 원두는 착한 어른이) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(age) { if (age
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-04] conditional-statement (if문, 삼항연산자 - 새해 복 많이 받으세요) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(name) { return name === "나사장" ? "code100" : "code50"; } solution("나사장"); // code100 solution("나임원"); // code50
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-03] number-string (연습문제 - 경마장 용지) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(input) { return Number(input); } solution(1); // 1 solution("2"); // 2
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-03] number-string (Number 타입 변환 - 덧셈 계산기) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(num1, num2) { return Number(num1) + Number(num2); } solution("1", 2); // 3 solution(5, 6); // 11 solution("3", "5"); // 8
-
입문자를 위한 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
-
입문자를 위한 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
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (템플릿 리터럴 - 비밀번호 만들기) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(birth, date) { return `비밀번호는 ${birth + date} 입니다.`; } solution(900501, 2021); //비밀번호는 902522 입니다. solution(930219, 2020); //비밀번호는 932239 입니다.
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (숫자+문자열 - 이런 건 맨날 나만 시키지) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(name, birth) { return name + birth; } solution("marco", 971204); //marco971204 solution("tomas", 991108); //tomas991108
-
입문자를 위한 Javascript 알고리즘 이론+실습 [section-02] operator (+ - x 연산자 - 운수 좋은 날) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 강의를 들으며 풀어본 문제들 (출처는 아래 링크) [인프런x코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습 function solution(n, members) { // // 내가 가진 돈 // const my_money = n + 6000; // // 음료 값 // const americano = 4100; // // 낼 돈 // const give_money = members * americano; // //남은 돈 // const left_money = my_money - give_money; // return left_money; // 위 코드를 더 간결하게 코드 작성 return n + 6000 - memb..
