개발 기록기록📝

연산자 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듦 값으로 평가된 피연산자를 연산해 새로운 값을 만듦 피연산자 연산의 대상 값으로 평가될 수 있는 표현식 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 함 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 내부에서 참조하고 있더라도 같은 파일 내에 있으므로 참조가 가능하다. 이 컴포넌트가 다시 트리거, 마운트..

substring() substring(startIndex) -> startIndex부터 마지막 문자까지 문자열을 반환함 substring(startIndex, endIndex) -> startIndex부터 endIndex - 1 인덱스의 문자까지 문자열을 반환함 파라미터 startIndex : 리턴할 부분 문자열에 포함될 문자의 첫번째 인덱스 값 endIndex : 리턴할 부분 문자열에 제외될 문자의 마지막 인덱스 값 리턴 값 파라미터에 따른 새로운 부분 문자열 예시 const str = 'Mozilla'; console.log(str.substring(1, 3)); // Expected output: "oz" console.log(str.substring(2)); // Expected output: ..

문자 -> 아스키코드 charCodeAt(); let num=x.charCodeAt(); 아스키코드 -> 문자 fromCharCode(num) let char = String.fromCharCode(num)

요구사항 FE 리액트와 BE 스프링부트로 이루어진 A앱이 있고, A앱이 올라간 운영 서버에서는 웹 서버로 IIS를 쓰고 있다. 모바일/태블릿에서 이용하는 B앱에서 특정 아이콘 클릭시 A앱이 실행되어야 하는데 이 때 외부 프록시 서버(IIS)를 거쳐서 통신을 할 수 있어야 했다. 그 이유는 모바일/태블릿에서는 공중망을 이용해서 A앱으로 접근 시도를 할 수 있는데, 보안상 이를 방지하고자 특정 네트워크에 위치한 프록시 서버를 거쳐야만 유효한 요청이라고 여기고 모바일/태블릿에 응답을 주기로 했다. 각 서버의 url은 다음과 같다고 가정한다. 프록시 서버 : https://proxy.com A앱의 FE URL : https://aaa.co.kr B앱에서 아이콘 클릭시 A앱과 통신 과정 아이콘을 클릭시 프록시 서..

문제1 (구름 에듀에서 4번문제) 어느 누군가가 타임머신을 타고 과거로 가서 숫자 0이 없는 수 체계를 전파했습니다. 역사가 바뀌어 이제 사람들의 의식 속엔 0이란 숫자가 사라졌습니다. 따라서, 현재의 수 체계는 1, 2, 3, ..., 8, 9, 11, 12, ...와 같이 0이 없게 바뀌었습니다. 0을 포함하지 않은 자연수 num이 매개변수로 주어질 때, 이 수에 1을 더한 수를 return 하도록 solution 메소드를 완성해주세요. 매개변수 설명 자연수 num이 solution 메소드의 매개변수로 주어집니다. * num은 1 이상 999,999,999,999,999,999 이하의 0을 포함하지 않는 자연수입니다. return 값 설명 자연수 num에 1을 더한 수를 return 해주세요. 예시 ..