전체 글

[#5] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 이벤트 버블링- 이벤트가 자식요소에서 부모요소로 전파되는 현상- 막기위한 방법으로는 e.stopPropagation()을 사용 const $table = document.createElement('table'); const rows = []; let turn = 'o'; const callback = (e) => { if (e.target.textContent) { alert('빈칸이 아닙니다.'); return; } e.target.textContent = turn; ..

[#4] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 배열 중복 확인하는 방법a) Set 함수 사용const numbers = [1, 2, 3, 4, 5, 6]if (new Set(numbers).size !== 6) { return alert('중복된 숫자를 입력했습니다.');}b) forEach, inclues 사용 (Set 함수 없이)const numbers = [1, 2, 3, 4, 5, 6];const newNumbers = [];numbers.forEach((v) => { // 각 원소들을 돌면서 if (!newNumbers.includes(v)) { // 새로운 배열에 없는 값인 경우 집어넣기 newNumbers.push(v); // 즉, 이미 있는 값인 경우 안담김 }});if (newNumber..

Auth.js(Next-Auth)의 useSession vs getSession

useSession()- 페이지 로딩없이 session을 업데이트 할 수 0- 만일 인수를 보내지 않으면 서버로부터 리로드 된다.- 만일 session에서 데이터를 변경하고 싶은 경우// pages/profile.tsximport { useSession } from "next-auth/react"export default function Page() { const { data: session, status, update } = useSession() if (status === "authenticated") { return ( Signed in as {session.user.name} {/* update함수를 사용해서 백엔드에 보냄 */} upda..

[#3] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. Math.random( ) 생각하는 과정let m = Math.random()// 1-1 (디폴트)0  2. 선언할 때, 배열 vs 객체배열: 단순히 값만 담을 때객체: 각 값에 키값, 즉 이름이 필요할 때 3. event.preventDefault()원래 내장된 객체의 기능을 제거하고 싶을 때 ( , )ex) form 객체에서 button 클릭 시, 자동으로 새로고침 되는 경우-> 기존에 담아놓은 변수들이 비워지게 됨-> 새로고침 안되게 event.preventDefault() 사용 4. 중복값을 제거하는 Set 함수Set 함수 길이는 length 대신 size사용// 사용법const array = [1, 1, 2]const a = new Set(array) // [1, 2]a.size // 2..

[#2] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 고차함수 (코드 정리)let num1 ='';let num2 ='';let operator ='';const $result = document.querySelector('#result');// #1const onClickNum = (number) => { return () => { // return 안쓸 경우 'return undefined;'가 생략되어있기 때문에 결과 값이 'undefined'가 됨 (event) => { // () => {} 함수를 return에 넣어주면 해당 함수가 바로 실행됨 => 고차함수 if (operator) { Number(num2) += number; }else{ Numbe..

Avatar 컴포넌트 안에서 이미지 비율 안깨지게 하기 with Shadcn/ui

(Next.js app router, Shadcn/ui 라이브러리 사용중)Shadcn/ui 라이브러리에서 제공해주는 기본 Avatarimport { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"(...) CN 부모요소(Group) 추가 Shadcn/ui 는 기본적으로 tailwind CSS 를 사용할 수 있다. 부모 요소인 Avatar에 group을 지정해주고 image를 넣는 부분에는 'object-cover'을 적용해주면 사진이 비율 안깨지게 들어온다.  // size는 가로 세로 크기 CN // 이미지 alt

ERROR | Module not found: Error: Can't resolve '@pages/UserListPage' in '.../src/routes' Webpack에러

상황과제로 CRA없이 React, Typescript, Webpack 직접 설치 중에러 직면"Module not found: Error: Can't resolve '@pages/UserListPage' in '.../src/routes'"위의 에러는 webpack의 번들링 과정중에서 일어난 에러로 tsconfig.json에 설정해 놓은 alias를 읽지 못해서 '@'를 사용했을 때 해당 경로 및 모듈을 이해하지 못하는 것이다.해결 방안(혹시 cra(create-react-app)를 사용했다면 'craco-alias'라고 구글링하면 쉽게 해결가능하다!)/webpack.config.js(...) resolve: { // 번들링을 할 파일 설정 extensions: ['.js', ..

챗지피티와 공부한 Git에 대해..

[모든 답변은 chat gpt 4o에서 발췌했습니다]Git이란?| 분산 버전 관리 시스템으로, 소스 코드의 변경 사항을 추적하고 여러 명이 공동 작업을 할 수 있도록 도와줍니다. Git에서 해시(Hash)란?| 커밋을 고유하게 식별하기 위해 사용되는 40자 길이의 SHA-1 해시 값을 의미합니다. 이 해시 값은 커밋의 내용, 작성자, 작성 시간 등의 정보를 바탕으로 생성됩니다. SHA-1 해시는 Git의 버전 관리 시스템에서 매우 중요한 역할을 합니다.해시의 특징-- 고유성: 각 커밋은 고유한 해시 값을 가지며, 동일한 내용이라도 커밋 시간, 작성자 등이 다르면 다른 해시 값을 가집니다.-- 불변성: 커밋의 내용이 변경되지 않는 한 해시 값도 변경되지 않습니다. 따라서 커밋의 무결성을 보장합니다.-- 추..

JWT 다루기 with Next.js app router + auth.js

👩🏻‍💻 로직로그인 -> 프론트엔드 서버 -> 백엔드 서버 요청 -> 프론트엔드 서버로 쿠키담은 response 날려줌 -> 문자열로 된 토큰을 객체로 만들어주는 쿠키 굽기 -> 브라우저에 쿠키 심기  ** 프론트 서버는 공용서버이기 때문에 쿠키를 심으면 안된다. 무조건 브라우저에 심어야한다.- next-auth는 auth.js로 이름이 바꼈다. v.4 버전- Auth.js가 해주는 일쿠키 로그인의 가장 큰 보안 위협인 CSRF를 알아서 막아준다.1. auth.js 설치yarn add next-auth@beta @auth-core공식 홈페이지를 들어가보면 아직은 v.5의 beta버전으로 사용할 수 있는 것을 확인할 수 있다. 그런데 이게 Next.js의 app router와 맞다. 2. auth.t..

복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. typeof NaN은 number이다.2. 숫자parslint("3월") // 3Number("3월) // NaN3. falsy 값!!false // false!!'' // false!!NaN // false!!0 // false!!undefined // false!!null // false4. typeof의 버그typeof null // object (원래는 null이 떠야하지만 자바스크립트 언어 개발자의 실수로 굳혀짐)-> == null 로 체크해야함5. 선언문let num = 1 // num은 변수명6. 덧셈 연산자// 셋다 동일i = i + 1i += 1i++7. for문for(시작(1); 조건식(2); 반복식(4)) 동작문(3)// 1->2->3->4->2->3->4->...for(l..

ERROR | 'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.

ERROR | 'string' 형식의 식을 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.type Colors = { skyblue: string; lightGreen: string; green: string; blue: string; violet: string; pink: string; yellow: string; orange: string; peach: string;};type MainColor = Pick;type SubColors = Omit;export const colors: Colors = { skyblue: 'bg-main-skyblue', lightGreen: 'bg-sub-lightGreen', green: 'bg-sub-green'..

[#7] Mongoose, express.js를 사용해서 User API 만들기

1. 설계mongoDB는 다른 관계형 DB처럼 스키마 설계가 필요없기 때문에 프론트엔드 개발자에게 딱이였다.mongoDB는 매우 유연하게 스키마 수정이 가능하고 스키마 디자인시 고려하는 디자인 방식은 Embedding과 Referencing이 있지만 나는 단순히 key-value 형태이기 때문에 위의 디자인 방식조차도 복잡하게 느껴졌다. 그래서 단순하게 One-to-One, 즉 key-value로 모델링 했다.{ "_id": "ObjectId('mdkalsfmk2')", "name": "marais", "email": "marais@gmail.com", "password": "maraispw",}위와 같은 User document가 있을 때, name 이나 email 와 같이 하나..

[#6] Server 셋팅하기 | Express.js, MongoDB, and Mongoose

초반엔 supabase를 이용해서 백엔드를 해결하려고 했었다. 하지만, 얼마 전에 팀원 한분이 나가면서 총 2명이서 프로젝트를 진행하게 되었다. 이참에 둘이서 시간이 좀 걸리더라도 나중에 필요한 기술들을 지금 해보자라는 이야기가 나왔고 연차가 쌓일수록 거의 대부분이 풀스택을 하는 것이 보였다. 그래서 Express.js를 이용해서 간단한 user 관리와 todo에 필요한 CRUD 정도만 해보기로 했다. 간단한 설명과 함께 최신에 올라온 Express.js, MongoDB, Mongoose 설치방법이 없어서 정리한다.  Express.js란?공식 문서화면에 제일 잘 설명되있다. Express는 웹 및 모바일 애플리케이션을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레..

제 2회 미래에셋 MEET-UP Project 후기 | AI 시대의 모든 것

이번주는 미래에셋 해외교환 장학생이라면 누구나 신청가능한 제 2회 미래에셋 MEET-UP Project에 당첨되어 서울을 다녀왔다. 기대보다 더 퀄리티 좋은 강의를 들을 수 있어서 감사했다.  4월 초에 아래의 포스터를 메일로 받았다. 까먹고 있었던 미래에셋 장학생 이력이 이렇게 도움이 될줄이야.. 개발자로서 또 chat gpt 이야기에 빠질 수 없어서 바로 신청했었다.  당일날 미래에셋 센터원에 도착했고 건물 크기에 압도당하면서 들어갔다. 케이터링이 나를 맞이해주었다. 되게 예쁘게 해놓으셨다. 핑거푸드st야무지게 담아와봤다.   김대식 강사님의 도서와 usb, 무선충전기, 볼펜이 기프트로 각 자리마다 올려져 있었다😚 1시간 반가량 정도 레크레이션을 하면서 같은 조와 친해지는 시간을 가졌는데 진짜 레크..

[#5] Atomic Design Pattern 적용하기

기본 셋팅과 디자인을 끝내고 본격적인 개발을 들어가려고 하는데 한 팀원이 "그런데, 저희 디자인 시스템은 어떤거 써요?"라는 질문을 던졌다. 솔직히 생각도 못하고 있던 부분이였다. 그래서 "어,, 생각안해봤는데, 혹시 사용하고 싶으신 것 있으세요?"라고 여쭤보았더니 Atomic Design을 사용해본 적이 있다고하셨다. "그럼 제가 잘 몰라서 그런데,, 이번주 스프린트로 atomic design pattern 리서치하고 적용해볼께요!" 그래서 이 디자인을 적용하기로 했고 내가 폴더구조를 만들어서 main에 push 한 뒤, 그 다음부터 마크업을 시작하기로 했다. Atomic Design Pattern이란?Atomic Design은 사용자 인터페이스를 구축하기 위한 디자인 시스템을 만드는 방법론이다.Ato..