IT 썸네일형 리스트형 Docker 왕기초 5분 사용해보기 (node js) node js를 이용한 아주 간단한 프로젝트를 도커를 이용해서 백그라운드에서 실행시켜보고 Docker Hub에 image를 저장하여 다른 PC에서 image를 사용할 수 있게 한다.위와 같은 간단한 nodejs를 실행해보려한다. Docker를 다운받고(https://docs.docker.com/) VSCode를 사용하고 있다면 확장으로 Docker Extension을 설치하는것을 권장한다. Dockerfile을 생성하고 다음과 같이 작성해본다. FROM node:16-alpine => node가 지원하는 이미지를 사용하고 16버전의 apline(최소단위의 리눅스 버전)을 사용한다. WORKDIR /app => 컨테이너 안에 어떤 경로에 실행할 것인지 //윈도우의 cd와 비슷한 명령 COPY .. 더보기 로그인 + 게시판(8: 댓글 추가) 추가적으로 댓글 기능을 만들어보았다. 추가로 DB에 댓글을 관리하는 테이블을 생성한 이후 해당 게시글에 관련된 댓글만 불러와 테이블 형식으로 보여주도록 구현하였다.이전에 게시글 상세 조회에서 표 형태로 댓글을 보여주기 위해 다음과 같이 추가하였다. 서버로 부터 받아온 값들을 배열 형태로 다시 나타내기 위해 컴포넌트를 새로 생성하고 map함수를 이용하여 props로 댓글과 ID 값을 전달해주었다. 댓글들을 모두 받아와 담는 comments를 생성하기 위해 useState를 사용하였고 fetch를 이용하여 받아온 값으로 설정해주었다. 이때 useEffect()의 두번째 인자로 빈 배열을 주어 처음 렌더링 될 때 한번 실행되지만 따로 값을 주지 않는다면 메모리 누수가 걸릴 수 있으므로 주의하자. //Can'.. 더보기 로그인 + 게시판(7: 게시글 상세 조회) 게시글 상세 페이지에는 뒤로가기 버튼과 삭제 버튼이 있다. 삭제 버튼은 해당 게시글을 작성한 사람만이 게시글을 삭제할 수 있도록 기능을 구현하였다. 작성일의 경우에도 DB에서 post 요청일 때 now()로 처리하였는데 정상적으로 결과값이 보이는 것을 확인할 수 있다.게시글 삭제 기능은 sesstionStorage.getItem("key")값과 이전에 게시글 조회에서 Board 컴포넌트가 props로 전달한 props.writer 값이 같은지 확인한 후에 같으면 fetch이용하여 DELETE 메소드를 싣어서 보냈다. 이전에 게시글 조회때와 같이 url에 값을 같이보냈다. 이것을 server.js에서 처리할 수 있도록 구현하면된다. sql문에 해당 title 값을 req.parms.title을 통해 대입시.. 더보기 로그인 + 게시판(6: 게시글 조회) 어쩌면 게시글 조회가 복잡하다면 복잡할 수도 있다. 전에 ID/PW 찾기 처럼 값을 가져오는 것은 어렵지 않다. 하지만 게시글을 받아와 어떠한 방식으로 보여주고 어떤 구조를 취해야 할지 고민이였다. 또한 게시판에 게시글이 포함된 행을 클릭하였을때 게시글 상세정보가 보여지게끔 만드려면 어떤 로직이 필요할까 생각해보았다. 다시 생각해보니 방법은 어렵지 않았다. 단지 컴포넌트를 나누고 props를 이용하면 간단했다. map()함수를 써본적이 있다면 이해가 잘 될 것이다. map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용하는데 이 함수를 사용하면 게시글들을 순서대로 화면에 나타낼 수 있다.return문 안의 구조는 다음과 같다. 표 형식으로 첫번째 행에는 #, 제목,.. 더보기 로그인 + 게시판(5: 게시글 작성) 게시글 작성의 경우 간단하게 제목과 내용만 입력받도록 설정하였다. 작성일은 후에 DB에서 현재 시간을 가져와서 설정하기 위해 현재는 disabled 를 주어 변경이 불가능하게 만들었다. 리턴문에 첫번째로 Main 컴포넌트를 불러와 사용하였기 때문에 메인에서 본 틀을 그대로 확인할 수 있고 밑에만 추가된 것을 알 수 있다.mainGo() 함수는 history를 사용하여 '/'으로 갈 수 있도록 선언하였고 중요한 부분은 작성 버튼을 눌렀을때 실행되는 writeboard() 함수를 살펴보도록 하자. 이 함수의 경우 리액트의 axios를 사용하여 post요청을 하였다. 회원가입때 설명한 부분과 똑같다. userDate에 데이터를 담아 post 요청을 하였고 정상적으로 진행되면 메인('/)으로 이동할 수 있도록 .. 더보기 로그인 + 게시판(4: 메인 화면) '연습용 웹사이트' 헤더(고정)로 설정한 부분이다. 로그인 상태이면 해당 사용자에 ID값과 로그아웃버튼을 만들었다. 반대로 로그아웃 상태이면 비로그인이라고 설정하였고 로그인버튼을 만들었다. 리액트 훅인 useEffect를 사용하였다. 두번째 인자로 빈 배열을 넣어 처음 렌더링되었을때 실행되게 구현하였다. sessionStorage.getItem("키")를 입력하면 세션에 저장된 키값을 불러올 수 있는데 이전에 로그인하면서 sessionStorage.setItem 설정하였을때 입력하였던 키 값으로 불러올 수 있다. 이 값이 null 값이면 비로그인으로 설정하고 그렇지 않은 경우 로그인 상태로 구현하였다. 이렇게 구현할 경우 로그아웃할때는 확실하게 세션에 저장된 값을 삭제해야한다. 현재 로그아웃 버튼 일.. 더보기 로그인 + 게시판(3: ID/PW 찾기) ID/PW 찾기에는 회원가입 할 때 입력했던 이메일을 재입력하여 ID를 찾을 수 있고 ID와 이메일을 입력하여 PW를 찾을 수 있다. 이 함수는 전에 회원가입(2)에서 사용해 썼던 그 데이터를 똑같이 받아와 입력받은 메일값과 DB에 존재하는 메일값중 같은 것이 있나 for문을 통해 확인하고 존재하면 alert로 ID값 제공합니다.PW찾기도 ID찾기와 똑같은 방법으로 구현하였습니다. 더보기 로그인 + 게시판(3: 회원 가입) 로그인화면에서 회원가입 버튼을 누르면 Link 속성을 통해서 회원 가입 url로 이동하게 된다. 회원 가입에는 중복체크 버튼이 있고 비밀번호를 재입력해 확인하는 기능이 있다. 이 과정을 통과하면 가입이 가능하고 다시 로그인화면으로 돌아가는 버튼도 만들었다. 중복체크 시 호출되는 idCheck 함수부터 살펴보자.로그인과 마찬가지로 fetch를 사용하여 해당 url에 get요청을 하여 받아온 데이터값을 비교한다. 아이디가 입력되지 않았을 경우 경고창을 띄우고 for문을 사용하여 일치하는 ID값이 있는지 확인한다.사용가능한 아이디이면 usableID을 true로 변경해주었다server.js에서는 해당 url에 대한 get 요청은 다음과 같이 실행하였다. 회원가입은 form태그로 작성되었다. 가입버튼을 누르면 .. 더보기 이전 1 ··· 15 16 17 18 19 다음
