용도 :

브라우저 간의 스타일 차이를 줄이기 위해 사용되는 CSS 파일

Reset CSS : 모든 브라우저의 기본 스타일을 완전히 제거하는 방식

/* 모든 요소의 기본 스타일을 초기화 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

장점 : 완전한 스타일 통일 단점 : 모든 요소를 초기화 하기 때문에, 스타일을 새로 작성해야한다. 사용 예시 : 디자인 시스템과 같이 모든 것을 직접 스타일링 하는 것이 중요한 상황

Normalize CSS : 브라우저 간 스타일 차이를 줄이는데 중점을 둔 방식

장점 : 모든 요소의 기본 스타일을 완전히 제거하지 않고, 일관 되지 않은 스타일만 수정한다. 단점 : 통일성이 비교적 떨어진다. 사용 예시 : 데드라인이 넉넉하지 않은 프로젝트

/* 브라우저 기본 스타일을 일관되게 유지 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
a {
  background-color: transparent;
}

: 외부 리소스와의 연결을 돕는 요소, rel 속성 값인 preconnect , preload, prefetch는 리소스 로드의 우선순위를 설정하여 로드 성능을 최적화하기 위해 사용된다.

1. preconnect

: 브라우저가 특정 origin에 대한 네트워크 연결을 미리 설정하도록 지시한다. → DNS 조회, TLS 핸드셰이크, TCP 연결을 미리 완료하여 리소스 로드 지연을 줄일 수 있다. → 외부 API나 CDN의 리소스를 사용할 경우에 사용하면 첫 번째 요청의 대기 시간을 줄일 수 있다.

<link rel="preconnect" href="https://external-resource.com" crossorigin="anonymous">

2. preload

:특정 리소스를 미리 가져오도록 브라우저에 지시한다. ex) 웹 폰트 preload → 리소스가 실제로 사용되기 전에 다운로드가 완료 된다.

<link rel="preload" href="/fonts/my-font.woff2" as="font" crossorigin="anonymous">

3. prefetch

: 브라우저가 향후 필요할 가능성이 있는 리소스를 미리 가져오도록 지시한다. → preload와 다른점: 현재 화면에 즉시 필요하지 않지만 다음에 필요할 가능성이 있는 리소스를 미리 로드하는 역할을 한다. → 다른 속성 값에 비해 우선 순위가 낮다.

  <link rel="prefetch" href="/next-page.css" as="style">

: 가상의 z축을 상정하여 HTML 요소들을 3차원으로 개념화 한 것.

• 요소들이 쌓이는 순서에 영향을 미친다. → HTML 요소는 DOM 순서에 따라 쌓인다. → position 속성이 적용 되어 있는 요소들은 z-index 값이 낮을수록 아래쪽으로, 높을수록 위쪽으로 쌓인다.

• 특정 조건이 충족되면 새로운 쌓임 맥락이 생성된다. → 독립적인 3차원 공간을 만들며, 부모 쌓임 맥락의 영향을 받지 않고 해당 쌓임 맥락 내에서만 비교가 이뤄진다.

쌓임 맥락이 생성되는 조건

• position 속성이 relative 또는 absolute이고 z-index 값이 auto가 아닌 경우
• position 속성이 fixed 또는 sticky인 경우
• display가 flex 또는 grid이고, z-index가 설정 된 경우
• opacity 값이 1미만인 경우
• transform,filter, backdrip-filter 등의 속성이 적용되는 경우

<div style="position: relative; z-index: 1;">
    A 요소 (z-index: 1)
    <div style="position: absolute; z-index: 999;">
        A-1 요소 (z-index: 999)
    </div>
</div>

<div style="position: relative; z-index: 2;">
    B 요소 (z-index: 2)
</div>

(top) B 요소 → A-1 요소 → A 요소 (bottom) : Z-index 요소가 B가 가장 큼 , 쌓임 맥락 비교 A-1이 z-index 값이 더 크기 때문에 A-1 , 마지막으로 A 요소

transform - 애니메이션이나 동적인 위치 변경이 필요한 경우

• 선호하는 이유 ?
  • 성능이 중요한 상황 (ex: 모바일 환경) → 브라우저의 composite 단계에서 실행 → reflow나 repaint를 유발하지 않아 성능 상 이점이 있다.
  • 애니메이션이나 빈번한 위치 변경이 필요할 때
  • 다른 요소의 레이아웃에 영향을 주지 않아야 할 때

position - 레이아웃의 구조를 잡거나, 부모를 기준으로 위치를 조정하는 경우

• 정적인 레이아웃 구성 시
• 요소의 위치 변경이 다른 요소의 레이아웃에 영향을 줘야 할 때
• 복잡한 레이아웃 구조에서 요소를 배치할 때
• reflow와 repaint를 유발한다. → top, left 등의 속성을 변경하면 브라우저는 주변 요소들의 위치를 다시 계산하는 과정부터 다시 수행 → 성능 부하를 높힌다.

transform 과 position의 차이점

1. 렌더링 과정의 차이점

• 렌더링 과정

  • ** Layout(Reflow)** : 요소의 크기와 위치 계산 (position 처리 단계)
  • ** Paint ** : 색상, 이미지, 테두리 등을 그림
  • ** Composite**: 여러 레이어를 합성 (transform 처리 단계)

• 예시

  • html

    <div class="container">
    <div class="box translate">Translate</div>
    <div class="box position">Position</div>
    </div>

  • css

    .box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    }
    

  .translate { transition: transform 0.3s ease; }

  .translate:hover { transform: translateY(30px); }

  .position { position: relative; transition: top 0.3s ease; }

  .position:hover { top: 30px; }

  
  * translate 박스 
    * composition 레이어에서만 변화가 일어난다. → 다른 요소의 레이아웃에 영향을 주지 않는다.
  * position 박스 
    * Layout 단계부터 다시 계산이 시작 된다. → 주변 요소의 레이아웃에 영향을 줄 수 있다. 
  
  

출처:

• 매일메일 - 위치를 동적으로 변경할 때 css 속성 중 transform과 position 중 어떤 것을 선호 하시나요?
• css transform

: 지속적인 통합

→ 개발자들이 코드 변경사항을 주기적으로 메인 브랜치에 병합하는 과정을 자동화 한 것.

→ 코드 변경 사항이 발생할 때 마다 자동으로 빌드와 테스트를 수행하여 문제를 조기에 발견 할 수 있다.

CD (Continuous Delivery or Deployment)

: 지속적 전달 or 지속적 배포

→ CI 이후 단계를 자동화 하는 것. 애플리케이션의 변경 사항을 production 환경으로 배포하는 과정을 자동화 한 것.

→ Continuous Delivery (지속적 전달) : 배포 가능한 상태로 준비하는 과정까지만 자동화 (실제 배포는 사람의 승인을 거쳐 수동 진행)

→ Continuous Deployment (지속적 배포) : 환경에서 배포하는 과정까지 자동화

현업에서 사용 하는 CI/CD 도구

: GitHub Actions, Jenkins, GitLab CI 드으이 도구를 사용하여 파이프라인을 구축합니다. → 개발자가 PR을 올리면 자동으로 테스트 / 빌드 실행 → 테스트/빌드를 성공한 경우 메인 브랜치로의 머지 활성화 → 메인 브랜치 머지 시 production 환경으로 자동 배포

출처: 매일메일 - CI/CD란 무엇인지 설명하시오

: 브라우저 대신 외부 서버에 요청을 보내고 응답을 받는 역할을 대리 수행하는 서버. 브라우저 측에서 직접 외부 서버에 요청을 보내지 않고, 클라이언트와 동일한 origin의 프록시 서버를 통해 요청을 보내면 SOP의 제한을 피할 수 있다.

COR (Cross-Origin Resource Sharing)

: 서로 다른 출처라도 리소스 요청, 응답을 허용할 수 있도록 하는 정책

• 교차 출처 리소스 공유

• 도메인(Hostname): myshop.com

• 출처 (Origin): https://www.myshop.com => 출처가 다른 서버간의 리소스 공유

• 예전에는 프론트 , 백을 따로 구성하지 않아서 모든 처리가 같은 도메인 안에서 가능했다. → 시간이 지나면서 클라이언트에서 API를 직접 호출하는 방식이 당연해짐 → 클라이언트와 API는 다른 도메인 => CORS 정책이 생김 (출처가 다르더라고 요청과 응답을 주고 받을 수 있도록 서버에 리소스 호출이 허용된 출처를 명시)

  CORS 에러 대응법

• • 서버에서 Access-Control-Allow-Origin 응답 헤더 세팅하기 **

• 서버에서 Access-Control-Allow-Origin 헤더를 설정해서 요청을 수락할 출처를 명시적으로 지정할 수 있다.

• 해당 해더를 세팅하면 출처가 다르더라도 https://myshop.com 리소스 요청을 허용 가능하게 됨.

  'Access-Control-Allow-Origin': <origin> | * // 보안 취약 

* 설정 → 출처에 상관없이 리소스에 접근할 수 있는 와일드카드이기 때문에 보안에 취약해진다.

'Access-Control-Allow-Origin': https://myshop.com // 직접 허용할 출처 세팅 추천

** 프록시 서버 사용 ** : 프록시 서버를 사용하여 웹 애플리케이션에서 리소스로의 요청을 전달하는 방법 ex) 웹 어플리케이션 :http://example.com - 데이터 요청 -> http://api.example.com

웹 애플리케이션 → http://example.com/api/proxy → (서버 내부 요청) → http://api.example.com

• 웹 애플리케이션 대신 같은 출처에 위치한 프락시 서버를 통해 API 요청을 중계하도록 구성한다. → 브라우저 입장에선 http://example.com에 요청한 것 처럼 보여서 CORS 검사 없이 응답 가능!

  SOP

  : 서로 다른 출처일 때 리소스 요청과 응답을 차단하는 정책
• SOP 부합 예시

실무 때 겪은 CORS ? 관련 에러

• 문제 상황 : 작년에 로봇의 실시간 데이터를 주고 받는 UI를 개발하는 프로젝트를 수행 하였는데, 로봇 내의 로컬 배포를 해야 하는 상황에서 cors 에러를 마주한 상황이 있었다. 노트북으로 로컬 배포한 페이지에 접속 했을 땐 사이트가 보였지만, 테블릿 or 다른 기기를 로봇 와이파이에 연결 후 접속 하였을 땐 CORS 에러로 사이트가 뜨지 않는 상황이 일어 났었다.

1. 라이브러리 사용의 문제

   • nginx의 존재는 알았지만 모르는 프레임워크를 깔아서 책임 질 수 있을까? 에 대한 고민으로 http-proxy-middleware 라는 패키지를 사용 했는데, 로컬용이라 배포했을 때 동작을 하지 않는다는 답변을 들었다. ( 정적 파일을 배포하면 프록시 기능은 사라지고 그냥 브라우저 요청만 남게 됨)

2. 노트북에선 동일 출처로 인식하여 사용 가능 했음

3. 테블릿 -> IP 주소: 포트 로 접속하여 다른 출처로 인식 -> 에러 발생

• 해결 방법 : nginx 사용
• nginx
  • 정적파일 제공
  • 프록시 서버 역할 가능

출처 : 매일메일 서비스 (질문 출처) 토스 - CORS(교차 출처 리소스 공유)

: css에서 요소의 크기를 어떻게 계산 할 지를 결정하는 속성

1. box-sizing : content-box

• content-box는 box-sizing 속성의 기본값
• 적용시 요소의 width와 height 값의 내용 영역만의 크기를 나타냅니다.

• width와 heigth는 요소의 실제 콘텐츠 크기만을 정의하고, 그 안에 추가되는 padding과 border는 크기에 포함되지 않습니다.

2. box-sizing : border-box

• border-box를 적용하면 width와 height 값이 내용영역, padding,border를 모두 포함하는 크기를 나타냅니다.
• width와 height는 실제 콘텐츠의 크기뿐만 아니라 패딩과 테두리까지 포함된 크기로 설정된다. ex ) width : 200px , padding: 20px, border: 2px => 실제 콘텐츠 영역의 크기: 200px - 20px * 2px * 2 = 156px
• 직관적으로 레이아웃의 크기를 예측하기 용이

예시

HTML

<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

css

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

결과

출처 : 메일메일 -css box-sizing 속성에 대해 설명해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

• 손실 압축 방식을 사용하는 이미지 포맷, 사진과 같이 복잡한 색상과 그라데이션이 있는 이미지에 적합하다.
• 장점
  • 파일 크기를 효율적으로 줄일 수 있다.
• 단점
  • 이미지를 저장할 때마다 데이터가 손실되어 화질이 점점 나빠지는 현상이 발생한다.

2. PNG(Portable Network Griphics)

• 무손실 압축 방식을 사용하는 이미지 포맷
• 투명도를 지원한다.
• JPEG보다 파일 크기가 크다.
• 회사 로고나 아이콘 같이 선명한 텍스트나 투명 색상이 있는 이미지에 적합하다.

3. WebP

• 웹 환경을 위해 개발한 최신 이미지 포맷
• 손실 / 무손실 압축 모두 지원, 투명도 지원
• JPEG나 PNG보다 더 나은 압축률을 제공하면서도 화질을 유지 할 수 있어 웹 최적화에 적합하다.
• 비교적 최신 포맷이기 때문에 지원하지 않는 브라우저가 존재한다. (호환성 문제 유의) WebP 지원하는 웹 브라우저 목록

4. SVG ( Scalable Vector Griphics)

• 백터 기반의 이미지 포맷, 로고 아이콘 단순한 일러스트레이션에 사용된다.
• XML 형식으로 이루어져 있다.
• 장점
  • 크기를 조절해도 이미지 품질 저하가 없다.
  • 파일 크기가 작다.
• 단점
  • 이미지 형태가 복잡할 경우, XML 기만의 코드가 매우 길어져 파일 크기가 커지고 연산이 무거워 진다.

출처: 매일 메일 - 알고 있는 이미지 포맷과 각 포맷별 특징을 알려주세요.

: 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능

• *스코프 (Scope): 단어 그대로 범위라는 의미를 가짐, 변수에 접근 할 수 있는 범위 *

클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어 진다.

• ** 일급 객체: 다른 객체들에 일반적으로 적용 가능한 연산을 모드 지원하는 객체**
  • 일반적으로 적용 가능한 연산 :
    • 변수에 할당할 수 있다.
    • 다른 함수를 인자로 전달 받는다.
    • 다른 함수의 결과로서 리턴될 수 있다.

• ** 렉시컬 스코프(Lexical Scope): 함수를 어디서 선언했는지가 아닌 함수를 어디에 선언 하였는지에 따라 결정되는 것, 정적 스코프(Static scope)라 부르기도 함 **

  • 예시

    let x = 1; // global 
    

  function first(){ var x = 10; second(); }

  function second(){

  console.log(x);

  }

  first(); second();

  // 결과 : 1 1

  
  자바스크립트에서는 위와 같은 코드를 작성할 때 이미 실행 단계에세 코드들의 스코프를 결정한다. 
  렉시컬 스코프를 따르기 때문에 함수를 선언한 시점에서 상위 스코프가 결정됨. 
  **=> 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. **
  <span style="background-color:#f5f5f5; color:#fa8072;">second()</span> 함수가 <span style="background-color:#f5f5f5; color:#fa8072;">first()</span> 함수 안에서 호출 된 것과 상관 없이 <span style="background-color:#f5f5f5; color:#fa8072;">second()</span> 함수는 global 범위에 선언 되어 있으므로, global 범위에 있는 변수 <span style="background-color:#f5f5f5; color:#fa8072;">x</span>의 값 1이 두 번 출력된 것이다. 
  

클로저 예시 코드

function outerFunction(outerVariable){
    return function innnerFunction(innerVariable){
        console.log('Outer Variable:'+ outerVariable);
        console.log('Inner Variable:'+ innerVariable);
    };
}

const newFunction = outerFunction('outside');
newFunction('inside');

** 실행 흐름**

1. outerFunction('outside') 호출

-> outerVariable은 'outside'로 설정 -> 리턴값: innerFunction 2. const newFunction = outerFunction('outside') -> 이제 newFunction은 innerFunction(innerVariable)을 가리킴 -> innerFunction은 outerVariable이 무엇이었는지 기억함 3. newFunction('inside')호출

  Outer Variable: outer
  Inner variable: inside

** 클로저 동작 방식 : **

• innerFunction 은 outerFunction 의 내부에 정의되어 있다.
• innerFunction 은 자신이 생성된 스코프, 즉 outerFunction 를 기억하고, outerFunction 의 호출이 완료된 이후에도 그 스코프에 접근할 수 있습니다.
• 그리고 이에 따라 innerFunction 은outerFunction에도 접근할 수 있습니다.

=> JavaScript는 함수가 return으로 다른 함수를 반환할 경우, 그 내부에서 사용된 외부 변수(= 자유 변수) 들을 함께 기억함.

클로저의 활용

변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 자주 활용 된다.

1. 데이터 은닉 : 클로저는 외부에서 접근 할 수 없는 비공개 변수와 함수를 만들 수 있다.

-> 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있다. 2. 비동기 작업 : 클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야 할 때 유용하다. -> 콜백 함수가 비동기적으로 실행될 때 클로저를 사용하면 함수 실행 시점의 변수를 참조 할 수 있다. *예시

function createLogger(name){
    return function(){
          console.log(`Logger:${name}`);
    };
}
const logger = createLogger('MyApp')';
setTimeout(logger,1000); // 1초 후에 'Logger: MyApp' 출력

3. 모듈 패턴 구현 : 모듈 패턴은 특정 기능을 캡슐화하고, 외부에 공개하고자 하는 부분만 선택적으로 노출하여 코드의 응집력을 높이고, 유지보수성을 향상 시키는 패턴 -> 클로저를 활용하면 필요한 함수와 데이터만 외부로 노출함으로써 모듈 패턴을 쉽게 구현할 수 있다.

   참고 및 출처: 메일메일- 클로저란?

7월 11일에 급하게 낸 서류가 붙었다..!

서류를 작성한 이유도 괜찮은 회사라고 생각해서 + 주 1~2회 이상 서류를 넣는 목표 달성을 위해 넣는다고 급하게 넣었는데 붙었다..

공고에도 적혀있다 싶이 자바 수기 테스트가 마음에 걸려서 면접에 갈지 말지 엄청 고민하였다. (필자는 java를 학습한 적이 한번도 없었다... )

하지만 같이 교육을 들었던 친구들이 먼저 면접을 보고 와서 나에게 이야기 해준 것들이 고마웠고, 이 또한 경험이 될 것이란 판단이 들어 4시간을 걸쳐서 서울로 올라와 면접을 보았다.

결론적으로 누군가 왕복 8시간을 이동 할 만큼의 가치가 있는 면접이였는가? 를 묻는다면 아니라고 대답할 것이다. 하지만 새로운 인간군상을 보는 것을 좋아하는 특성과 교육기관 밖의 다른 취준생들의 이야기를 들을 수 있는 경험으로는 좋았다고 생각한다!

1차 면접 프로세스

java 수기테스트 (1시간) - 대기(30분) - 단체 면접 (2시간)

위와 같이 진행 되었고

1. java 수기테스트

• 후기 글 봤을 때 대학교 자바프로그래밍 기말고사 같다고 했었는데, 대학교 때 쳤던 시스템 프로그래밍 기말고사보다 쉬웠다고 생각한다.(자바를 물론 벼락치기로 급하게 공부해서 정확한 난이도 측정을 불가능 했지만)
• 또한 대기하는 동안 감독관 분께서(비트 컴퓨터 관계자 느낌) 면접 때 어떤 질문을 받을 것이고, 회장님(면접관)님의 기준을 말씀해주셨는데 자바(백엔드) 경험위주로 말하는게 좋다고 해주셨는데 경험 없어서 이 때부터 그냥 진행하고 있는 프로젝트 기능 어떤 방식으로 구현 할지 멍 때린것 같다.(필자는 프론트 경험 밖에 없다.)
• 알고리즘 관련 문제가 아닌 java 문법을 아느냐를 더 테스트 해보는 시험이였다.

2. 대기

• 시험 끝나고 난 후 시험 친 곳에서 대기 하는데, 그 때 롯데 채용 담당자 분께서 들어오셔서 질문을 할 수 있는 시간이 있었다.
• 이 때 비트 컴퓨터는 롯데가 위탁교육을 맡긴 협업하는 곳이라 면접의 합불과 롯데 2차 합불 결과는 다를 수 있다는 말씀을 해주셨다.

3. 단체면접

• 사실 악명 높은 면접으로 후기를 많이 들은 터라 서울에 갈지 말지 고민을 했었으나 이미 서울에 온 거 구경하자는 마음으로 면접을 보았다.

• 시작하기 전에 말씀해주시는데 면접하는 회장님 분의 기준치? 를 설명해주셨다. (내년 면접 보는 분들도 들으실꺼라 예상하지만 프로젝트의 규모와 기술 스택? 을 많이 보는 느낌이였다)

  • 프로젝트 명과 기술 스택만 말하고 기능은 설명하지 말라고 하셨다.

• 면접 순서가 앞 순서였기에 비전공자인 나에게 교육 어디서 받았는지 부터 물어보셔서 싸피를 언급 하였더니 거의 기계처럼 기간, 캠퍼스 등을 물어보셨다.

  • 그리고 안한걸 했다고 거짓말 하기 싫어서 프론트 경험을 이야기 했었는데,
  • 텍스트 에디터, 뷰어 라이브러리 없이 구현 => 라이브러리 있는데 왜 굳이?
  • 웰컴 페이지 => 토이프로젝트 규모아니냐
  • 면접방 상세 페이지 => 라이브러리 다 사용하면 코드 치는게 있는가?

말씀 하셨고, 텍스트 에디터는 서비스 특성 상 블럭 형태로 구현해야했기에 기존의 나와 있는 라이브러리를 사용 할 수 없어 직접 구현하였다고 말씀 드렸고, 나머지는 솔직히 들었을 때 공통 특화 프로젝트를 하고 고민했던 점과 일치하여 인정하였다.

• 그 후 빠르게 엑스표 친 서류가 왼쪽으로 갔다.

• 이 후 마음 편하게 지원자들의 이야기를 들었는데,

  • 전공자: 플젝 적게 했으면 혼남
  • 비전공자: 교육없이 독학하면 말할 기회 없음
  • 싸피(백엔드): 다 들어보시긴 하나 다 있는건데 코드를 짠게 있냐는 질문을 하심
  • 타 국비교육: 국비교육의 레벨을 체크하시는 듯 함

  의 느낌이 들었다.

  또한 다소 심하게 말씀을 들은 몇몇 분들의 멘탈도 조금 걱정 되었다.

  (그것도 악명에 비해 그렇게 심하게 말씀하시진 않으니 너무 걱정은 안하셔도 될 듯 하다.)

엄청 옛날에 작성하고 안 올린건데 혹시 아직도 이 교육이 있는지 궁금하다. 혹시 있다면 참고하면 좋을꺼 같아서 올립니다~

📖 그래프란?

여러 개의 노드(node)와 이들을 연결하는 간선(Edge)으로 이루어진 자료구조이다.

📖 queue란?

한쪽 끝에서만 삽입이 이루어지고, 다른 한쪽 끝에서는 삭제 연산만 이루어 지는 유한 순서 리스트. 선입 선출, First in First Out(FIFO) 먼저 들어온 것이 먼저 나감!

2.BFS (너비 우선 탐색, Breadth first Search)

시작점에서 가까운 정점부터 순서대로 방문하는 탐색 알고리즘

BFS 탐색 방법

• BFS는 시작점에서 가까운 정점부터 탐색하기 위해 방문이 필요한 노드를 큐에 담아놓고 하나씩 방문한다. → 1번을 시작으로 큐에 2,3,4번 노드를 담아놓는다. ( visited = [1] , queue = [2,3,4]) → 큐에 가장 먼저 들어간 2번을 꺼내서 방문하고 2번 노드와 인접한 5번을 큐에 담는다. ( visited = [1,2], queue = [3,4,5]) → 위와 같은 방법으로 먼저 들어간 노드 방문한 다음 해당 노드와 인접한 노드 큐에 담기 반복 ( visited = [1,2,3], queue = [ 4,5,6,7]) → ( visited = [1,2,3,4] , queue = [5,6,7,8]) → ( visited = [1,2,3,4,5] , queue = [6,7,8,9]) → (visited = [1,2,3,4,5,6] , queue = [7,8,9,10]) → 7,8,9,10번은 방문하지 않은 노드 중 인접한 노드가 없으므로 → (visited = [1,2,3,4,5,6,7] , queue = [8,9,10]) → (visited = [1,2,3,4,5,6,7,8] , queue = [9,10]) → (visited = [1,2,3,4,5,6,7,8,9] , queue = [10]) → (visited = [1,2,3,4,5,6,7,8,9,10] , queue = [])

• stack과 재귀 방식 둘 다 사용 가능한 DFS 와 달리 *BFS는 큐를 사용해서 구현한다. *

BFS 알고리즘을 주로 사용하는 문제

최단거리 구하기 , 단계별 탐색 , 완전 탐색 (DFS보다 빠름) 등의 문제에서 사용할 수 있다.

BFS 코드 구현 (JS 버전)

• 1편인 dfs 와 같은 인접 리스트? 형태의 graph 라고 생각해보자!

  const graph = [[],[2,5,9],[1,3],[2,4],[3],[1,6,8],[5,7],[6],[5],[1,10],[9]]
  // 리스트 자리수 : 연결된 노드
  // 1번 노드 : [2,5,9] 번 노드와 연결 
  

bfs 코드 작성해보면 
```javascript
function bfs(graph,startNode){
    const visited = []; // 방문한 노드들 
      let needVisit = []; // 방문이 필요한 노드들 
      needVisit.push(startNode); // 처음 방문을 시작할 노드 

  while (needVisit !== 0){ // 1. 방문할 노드가 존재 한다면
      const node = needVisit.shift(); // 1. 선입선출(FIFO) 구조라 shift 함수 사용
      if(!visited.includes(node){
       visited.push(node)
          const nodes = graph[node].slice().sort((a,b) => a - b); // 복사 후 오름차순 정렬 
           needVisit = [...needVisit, ...nodes] ; // queue 형태를 사용하니까 나중에 방문할 데이터 쌓아 놓기 
       }

  }
  return visited 
}

bfs(graph,1)

이런 구조로 흘러가게 된다 근데 사실 위에 풀이는 백준의 &nbsp 1260.DFS와 BFS &nbsp문제를 풀때 사용했던 방식이라 문제에 따라 맞게 쓰는 풀이들도 적어 볼려고 한다!

BFS 최단거리 문제 (JS 버전)

백준의 &nbsp 2178.미로탐색 &nbsp 문제를 예시로 들어보겠다. 해당 문제는 시작점에서 도착 위치까지의 최단 거리를 구하는 문제이고, 1로 된 곳으로만 이동이 가능하다.

const graph = [
  [ 1, 0, 1, 1, 1, 1 ],
  [ 1, 0, 1, 0, 1, 0 ],
  [ 1, 0, 1, 0, 1, 1 ],
  [ 1, 1, 1, 0, 1, 1 ]
]
const M = 6; // x 최대 길이 
const N = 4; // y 최대 길이 

dx = [0,0,-1,1]; // 상하좌우 
dy = [-1,1,0,0]; // 상하좌우

해당 표를 보면 기준 좌표(0,0)에 따라 이동할 값을 리스트 형태로 작성하였다.

function bfs(start_x,start_y,cnt){
  const queue = [];
  queue.push([start_x,start_y,cnt]); // 시작하는 x,y,cnt 값 큐에 담기

  while(queue.length!==0){ // 방문해야 할 위치가 큐에 담긴 경우
  const [x,y,cnt] = queue.shift(); // 가장 먼저 담겨있던 노드 꺼냄
  for(let i = 0; i<4; i++){ // 상하좌우 탐색을 위한 for 문 
      const nx = x+dx[i]
    const ny = y+dy[i]
    if(nx>=0 && nx < N && ny >= 0 && ny < M){ // graph 범위안에 들어오고  
      if(graph[nx][ny] == 1){ // 이동 가능한 구간인 경우 
          graph[nx][ny] = cnt+1 // 해당 칸에 누적 이동거리 + 1 을 해준다. 
          queue.push([nx,ny,cnt+1]) // 해당 위치에서 이동 가능한 곳이 있는지 확인하기 위해 queue에 담아준다. 
      }    
     }
      }
  }
 return graph[N-1][M-1] // 도착위치에 최단거리를 확인 할 수 있다. 
}
bfs(0,0,1)

✍️ 후기

• dfs 작성하고 bfs 문제도 어느정도 다 푼 상태에서 글을 작성하니까 이전 보다 좀 더 빨리 작성한 느낌이 들었다.
• 미래의 내가 안까먹었으면 좋겠지만.. 까먹었을 때 잘 참고해서 빨리 기억하길 바란다...
• 이전에는 개념을 덜 숙지한 상태에서 문제를 많이 풀어서 코테를 준비한것 같은데, 이번엔 개념 -> 문제 순서의 정석으로 하니까 오히려 빠른거 같다는 생각이 들었다. 꾸준히 해야지!

출처:

1. https://developer-mac.tistory.com/64

📖 그래프란?

여러 개의 노드(node)와 이들을 연결하는 간선(Edge)으로 이루어진 자료구조이다.

📖 stack이란?

한쪽 끝에서 자료를 넣거나 뺄 수 있는, 데이터를 제한적으로 접근할 수 있는 구조 , (LIFO)후입-선출 구조 : 뜻이 후입 (list끝) 선출(list 앞)아니라 list 끝에 넣고 최근에 넣은걸 뺀다는 뜻!

📖 재귀 함수

함수 안에 자신의 함수를 다시 호출하는 함수를 의미한다. 이러한 재귀함수는 자신의 로직을 내부적으로 반복하다가, 일정한 조건이 만족되면 함수를 이탈하여 결과를 도출한다.

2.DFS (깊이 우선 탐색, Depth-First Search)란?

DFS 탐색 방법

• DFS는 하나의 방향을 결정하면 그 방향을 따라 끝까지 도달한다. 해당 그림을 예시로 들면, → 1번을 시작으로 인접한 2,5,9번 노드 중 왼쪽 노드 부터 탐색한다. → 2번 노드와 인접한 3번 탐색 → 3번과 인접한 4번 탐색 → 4번과 인접한 노드가 없으므로 이전 노드로 이동 (4->3->2->1) → 1번과 인접한 남은 노드 중 가장 왼쪽에 있는 5번 노드로 이동 → 5번 노드와 인접한 6,8번 중 왼쪽에 있는 6번 노드 탐색 → 6번 노드와 인접한 7번 노드를 탐색한다 → 7번과 인접한 노드가 없으므로 이전 노드로 이동 (7->6->5) → 5번 노드와 인접한 노드 중 방문하지 못했던 8번 노드 방문 → 이전노드 (8->5->1) 로 이동하여 남은 9번 노드 방문 → 9번의 인접 노드인 10번 노드 방문

• 그림을 보면 느낌이 오겠지만,stack을 사용해서도 구현이 가능하고 재귀 형태로도 구현이 가능하다!

• 효율면에서는 stack이 좀 더 좋지만, 재귀가 구현이 좀 더 쉽고 빠르다.

DFS 코드 구현 (JS Stack 버전)

우선 해당 dfs 코드를 사용하기 위해선 graph가 필요한데, 해당 보기 그래프를 리스트로 만들어보면

const graph = [[],[2,5,9],[1,3],[2,4],[3],[1,6,8],[5,7],[6],[5],[1,10],[9]]
// 리스트 자리수 : 연결된 노드
// 1번 노드 : [2,5,9] 번 노드와 연결 

해당 형태를 통해 인접리스트 형태의 그래프를 만들 수 있다.

function dfs(graph, startNode){
    const visited = [] // 방문한 노드들 
    let needVisit = [] // 방문이 필요한 노드들 

    needVisit.push(startNode) // 방문 시작할 노드 

    while(needVisit.length !==0){ // 방문할 노드가 존재한다면
    const node = needVisit.pop(); // DFS는 stack 사용 => LIFO(후입 선출)구조 
    if(!visited.includes(node)){ // 해당 노드에서 방문 한 적 없는 노드라면
        visited.push(node) //  방문 노드 처리 
        const nodes = graph[node].slice().sort((a, b) => b - a); // 복사 후 내림차순 정렬
        needVisit.push(...nodes);// 뒤에 추가 LIFO(후입 선출) 
     }
    }
   return visited;
}

dfs(graph, 1)

방문 시작할 때 :visited = [], needVisit = [1] → 방문할 노드 존재 (while문으로 들어감) : visited = [], needVisit = [1] → DFS는 stack 사용 (LIFO(후입 선출)구조) : node = 1 , visited = [], needVisit = [] → 방문 노드 처리 -> visited = [1] needVisit = [] → 복사 후 내림차순 정렬 ->nodes = [9,5,2], visited = [1], needVisit=[] → 뒤에 추가 LIFO(후입 선출) -> visited = [1], needVisit=[9,5,2]

→ 방문할 노드 존재 (while문으로 들어감) : visited = [1], needVisit = [9,5,2] → DFS는 stack 사용 (LIFO(후입 선출)구조) : node = 2 , visited = [1], needVisit = [9,5] → 방문 노드 처리 -> visited = [1,2] needVisit = [9,5] → 복사 후 내림차순 정렬 ->nodes = [3,1], visited = [1,2], needVisit=[9,5] → 뒤에 추가 LIFO(후입 선출) -> visited = [1,2], needVisit=[9,5,3,1]

→ 방문할 노드 존재 (while문으로 들어감) -> visited = [1,2], needVisit=[9,5,3,1] → DFS는 stack 사용 (LIFO(후입 선출)구조) : node = 1 , visited = [1,2], needVisit=[9,5,3] → 이미 방문 했으므로 다시 시작 . . . 이런 구조로 흘러가게 된다.

DFS 코드 구현 (JS 재귀 버전)

function dfs(graph,node,visited){
    if(!visited.includes(node)){
        visited.push(node); // 현재 노드 방문 

    for(let n of graph[node]){ 인접 노드 
        dfs(graph,n,visited); //인접 노드 재귀 호출 
     }
    }
    return visited;
}

• 1단계: dfs(graph, 1, []) 방문: 1 → visited = [1] 인접 노드 순회: [2, 5, 9]

• 2단계: dfs(graph, 2, [1]) 방문: 2 → visited = [1, 2] 인접 노드: [1, 3]

  dfs(graph, 1, [1,2]) → 이미 방문, 무시 dfs(graph, 3, [1,2]) 호출

• 3단계: dfs(graph, 3, [1,2]) 방문: 3 → visited = [1,2,3] 인접 노드: [2, 4]

  dfs(graph, 2, ...) → 이미 방문 dfs(graph, 4, ...) 호출

• 4단계: dfs(graph, 4, [1,2,3]) 방문: 4 → visited = [1,2,3,4]

  인접 노드: [3] → 이미 방문, 종료

  이후 재귀가 되돌아가서 1의 다음 인접 노드인 5에 대해 재귀 호출됨:

• 5단계: dfs(graph, 5, [1,2,3,4]) 방문: 5 → visited = [1,2,3,4,5] 인접 노드: [1, 6, 8]

  dfs(graph, 1, ...) → 이미 방문

  dfs(graph, 6, ...) 호출

• 6단계: dfs(graph, 6, [1,2,3,4,5]) 방문: 6 → visited = [1,2,3,4,5,6] 인접 노드: [5, 7]

  dfs(graph, 5, ...) → 이미 방문

  dfs(graph, 7, ...) 호출

• 7단계: dfs(graph, 7, [1,2,3,4,5,6]) 방문: 7 → visited = [1,2,3,4,5,6,7] 인접 노드: [6] → 이미 방문

  되돌아가서 dfs(graph, 8, ...) 실행:

  방문: 8 → visited = [1,2,3,4,5,6,7,8] 마지막으로 dfs(graph, 9, ...) 실행:

  방문: 9 → visited = [1,2,3,4,5,6,7,8,9]

✍️ 후기

• 노션에 막 적을 때보단 누군가 볼 수도 있다구 생각해서 최대한 정리해서 적었지만......... 시간이 너무 오래걸렸다. 다음 글은 더 빨리 적을 수 있도록 해야겠다.

출처: https://hhejo.github.io/posts/dfs-with-javascript/ https://velog.io/@hyhy9501/3-1.-%EC%8A%A4%ED%83%9DStack https://data-marketing-bk.tistory.com/entry/%EC%9E%AC%EA%B7%80%ED%95%A8%EC%88%98%EC%9D%98-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4-%EB%B0%8F-%EA%B5%AC%ED%98%84Recursive-Function

1.알고리즘을 이해하기 위해 필요한 개념 2.알고리즘 개념 2-1. 알고리즘 원리 2-2. 장단점 2-3. 알고리즘 코드 3. 사용 해야하는 곳

큰 틀로는 이렇게 맞춰서 적는 형식으로 나가야겠다!

https://school.programmers.co.kr/learn/courses/30/lessons/12945

문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다.

예를들어

• F(2) = F(0) + F(1) = 0 + 1 = 1
• F(3) = F(1) + F(2) = 1 + 1 = 2
• F(4) = F(2) + F(3) = 1 + 2 = 3
• F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다.

2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요.

제한 사항

• n은 2 이상 100,000 이하인 자연수입니다.

처음에 짠 코드

function solution(n) {
    var answer = F(n);
    return answer;
}

function F(n){
    if(n==0){
        return 0
    }else if(n==1){
        return 1
    }else{
        return F(n-1)+F(n-2)%1234567
    }
}

그냥 문제 읽고 문제를 그대로 코드화, 재귀를 사용 했는데,

.... 시간초과랑 런타임 에러가 나버렸다..

다시 생각해보니 재귀를 쓰면 매번 F(n)을 새로 계산해서 중복 계산을 하니까 시간이 엄청 오래걸린다고 생각을 했다.

이 후 다시 짠 코드

function solution(n) {
    const fibonacci = new Array(n+1).fill(0);
    fibonacci[1] = 1;

    for(let i = 2; i <= n; i++) {
        fibonacci[i] = (fibonacci[i-1] + fibonacci[i-2]) % 1234567;
    }

    return fibonacci[n];
}

재귀 대산 반복문으로, 배열로 이전 값을 저장하도록 변경하였다.

코드의 시간 복잡도도 재귀 : O(2^n) 반복문: O(n) 으로 확실히 줄었다

결론: 재귀는 만능이 아니다 ( 싸피 할 때도 느꼈지만.. 재활하는 중이니까 다시 상기하기 위해 작성하였다. )

tailwind.config.ts의 components 경로로 설정 되어 있는걸 shared로 변경해주면 된다!

땅따먹기 게임을 하려고 합니다. 땅따먹기 게임의 땅(land)은 총 N행 4열로 이루어져 있고, 모든 칸에는 점수가 쓰여 있습니다. 1행부터 땅을 밟으며 한 행씩 내려올 때, 각 행의 4칸 중 한 칸만 밟으면서 내려와야 합니다. 단, 땅따먹기 게임에는 한 행씩 내려올 때, 같은 열을 연속해서 밟을 수 없는 특수 규칙이 있습니다.

예를 들면,

| 1 | 2 | 3 | 5 |

| 5 | 6 | 7 | 8 |

| 4 | 3 | 2 | 1 |

로 땅이 주어졌다면, 1행에서 네번째 칸 (5)를 밟았으면, 2행의 네번째 칸 (8)은 밟을 수 없습니다.

마지막 행까지 모두 내려왔을 때, 얻을 수 있는 점수의 최대값을 return하는 solution 함수를 완성해 주세요. 위 예의 경우, 1행의 네번째 칸 (5), 2행의 세번째 칸 (7), 3행의 첫번째 칸 (4) 땅을 밟아 16점이 최고점이 되므로 16을 return 하면 됩니다.

제한 사항

행의 개수 N : 100,000 이하의 자연수 열의 개수는 4개이고, 땅(land)은 2차원 배열로 주어집니다. 점수 : 100 이하의 자연수

입출력 예

문제 풀이

• 문제를 처음에 읽었을 때는 줄에서 큰 값을 구하고 그 값의 인덱스를 구해 비교해 일치 할 경우 작은 값 줄의 두번째 값을 구해야하나..? 생각했는데 번거롭게 하는거 보다 DP로 풀면 해결 되겠다고 생각이 들어 DP로 풀었다!

• N행 4열로 되어 있기 때문에 4열을 고정임을 알 수 있었고,두번째 줄부터 이전 줄에서 해당하는 인덱스 값을 제외한 값들 중에 가장 큰 값을 더하는 형식으로 진행해 마지막줄에 가장 큰 값을 정답으로 도출하는 형식으로 만들었다!

function solution(land) {
    var answer = 0;
    // N행 4열로 이루어져 있음
    const len = land.length; 
    for(let i = 0; i < land.length-1; i++){
        land[i+1][0] += Math.max(land[i][1],land[i][2],land[i][3])
        land[i+1][1] += Math.max(land[i][0],land[i][2],land[i][3])
        land[i+1][2] += Math.max(land[i][0],land[i][1],land[i][3])
        land[i+1][3] += Math.max(land[i][0],land[i][1],land[i][2])
    }
    answer = Math.max(...land[len-1])
    return answer;
}

💥 문제

5일차 포스팅에 문제에 대한 고민을 팀원들과 함께 의논을 해 본 결과..

ㅎㄱ 님: 노션은 드래그 앤 드랍과 엔터치면 새로운 블록 생성되는 기능 둘 다 있지 않나요..?

생각해보니 맞는 말이다. 그래서 둘 다 개발하는 걸로! ( 드래그 앤 드랍은 다음 포스팅에서 다룰 예정 입니다)

1. contentEditable 무한 렌더링 에러

-> 사실 리팩토링하면서 계속 에디터를 고도화 하기 위해 공부하는데 contentEditable 속성에 문제점에 대한 글을 보게 되었다. 우선 공식적으로 정해진 표준이 아니기에 브라우저마다 동작이 다르다(일관성이 없다)는 문제점이 있었고, 또한 React에서 사용할 땐 input과 동작방식이 많은 차이점이 있다는 사실을 알게 되었다 .(아래 링크 참조) https://www.bucketplace.com/post/2020-09-18-%EC%9B%90%ED%99%9C%ED%95%9C-%EC%BD%98%ED%85%90%EC%B8%A0-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%97%90%EB%94%94%ED%84%B0-%EA%B0%9C%EB%B0%9C%EA%B8%B0/

2. dangerouslySetInnerHTML 사용으로 인한 XSS 공격의 위험성

dangerouslySetInnerHTML 란? 브라우저 DOM에서 innerHTML을 사용하기 위한 REACT의 대체 방법으로 이 태그를 통해 직접적으로 HTML을 삽입 할 수 있다.

XSS란 (Cross Site Script)

XSS 공격은 공격자에 의해 작성된 스크립트가 다른 사용자에게 전달되는 기법이다. 다른 사용자의 웹 브라우저에서 적절한 검증 없이 실행되기 때문에 사용자의 세션을 탈취하거나 , 웹 사이트 변조 또는 악의적인 사이트로 사용자를 이동시킬 수 있다.

    <TextBlock
          key={content.idx}
          contentEditable="true"
          suppressContentEditableWarning
          onInput={handleChange}
          onCompositionStart={handleCompositionStart}
          onCompositionEnd={handleCompositionEnd}
          ref={textRef}
          dangerouslySetInnerHTML={{ __html: content.context }}
          onContextMenu={handleContextMenu}
        />

당시에 위 코드를 통해 HTML 코드가 포함된 context를 그대로 보여주었다. 프로젝트 당시에도 가능하며 사용하지 않는게 좋은 태그인걸 알고 있었지만(이름부터 위험하다..) 프로젝트 마감 일정에 맞추기 위해 사용하였다.

💡방법:

1-1. react-contentEditable 사용하기

• input과 textarea에서는 bold, italic, color 적용한 결과를 보여줄 수 없기에 div 태그를 수정 할 수있는 contentEditable 속성 사용을 불가피하다는 생각을 하였다. (혹시 더 좋은 방법을 알고 계신분은 알려주신다면 감사하겠습니다) 또한 동작원리를 모르고 라이브러리를 사용하는게 싫어 라이브러리를 잘 사용하지 않았었는데,

react-contenteditable 링크 : https://www.npmjs.com/package/react-contenteditable

태그 커스텀이 필요하였기 때문에 Advenced example 예시 : https://codesandbox.io/s/l91xvkox9l 를 참조하였다. 해당 코드를 참조하면

 <ContentEditable
          className="editable"
          tagName="pre"
          html={this.state.html} // innerHTML of the editable div
          disabled={!this.state.editable} // use true to disable edition
          onChange={this.handleChange} // handle innerHTML change
          onBlur={this.sanitize}
        />

html 속성에서 innerHTML 속성을 사용하는 것을 알 수 있다. 위 예시에서는 XSS에 취약한 innerHTML 속성의 문제점을 해결하기 위해 sanitize-html 라이브러리를 사용하였다.

sanitize 란?

sanitize(소독)은 html의 input 또는 textarea 또는 기타등등의 사용자 입력정보에 와 같은 문자열을 적을시, 웹브라우저에서 문자열이 txt가 아닌 script 기술로 받아들여서 생기는 문제를 방지하는 모듈이다. 사용자가 이를 악용하여 태그들을 삽입해서 악성 스크립트로 변질시켜 실행 시킬 수 있기 때문이다.

HTML Sanitization 할 수 있는 방법은 3가지가 있는데,

• sanitize-html 라이브러리 사용하기 https://www.npmjs.com/package/sanitize-html

  Sanitize-html란?

  허용된 태그와 속성 외에 html 태그를 허용하지 않는다. 허용되지 않는 속성이 있다면 지워진다. 기본값으로 하면 디폴트로 허용된 태그들이 존재한다. 허용하는 태그와 허용하지 않는 태그를 따로 지정할 수 있다.

• HTML Sanitizer API 사용하기 :https://ui.toast.com/weekly-pick/ko_2021124

• DOM Purify 라이브러리 사용하기 https://github.com/cure53/DOMPurify

  DOMPurify란?

  DOM 레벨에서 HTML을 sanitize 해주고 XSS 공격을 막아준다. jsdom 을 사용하면 node 와 같은 서버 레벨에서도 사용 가능하다. DOMPurify는 화이트리스트 접근 방식을 취하는데 특정한 태그와 속성, 프로토콜만 허용한다.

등의 방법이 있었다...

⚽결론

1. react contentEditable 라이브러리 활용

: 라이브러리를 사용하면 모르고 사용하는 느낌이 싫어 프로젝트에서 거의 사용하지 않았었는데, 리팩토링 이전에 contentEditable 속성을 사용하면서 사용했을때의 문제점과 에러를 고치는 과정을 직접 해봤기에 이번엔 라이브러리를 도입하여 사용하기로 하였다.

2. XSS 문제 해결을 위한 HTML Sanitization 할 수 있는 라이브러리 or api 도입

: 마찬가지로 위에 조사한 내용 이외에 작동 원리를 조사하여 프로젝트에 맞는 라이브러리 or api를 도입 할 예정이다. 프로젝트 당시에 XSS 공격 문제 때문에 고민을 많이 했었는데, 그때는 기간 내에 작동하는 프로젝트를 만드는 것이 우선순위여서 특정 태그를 파싱하여 사용하지 못하도록 임시 조취만 취했는데 이번엔 제대로 XSS 문제를 방지 할 수 있을 것이란 기대가 된다! 완성한 후에 테스트 해서 XSS 공격이 방지가 되는지 테스트 해서 포스팅을 작성하는것을 목표로 하고 있다.

😮참고 자료

1. https://inpa.tistory.com/entry/NODE-%EB%B3%B4%EC%95%88-%F0%9F%93%9A-sanitize-html-%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9%EB%B2%95

2. https://velog.io/@pock11/innerHTML-dangerouslySetInnerHTML

💥문제

1. 이미 작성된 텍스트 블록 사이에 블록을 추가 할 수 있는 방법이 없다.

• 과거 프로젝트 당시 드래그 앤 드랍 기능을 추가 할려고 계획 하였으나. 드래그 앤 드랍으로 옮겼을 때 idx 값이 number 였고 순서가 바뀌었을 때 에러가 날 것을 생각하여 추가 하지않았다.

• 하지만 텍스트 에디터를 사용하여 글을 작성하는 작가 입장에서 블록 사이에 내용을 추가 하지 못하는건 엄청난 불편함이 있기에 기능을 추가하려고 한다.

2.수정 시 무한 렌더링 오류

• text 블록 클릭시 contentEditable 속성을 사용해서 수정 할 수 있도록 작성해놨는데, text style 적용하는 코드와 충돌이 나면서 무한 렌더링 오류가 발생하였다..

💡방법

1-1. drag & drop 방식 도입

• react dnd (라이브러리) 사용
• Drag and Drop api 사용

1-2. 생성된 텍스트 블록에서 엔터키 눌렀을 시 새로운 블록 생성 되도록 하기

• 해당 이미지는 에디터 구현 할 때 많이 참조 하였던 오늘의 집 에디터이다.

• 위와 같은 방식으로 구현 할 시 EditorMainInput 컴포넌트가 가지고 있던 기존 input을 제거하고, 클릭 시 contents 배열안에 content 객체를 바로 생성 하는 방법으로 구현하는 방법으로 변경 해야 할 것으로 예상된다.

🧐추가적인 생각

• 1-2 방법을 사용 할 경우에 content가 "" 일 때 backspace를 누르면 삭제 하는 기능을 추가 하고 x 버튼을 삭제하는게 좋을 것 같다는 생각을 하였다.

• 적고 보니 1-1 보다 1-2가 더 익숙한 형식 일꺼 같다고 생각이 들어 수정해볼려고 한다.. 대신 시간이 오래 걸릴꺼 같다..

⚽결과

• 오늘은 build 에러를 수정하고 위에 적은 방법에 대해 고민하는 시간을 가졌다. 해당 문제과 고민에 대한 결과는 다음 정권찌르기에서 계속 진행 될 예정이다! 글 작성이 완료 되면 아래에 추가로 링크를 남길 예정이다.

길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.)

예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면

• A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5)
• A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) = 21)
• A에서 세번째 숫자인 2, B에서 두번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 21 + 8(2x4) = 29) 즉, 이 경우가 최소가 되므로 29를 return 합니다.

배열 A, B가 주어질 때 최종적으로 누적된 최솟값을 return 하는 solution 함수를 완성해 주세요.

제한사항

• 배열 A, B의 크기 : 1,000 이하의 자연수
• 배열 A, B의 원소의 크기 : 1,000 이하의 자연수

입출력 예

입출력 예 설명

• 입출력 예 #1 문제의 예시와 같습니다.

• 입출력 예 #2 A에서 첫번째 숫자인 1, B에서 두번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 4) 다음, A에서 두번째 숫자인 2, B에서 첫번째 숫자인 3을 뽑아 곱하여 더합니다. (누적된 값 : 4 + 6 = 10) 이 경우가 최소이므로 10을 return 합니다.

풀이

1. 틀린 풀이

function solution(A,B){
    var answer = 0;
    // 둘 다 오름차순 정렬 후 
    A.sort();
    B.sort();
    B.reverse();
    for(let i = 0; i < A.length; i++){
        answer += A[i] *B[i]
    }

    return answer;
}

2. 남의 풀이

function solution(a,b){
    var answer = 0;
    const res1 = a.sort((a,b)=> a-b)
    const res2 = b.sort((a,b)=> b-a)
    for(i=0;i<res1.length;i++){
      answer += res1[i] * res2[i]
    }
    return answer;
}

3. 고친 풀이

function solution(A,B){
    var answer = 0;
    // 둘 다 오름차순 정렬 후 
    A.sort((a,b)=>a-b);
    B.sort((a,b)=>b-a);
    for(let i = 0; i < A.length; i++){
        answer += A[i] *B[i]
    }

    return answer;
}

4. 의문점

JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요.

제한 사항

• s는 길이 1 이상 200 이하인 문자열입니다.
• s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다.
  • 숫자는 단어의 첫 문자로만 나옵니다.
  • 숫자로만 이루어진 단어는 없습니다.
  • 공백문자가 연속해서 나올 수 있습니다.

    입출력 예

    

풀이

function solution(s) {
    var answer = '';
    // 첫 문자가 대문자이고, 알파벳은 소문자 
    let array = s.split(' ');
    // split(' '):split 함수를 이용하면 공백 기준으로 배열로 변환해서 저장함! 
    let result = array.map(x => x.charAt(0).toUpperCase()+ x.slice(1).toLowerCase());
    // .map(): map 함수를 통해 배열 내부의 값을 조건에 밎게 변형시키고 새로운 배열을 뽑아내서 result2에 저장

    //charAt(): charAt()을 통해 result2의 각각 배열값인 x에 대하여 0번째 글자를 선택
// toUpperCase(): 0번째에 대한 글자를 대문자로 변환
// slice(): slice(1)을 통해 인덱스가 1값부터 마지막값까지를 설정
// toLowerCase(): 인덱스값이 1인 부분부터는 소문자로 변환
    answer = result.join(" ")
// join(): 배열의 모든 요소를 연결해 하나의 문자열로 변환
    return answer;
}