본문 바로가기
728x90
반응형

분류 전체보기173

Express에서 로그인 서비스 만드는 방법 with.Session 이미 7월 달에 세션으로 로그인 하는 서비스를 만들어본 경험이 있다.근데 이번에 로그인 서비스를 구현할려고 하니 기억이 안나서 구글링이나 하고 있어 직접 포스팅을 해야겠다는 필요성을 느꼈다.개발자 글쓰기 주제를 못 정하겠다면 나처럼 구글링 한 내용을 포스팅 하면 300개는 금방일 것 같다.   1. 필요한 모듈 설치하기세션을 이용하기 위해서는 설치해줄 모듈이 2개 정도 있다. npm install express-sessionexpress에서 제공해주는 express-session을 꼭 설치해야한다. 2. session 사용을 위한 미들웨어 생성하기app.use(cors({ origin: true, credentials: true}))app.use(cookieParser());app.use(sessio.. 2022. 10. 12.
"Edge case를 발견하는데도 도움이 될 수 있다"의 Edge case란? 원티드 프리온보딩 백엔드 챌린지에서 시스템 설계 문제에 대한 접근 법으로 최초 설계안을 제시하기 라는 부분이 있었다. 근데 여기에서 시스템의 구체적 사용 사례를 살펴보면 Edge case를 발견하는데 도움이 된다고 멘토님이 말씀하셨다. 여기에서 Edge case가 무엇인지 몰라 정리하고자 한다. Edge case에 대한 설명을 찾아보니 아래와 같은 설명을 읽었다. 알고리즘이 처리하는 데이터의 값이 알고리즘 특성에 따른 일정한 범위를 넘을 경우 발생하는 문제를 가리킨다. 바로 무슨 말인지 이해가 되지 않았다 😅 좀 더 찾아본 결과 극단적인 버그이지만 해결할 수 있는 상황이라고 이해하게 되었다. 개발자와 기획자는 사용자들이 자신의 설계한 방식대로 서비스를 이용할 것이라 생각한다. 하지만 그것은 매우 위험한 .. 2022. 10. 11.
[JS] 배열에 사용할 수 있는 메소드 모음 - forEach, every, some 1. forEach() const array1 = ['a', 'b', 'c']; array1.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" for문과 비슷하게 유명한 배열 메서드이다. 단, 배열 전체 값을 순회하지만 콜백 함수의 반환 값은 무시한다. 2. every() const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected .. 2022. 10. 10.
[React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1) React에서 가장 좋은 장점은 컴포넌트 기반이기 때문에 재사용이 가능하다는 점입니다! 이번에 회원가입 서비스를 구현한 후 로그인 서비스 구현을 할려고 하니 이미 회원가입에서 만든 페이지를 재사용할 수 있겠다는 생각을 했습니다. 형식이 비슷해서 컴포넌트 재사용을 잘 활용해준다면 편리하게 개발할 수 있을 것 같습니다. 1. 부모 컴포넌트 만들기 - signup.js, signin.js 우선 url에 따라 사용될 로그인 컴포넌트와 회원가입 컴포넌트를 만들어줍니다. import React from 'react'; import AuthForm from './AuthForm'; const Signup = () => { return ( ); }; export default Signup; import React fr.. 2022. 10. 8.
[JS] == vs. === JavaScript 개발자라면 알아야 하는 개념 궁금증 지금가지 ==만 사용해 봤는데 Array equal에 대해서 어제 포스팅을 위해 자료 검색을 하다가 신기한 코드를 발견했다. https://bcoding-lab.tistory.com/345 [JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법 문제 Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다. 정말 평소처럼 아래와 같은 코드를 작성했다. if (i.name === { test: 'test', tset: 'tset' }) { console.log('yes!'); } i.nam.. bcoding-lab.tistory.com '' == false // true '' === false // false 아니.. 둘 다 '같다'를 의미하는 연산자.. 2022. 10. 7.
[JS] 자네, 두 Array를 비교하고 싶지 않은가? feat.객체 비교하는 법 문제 Type 검증과 관련해서 A라는 객체와 B라는 객체가 같은가를 비교하고 싶었다. 정말 평소처럼 아래와 같은 코드를 작성했다. if (i.name === { test: 'test', tset: 'tset' }) { console.log('yes!'); } i.name도 { test: 'test', tset: 'tset'} 여서 콘솔에 yes!라는 메시지가 찍혀야 한다! 하지만.. 콘솔에 그 어느것도 나오지 않았다. 도대체 왜 그럴까? 원인 그 이유는 두 변수를 비교할 때 연산자 === (or ==)를 사용하기만 해도 괜찮다. 하지만 그 두 변수가 객체라면 말이 달라진다. 객체 비교는 여러 값을 포함하고 그 안에 객체를 포함할 수 있기 때문에 쉽지 않다. 방법 그렇다면 어떻게 두 객체를 비교할 수 있을.. 2022. 10. 6.
[JS] forEach에서 비동기 함수 사용 금지! 상황 forEach 함수를 이용하여 배열 안에 있는 id로 axios를 사용할 생각이었습니다. 하지만 아무리 해도 원하는 상태값이 되지 않는 것이었습니다. 위와 같이 postmam으로 실행했을 때 해당 API 결과 값으로 빈 배열이 나옵니다. 원래였다면 아래에 있는 1, 2라는 숫자를 담아져 있는 [1, 2]가 나와야 했습니다. 원인 이유는 바로 forEach 함수는 콜백 함수로 비동기 함수를 받더라도 실행을 기다려주지 않는다고 합니다! Javascript 공식문서에 적혀있는데 역시 공식문서로 정보를 확인해야 합니다. 공식문서 바로가기 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEac.. 2022. 9. 29.
TypeScript + NodeJS(express) + MongoDB 조합으로 API 서버 만들때 주의할 점 들어서며 NodeJS를 쓰는 개발자들은 처음엔 유연한 JavaScript로 시작했다가 어느순간 TypeScript으로 넘어가게 되고 고마움을 느낍니다. 저도 개발을 하면 할수록 TypeScript의 필요성을 느끼고 있고 잘 이용할려고 합니다. 하지만 TypeScript로 API 서버를 만들면서 의아했던 부분들이 있었습니다. 의문 1. 상황 req.body로 클라이언트로부터 서버로 데이터를 전달 받았을 때 type 오류가 발생하지 않습니다. 제가 생각했을 때 아래 두가지 상황에서 분명 오류가 발생하고 데이터가 저장되지 않아야 하는데 그렇지 않았습니다. 2-1. Interface에 정의한 요소가 아님에도 오류가 발생하지 않는다. // interface.ts export interface UserInterfa.. 2022. 9. 28.
TypeScript에서 <T>란 무엇일까? - Generic Type 들어서며 TypeScript는 단순하게 JavaScript에서 Type을 추가해준 언어이다. 하지만 TypeScript를 쓰면서 라는 새로운 아이를 만나게 된다. 처음에는 를 만나거나 쓸 일이 없어 단순하게 넘겼지만 TypeScript로 개발을 하면서 자연스럽게 를 만나게 되었다. 그럼 가 무엇이고 왜 TypeScript에서는 이걸 쓰는지에 대해서 이야기해보도록 하자. 쓰는 이유 JavaScript는 다른 언어들과 달리 type을 입력하지 않기 때문에 자유롭다. 그만큼 위험부담이 높기 때문에 JavaScript 개발자들은 필수적으로 TypeScript를 이용해서 type에 따른 위험 요소를 줄이고자 한다. TypeScript는 함수나 클라스를 사용하기 위해서는 미리 Type을 지정해줘야 한다. 그렇지만 .. 2022. 9. 26.
728x90
반응형

티스토리툴바