TIL

Node 주특기 입문 [2일차] 오늘은 어제 이해가 되지 않았던 부분에 대해 다시 공부해보는 시간을 가졌다. Express.js를 이용한 웹 서버 띄우기 Express.js를 통해 실제로 웹 서버를 띄우고 API를 호출했을 때 정상적으로 API가 도달하고, 반환값이 정상적으로 돌아오는지 확인해봤다. 순서를 정리해보면 다음과 같다. ① npm init -y ② npm install express ③ 서버 켜주기 ④ thunder client 실행 ⑤ router 생성 ⑥ router 보내기 / 가져오기 ⑦ router 를 Express.js에 적용시키기 ① npm init -y 서버를 띄우기에 앞서 기본적인 설정들을 몇 가지 해주어야 하는데 그 중 하나가 ' npm init -y ' 이다. 터미널에 npm..

Node.js 주특기 입문 주차 기본적인 javascript 학습과 함께 몇 번의 개인과제, 팀과제를 끝내고 난 후 오늘부터 주특기 입문 주차가 시작되었다. 이제 본격적으로 Node를 입문한다고 생각하니 기대 반 두려움 반이었다. 오늘은 Node의 기본기 위주로 공부를 했기 때문에 배웠던 부분에 대해서 적어볼까 한다. Node.js의 특징 ① 논 블로킹 : 기존의 블로킹은 프로그램 내부에서 함수를 호출하면 호출된 함수가 작업을 마칠때까지 대기하는 방식이었지만, 논 블로킹은 함수가 실행되는 중에도 다른 작업을 동시에 진행할 수 있는 장점이 있다. DB에 있는 데이터를 Node.js로 가져온다고 했을 때 가지고 오는 것들을 무조건적으로 기다리는 것이 아니라 백그라운드에서 돌아가면서 오는 것들을 기다렸다가 나..

팀 프로젝트 마지막 날 매번 찾아오는 두통 때문에 오늘 하루도 힘들었다. 집중력도 좋지 않았으며, 많은 일을 하지 못했다. 그래도 간략히 적어보자면 다음과 같다. 오전에는 프로젝트 제출 전 마지막 점검을 했다. 팀 회의를 통해 내 파트 뿐만 아니라 다른 팀원들의 파트도 문제가 없는지 마지막으로 변경하고 싶은 부분이 있는지 의견을 묻고 원하는 부분을 변경했다. 변경 부분점들 중에서 나는 유효성 검사부분에 사소한 문제점들이 보여 수정했다. 점심에 팀 과제를 제출하고 난 뒤에는 그동안 시간이 부족해서 못봤던 코드잇 '자바스크립트 객체 지향 기본기'부분을 봤다. '상속'과 '다형성' 파트를 봤는데 이미 스파르타 코딩클럽에서 한 번 공부했었고 이미 써 봤던 친구들이라 익숙했다. 확실히 실제로 먼저 만들어본 코드들..

Team Project 3일차 오늘은 기존 firebase로 작업되어 있던 댓글 기능을 전부 local storage로 바꾸는 작업을 했다. 처음에 firebase와 local stroage를 섞어서 진행했던 이유는 이 프로젝트에서 요구하는 바가 "댓글 기능"이었기 때문이었다. "댓글 기능"은 온전히 사용자들 간의 소통을 위한 것이라고 생각했기 때문에 다른 사용자들끼리 서로의 댓글을 읽으려면 자신의 브라우저에만 저장되는 local storage가 아닌 firebase에 데이터를 저장해야 한다고 생각하고 프로젝트를 진행하는 중이었다. (local storage는 부가적으로 id값 비교나 pw 비교에서 쓰려고 했다) 하지만 아침 시간 튜터님과 대화 중 오로지 local storage만 이용해야 한다는 내용을..

Team Project 4일차 어제, 그제 전반적인 기능들을 구현하고 오늘은 css구현 및 추가적인 기능들을 구현하기로 한 날이었다. 우선 내가 오늘 한 일은 다음과 같다. ① 유효성 검사 (ID,PW 입력할 때 조건 미충족시 조건 미충족부분에 대한 div를 띄우기) + 조건 미충족시 local stroage에 데이터 들어가지 않게 하기. ② 전체적으로 CSS 구성하기 ③ 댓글기능 수정/삭제 버튼 추가하기 오늘 공부한 내용에 대해 조금 더 자세하게 설명해보려고 한다. ① 유효성 검사 부분에는 문자열검사(한글,숫자만 입력가능하도록), 글자 수 검사를 넣어주었다. ID와 PW의 값이 조건을 충족하지 않는다면 ID input과 PW input 아래에 조건이 성립되지 않았다는 div를 띄웠다. 별로 어려운 점은..

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()을 이용해 자식태그들을 바꾸는 식으로 진행한 것 같았다. 참신했다.