dev-merrycris의 등록된 링크

 dev-merrycris로 등록된 티스토리 포스트 수는 19건입니다.

[쿠키] property를 알아보자 [내부링크]

cookies의 property에는 Name, Value, Domain, Path, Expires/Max-Age, Size 등 1. secret은 쿠키에 sign할 때 사용하는 string (backend가 쿠키를 줬다는 걸 보여주기 위함) - 누군가 내 쿠키를 훔쳐서 나인척 할 수도 있기 때문에 secret이 필요함 - string으로 작성해야 하는 강력하고 길게 만들어야 함 2. Domain은 쿠키를 만든 backend가 누구인지를 알려줌 3. Expire은 쿠키가 만료되는 시점을 말함. 만료날짜를 지정하지 않으면 session cookie로 설정. 사용자가 닫으면 session cookie도 끝이남 4. Max-Age는 말그대로 언제 세션이 만료되는 지를 알려줌 (20000 밀리초 . 즉 20초 이..

[node js] express를 활용해 내 컴퓨터로 서버 만들기 [내부링크]

mport express from "express"; const app = express(); app.get("/",(req,res) => res.send("home")); app.get("/about",(req,res) =>res.send("about")); app.get("/contact", (req,res)=>res.send("Contact")); app.get("/login", (req,res) =>res.send("Login")); const handleListening = () => console.log(` Server listenting on port http://localhost:6000 `); app.listen(6000, handleListening); 기본적으로는 4000포트 활용...

클래스 101 상품언어 마케팅 후기 (월간구독제 이용) [내부링크]

옛말에 말만 잘해도 첫냥 빚을 갚는다는 말이 있다. 상품언어만 잘 해도 돈 한 푼 들이지 않고 매출이 소위 '떡상'할 수 있으니 정말 신기한 노릇이다. 같은 말인데도 불구하고 어떻게 표현하느냐에 따라 표현도 아니고 조사 하나만 어떻게 쓰느냐에 따라 느낌이 달라지니 말이다. 다양한 표현이 가능한 한국말이라서 그런가? (영어에 능숙하지 않으니 비교할 수가 없군 ^^;;) 상품언어 마케팅을 강의해주시는 [장문정]님은 책을 통해 처음 만나뵈었었다. '팔지마라 사게하라', '보는 순간 사게 되는 1초 문구' 2권을 읽으며 홍보 방안을 고민하고 문구도 세련되게 바꿨었다. 엄청난 변화가 있었는지는... 기록하지 않는 나쁜 습관을 당당하게 들고 있어서 알 수가 없지만 지금까지 같은 일을 하고 있는 것 보면 효과가 있었..

클래스101 마케팅 수업 _ 장문정의 상품언어 마케팅 [내부링크]

말을 조금 바꿨을 뿐인데 매출이 오른다는 사실을 알게 된 후, 책장을 살펴봤다. 내가 왜 그동안 잊고 있었을까... '장문정'님이 떠올랐다. 홈쇼핑 210억 완판 신화! 현재는 마케팅 컨설팅 회사를 운영 중인 상품언어 전문가 '장문정'님 책으로 보는 것도 좋지만 더 많은 이야기를 듣고 싶어 강의를 찾아보았다. 마침, 블로그 활용법을 공부해 보고자 결제했었던 클래스 101에 그분의 강의가 있었다. (언제까지 하는 지는 모르겠으나 클래스 101은 구독제로 바뀌었는데, 이것 저것 배우기 좋아하는 나에게는 딱 인 것 같다!) 첫 강의를 클릭하고 깜짝 놀랐다. 성우의 목소리가 들려서였다. 가만 생각해보니 이 분을 대면(?) 아니지만 직접 뵙는 건 처음인 것 같았다. 낮지만 부드러운 목소리, 설득력 있는 목소리에서..

글을 어떻게 쓰느냐에 따라 결과가 달라진다. [내부링크]

매일 글 쓰는 마케터에게도 글쓰기는 부담이다 마케팅을 하는 사람에게 주어진 지상 최대 과제는 내가 맡은 물건이 잘 팔리게 하는 일이다. 그런데 어쩐지... 요즘은 그 과업을 잘 수행하지 못하고 있다. 소비자의 주머니 사정이 팍팍해진 것이야 내 지갑사정을 보면 더욱 잘 느끼기에 말할 것 없지만, 그럼에도 불구하고 나는 내 물건들을 팔아야 하기에, 하루 종일 모니터와 씨름한다. 나처럼 온라인을 통해 고객을 만나는 사람에게는 '말빨' 보단 '글빨'이 가장 중요한 능력이다. 그래서인지 많은 청중들 앞에서서 말을 해야 하는 부담감을 깜박이는 커서를 보며 느끼곤 한다. 어제도 그와 같은 날의 연속.... 결과를 변화시킨 말 한마디 며칠 째 상담 전화가 뜸했다. 전화가 와야 상담도 좀 더 하고, 예약성사로 이끌어 낼..

js 공부 따옴표 출력하기 [내부링크]

따옴표 출력하기 큰 따옴표 " ", 작은 따옴표 ' '가 서로 혼용되서 사용될 경우 자바스크립트 엔진이 제대로 해석할 수 있도록 구분을 해야합니다. 다음과 같이 큰 따옴표로 감싼 뒤, \ 역슬래시를 문자열에 표현할 따옴표 앞에 적어줍니다. 마찬가지로 작은 따옴표로 감싼 뒤에도 가능합니다. 큰 따옴표 안에 작은 따옴표는 문제가 되지 않습니다. 작은 따옴표 안에 큰 따옴표도 문제가 되지 않습니다. "\"It's all right.\""; '"It\'s all right."'; 따라서 위와 같은 방법을 이용해 문자열을 리턴합니다. function solution() { return '"It\'s all right."';; } N줄에 걸쳐서 입력 받았을 때, 어떤 걸 기준으로 나누고 배열로 만들기 functio..

js 중첩 조건문, 반복문 예시 (외워야 산다!!) [내부링크]

중첩 조건문 const a = 20; const b = 40; if (a!==b) { if(a > b) { document.write("a > b") } else { document.write("a < b") } } 반목문 for 문 for (초기화한 변수값; 조건;증감 표시) { 수행할 명령 } for (let i = 0; i

js 기초_ 연산자 수업 [내부링크]

console.log(++num); num+1 후 출력 console.log(--num); num-1 후 num 출력 console.log(num++) num 출력 후 ㅜㅕㅡ+1 console.log(num--) num 출력 후 num-1 consoel.log( 10 ==20) 값이 같다 consoel.log( 10 === 20) 데이터 타입이 같다 consoel.log( 10 !==20) 값이 같지 않다 consoel.log( 10 >20) consoel.log( 10 >= 20) 이상 consoel.log( 10 < 20) consoel.log( 10 true consoel.log( 10 == 20 || 10 == 20) 둘 중 하나의 답이 같다 => true

[webpack]노마드 코더 유튜브 클론코딩 webpack part [내부링크]

* webpack 사용 npm => npm i webpack webpack-cli 1. webpack은 최신 JS, scss 등을 압축, 변형등의 과정을 거쳐 브라우저가 이해할 수 있도록 만들어 주는 것 정말 구식 JS만을 webpack 코드에 적어야 하기에 import가 아니라 const / export default 이 아니라 module.exports를 사용해야 함 webpack configuration 파일에는 entry가 필수 entry는 소스코드를 의미함 (처리해야 할 소스코드가 들어 있는 파일) 또한 webpack의 저장 경로는 path에서 설정하는데 이 때 절대경로로 설정해야 함. - 절대경로란, 정확히 찾아들어갈 수 있는 경로. 예를 들자면 => /user/컴퓨터사용자명/document/..

[Fetch] 백엔드에서 fetch 사용하기 [내부링크]

Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch() (en-US) 메서드로 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있습니다. Fetch API - Web API | MDN Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니 developer.mozilla.org 이전에는 이런 기능을 XMLHttpRequest를 사용해 할 수 있었습니다. Fetch는 더 좋은 대체제면서, 서비스 워커..

[input] range에 눈금 만드는 방법 [내부링크]

How are you? value를 5로 설정하면 가운데서 시작 . step은 1칸의 설정값, min,max는 최소값, 최대값을 설정 범위

[node.js] session에 저장된 쿠키 id를 데이터베이스에 저장하는 방법 [내부링크]

내가 사용할 저장소는 MongoDB npm install connect-mongo 설치한 다음에 sever.js(최상위 라우터와 미들웨어가 포함되어 있는 js 파일)에 import mongostore를 진행 import MongoStore from "connect-mongo"; app.use(session({ secret:"Hello!", resave:true, saveUninitialized:true, store:MongoStore.create({mongoUrl:"mongodb:몽고저장소 주소"}) })) 이렇게 해놓으면 서버를 종료(node.js) 하더라도 데이터베이스에 기록이 남아 누가 로그인 되었는 지 확인 가능

[앱개발] 스파르타 코딩 클럽 2주차 [내부링크]

import React from 'react' import {View,Text,StyleSheet,Image, TouchableOpacity} from 'react-native' export default function AboutPage(){ const aboutImage = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png" return ( 앱을 만들어 보았습니다. 해보니 신기하기도 어렵기도 하네요 제대로 만들 수 있게 되면 좋겠습니다. 링크는 어떻게 연결하는 거지요? ) } const styles = StyleSheet.create({ container: { flex:1, backgroundColor:"#ccc", ..

[node.js]로그인 시 유저를 기억하게 만드는 법 1 [내부링크]

유저에게 쿠키를 보내야 함 쿠키? 먹는 것?! 쿠키를 알기 위해선 먼저 세션을 알아야 한다. 세션은 - 백엔드와 브라우저 간에 어떤 활동을 했는지 기억하는 것을 말함 - 세션이 사라지면 다시 로그인을 해야 함 - 즉, 세션은 브라우저와 백엔드 사이의 memory, history 같은 것 - 작동하기 위해선 백엔드와 브라우저가 서로에 대한 정보를 가지고 있어야 함 stateless(무상태) - 백엔드와 브라우저가 한 번 연결되고 끊어지는 상태를 말함 유저를 기억하기 위해서는 뭔가를 남겨야 한다. 즉, 유저가 백엔드에 뭔가 요청할 때마다 누가 요청하는 지 알 수 있게 유저가 로그인 할 때마다 유저한테 뭔가를 줘야함(작은 text 같은 것) -> 유저가 백엔드에 뭔가를 요청할 때, 받은 텍스트도 함께 줘야함(..

[시멘틱 태그] 웹사이트 구성에 의미를 부여하는 태그 [내부링크]

HTML을 작성할 때 무심코 사용했던 div 앞으로는 div 대신 시멘틱 태그를 사용하자! 시멘틱 태그란? - 의미를 가지고 있는 tag 예를 들자면 header, main, footer, aside 등 . 태그만 봐도 무엇인지 우리 뿐만 아니라 컴퓨터가 인식할 수 있는 태그 시멘틱 태그의 장점 - 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 키워드로 간주합니다. (SEO에 영향을 미침) - 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 푯말로 사용 - 개발자에게 태그 안에 채워질 데이터 유형을 제안함 의미론적 요소(element)들 사용가능한 백 여개 정도의 요소(elements)들이 있습니다. 출처 : https://developer.mozilla.org/ko..

비번을 비번답게 만들어주는 기술 password hassing(패스워드해싱) [내부링크]

데이터베이스에 암호를 저장하면 안된다! 해킹의 위험이 있기 때문에 참고할 영상 HTML 삽입 미리보기할 수 없는 소스 해싱은 일방향 함수임 (중요한 부분! 절대 되돌릴 수 없다. 출력된 값으로 입력된 값을 알아낼 수 없다. 입력된 값은 항상 같은 출력값을 가진다. ) 패스워드 해싱해주는 패키지 > npm i bcrypt userSchema.pre('save', async function() { console.log("Users password:", this.password); this.password = await bcrypt.hash(this.password,5); console.log("Hashed password", this.password); }) 뿐만 아니라 bcrypt.hash(this.pas..

[JAVA] JAVA & Spring 기초 공부 [내부링크]

◼︎ 프로그램밍 - 컴퓨터가 일을 수행하도록 명령어를 만드는 일 - 컴파일 -> 컴퓨터가 실행 가능한 기계어를 만드는 일 - 컴파일러 -> 기계어로 만들어주는 프로그램 ◼︎ 자바의 장점 - 안정적인 언어이다. - 모호함과 불안함이 없다. - 플랫폼의 영향을 받지 않는다. (리눅스든 윈도우든 상관이 없다) -> 운영체제에 맞는 JVM(가상머신)을 설치해서 사용하면 됨. - 객체지향 언어이기에 유지 보수가 쉽다. ◼︎ 객체 지향 언어 - 프로그램의 구현을 시간의 흐름순이 아니라 객체간의 관계와 협력을 기반으로 프로그램 하는 것 ( 절차지향 언어.프러시얼 프로그래밍.(c 언어) // ex)이거 한다음->이거하고 -> 이거 하면 -> 된다!) -> 객체 = 프로젝트 (ex. 회원 프로젝트 , 주문 프로젝트, 상..

[mongodb] 사용할 때 쓰는 key [내부링크]

1. 몽고 사용하기 -> mongo 2.내가 가진 db보기 -> show dbs 3. 현재사용 중인 db 확인 -> 유 4. 사용할 db 선택하기 -> use (만든 db의 이름) 5. db컬렉션 보기 -> show colloections 6. db 컬렉션 안에 documents 보기 -> db.collectionName.find() 7. db컬렉션 안에 documents 내용 모두 제거하기 -> db.collectionName.remove({})

String을 배열로 배열을 String으로 만드는 방법 [내부링크]

유튜브 클론 코딩 중 input에 들어가는 입력값을 특정형태로 출력해야 하는 상황이 생겼다. 이때 아래의 코드를 사용하면 손 쉽게 유저가 사용한 입력값을 해시태그로도 그 입력값을 활용해 해시태그로 출력할 수도 있었다. "a,b,c,d".split(",") 출력값 => [a,b,c,d,] "a,b,c,d".split(",").map(word => `$#{word}`) 출력값 => [#a,#b,#c,#d] 유저가 입력한 출력값은 배열 형태로 데이터베이스(나는 mongoose)로 저장이 되었기에 a,b,c,d로 출력하기 위해선 아래의 코드를 작성해야 했다. [#a, #b,#c,#d].join() 출력값 => "a","b","c","d"