전체 글 98

HTML 태그 내 텍스트 줄 바꿈 유지하기

Q 어떤 문제가 있었는지 미니 프로젝트에서 방명록의 CRUD를 구현 후 테스트 할 때 엔터로 구분하여 두 줄 이상 글을 작성하고 등록, 수정 시 한 줄로 보이는 문제가 발생했다.방명록을 보여줄 때 내용이 작성된 부분은 태그로 되어 있다가 수정을 누르면 태그로 변경되고 그 안에서 글을 수정할 수 있게 구현되어 있는 상태였다.다음 이미지는 수정 버튼을 눌러 태그 내 글을 작성했을 때이다. 위와 같이 엔터를 쳐서 두 줄로 만든 후 수정 버튼을 클릭하면 글은 정상 수정되지만 한 줄로 나오게 된다. Q 내가 시도해본 것들태그를 사용해서 작성한 내용이 들어있는 태그를 감싸서 줄바꿈이 그대로 적용되도록 했지만 수정을 할 때 태그로 변경되면서 줄 바꿈이 사라졌다. (innerText의 값을 사용)innerTex..

HTML 2024.04.19

[Kotlin 문법] 반복문

for : 특정 횟수만큼 코드를 반복하기 위해 사용 while : 특정 조건을 만족할 때까지 코드를 반복할 때 사용 for for (변수 in 시작값..종료값) { 실행코드 } for (변수 in 시작값 until 종료값) { 실행코드 } → until : 마지막 값 제외 for (변수 in 시작값..종료값 step 숫자) { 실행 코드 } → step : 건너뛰기 (숫자값만큼) for (변수 in 시작값 downTo 종료값) { 실행 코드 } → step : 감소시키기 for (변수 in 배열 또는 컬렉션) { 실행코드 } → 엘리먼트의 개수만큼 반복 for (value in 1..10) { print(value) // 12345678910 } for (value in 1 until 10) { prin..

Kotlin/Kotlin문법 2024.04.19

[Kotlin 문법] 배열(Array), 리스트(List), 셋(Set), 맵(Map)

배열(Array)기본타입 뒤에 Array를 붙여서 만들 수 있음문자열타입은 Array(개수, { item -> "할당할 값" } 으로 만들 수 있음고정 길이를 갖으며 늘리거나 줄일 수 없음배열 선언// 기본타입 배열 선언val intArray = IntArray(10)val longArray = LongArray(10)val charArray = CharArray(10)val floatArray = FloatArray(10)val doubleArray = DoubleArray(10)// 문자열타입 배열 선언 - String은 기본 타입이 아니기 때문에 StringArray가 없으므로 다음과 같이 사용val stringArray = Array(10, {item -> ""}) //..

Kotlin/Kotlin문법 2024.04.19

[JavaScript] URL에서 쿼리 문자열 추출 방법(URLSearchParams)

URL에서 쿼리 문자열 추출 방법// 현재 페이지의 URL에서 쿼리 문자열 추출const queryString = window.location.search;console.log(queryString); // ?item=yoyo// URLSearchParams 객체 생성const searchParams = new URLSearchParams(queryString);// 특정 키(key)에 해당하는 값 가져오기const item = searchParams.get("item");console.log("item: ", item); // 값이 없으면 null URLSearchParams methods 예제 코드// URLSearchParams 객체 생성// const searchParams = new URLSea..

JavaScript 2024.04.18

동일한 className을 사용하는 HTML 요소의 이벤트 처리

Q 어떤 문제가 있었는지미니 프로젝트의 방명록 페이지 구현에서 수정 버튼과 삭제 버튼의 클릭 이벤트가 버튼을 두 번 클릭했을 때 작동하는 문제가 있었다.수정 버튼과 삭제 버튼을 구현한 코드는 다음과 같다.document.addEventListener("click", async (e) => { if (e.target.className === "delete") { const deleteItems = document.querySelectorAll(".delete"); deleteItems.forEach((item) => { item.addEventListener("click", async function () { // 삭제에 대한 처리 }); ..

JavaScript 2024.04.18

DOM Node에 #text가 추가되는 이유

Q 어떤 문제가 있었는지미니 프로젝트의 방명록 페이지를 구현하면서 기존에 작성된 데이터를 불러올 때 사용할 태그를 미리 정의하고 사용했다.(아래 이미지와 같이 데이터만 변경되고 사용되는 태그와 스타일이 동일하기 때문에 미리 정의를 해두었음) 초기 작성 코드는 다음과 같다.const selector = (element) => document.querySelector(element);const guestbookTemplate = (id, author, content) => { selector( "#itemList" ).innerHTML += ` ${author} ${content} `; 위 코드를 사용하여 DOM Node에 접근하여 조작할 때 예상과 다른..

JavaScript 2024.04.17

JavaScript의 Module

Q 어떤 문제가 있었는지미니 프로젝트에서 방명록 페이지를 담당하게 되면서 Cloud Firestore에 데이터를 CRUD를하는 작업을 하게 되었다.Cloud Firestore에 접근하는 js파일(모듈로 만듦) 따로, 화면에서 동작하는 기능을 담은 js파일(일반 js파일로 만듦) 따로 작성해서 테스트를 하는데 데이터를 입력하는 것은 문제가 없었지만 데이터를 가져올 때 다음과 같은 에러가 발생했다.Uncaught SyntaxError: Cannot use import statement outside a moduleUncaught ReferenceError: require is not defined첫 번째는 import 구문으로 모듈js에 있는 파일을 가져올 때 발생했고 두 번째 에러는 import 대신 re..

JavaScript 2024.04.16

Programmers SQL 문제 풀이 41 ~ 50

조건에 맞는 도서 리스트 출력하기 https://school.programmers.co.kr/learn/courses/30/lessons/144853 -- FROM 도서 정보 테이블에서 -- WHERE 2021년 출판된 '인문' 카테고리에 속하는 -- SELECT 도서 ID, 출판일을 출력 -- ORDER BY 출판일 기준으로 오름차순 정렬 SELECT book_id, DATE_FORMAT(published_date, '%Y-%m-%d') FROM book WHERE published_date BETWEEN '2021-01-31' AND '2021-12-31' AND category = '인문' ORDER BY 2 평균 일일 대여 요금 구하기 https://school.programmers.co.kr/l..

SQL/SQL문제풀이 2024.04.16

TIL - SQL 문제에서 가격 구간 구하는 데에 어려움을 겪음

Q 어떤 문제가 있었는지 프로그래머스에서 SQL 문제를 푸는 중 가격 구간 별 처리를 어떻게 해야 할지 몰라서 문제를 해결하지 못했다. Q 내가 시도해본 것들 아래 코드와 같이 케이스별로 출력값을 정하려고 했으나 가격의 구간이 정확히 정해진 것이 아니라 지정한 범위 값은 모두 빈 값으로 처리 되었다. CASE외 다른 대안이 떠오르지 않아서 시도하지 못했다. CASE price < 10000 then 0 price < 20000 then 10000 price < 30000 then 20000 price < 40000 then 30000 price < 30000 then 40000 END Q 어떻게 해결했는지 되도록 스스로 해결하려고 했지만 문제가 도저히 풀리지 않아서 해당 문제 페이지의 질문하기에 공유된 ..

Git & GitHub

Git : 코드의 변경점 기록(버전 관리 도구) Github : 온라인 백업, 공유, 협업(온라인 코드 저장소) Git 필수 명령어 리스트 git init : 코드 관리를 시작하는 명령어 프로젝트 시작 전 한 번만 입력(프로젝트 당) 정확한 프로젝트 폴더(경로)에서 입력해야 함 .git이라는 폴더(숨겨진 폴더)가 생성됨(ls -a 명령어로 확인 가능) git add git add : 저장할 파일을 지정 git add . : 모든 변경된 사항(파일들)을 지정 git commit git commit -m “메시지 작성” : 실제로 파일 저장 commit 메시지는 내가 무슨 코드를 작성했는지 자세히 작성하는 게 좋음 Please tell me who are you 뜨는 경우(계정 설정 필요) git confi..

Tip 2024.04.15