전체 글

JSX로 UI 표현하기 jsx(JavaScript Extensions)란?확장된 자바스크립트의 문법  jsx파일에서는 자바스크립트와 HTML을 혼용하여 사용가능하게 한다.   💡JSX 주의 사항1. 중괄호 내부 자바스크립트 표현식만 넣을 수 있다. 삼항 연산자나 변수의 이름처럼 특정 값으로 평가될 수 있는 코드(if문, for문 안됨)2. 숫자, 문자역, 배열 값만 렌더링된다.(boolean, undefined, null은 오류는 발생하지 않지만, 화면에 렌더링도 안됨/객체는 화면에 바로 렌더링 되지 않고 값을 뺴와서 해야함)3. 모든 태그는 닫혀있어야 한다.4. 최상위 태그는 반드시 하나여야만 한다.// JSX 주의 사항// 1. 중괄호 내부 자바스크립트 표현식만 넣을 수 있다.// 삼항 연산자나 변..

React.js란?Meta(Facebook)이 개발한 오픈소스 JavaSecript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술 React.js 특징1. 컴포넌트를 기반으로 UI를 표현한다. 2. 화면 업데이트 구현이 쉽다. 3. 화면 업데이트가 빠르게 처리된다.  특징 1. 컴포넌트를 기반으로 UI를 표현한다.컴포넌트(Component): 구성요소, 화면을 구성하는 요소, UI를 구성하는 요소를 말중복을 줄일 수 있다. 특징 2. 화면 업데이트 구현이 쉽다.선언형 프로그래밍: 과정은 생략하고 목적만 간결히 명시하는 방법(식당에서 주문하는 것과 유사함((과정은 모르겠고!)토마토 파스타 하나 주세요.)) ↔ 명령형 프로그래밍: 목적을 이루기 위한 모든 일련의 과정을 설명하는 ..

Node.jsJavaScript 실행 환경(Run Time) = 구동기JavaScript 코드를 실행시켜주는 구동기  npm(node pakage manager)Node.js의 패키지를 관리하는 도구새로운 패키지를 생성하던가, 외부 라이브러리를 설치/삭제 등 기능을 제공  프로젝트(Project)Node.js에서는 프로젝트를 패키지라 부른다.패키지: Node.js에서 사용하는 프로그램의 단위  모듈(Module)이란?기능별로 나뉘어진 각각의 자바스크립트 파일들을 모듈이라고 부른다. 모듈 시스템?모듈을 생성하고, 불러오고, 사용하는 등의 모듈을 다루는 다양한 기능을 제공하는 시스템 아래 예시)CJS, ESM는 export, import 하는 방법이 다름..Math.js에서 만든 메서드를 index.js에서..

Truthy와 FalsyThuthy & Falsy란?참이나 거짓을 의미하지 않는 값도, 조건문 내에서 참이나 거짓으로 평가하는 특Thuthy한 값 : 참 같은 값Falsy 한 값 : 거짓 같은 값이를 이요하면 조건문을 간결하게 만들 수 있다.- JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한다.- JavaScript의 모든 값은 Truthy하거나 Falsy 하다. // 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n;if (!f1) { // ture가 됨.. console.log("falsy");}// 2. truthy한 값// -> 7가지 F..

Inline embedding인라인 임베딩 방법은 이미지를 base64로 인코딩 하는 방법이다. 쉽게 말하면 이메일에 이미지를 문자열로 변환하여 HTML 태그를 통해 이메일에 이미지를 내장하는 방법이다. 굉장히 간단하지만 잘 사용하지는 않는다. 이메일대략 이런식으로 첨부할 수 있다. 하지만 메일이 무거워지고(용량이 커짐) 대부분의 포털사이트들은 base64로 인코딩하여 이미지를 임베딩하는 것을 차단한다. 그러므로 PASS!출처: https://zangzangs.tistory.com/46 [장장스:티스토리]   💡SMTP(Simple Mail Transfer Protocol)는 이메일을 전송하는 데 사용되는 인터넷 표준 프로토콜SMTP의 주요 특징1. 이메일 전송 프로토콜: 클라이언트가 작성한 이메일을 ..

1. 소프트 삭제(Soft Delete)란?소프트 삭제는 데이터를 실제 삭제하지 않고 삭제된 것으로 표시만 하는 방법입니다. 이는 데이터를 삭제한 후에도 복구하거나 삭제 시점을 추적할 수 있는 장점이 있습니다. 소프트 삭제를 구현하는 방법 중 하나는 데이터베이스 테이블에 isDeleted와 같은 플래그를 추가하고, 해당 값을 true 또는 1로 설정하여 삭제된 레코드를 표시하는 것입니다.2. Hibernate에서 소프트 삭제 구현Hibernate에서는 소프트 삭제를 쉽게 구현할 수 있는 기능을 제공합니다. 주로 **@SQLDelete**와 @Where 어노테이션을 사용하여 데이터를 물리적으로 삭제하는 대신, 논리적으로 삭제된 것으로 처리할 수 있습니다.3. @SQLDelete 어노테이션 사용@SQLDel..

구글 로그인 참고 링크https://velog.io/@bdd14club/%EB%B0%B1%EC%97%94%EB%93%9C-2.-%EA%B5%AC%EA%B8%80-%EC%86%8C%EC%85%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 스프링 부트 구글 소셜 로그인 구현하기해당 글은 아마란스💐가 작성했습니다.이번에 두레 서비스의 소셜 로그인 기능을 맡게 되어, 기능을 구현한 과정을 정리해보았습니다.구글 소셜 로그인을 구현한 다른 문서들을 참고하며 이해velog.io       전체 흐름클라이언트 - 'Google 로그인'부터 '인가 코드 전달'까지서버 - 구글 서버에서 인가코드를 전달받은 후부터 '서버 Access Token 반..

변수와 상수// 1. 변수// 반드시 초기화해야하는 것은 아님..let age = 27;console.log(age);age = 30;console.log(age);// 2. 상수// 한 번 선언되면 값을 바꿀 수 없기 때문에, 선언과 동시에 초기 값을 할당해야 한다.// 반드시 초기화가 되어야 함..// const birth = "1996.01.01";// 3. 변수 명명규칙(네이밍 규칙)// 3-1. $,_ 제외한 기호는 사용할 수 없다.let $_name;// 3-2. 변수의 이름은 숫자로 시작할 수 없다.let name1;let _2name;// 3-3. 예약어를 사용할 수 없다.// 자바스크립트가 이미 쓰고 있는 것.// let let// 4. 변수 명명 가이드let a = 1; // 이런건 ..

한/영 변환 기능을 구현하며 몇 가지 깨달음을 얻었다.처음에는 "화면이 내가 원하는 대로만 보이면 된다"는 생각으로 작업을 시작했다. 그래서 MUI에서 제공하는 컴포넌트 중 Breadcrumbs 디자인이 마음에 들어 선택해서 활용했다. 그러나 Breadcrumbs는 단순히 디자인 요소가 아니라 "내비게이션 경로"와 같은 순서를 내포하는 의미를 가지고 있었다. 예를 들어, 내폴더 > 다운로드 폴더처럼 사용자가 경로를 따라 이동하는 구조를 나타냈다.이를 통해 컴포넌트를 선택할 때 단순히 디자인만 고려할 것이 아니라, 해당 컴포넌트가 가진 의미와 역할까지 이해하고 활용해야 한다는 점을 깨달았다. 내가 구현하고자 했던 것은 단순히 한국어/영어 변환 기능으로, 사용자가 한국어나 영어를 선택할 수 있는 기능이면 충..

서버사이드 렌더링, 클라이언트 사이드 렌더링  SSR - 서버 사이드 렌더링- HTML 최종 결과를 서버에서 마늘어서 웹브라우저에 전달- 주로 정적인 화면에 사용- 관련 기술 : JSP, 타임 리프 -> 백엔드 개발자 CSR - 클라이언트 사이드 렌더링- HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용- 주로 동적인 화면에서 사용, 웹 환경을 마친 앱 처럼 부분부분 변경할 수 있음- 예) 구글지도, Gmail, 구글캘린더- 관련 기술 : React, Vue.js -> 웹 프론트엔드 개발자 참고- React, Vue.js를 CSR + SSR 동시에 지원하는 웹 프레임워크도 있음- SSR을 사용하더라도, 자바스크립트를 사용해서 화면 일부를 동적으로 변경 가능