감공사

Code

😢 이쁘게 풀어주려다가 그냥 조건문으로 끝낸 문제

😊 가끔은 단순한게 좋은 방법인듯 하다.

일단 x좌표가 같은 것이 있다면, 이미 평행한 좌표가 있는 것이고
y좌표가 같은 것이 있다면, 역시 평행한 좌표가 있는 것이다.
따라서, x 또는 y가 한 번만 존재하는 좌표를 찾아내고 그 값을 넣어주면 된다.

Full Code (https://github.com/DasolPark/Dasol_JS_Algorithm/tree/master/Baekjoon)

Code

😢 변의 길이 순서가 랜덤으로 들어오는 듯 하다.

😊 ||(or)으로 모든 경우를 넣어주든지
sort로 순서를 처리해주면 된다.

Full Code (https://github.com/DasolPark/Dasol_JS_Algorithm/tree/master/Baekjoon)

✨ 문자열과 변수를 함께 쓰는 형식(``)
(``는 백틱(Back-ticks)이라고 부른다)

💻Example Code

const TemplateStrings1 = `This is a template string.`;
const TemplateStrings2 = `In ES5 this is
not legal.`;
const name = 'David';
const TemplateStrings3 = `Hello ${name}, how are you?`;
const TemplateStrings4 = String.raw`In ES5 "\n" is a line-feed.`;

console.log(TemplateStrings1);
console.log(TemplateStrings2);
console.log(TemplateStrings3);
console.log(TemplateStrings4);

😋 TemplateString1처럼 일반적인 문자열처럼 사용할 수 있으며,
TemplateString2처럼 line-feed 입력 없이 줄바꿈을 할 수 있다.
TemplateString3처럼 문자열에 변수를 섞어 쓸 수 있으며,
TemplateString4처럼 String.raw와 함께 이스케이프 문자를 그대로 표현할 수 있다.

사용할 때 `을 열고 `로 닫아주면 되며, 문자열 안에 변수를 넣고 싶을 때는 ${변수명}을 작성해 주면 된다.

API를 사용할 때 Template Strings를 사용하면 굉장히 편리하다.

그리고 아래와 같이 안에 삼항연산자를 넣어 값을 비교할 수도 있다.

👉 자세한 내용은 https://babeljs.io/docs/en/learn/#template-strings

Code

😢 이렇게 쉬울 거라고 생각하지 못 했던 문제

😊 x, y는 현재 나의 위치이며 w, h는 직사각형의 오른쪽 위 꼭짓점, 0,0은 왼쪽 아래 꼭짓점이다.

위 표을 좌표계라고 생각해보자. 그리고 벗어날 수 있는 모든 경우의 수를 배열에 저장해보자.
좌표 0,0 기준으로 직사각형을 벗어나려면 x, y값 그 자체로 움직여야 벗어날 수 있으므로 [x, y]를 배열에 우선 넣는다.(x-0, y-0)
좌표 w, h 기준으로 직사각형을 벗어나려면 w-x, h-y만큼 움직여야 벗어날 수 있다. 따라서, [w-x, h-y]를 추가적으로 배열에 넣는다.

결과적으로 [ x, y, w-x, h-y ] 총 4개의 경우의 수를 구할 수 있다(직사각형을 벗어날 수 있는 이동 값)
최종적으로 Math.min.apply(null, 배열)넣어서 최소값을 구하고 출력해주면 된다.

Full Code (https://github.com/DasolPark/Dasol_JS_Algorithm/tree/master/Baekjoon)

✨ DB를 이용해 게시판을 만들기 전에, 간단히 연습할 수 있는 방법입니다.

Chrome Browser - F12(or Inspect) - Application - Storage - Local Storage
위의 경로를 찾아 들어가면, 내 브라우저에만 저장되는 공간이 있다. 이걸 이용해 간단하게 게시판을 구현할 수 있다.

📢 Local Storage 사용법

1. 데이터 저장하기
localStorage.setItem( 명칭, 저장할 내용 );

2. 데이터 불러오기
localStorage.getItem( 명칭 )

글은 여러 개이며 하나의 글에 필요한 데이터는 번호, 제목, 내용, 작성자, 작성일, 조회이기 때문에
하나의 글을 저장할 때는 배열로 저장하고, 하나의 글에 들어간 데이터는 Object로 저장해주면 간단히 저장할 수 있다.
예를 들어, objArr = [ { num: 1, title: 'title1'... }, { num: 2, title: 'title2'... }, ... ] 형식으로 저장하면 된다.

📢 게시판을 만들어가는 작업 순서

1. input과 form tag를 이용해 글을 작성하는 부분을 만들어주고, 이 내용을 받아 localStorage에 저장해준다.
2. localStorage에서 데이터를 받아와, DOM을 이용해 목록을 출력해준다.
3. 글 제목을 누르면, 글 내용이 출력되도록 해준다.
4. 한 화면에는 최대 5개의 글만 보여주며, 그 이상의 글은 인덱스 처리를 해주고 눌렀을 때 해당 목록을 보여준다.

😃 보기 쉽게 하기 위해서, 싱글 페이지에 글 목록, 글 내용, 작성 부분을 한 번에 보여주도록 구성하였다.
이 과정에서 글 번호가 곧 데이터 index이므로 꼬이지 않도록 Sort해주는 작업이 필요하며,
각 글 목록마다 id를 다르게 부여하여, event를 받아줄 수 있도록 해주는 작업이 필요하다.

아래는 예제가 실제로 실행되는 모습이다.

이렇게 연습을 하고, DB와 함께 진행할 때는 어떻게 적용하고 개발을 진행해 나가야 할지 고민하면 될 듯 하다.

궁금한 점이 있으시면 언제든 댓글 달아주세요!

Full Code (https://github.com/DasolPark/Play-Ground_JavaScript) board.html

✨ JavaScript에서 Hoisting이란, 변수 또는 함수 사용을 선언 전에 할 수 있다는 것(?)이다.

w3schools에서는 변수나 함수 선언부를 코드 최상위에 위치시키는 것이라고 말하고 있으며,
MDN에서는 위의 말처럼 가르치고 있지만, 실제로는 그렇지 않다고 한다.

https://www.w3schools.com/js/js_hoisting.asp

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

📢 예제 1(변수 - var)

위의 코드처럼 할당(assign)을 먼저 하고, 실행 한 후, 선언(declare)을 해줘도 문제 없이 작동한다.

위 화면을 보면 문제 없이 7이 출력된 것을 볼 수 있다.

📢 예제 2(함수 - function)

이번에는 함수를 위와 같은 방식으로 실행해 보겠다.

위 코드처럼 실행을 먼저 해주고, 나중에 선언을 해줘도 문제 없이 작동한다.

위 화면을 보면 문제 없이 'Hello'가 출력된 것을 볼 수 있다.

ES2015전에 정확히 명시된 문서는 없지만, ES2015에서 Hoisting을 정의하고 있다.
어렵게 생각하지 말고, 선언부를 코드 최상위로 끌어올린다고 생각하면 될 것 같다.
사실 위처럼 곤란한 상황은 var과 function을 사용해서 생기는 문제다.

위의 문제로 머리가 복잡해지기 싫다면 ES2015의 const와 let을 사용해주면 된다.
(function은 const functionName = () => {}로 사용)
그럼 debugging이 훨씬 수월할 것이다.

결론적으로

선언부를 코드 최상위로 '끌어올린다'라고 생각해주면 되고, 해당 버그를 방지하기 위해 const와 let을 사용하자!

Code

😢 역시 에라토스테네스의 체를 이용하면 되고, 골드바흐의 파티션을 어떻게 구할지 생각을 해줘야 한다.

😊 31번째 줄 코드는 이전 문제에서 사용한 것과 같고, 33-37번째 줄 코드에서 2부터 n까지 소수를 저장해준다.

중첩 for loop을 열고, 입력 받은 n을 0으로 만들 수 있는 소수의 짝을 checkPrimePair 배열에 2차원 형식으로 저장해준다.
(checkPrimePair가 저장된 모습은 [ [2, 3], [3, 5] ] 같은 형식이라고 생각해주면 된다)

그리고 또 다시 for loop을 열고 checkPrimePair중 가장 작은 차이가 나는 소수 짝의 index를 구해준다.

마지막으로, 해당 index의 짝을 join(' ')형식으로 출력해주면 된다.

지금까지 풀었던 알고리즘 중에 가장 길지 않나 싶다. 다시 풀어보며 조금 더 개선할 수 있는 곳을 찾아봐야겠다.

Full Code (https://github.com/DasolPark/Dasol_JS_Algorithm/tree/master/Baekjoon)

Click! 👉 https://www.youtube.com/watch?v=wSSwgFFH5v8&feature=youtu.be

Github: https://github.com/DasolPark/AriTeam_FullStack_Chatbot_Aribot

대학 생활 편의를 위한 챗봇과 웹앱을 졸업 작품으로 개발하였습니다.

👓사용한 기술
Front-End: JavaScript, HTML/CSS, Bootstrap
Back-End: Node.js
Database: MySQL, MongoDB
Cloud Server: AWS EC2
Chatbot Platform: danbee.Ai

📳챗봇: 학사 규칙, 빈 강의실 조회/예약, 부서 위치/전화번호 안내, 학교 식당 메뉴 안내, 편의 시설 위치 안내 등
💻웹앱: 빈 강의실 조회/예약, 개설 강좌 안내, 챗봇 소개, 데이터 관리자 페이지 등

✨ 배열(array)의 값(element)을 하나씩 받아서 내가 작성한 function을 실행해주는 helper method

💻Example Code

const arr = [ 1, 2, 3 ];

const received = arr.forEach( num => console.log(num) );

console.log( arr );
console.log( received );

forEach는 제공 받은 function을 Array의 각 element마다 실행해주기만 한다.
function의 결과를 return 해주지 않는다. forEach의 return 값은 undefined다.

따라서 위의 결과처럼, arr를 한 번씩 실행해주고 있는 것을 볼 수 있으며, 기존 arr값이 변하지 않는 것을 볼 수 있다.
또한, return값이 있는지 확인하기 위해 선언했던 received를 출력하면 undefined가 출력되는 것을 볼 수 있다.

🎃실전 예제

위의 간단한 예제처럼 사용할 수 있다. objArr는 직접 작성해줬지만, 어딘가에서 받아올 data라 생각하면 된다.

😋 개발을 진행할 때, 많은 양의 데이터를 받아와서 하나씩 실행해줄 때 매우 유용하다.
매우 자주 쓰이는 helper method이므로 필수적으로 알고 있어야 한다.

👉 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Click! 👉 https://dasolpark.github.io/Dasol_JS_Momentum_Clone/

Github 👉 https://github.com/DasolPark/Dasol_JS_Momentum_Clone

항상 이용하고 있는 Chrome Extension Momentum을
HTML/CSS/JavaScript를 사용하여 나만의 스타일로 재구성 해봤습니다.

🌳배경 이미지는 무작위로 생성되며, 😃본인의 이름을 저장할 수 있고, ⛅간단한 날씨 정보도 얻을 수 있습니다.
또한, 📑해야 할 일 목록을 작성하여 체크하거나 삭제하며 사용할 수 있습니다.

날씨 API는 openweathermap, 배경 이미지 API는 unsplash를 이용하였으며
이름과 해야 할 일 데이터는 Local Storage에 저장하였습니다.

브라우저 앱이기 때문에, 노트북이나 데스크톱 브라우저에 최적화되어 있습니다.