이미지 업로드 하는 방법에 대해서 배워보자 이미지 업로드 할 수 있는 페이지 만들기 upload.ejs 라는 파일명으로 view 를 하나 만들어줬다. enctype은 서버로 폼 전송하는 방식이다. enctype을 multipart/form-data 로 설정할 경우 인코딩하지 않고 그대로 전송한다는 의미이다. application/x-www-form-urlencoded 으로 설정하는 경우 base64라는 인코딩형식으로 인코딩되어서 전달됨. 일단 업로드 페이지는 위와같이 마련했다. upload페이지를 렌더링해주는 GET api를 만들어봤다. /upload 경로로 get 요청을 보내면 upload.ejs 를 렌더링 해줄거다. 업로드한 이미지를 하드에 저장 라이브러리를 하나 설치해준다. npm install m..
두 route 들을 다른 파일에서 관리하려고 한다. routes 라는 폴더를 만들고 shop.js 라는 파일을 만들어줬다. 아래와 같이 작성한다. 기존에 app 으로 사용했던걸 router 로만 바꾸어주면된다. module.exports 란? module.exports = 변수명; 이런식으로 쓰면 다른 곳에서 쓸 수 있게 저 변수를 내보내준다. 그리고 require('./파일경로'); 이런식으로 쓰면 다른 파일을 불러올 수 있다. 여기서 불러온 파일이 내보내는 변수가 있을 것이다. 그걸 가져다 쓸 수 있다. import 나 export 문법으로 대체 가능하다. 그러면 기존에 server.js 에 있던 route 대신에 아래와 같이 적어줄 수 있다 app.use() 는 미들웨어를 사용하고 싶을 때 쓰는 함..
지금은 삭제버튼을 누구나 누를 수 있다. 하지만 회원가입기능이 있으니까 내가 썼던 글만 삭제가능하도록 해보자 /register 로 POST 요청이 들어오면 서버는 DB에 저장하면 될 듯하다. /register 경로로 POST 요청이 오면 login 이라는 collection 에 insertOne 함수로 데이터를 삽입한다. 콜백함수로 / (홈 경로)로 redirect 해서 돌아가도록 해줬다. 글 작성자만 삭제가 가능하도록 하기 일단 회원가입을 해서 계정을 하나 만들어준다. 지금을 글을 발행할 때에 글작성자가 따로 추가되지 않는다. 그래서 writer 라는 속성을 따로 만들어줬다. req.user._id 에는 현재 로그인한 유저의 정보가 들어있을 것이다. 따라서 writer 의 값을 이걸로 넣어줬다 post..
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client 이런 오류가 떠서 해결하기위해 아래와 같은 명령어를 mysql에 접속해서 입력해준다. ALTER USER '[계정]'@'[호스트]' IDENTIFIED WITH mysql_native_password BY '[비밀번호]'; ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'mysql비밀번호'; 다시 노드를 실행해보면 오류없이 잘 작동한다.
이번 프로젝트에서 mysql 을 쓰기로해서 한번 훑어보려고 포스팅! 개념 테이블을 그룹핑 한 것을 스키마(또는 데이터베이스라고도 함) 이라고 하고 이 스키마들을 합친 것을 데이터베이스 서버 라고 한다. 서버 접속 \connect --mysql root@localhost:3306 이렇게 mysql shell 에서도 가능하고 아니면 mysql workbench 실행해서 선택해서 접속이 가능한 것 같다. 스키마의 사용 스키마를 생성할 때에는 CREATE DATABASE 스키마이름; *이렇게 뜰 수 있는데 이건 JS 타입이어서 그렇다 \sql 명령어를 쳐줘서 sql 타입으로 변경시켜주면 된다. SHOW DATABASES; 를 입력했더니 현재 존재하는 데이터베이스들이 나온다. USE 스키마이름; SQL 과 테이블..
검색 기능 일단 검색 창을 만들어주자. list.ejs 이 검색창에서 키워드를 입력하고 검색을 누르면 새로운 페이지에서 검색결과를 보여주도록 구현해보자 1. 검색 버튼을 누르면 서버에 POST 요청을 해야한다 2. 서버는 DB에서 데이터를 꺼내줘야한다. collection().findOne() collection().find().toArray() 등을 활용하면 되겠다. 그런데 GET 요청으로도 서버로 데이터를 전달 가능하다. GET 요청 시에 URL 뒤에 데이터를 심는 방법이다 URL query string query string 작성법은 다음과 같다. localhost:8080/list?데이터이름=데이터값 여러개를 입력한다면 데이터이름1=데이터값1&데이터이름2=데이터값2 이런 식이다. 이걸 query ..
실제로 서버를 배포할 때 필수라고 할 수 있는 .env 파일에 대해서 알아보자 server.js 를 작성했을 때 위와 같은 코드를 작성했었던 적이 있다. 이때 8080 이라는 포트번호를 사용했었고, mongodb+srv 라고 시작하는 db 접속 문자열이 있었다. 이런 값들은 개발환경이 달라지거나 다른 컴퓨터로 코드를 옮겨서 작업하면 수정이 필요할 수도 있다 이런 환경에 따라 가변적인 변수 데이터들을 보통 환경변수라고 한다. 개발자들은 환경변수를 보통 한곳에 모아서 관리하는데 .env 파일이다. 이곳에 중요한 환경변수들을 넣어두고 server.js에서 .env 파일에 있는 데이터를 쓰는 식이다. 중요한 정보들이 .env 파일에 있기 때문에 보안상으로 좋기도 하다. 방법 일단 환경변수 사용을 위한 라이브러리..
마이페이지 만들기 로그인을 한 사람만 들어갈 수 있는 페이지를 만들어보자 일단 마이페이지 역할을 할 ejs 파일을 하나 생성해줬다(mypage.ejs) 그럼 서버에서 /mypage 로 접속했을 때 이 페이지로 라우팅을 시켜주자 loggedin 이라는 미들웨어를 생성해주고, app.get('/mypage', loggedin, funtion(req, res){ ... 이런식으로 중간에 넣어주면 /mypage 요청과 mypage.ejs 응답 사이에 loggedin 이라는 함수를 실행시켜준다. loggedin의 내용은 다음과 같다 req.user 가 있다면 next()로 통과시키고, 없다면 '먼저 로그인 해주세요.' 라는 메세지를 res.send() 해달라- 라는 의미이다. 로그인을 하고 /mypage 로 접속..
세션 방식 로그인 기능을 구현해보자 일단 라이브러리 3개를 설치한다. npm install passport passport-local express-session 위 코드까지 server.js 에 작성해주면 시작전 세팅은 끝이다. app.use(미들웨어) 웹서버는 요청-응답해주는 머신 미들웨어 : 요청-응답 중간에 뭔가 실행되는 코드 1. 로그인 페이지 제작 & 라우팅 일단 로그인 페이지인 login.ejs 를 만든다 이 폼을 전송하면 /login 경로로 POST 요청을 한다. 몽고디비에 login 이라는 collection 을 만들어서 document 를 하나 생성해보자 임시 계정이 하나 만들어졌다. 2. 아이디와 패스워드 검사하기 누군가 /login 으로 GET 요청을 하면 일단 보여줄 화면이 있어야..
회원인증방법 1. session-based 아이디랑 패스워드로 로그인을 하면, 서버는 쿠키라는 걸 발행한다. (쿠키 = 브라우저에 저장할 수 있는 긴 문자열) 이 쿠키에는 세션 아이디가 적혀있다. 그럼 브라우저는 쿠키를 저장한다. 이제 로그인 후 활동을 하는데 예를 들어 마이페이지를 보여달라고하면, 쿠키 데이터가 서버로 전송이 되는데, 쿠키에 적힌 세션 아이디를 가지고 (이 사람은 로그인을 했었다는 기록이 담긴)세션 데이터에서 찾아보는 것이다. 만약에 이 세션 데이터에 세션 아이디가 있다면, 마이페이지.html 을 보내줄 것이다. 2. token-based (JWT)(JSON Web Token) 로그인을 할 때 서버는 JSON Web Token 이라는 걸 발행한다.(긴 문자열임) 그럼 브라우저는 이 JW..
각 게시글마다 수정을 할 수 있는 수정 페이지를 만들려고 한다. edit.ejs 라는 파일을 만들어준다. 전체적인 폼은 write.ejs 랑 거의 같다. 일단 수정하기 폼에 들어가면 아래와 같이 기존에 들어있던 데이터가 폼에 디폴트 값으로 들어가있어야 한다. server.js 에 edit/:id 로 접속했을 때 post 라는 collection 에서 url 파라미터로 데이터를 찾아서 result 라고 하고, 이걸 post라는 변수에 넣어서 edit.ejs 에서 쓸 수 있도록 했다. edit.ejs 파일이다. 아까 server.js 에서 결과로 받아온 데이터들을 post라는 변수에 넣었기 때문에 저런식으로 랜더링 할 수 있다. 여기까지 하면 디폴트 값을 폼에 넣어둘 수 있다. 이제 폼을 전송했을 때 db ..
URIURI 는 특정 리소스를 식별하는 통합 자원 식별자(Uniform Resource Identifier) 를 의미한다.웹 기술에서 사용하는 논리적 또는 물리적 리소스를 식별하는 고유한 문자열 시퀀스이다. URL 흔히 웹 주소라고 하며컴퓨터 네트워크 상에서 리소스가 어디있는지 알려주기 위한 규약이다.URI의 서브셋이다. 가장 큰 차이점은 URI 는 식별하고, URL은 위치를 가리킨다고 볼 수 있다.두 주소는 모두 index.html을 가리키고 있는데, 첫번째 주소는 웹서버의 실제 파일 위치를 나타내는 주소이므로 URI면서 URL 이지만두번째 주소는 index 라는 파일이 웹서버에 존재하는 건 아니므로 URI이지만 URL은 아니다.(URI 가 되는 이유는 서버 내부에서 이를 처리하여 결국 index.h..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 세로모드 고정하기 프로젝트를 생성하고나서 먼저 항상 세로 모드이도록 설정 해준다. Manifest.xml 파일에서 screenOrientaion 을 "portrait" 으로 지정해준다. ... ... Paint, Canvas, Bitmap Canvas 는 도화지, Bitmap 을 종이의 재료(나무)라고 생각하면된다. 그래서 Canvas 를 생성할 때에는 Bitmap 을 넣어주어야 한다. 그리고 이 도화지에 그리는게 Paint 인데 이런식으로 쓴다. Paint paint = new Paint(); init class에 init 블럭을 넣으면 객체 생성시에 호출이 되어 실행된다. 우리 프로젝트에서는 긴 변수 설정 부분을 setUpD..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 섹션 7 linearlayout 이란 뷰를 수평이나 수직으로 배치할 수 있는 레이아웃. orientation 속성을 통해서 배치 방향을 결정할 수 있다. vertical 로 설정하면 하위뷰들을 수직방향으로 배치하고 horizontal 로 설정하면 하위뷰들을 수평방향으로 배치한다. 아이템들을 수평방향으로 정렬하려면 위와 같이 orientation을 horizontal로, 수직을 원한다면 vertical 로 설정 layout_weight 속성이란 자식 뷰에 가중치를 지정해서 그 비율만큼의 자식 뷰의 크기를 지정하는 속성. 상위 뷰 그룹 하나와 그 밑에 하위 뷰 3개로 이루어진 화면이다. layout_weight 를 각각 1,2,3 ..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 섹션 6 분 단위로 나이를 표현해주는 계산기 앱을 만들어보자. DOBCalc 라는 이름으로 프로젝트를 생성해준다. ConstraintLayout ConstraintLayout은 레이아웃을 구성할 때 뷰 위젯의 위치와 크기를 유연하게 조절할 수 있게 만들어주는 레이아웃이다. 레이아웃에 배치되는 뷰들에 여러 제약(Constraint) 을 적용해서 뷰의 위치와 크기를 결정하는데 예를들어 특정 뷰의 왼쪽 사이트를 지정된 뷰의 오른쪽 사이드에 맞추는 등의 제약들이 ContraintLayout이 가지는 하나의 레이아웃 속성이 된다. 일단 ContraintLayout 의 속성의 이름은 기본적으로 layout_constraint로 시작함. 그..
출력 하다가 1차원 리스트 a = [1,2,3,4] 가 있을 때 1 2 3 4 이렇게 출력하고 싶을 때가 있다. for x in arr: print(x, end="") 라고 할 수도 있지만 arr = [1,2,3,4] print(*arr) 이런 식으로 출력할 수도 있다. print(*sorted(arr)) 이런식으로 응용도 가능하다. 이런 표현이 가능한 이유는 Python 리스트에 Asterisk(*) 를 사용하면 리스트 압축 해제를 할 수 있기 때문이다. ref : https://yeomss.tistory.com/160 Python 리스트 요소 한줄에 한번에 출력하기 알고리즘을 풀다가 보면 1차원 리스트 요소를 아래와 같이 한번에 출력하고 싶을 때가 있습니다. arr = [1, 2, 3, 4] ➡️ 1..
백준 15552번 문제 풀어보다가 입력 받는 법에 대해서 정리하고 싶어져서 포스팅! https://www.acmicpc.net/problem/15552 15552번: 빠른 A+B 첫 줄에 테스트케이스의 개수 T가 주어진다. T는 최대 1,000,000이다. 다음 T줄에는 각각 두 정수 A와 B가 주어진다. A와 B는 1 이상, 1,000 이하이다. www.acmicpc.net 파이썬에서 입력 받을 때 input() 만 써왔었는데 사실 sys.stdin.readline() 도 사용이 가능하다. (사용하기 위해선 import sys 를 해줘야 한다.) 한 두 줄 입력받는 문제들이랑 달리 반복문으로 여러줄을 입력받아야하는 경우에는 input() 으로 입력 받았다가 시간초과가 생길 수 있다. 사용법을 정리해보자..
가끔 다른 사람들 깃허브에 들어가보면 프로필에 저렇게 자기가 커밋을 보통 언제하는지 통계표를 볼 수 있게 되어있다. 이쁘길래 나도 도전! 시험기간에는 뭐든 재밌어 일단 아래 링크에 들어가서 fork 를 한다. https://github.com/techinpark/productive-box GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out in gist Are you an early 🐤 or a night 🦉? Let's check out in gist - GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out..
구글링하다가 알게된 좋은 익스텐션이 있어서 공유한다. 사실 많은 사람들이 이미 알고 있을 것 같긴하지만... 백준 문제를 풀고 정리하면서 깃허브에 올리는 사람들이 많은 것 같다! 당장 알고리즘 고수 지인들을 보면 백준 문제에 대한 오답노트와 유형/개념들을 깃허브에 정리하는 사람도 있고... 무엇보다 깃허브에 올리면 커밋기록🌱이 남으니까 그걸 보고 뿌듯함을 느낄 수도 있어서 좋은 것같다. 나도 슬슬 백준을 시작해야하지 않을까... 하는 욕심이 들던 와중에 신기하고 좋은 익스텐션을 발견했다. 백준 문제를 풀고 제출하면 자동으로 깃허브에 커밋해주는 크롬 확장 프로그램!! 이름은 BaekjoonHub 이다. 한번 소개해볼까 한다. 이 익스텐션은 아래 링크에서 설치가 가능하다 https://chrome.googl..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 섹션 5 Collection 단순히 같은 데이터 타입 또는 다른 데이터 타입의 묶음이다. collection 의 예시 IntArray - Integer BooleanArray - Boolean DoubleArray - Double ByteArray - Byte LongArray - Long ShortAray - Short FloatArray - Float 다른 타입을 함께 저장할 수 있는 collection arrayOf arrayOf 모든 요소 제거 get remove 람다 표현식 이름이 없는 함수이다. val sum : (Int, Int) -> Int = {a:Int, b:Int -> a + b} println(sum(10,..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 섹션 4 OOP(객체지향 프로그래밍) 객체지향 언어로는 자바, c#, 코틀린 등등.. 이 있다. OOP의 특징으로 - 변수 - 흐름제어 - 함수 - 컬렉션 - 클래스 가 있겠다 클래스와 객체 개념 차가 클래스라고 한다면 특정 속성이 있다고 해보자 속성의 예시로는 최고 속도, 바퀴 개수, 창문과 문의 개수, 색깔 등이 있을 수 있다. 이런 속성들은 변수라고 한다. 또한 차를 skill 도 가지고 있다. drive, break 등 이 있을 것이다. 이런걸 메서드 라고 한다. 클래스 fun main(){ var dawon = Person("Dawon", "Seo") var sangwon = Person() var sangwonSeo ..
ref : https://www.korecmblog.com/ERESOLVE-unable-to-resolve-dependency-tree/ ERESOLVE unable to resolve dependency tree 해결하기 상황 블로그를 만들기 위해 Gatsby Starter 메뉴얼에 따라서 아래 명령어를 실행했다. 공식 문서에서 제공하는 설치 방법임에도 불구하고 아래와 같은 오류가 발생했다. 자세히 오류를 살펴보면 아 www.korecmblog.com 문제 react 개발을 하던중 nivo의 pie chart를 쓸일이 있어 npm install을 하려고 하는데 자꾸 에러가 나면서 install이 되지 않았다. 에러가 나니까 원형 그래프 만들었는데도 화면에 출력되지 않고(모듈 설치가 제대로 되지 않아서)..
ref : Udemy [Android 12 및 Kotlin 개발 완전 정복] 섹션 3 안드로이드 스튜디오 시작하기 듣고 기록한 내용 SDK란? Software Development Kit의 약자 소프트웨어 개발 도구와 설치 패키지를 모은 것. 하드웨어 플랫폼이랑 운영체에 연결되어 있다. 구현할 앱이랑 연결하면 됨. 이거 설정할때 API 21 이용자 수가 많기 때문에(94%) API 21로 설정할 것! Run 단축키 ctrl + shift + f10 코틀린 기초 문법을 살펴보자 함수 코틀린에서는 함수를 fun 이라고 쓴다. package org.techtown.kotlinbasics fun main(){ } 변수 package org.techtown.kotlinbasics fun main(){ var my..
1. 보통 많이 쓰는 When2meet 모바일에서는 조금 불편하지만, pc 에서 쓸 때 제일 많이 쓰는 사이트 https://www.when2meet.com/ When2meet www.when2meet.com 2. 그리고 모바일에서 좀 더 쓰기 편한 lettucemeet 다른 분 소개로 봤는데 뭔가 편해보인다. 아직 써보지 않았지만 다음에는 이걸로 도전해볼예정. https://lettucemeet.com/ LettuceMeet - Easy Group Scheduling The easiest way to schedule group meetings. lettucemeet.com 이 후에 좋은 거 알게 되면 업데이트 하겠음!
운영체제 퀴즈를 보고 오답을 정리하다가 작성하게된 포스트 문제는 다음과 같았다. 헷갈려서 다시 제대로 정리하고 넘어가려고 한다. 일단 multiprogramming과 multitasking 각각 다중 프로그래밍 과 다중 태스킹 이라고 한다. multiprogramming 일단 하나의 프로그램으로는 CPU 나 I/O 장치를 계속 바쁘게 만들 수는 없다. 하나의 프로그램으로는 CPU를 쓰거나... I/O 장치를 쓰거나... 둘 중 하나기 때문에 CPU랑 I/O 장치 중에 무언가 하나는 쉬고 있을 수 밖에 없다. 이게 아까운거다.(유휴상태가 발생함) 사람들은 사용을 안하는 그 시간에 다른 프로그램도 돌리고 있으면 좋겠다는 생각을 했다. 그래서 한 번에 두 개 이상의 프로그램을 돌리는 게 multiprogram..
https://suhwanc.tistory.com/175?category=879656 공룡책과 함께 OS를 배워보자 1일차 - Overview 본 포스트는 공룡책이라 불리는 Abraham Silberschatz, Peter B. Galvin, Greg Gagne의 『Operating System Concept 10th』 을 바탕으로 작성하였습니다. Ch 1. Overview 1장에서는 이 책의 전반적인 내용을 모.. suhwanc.tistory.com https://jhnyang.tistory.com/notice/31 운영체제(OS) 목차 &책 추천 운영체제를 처음부터 쭈우욱 순서대로 공부하고 싶으신 분들을 위해 뒤죽박죽으로 게시된 글들을 순서대로 정리해봤어요 # 운영체제 책 추천 운영체제하면 뭐니뭐니 ..
react 18 버전 이후부터 기능이 추가된게 있는데 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 기능이다. batching 이란 automatic batching 이라는 기능은 리액트 18버전 이후로 추가된 기능이다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 이런식으로 state 변경함수가 연달아서 3번이 있다면 원래 재렌더링도 3번될거지만 1번만 해주는 기능이다, 재렌더링을 방지해주는 기능이다. useTransition 이란 오래걸리는 부분을 감싸면 렌더링시에 체감 속도를 높여줄 수 있다. import {useState, useTransition} from 'react' let a = new Array(10000).fill(0) function A..
memo 는 언제 사용할까 리액트에서 컴포넌트가 재렌더링되면 그 안에 있는 자식 컴포넌트는 항상 같이 재렌더링 된다. 근데 어떤 자식 컴포넌트가 유난히 엄청 무거운 컴포넌트라면 하나의 그 위에 부모 컴포넌트 부를때 부담이 될거다. 이럴땐 그 무거운 자식 컴포넌트를 memo 라는 걸로 감싸면된다. memo 사용법 import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링됨') return 자식임 }) function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } 먼저 memo를 import 해오고 원하는 컴포넌트를..
React / Redux DevTools 크롬 웹 스토어에 React Developer Tools 라는 확장 프로그램이 있다. 이걸 설치하면 다음과 같이 개발자 도구에서 html 말고 말그대로 내가 코딩한 component 들을 개발자 도구에서 확인이 가능하다. state 나 props 도 볼 수 있어서 디버깅 할때 유용할 듯 하다. Profiler 탭도 새롭게 생기는데 여기에서는 성능을 평가해볼 수 있다. 녹화 버튼을 누르고 성능을 테스트해보고 싶은 활동을 해본다음에 녹화를 끝내면 방금 렌더링 된 모든 컴포넌트들의 렌더링 시간을 측정해준다. Redux DevTools 라는 확장 프로그램도 있다. Redux를 사용할 때에 유용하게 쓰일 프로그램이다. redux store 에 있던 state 를 전부 확인..
react-query 란 React 애플리케이션에서 데이터를 관리하고 API 호출을 처리할 수 있는 라이브러리이다. 사용하기 쉽고 강력한 기능을 제공해서 데이터 상태를 유지하고 캐싱하여 성능을 최적화할 수 있다. 설치 npm install @tanstack/react-query 셋팅 react query 를 사용하려면 애플리케이션 최상위 파이리에서 QueryClientProvider 를 사용해서 QueryClient 를 제공해야한다. index.js import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(..
