전체 글 56

09.18

버튼 여러 개일 때 이벤트 발생한 버튼 찾고 형제 HTML 찾아서 class toggle하는 법 (바닐라 자바스크립트) const buttons = document.querySelectorAll(".click_sentence"); function toggleNotes(e) { e.currentTarget.nextElementSibling.classList.toggle("notes_active"); } buttons.forEach(button => button.addEventListener("click", toggleNotes)); 열심히 짰는데 jQuery 쓰니까 순식간이다. $(".click_sentence").on("click", function() { $(this).siblings(".notes")..

개발 일기 2023.09.18

2023.08.18 - 생활코딩 jQuery 완강 및 포트폴리오 리팩토링

생활코딩 jQuery 강좌를 완강하면서 작년에 학원에서 만들었던 jQuery 포트폴리오를 조금 손 봤다. 해당 웹사이트는 모바일 메뉴가 좌측에서 슬라이딩되어 나타나도록 jQuery show() 애니메이션을 설정해뒀는데 hide에 시간차를 주면 우에서 좌로 슬라이딩되는 것이 아니라 대각선으로 사라지기 때문에, hide에는 duration을 안 주고 즉시 실행되게 처리했었다. 그렇지만 메뉴가 나올 때는 부드럽게 나타났다가 숨길 때는 순식간에 없어지는 모습이 아무래도 영 예쁘지 않아서 프로젝트 당시에도 엄청 마음에 걸렸었다. 언젠가는 꼭 리팩토링을 하겠다고 다짐했었는데, 마침 제이쿼리를 복습했으니 오늘 마음 먹고 시도한 것이다. 아니, 그런데.... 과거의 나 대체 코드를 왜 이렇게 짜놓은 거지?😇ㅋㅋㅋㅋㅋㅋ..

개발 일기 2023.08.18

23.08.14 - 면접 && 08.16 - jQuery 복습 시작

(1) 지난 월요일에 웹 에이전시에 퍼블리셔로 면접을 보고 왔다. IT 이직을 준비한 이후 처음 보는 면접이기도 하고, 엄청 오랜만에 보는 면접이기도 해서 엄청나게 횡설수설하고 떨었다. 😅 준비한 답변들 모두 달달 외우고 당일에 거울 보면서도 연습했는데 정작 사람을 앞에 두고 하니까 어찌나 목소리가 떨리던지!! 면접관 분들은 감사하게도 지원자인 나를 배려해주고 분위기로 부드럽게 풀어주시고 진지하게 면접에 임하시는 게 느껴졌다. 그래서 굉장히 좋은 경험을 하고 왔다. 긍정적인 경험이었던 만큼 오로지 나의 부족함으로 인해 복기하면 할수록 아쉬움이 많아지는 면접이었다. 😂 충분히 생각을 정리해서 더 좋은 답변을 할 수 있었는데, 이런 걸 의도하고 주신 질문이었는데 내가 캐치를 못했구나, 이건 분명히 나올 질문..

개발 일기 2023.08.16

[Javascript] 성적 평균

https://softeer.ai/practice/info.do?idx=1&eid=389&sw_prbl_sbms_sn=235667 Softeer 연습문제를 담을 Set을 선택해주세요. 취소 확인 softeer.ai level 3에서 유일하게 풀 수 있는 듯🤣 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); let input = []; rl.on('line', function(line) { input.push(line); }).on('close', function() { input = input.map(el => el.split('..

[Javascript] 지도 자동 구축

어제 깜빡하고 코드 정리를 안 해놨네😅 사실 이 문제는 스스로 풀지 못했고 https://jie0025.tistory.com/423 [Softeer][level2] 지도 자동 구축 - 파이썬(Python) https://softeer.ai/practice/info.do?idx=1&eid=413 Softeer 연습문제를 담을 Set을 선택해주세요. 취소 확인 softeer.ai 문제 현대자동차그룹이 레벨3 자율주행차 상용화 목표에 발맞춰 총력을 다하고 있는 가운데, jie0025.tistory.com 이분의 포스트에서 사고 과정을 읽어본 다음에야 이해하고 코드를 작성할 수 있었다. 이런 유형의 문제는 종이를 가져다놓고 계산해보면서 푸는 쪽이 좋을 것 같다. 적성검사 숫자추리영역 푸는 기분...😂 const..

[Javascript] 금고 털이

https://softeer.ai/practice/info.do?idx=1&eid=395&sw_prbl_sbms_sn=234609 Softeer 연습문제를 담을 Set을 선택해주세요. 취소 확인 softeer.ai 가격을 기준으로 금속의 종류를 정렬한 다음 제일 비싼 애부터 가방에 넣어 가방의 무게는 차감되고 가격은 증감하는 식으로 반복문을 짜면 된다. 그런데 조건문을 어떻게 쓰느냐에 따라 어떤 건 오답이 되고 어떤 건 정답이 되더라...(테스트 케이스는 둘 다 통과함) 정답 : const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); l..

[Javascript] 8단 변속기

문제마다 적혀있는 정답률의 기준을 잘 모르겠다. 정답률 더 높은데 전혀 못 풀겠는 문제가 있고, 더 낮은데 잘 풀리는 문제가 있다. for문을 돌리려고 이렇게 저렇게 코드를 짜보다가 왠지 every() 메소드도 될 거 같아서 사용해봤더니 다행히 잘 돌아갔다. const readline = require('readline'); const rl = readline.createInterface({ input : process.stdin, output : process.stdout, }); let input; rl.on('line', function(line) { input = line.split(" ").map(v => parseInt(v)); }).on('close', function() { if (inpu..

[Javascript] 전광판

레벨2만 되어도 너무 어렵다.....!!! 어떡하냐!!! 어떻게 풀어나가야겠다라는 전체적인 그림까지는 그래도 대강 그려낼 수 있는 것 같은데 이런 노가다를 한다고? 하면서 제거한 방법이 사실 정답이라든가, 방법 자체를 떠올리지 못하는 게 늘 문제인 듯.... 전광판에 대한 해설은 Python만 존재해서 자바스크립트로 푼 코드를 첨부한다. 그리고 소프티어에서 코테할 때 rl.close()는 아예 쓰지 말아야하더라. 그걸 쓰면 제대로 입력을 못 받는다...이유는 모르겠다 node.js를 모르니까 ㅇ v.padStart(5, ' '))); let count = 0; input.forEach((test, i) => { const [a, b] = test; for (i = 0; i

Softeer 코딩테스트 연습 문제 체험

제일 쉬운 '근무 시간' 문제를 도전해봤는데 알아서 입출력을 해주는 프로그래머스와 달리 Node.js로 풀어야해서 그것 때문에 제일 많이 애를 먹었다. 백준으로 연습을 했어야 했나.....그래도 알고리즘 자체는 프로그래머스에서 기초를 잘 닦아둔 게 도움이 되었다. 백준처럼 소프티어도 파일로 데이터를 받는지 rl.close()를 처리하지 않아도 무한 입력 상태에 걸리지 않고 결과값이 잘 뜬다. 모듈이 없다고 에러가 떠서 ES6의 import {createInterface} from 'readline'은 사용할 수 없었다. (어차피 똑같은 기능이지만 편집기가 추천하길래 한번 시도해봤다🤣) 아래는 내가 잊지 않으려고 남겨두는 코드. const readline = require('readline'); const..

[Javascript] 디지털 날짜, 시간 표기할 때 2자리 숫자로 표현하기

저번 주에 프로그래머스 과제 테스트 연습을 멋 모르고 도전해봤다가 처참하게 털리고 나왔다 😭 라이브러리, 프레임워크, 구글링에 너무 의존한 나머지 스스로의 힘으로 바닐라 자바스크립트 코딩을 해본 적이 없다는 사실을 깨닫고 크게 좌절했었다 😔 그래서 요즘 노마드 코더의 바닐라 JS 강의를 듣고 있다. 그 중 시계 만들기를 오늘 수강했는데 시계든 날짜든 디지털로 표현되면 무조건 2자리가 되지 않는가? 포트폴리오 프로젝트를 진행할 때 나도 날짜를 2자리로 만들기 위해 애썼던 기억이 있다. 그리고 당시에는 문자열 데이터 앞에 0이나 00을 붙이고 slice를 활용해서 2자리로 잘라내는 방법을 사용했었다. 여기서도 같은 방법이겠거니~ 아니면 조건문을 사용하려나~ 했는데 웬 걸.......이미 문자열 객체에 메소드..

개발 일기 2023.07.24