마이페이지 만들기 로그인을 한 사람만 들어갈 수 있는 페이지를 만들어보자 일단 마이페이지 역할을 할 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() 으로 입력 받았다가 시간초과가 생길 수 있다. 사용법을 정리해보자..
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..
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(..
localStorage란? 브라우저에서 제공하는 데이터 저장소 개발자 도구로가서 애플리케이션 >> 로컬 스토리지 에 가면 확인이 가능하다. 1. key : value 형태로 저장가능 2. 문자만 저장가능 3. 최대 5MB까지 문자만 저장가능 4. 사이트 재접속 해도 남아있음 (브라우저 청소하면 삭제됨!) session Storage란? session Storage 는 조금 다르다 이건 브라우저 끄면 날아가는 저장공간! localStorgae 문법 추가, 읽기, 삭제 문법은 다음과 같다. 콘솔창에서 직접 해보면 localStorage 에 추가되고 삭제되는 걸 확인할 수 있다. localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); loca..
맞게 한것 같은데 firebase를 불러오지 못한다. https://exerror.com/solved-export-default-imported-as-firebase-was-not-found-in-firebase-app/ [Solved] export 'default' (imported as 'firebase') was not found in 'firebase/app' To Solve export 'default' (imported as 'firebase') was not found in 'firebase/app' Error According to firebase documents: Update imports to v exerror.com 찾아보니 버전 업그레이드로 인한 호환성 문제같다. 파이어베이스 쓰면..
import Nav from "react-bootstrap/Nav"; function Detail(props) { ... let [tab, setTab] = useState(0); ... { setTab(0); }} eventKey="link-0" > 상품 상세 { setTab(1); }} eventKey="link-1" > 구매 안내 { setTab(2); }} eventKey="link-2" > 상품 후기 { setTab(3); }} eventKey="link-3" > 상품 문의{" "} ); } function TabContent({ tab }) { if (tab == 0) { return content 0; } else if (tab == 1) { return content 1; } else if..
자주 쓰는 if문 작성 패턴에 대해서 공부했다. 컴포넌트 안에서 쓰는 조건문 function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } JSX안에서 쓰는 삼항연산자 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } 이거랑 같은 의미의 코드가 function Component() { return ( { 1 === 1 && 참이면 보여줄 HTML } ) } 이다 저 조건식이 참이면 html을 보여주고 아니면 false가 남는다. 그다음에는 swtich case 조건문 function Component2(){ var user = 'seller';..
state 를 수정해주는 함수를 만들어봤다. let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ], reducers : { addCount(state, action){ let item = state.findIndex((a)=>{ return a.id === action.payload }) state[item].count++ } } }) 저 action.payload에는 파라미터가 들어가는 방식이다. 저 cart의 데이터와 비교해서 파라미터로 받은 id과 같은걸 findIndex로 찾도록 했다. ...
장바구니 페이지를 만들려고 하는데 장바구니에 들어갈 데이터들을 먼저 만들어보려고 한다. 근데 이 데이터들은 Cart.js에서만 쓰이는 것이 아니라 그 상위페이지에서도 쓰일 가능성이 있는데 이번에는 props 말고 redux를 이용해서 state 관리를 해보려고 한다. Redux란? Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리이다. 이걸 설치하면 js 파일 하나에 state 를 보관할 수 있는데 모든 컴포넌트에서 그 state 를 꺼내쓸 수 있다. 큰 사이트 일 수록 이 redux를 쓸 수 밖에 없어서 구인하는 거 보면 redux 숙련도를 요구한다. Redux 쓰기 일단 설치부터 한다. npm install @reduxjs/toolkit react-redux 터미널에 이걸 입..
props 대신할 수 있는 것은? props 싫으면 쓸 수 있는게 Context API(리액트 기본문법) 과 Redux(외부 라이브러리) 가 있다. Context API는 실무에서는 잘 쓰는 편은 아니라고 함. 참고로 알아가자. 언제 쓰는가? 부모 컴포넌트에 있는 state 를 자식 컴포넌트에서 쓰고 싶으면 props 를 썼었다 근데 자식의 자식의 자식의.... 자식의 컴포넌트에게 props를 전송하고 싶다면 작성하기 힘들 것이다. 그런 의미로 쓰는 게 Context API 이다. 먼저 부모 컴포넌트에 다음과 같이 작성한다. export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10,11,12]); (..
컴포넌트를 로드할때 투명도가 0에서 1로 증가하는 애니메이션을 줘보자 먼저 css 파일에 동작 전 스타일을 담을 className을 만든다 그리고 동작 후 스타일을 담을 className을 만든다 transition 속성을 추가한다 원하는 곳에서 사용한다. 먼저 css 파일에 className을 작성한다. .start { opacity : 0 } .end { opacity : 1; transition : opacity 0.5s; } transition은 해당 속성이 변할때 서서히 변경해달라- 라는 의미다. 그리고 다음은 컴포넌트에 적용시킨 모습이다. function TabContent({ tab }) { //tab state 가 변할 때 end를 start 옆에 추가 let [fade, setFade] ..
Lifecycle 컴포넌트는 생성이 될 수 있고(mount) 재렌더링이 될 수 있고(update) 삭제 될 수 있다(unmount) 컴포넌트가 mount 될 때/update 될 때/ umount 될 때 특정 코드를 실행할 수 있다 갈고리를 달아서 실행할 코드를 걸어주는 느낌이다. 그래서 Lifecycle hook 이라고 함. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 이런식으로 써주면 Detail 컴포넌트가 mount 되거나 update 될 때마다 콘솔에 안녕이 찍힌다. useEffect..
js 파일에다가 스타일을 입히는 방법이 있다. 아예 스타일을 입혀서 컴포넌트를 만드는 거다. styled-components npm install styled-components 터미널에 위 명령어 입력하고 (23.05.24 업데이트) 위 명령어 쓰면 npm ERR! Cannot read properties of null (reading 'edgesOut') 이런 오류가 뜬다. 위 명령어 대신 아래 명령어를 사용하자 npm install styled-components@5.3.10 import styled from 'styled-components' 맨 위에 import 해올거 해주면된다. ...import styled from "styled-components"; let Btn = styled.butt..
URL 파라미터 페이지를 여러개 만들고 싶을 때 URL 파라미터라는 문법을 사용한다. path 를 써줄 때에 /detail/:내용 이런식으로 작명을 해주면 detail 뒤에 어느 문자가 와도 된다. 예를 들어 App.js에서 이렇게 사용하면 Detail 컴포넌트에서 id 라는 파라미터를 사용할 수 있다. 대신 Detail 컴포넌트에서 저 url 파라미터를 사용하려면 useParams 라는 걸 import 해와야한다. useParams import { useParams } from "react-router-dom"; function Detail(props) { let { id } = useParams(); return ( {props.shoes[id].title} {props.shoes[id].conten..
설치 리액트에서 페이지를 나눌때에는 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는게 일반적입니다. 터미널에서 npm install react-router-dom 을 입력해서 설치하도록 합니다. 사용하는 법 index.js 에 가서 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 이렇게 을 BrowserRouter 태그로 감쌉니다. 사용하는 방법은 다음과 같습니다. App.js 에 다음과 같이 Routes 와 Route 태그를 이용해서 코드를 작성해줍니다. 아래 예시에서는 Sign up 과 S..
