[JS] - innerHTML 사용법

졸업작품 제작을 하다가 자바스크립트로 html을 다루는 방법을 까먹어서 다시 찾아봤다. 사실 기본적인 원리는 알고 있지만 내가 하려는 것은 API로 가져온 데이터들을 추출해서 원하는 데이터를 가공해 각각의 요소들을 상황에 맞게 넣고 싶었다. 설명이 잘 안되서 예시를 들어보자면 만약 어떤 버튼을 누르면 div 태그 하나만 추가하는 것이 아닌 여러줄의 뭉텅이 태그를 만들고 싶었다. var div = document.createElement("div"); var txt = document.createTextNode(`음식점${i}은 ${result[i].place_name} 입니다.`); div.appendChild(txt); quickfilter.append(div); 이전까지는 이런 방식으로 해서 태그 하..

• format_list_bulleted Javascript
• · 2023. 2. 8.
• textsms

[졸업작품] - 제작 4주차

이번주는 지금까지 만든 메인페이지에 애니메이션과 동적 움직임을 넣어서 페이지의 퀄리티를 높일 생각이다. 아직까지는 많은 애니메이션을 사용을 하지 않았지만 프론트엔드 직업상 사용자가 경험했을때 더 다양한 모션이 있는것이 좋다고 생각했다. 지금까지 만든 페이지에 추가로 넣을 옵션은 크게 총 2가지다. 1. 필터를 클릭하면 올라가게 하고 올라갔을때 필터 외 다른 곳을 클릭했을때는 다시 원상태로 내려오게 한다. 2. 필터안의 '내위치' 버튼을 누르면 현재 사용자의 행정구역이 나오게 한다. 1. 필터 필터의 움직임 부분은 '아시아나항공'의 필터 부분을 참고하여 만들었다. 필터를 누르면 필터가 천천히 올라감과 동시에 뒷 배경이 점점 흐려지게 만들고 싶었다. 내릴때도 똑같은 로직으로 하고 싶었다. .movein{ a..

• format_list_bulleted 졸업작품
• · 2023. 2. 5.
• textsms

[졸업작품] - 제작 3주차

이번주 회의는 오프라인으로 진행했다. 모두가 만족할 수 있는 중간지점에서 만났는데 그곳이 '사당'이였다. 나는 이번 회의때 그동안 궁금했던 것이나 온라인으로 해결하지 못했던 것들을 질문하기 위해 몇가지 생각해봤다. 1) 고유 로고 및 서비스명 2) 메인-필터 부분을 어떻게 구현 할 것인지 (ex: 구체적으로 어떤 서비스와 비슷하게 만들겠다. 등등...) 혼자서 필터부분을 만들려 했지만 생각보다 굉장히 고려해야 할 점이 많았다. 어떤 필터를 만들건지 어떻게 작용하는지 등등 혼자 생각하기엔 너무 부담스러워서 팀원들과 회의를 해야겠다 생각했다. 또 혼자 만들었는데 팀원들 마음에 안들수도 있으니ㅎㅎ -회의 후- 기존 로고 왼쪽에서 오른쪽으로 바뀌었다. 훨씬 깔끔하고 보기 좋아졌다. 로고 뿐 아니라 우리 사이트의..

• format_list_bulleted 졸업작품
• · 2023. 2. 1.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 숫자 문자열과 영단어

✔문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자 영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7..

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 두 개 뽑아서

✔문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. ✔입출력 예 number sresult [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] ✔나의 풀이 function solution(numbers) { numbers.sort((a,b)=>a-b); let array=[] for(let i=0;i

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms

[프로그래머스 | Javascript] 코딩테스트 Lv1 - 2016년

✔문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) ✔입출력 예 a b result 5 24 "TUE" ✔나의 풀이 function solution(a, b) { return new Date(2016, a-1, b).toStr..

• format_list_bulleted 알고리즘/자바스크립트-프로그래머스
• · 2023. 1. 8.
• textsms