Team Project 4일차 어제, 그제 전반적인 기능들을 구현하고 오늘은 css구현 및 추가적인 기능들을 구현하기로 한 날이었다. 우선 내가 오늘 한 일은 다음과 같다. ① 유효성 검사 (ID,PW 입력할 때 조건 미충족시 조건 미충족부분에 대한 div를 띄우기) + 조건 미충족시 local stroage에 데이터 들어가지 않게 하기. ② 전체적으로 CSS 구성하기 ③ 댓글기능 수정/삭제 버튼 추가하기 오늘 공부한 내용에 대해 조금 더 자세하게 설명해보려고 한다. ① 유효성 검사 부분에는 문자열검사(한글,숫자만 입력가능하도록), 글자 수 검사를 넣어주었다. ID와 PW의 값이 조건을 충족하지 않는다면 ID input과 PW input 아래에 조건이 성립되지 않았다는 div를 띄웠다. 별로 어려운 점은..
분류 전체보기
문제 설명 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리, 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다. 넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을 아끼려 합니다. 이를 위해 벽을 1미터 길이의 구역 n개로 나누고, 각 구역에 왼쪽부터 순서대로 1번부터 n번까지 번호를 붙였습니다. 그리고 페인트를 칠해야 할 구역들을 정했습니다. 벽에 페인트를 칠하는 롤러의 길이는 m미터이고, 롤러로 벽에 페인트를 한 번 칠하는 규칙은 다음과 같습니다. 롤러가 벽에서 벗어..
문제 설명 숫자나라 기사단의 각 기사에게는 1번부터 number 까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다. 각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치를 정하고, 제한수치보다 큰 공격력을 가진 무기를 구매해야 하는 기사는 협약기관에서 정한 공격력을 가지는 무기를 구매해야 합니다. 예를 들어, 15번으로 지정된 기사단원은 15의 약수가 1,3,5,15로 4개 이므로, 공격력이 4인 무기를 구매합니다. 만약, 이웃나라와의 협약으로 정해진 공격력의 제한수치가 3이고 제한수치를 초과한 기사가 사용할 무기의 공격력이 2라면, 15번으로 지정된 기사단원은 무기점에서 공격력이 2인 무기를..
문제 설명 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한조건 n은 2이상 1,000,000이하의 자연수입니다. 입출력 예 n result 10 4 5 3 입출력 예 #1 : 1부터 10 사이의 소수는 [2,3,5,7] 4개가 존재하므로 4를 반환 입출력 예 #2 : 1부터 5 사이의 소수는 [2,3,5] 3개가 존재하므로 3을 반환 나의 풀이 이번 소수 찾기 문제는 어제 풀었던 소수 만들기(프로그래머스)에 만들어 둔 소수 찾는 함수를 이용하여 문제를 풀어봤다. 임의의 수 n이 주어지면 그 n까지의 숫자를 새로운 배열에 담아주었고 새로운 배열을 forEach로 반..
Team Project 2일차 어제의 TIL에도 적어놨듯이 이번 프로젝트에서 내가 맡은 역할은 댓글 기능을 만드는 것이다. 어제까지 firebase와 local stroge에 넣고 데이터를 가져온 뒤 웹에 구현하는 것까지 성공했는데(두 방식 모두 해봄), 오늘 할일은 기본적으로 구현한 기능에 부가적으로 몇 가지 추가하고 변경하는 작업을 했다. 오늘 project에서 내가 할 일은 크게 7가지 정도 있었다. (혼자 구상해본 할 일) ① 작성자, 댓글, 날짜 댓글 창에 동시에 띄우기 ② 댓글 최신순서로 띄우기, 댓글 작성시 맨 위에 뜨게 하기(시간순 정렬) ③ 수정, 삭제 버튼 추가하기 ④ 영화별로 기능 구현하기 ⑤ click버튼 submit으로 바꾸기 ⑥ 페이지가 로드되면 firebase의 내용을 전부 꺼..
프로젝트 진행상황 오늘부터 팀 프로젝트를 시작했다. 기존의 개인 프로젝트에서 추가적으로 기능을 구현해야 하는 과제를 받았다. 필수적으로 해야할 것으로는 다음과 같다. ① TMDB 또는 영화진흥위원회 오픈 API 이용 ② 영화정보 상세 페이지 구현 ③ 상세 페이지 영화 리뷰 작성 기능 구현 ④ github PR(=Pull Request) 사용한 협업 ⑤ UX를 고려한 validation check (영화 검색시, 댓글 작성시, 추가 기능 구현시 반드시 삽입) ⑥ 하기 기재된 Javascript 문법 요소를 이용하여 구현 일단 우리 조는 첫 날 상세페이지를 만들기로 했다. 상세 페이지 안에 영화 리뷰 작성 기능을 넣고 validation check만 하게되면 과제는 거의 끝난다고 생각했기 때문이다. 우선, ..
공부하면서 새로 배운 사실들을 몇 가지 적어보려고 한다. 사실 오늘은 알고리즘 문제를 붙잡고 있느라 새로운 공부를 별로 못했다. 지끈 지끈.... document.querySelector() 큰 div 안에 input, button 태그가 존재할 때, 큰 div를 querySelector로 가져오게 되면 input과 button은 html 폴더에서 따로 가져올 필요 없이 querySelector로 지정해준 div에서 가져올 수 있다.(html을 거치지 않고 js에서 가져올 수 있다.) const loginForm = document.querySelector('#login-form'); // const loginForm = document.getElementById("login-form") const lo..
컨디션이 매우 좋지 않았다. 주말동안 추가적으로 넣고 싶은 기능 몇 개 적어보려고 한다. 이미지 클릭시 검색 사이트로 이동 (a태그로 걸어서 네이버 도메인 맨 뒤에 영화이름 넣으면 될 듯?) 로그인 기능 구현 나만의 즐겨찾기 구현 좋아요 누른 카드 위에 별표(왕관) 그림 띄우기 좋아요 누른 카드 상위에 띄워지도록 구현 그리고 다른 사람 코드를 보다가 나와는 다른 방식으로 구현한 사람이 있어 적어둔다. 나는 기존의 div박스를 모두 지운 뒤에 새로 필터링된 카드들을 넣어주었지만 다른 팀원 중 한명은 replacechildren()을 이용해 자식태그들을 바꾸는 식으로 진행한 것 같았다. 참신했다.
어제 만든 기능과 연관된 이슈들을 몇 가지 적어보려고 한다. 처음 innerhtml으로 데이터를 웹 상에 구현했을 때 여러 시도를 해보며 알게 된 점이 있다. 한 번은 innerhtml로 여러 태그들을 만들고 그 안에 데이터를 넣었다. 이를 이용해 그 만들어진 카드를 클릭하게 되면 이벤트가 발생하는 기능을 넣으려고 했다. 분명 alert을 띄워주는 eventListener를 넣어주었는데 alert이 뜨지 않았다. 그래서 처음에는 html 폴더에 없는 건(js만든 태그는) querySelector에 eventListener를 달 수 없다고 생각했다. 하지만 몇번의 시도 끝에 '만들어지고 난 다음에는 js로 만든 태그에 querySelector로 eventListener를 달아 사용할 수 있다' 라는 것을 ..
