개발 기록기록📝

영속성 컨텍스트란 엔터티를 영구 저장하는 환경 이라는 뜻 엔티티 매니저를 통해서 영속성 컨텍스트에 접근한다. EntityManager.persist(entity) -> 엔티티를 영속성 컨텍스트에 저장한다는 뜻!! 엔티티의 생명주기 비영속(new/transient) 영속성 컨텍스트와 전혀 관계가 없는 새로운 상태 //객체를 생성한 상태(비영속) Member member = new Member(); member.setId("member1"); member.setUsername("회원1"); 영속(managed) 영속성 컨텍스트에 관리되는 상태, 1차 캐시에서 관리되는 상태 //객체를 생성한 상태(비영속) Member member = new Member(); member.setId("member1"); mem..

1. 웹팩의 등장 배경 import/export 구문이 없었던 모듈 이전의 상황을 살펴보자. math.js: function sum(a, b) { return a + b } // 전역 공간에 sum이 노출 app.js: sum(1, 2) // 3 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이름 공간에서 'sum'을 찾은 뒤 이 함수를 실행한다. 문제는 'sum'이 전역 공간에 노출된다는 것. 다른 파일에서도 'sum'이란 이름을 사용한다면 충돌한다. 1.1 IIFE IIFE(Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 Javascript Function 을 말한다. 전역 스코프가 오염되..

1. Node.js 란 무엇일까 기존 웹에서는 정적인 html 파일에 다이나믹한 변화를 주기 위해 JavaScript가 쓰이고 있었다. 이 언어를 해석하는 주체는 브라우저로 각 브라우저 마다 JS 해석 엔진이 있다. 예로 크롬은 V8, 익스플로러는 Chakra 등. 브라우저에서만 동작하던 JS를 V8엔진에 살을 붙여서 브라우저가 아닌 다른 환경에서도 쓸 수 있게 만든 것이 Node.js이다. 쉽게 말해 자바스크립트 실행 환경이라고 볼 수 있다. 따라서 Node.js만 있으면 브라우저 없이도 자바스크립트 문법을 실행할 수 있다. 2. 프론트엔드 개발시 Node.js가 필요한 이유 최신 스펙으로 개발 가능 빌드 자동화 개발 환경 커스터마이징 3. Node의 REPL 기능 REPL(read-eval-print..

9.1 타입 변환이란? 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 원시 값은 변경 불가능한 값(Immutable value)이므로 변경할 수 없다. 9.2 암묵적 타입 변환(implicit coercion) = 타입 강제 변환(type coercion) 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다. 9.2.1 문자열 타입으로 변환 +연산자 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작한다. 문자열 연결 연산자의 피연산자 중 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다. // 숫자 타입 0 + '' // -> "0" -0 + '' // -> "0" 1 +..

연산자 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듦 값으로 평가된 피연산자를 연산해 새로운 값을 만듦 피연산자 연산의 대상 값으로 평가될 수 있는 표현식 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 함 7.1 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듦. 산술 연산이 불가능한 경우 NaN 반환 7.1.1 이항 산술 연산자 2개의 피연산자를 산술 연산하여 숫자 값을 만듦 피연산자의 값을 변경하는 부수 효과가 없다. => 언제나 새로운 값을 만듦 이항 산술 연산자 의미 + 덧셈 - 뺄셈 * 곱셈 / 나눗셈 % 나머지 7.1.2 단항 산술 연산자 1개의 피연산자를 산술하여 숫자 값을 만듦 단항 산술 연산자 ..

리액트에서 문자열에 '\n'이 있는데도 개행이 제대로 되지 않는 경우, 일반적으로 HTML에서는 공백과 개행을 무시하기 때문에 이러한 동작이 발생할 수 있습니다. 이를 해결하기 위해서는 다음과 같은 방법들을 시도해 볼 수 있습니다. 1) 태그 사용 태그는 내부의 텍스트를 그대로 표시하고 개행을 유지하는 태그입니다. 문자열을 태그로 감싸서 렌더링하면 개행이 제대로 표시될 수 있습니다. {yourString} 2) CSS 속성 사용 CSS의 white-space 속성을 이용하여 개행을 유지하도록 설정할 수 있습니다. white-space: pre-line;을 적용하면 개행이 있는 부분에서 개행이 유지됩니다. {yourString} 3) 개행 문자를 태그로 변환 문자열 내의 '\n'을 태그로 변환하여 개행을 ..

useState가 필요하지 않은 경우 컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야하는 경우 => 특정 플래그 값 혹은 한 번 고정된 값을 컴포넌트에서 계속해서 사용하는 경우 isMount 변수는 본인이 속한 컴포넌트와 수명을 같이한다. 불필요한 리렌더링을 방지하고, 렌더링 프로세스와 관계없이 값을 가변적으로 저장하고 싶은 경우 useRef를 고려해 볼 수 있다.

1) 상태를 플래그로 바꾸기 a조건과 b조건에 따라 로그인여부를 관리하는 상태는 굳이 필요없다. 매 렌더링때마다 컴포넌트 안의 isLogin 플래그가 다시 계산 되게 할 수 있다! 위와 같은 방식으로 활용 가능하다! 2) 불필요한 상태 제거하기 특정 값을 만족하는 리스트만 따로 저장하고 싶을 때 useState를 사용할 때가 있는데 비추천된다. 업데이트 되는 값이고, 렌더링마다 고유의 값을 가질 수 있다고 가정할 수 있을 때 상태를 만들지 않고, 내부의 변수로 사용할 수 있다. 리액트 내부의 변수는 렌더링마다 고유의 계산된 값을 가진다.

스타일링 일관성에 대한 고민 중간에 프로젝트에 투입되고 보니, 현재 css, scss, stlyed-component, tailwind css가 혼합되어 사용되고 있다.. SE 각자 입맞에 맞게 쓴 것 같은데 다양한 선택지가 제공되는 만큼 유연성을 가져갈 수 있지만, 이는 여러가지 스타일링 방법이 혼합됨에 따라 복잡성을 증가시키고, 코드의 일관성을 유지하기가 어렵다. 스타일링 가이드를 어떻게 가져가면 좋을지 고민하다가 내린 결론은 scss를 기본으로 필요에 따라 styled-component를 활용하면 될 것 같다고 생각했다. 현재 퍼블리싱 코드를 보면 페이지별로 html 파일로 주고 있고, html 파일을 보면 외부에 정의한 css 파일의 클래스를 가져다가 쓰고 있다. 이러한 구조라면 이를 다시 tai..

리액트 컴포넌트 내부에 변하지 않는 싱글 리터럴 객체가 있는 코드 INFO 객체는 어디에서도 업데이트 되고 있지 않다. 가장 큰 문제점은 INFO 를 의 children으로 내리고 있고, ShowCount 컴포넌트의 props로 내리고 있다. INFO가 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될 때마다 같은 값이라도 또 다시 참조해서 트리거하고 계산해야 될 시기, 기억해야 될 시기에 대한 로직이 전혀 없으므로 불필요하게 참조하고 있다. 컴포넌트 내에서 useState로 관리할 수도 있지만 어쩌피 상태가 변하지 않기 때문에 NotUpdateValue 컴포넌트 외부로 INFO를 옮겨준다. JSX 내부에서 참조하고 있더라도 같은 파일 내에 있으므로 참조가 가능하다. 이 컴포넌트가 다시 트리거, 마운트..