Rotate Array 문제 해결 과정

medium, 정답률 39.2%

쉬운 문제인줄 알고 만만하게 봤는데 'In place' 조건이 붙으면서 고민을 해야했던 문제..

처음에 in place 상관 없이 생각한 방법은 nums 배열을 (nums.length-k)부터 (nums.length-1)까지 slice한 배열을 nums 맨 앞에 갖다 붙이는 것이었다.

그 이후 문제를 제대로 읽고 생각했던 로직을 수도코드로 나타내면

while i<k:
    n=nums.length-1번째 요소 제거 후 대입
    nums 맨 앞에 n 삽입
    i++

이렇게 되었는데.. 시간초과를 만났다.

var rotate = function(nums, k) {
   let i=0
   while(i<k){
       let num=nums.splice(nums.length-1,1)
       nums.unshift(num)
       i++
   }
};

힌트를 보고 수정

리트코드 힌트와 다른 사람들이 푼 과정을 살펴보니 배열을 뒤집는 것을 이용했다. 예시 nums=[1,2,3,4,5,6,7] k=3를 살펴보면 처음에 전체 배열을 한 번 뒤집고.. [7,6,5,4,3,2,1]

rotate될 요소가 0번째 부터 k-1번째 까지 있으니 k를 기준으로 나눠서 생각해보면 [7,6,5] // [4,3,2,1]

0~k-1번째 요소들을 뒤집고, k번째부터 마지막 요소까지 뒤집는다. [5,6,7,1,2,3,4]

하지만 추가 변수를 만들거나 배열 공간을 할당할 수는 없다. 또한 js에서 제공하는 reverse 함수는 전체 배열을 뒤집는것 밖에 할수가 없다. 따라서 인덱스별로 잘라 뒤집을 수 있는 reverse를 직접 구현해야 했다.

reverse 구현

배열이 있고 시작 인덱스, 끝 인덱스 변수를 만들어서 구현했다.

[1,2,3,4] 배열이 있고 시작 인덱스 0, 끝은 가장 마지막인 3에서 시작한다.

0번째와 3번째 요소를 swap [4,2,3,1] 시작 변수+1, 끝 변수-1 그다음 1번째와 2번째 요소를 swap한다 [4,3,2,1] 시작 변수+1, 끝 변수-1

시작 인덱스는 2, 끝 인덱스는 1이 되어 swap을 종료한다.

이런식으로 시작 인덱스 변수와 끝 인덱스 변수 값을 증가, 감소시켜 요소 값들을 서로 바꿀 수 있도록 구상했다.

function reverse(arr,start,end){
    if(start<0 || end>arr.length || start>=end) return
    let startIdx=start
    let endIdx=end

    while(startIdx<endIdx){
        [arr[startIdx],arr[endIdx]]=[arr[endIdx],arr[startIdx]]
        startIdx+=1
        endIdx-=1
    }
}

swap은 js 구조분해할당을 이용해서 한 줄로 구현, swap 반복 조건은 while로 작성했다. 이때 start,end가 배열 범위에 벗어나거나 start가 end보다 큰 경우 바로 종료한다.

최종

reverse 함수 구현을 바탕으로 한 메인함수이다.

var rotate = function(nums, k) {
    if(nums.length<=1) return nums
    if(k>=nums.length) k%=nums.length

    reverse(nums,0,nums.length-1)
    reverse(nums,0,k-1)
    reverse(nums,k,nums.length-1)
};

이때 처음에 k 조건을 보지 않고 if문 없이 reverse만 실행했을 때 틀린 답으로 처리됐다. k가 배열 크기보다 커질 수 있어 이 때는 mod 나머지 연산자로 k를 다시 세팅한다. (문제에서는 규칙을 찾지 못해 틀렸을 때 디버깅하면서 알았다..)

추가로 nums 배열 요소가 하나일 때는 그대로 반환하도록 조건도 달았다.

결과는 Runtime: 91 ms Memory Usage: 52.8 MB

특히 소요시간이 98.39% 앞서있다고 해서 기분이 좋았다..ㅋㅋㅋ

자바스크립트 특징

객체 기반의 스크립트 언어 동적이고 타입을 명시할 필요가 없다 객체지향,함수형 프로그래밍 모두 지원 싱글스레드 언어->콜스택이 하나

브라우저에서 언제 비동기적으로 동작하는가?

콜스택에서 바로 호출되지 않고 태스크큐를 거치는 경우 (ajax 같은 http request, setTimeout, 이벤트 리스너 동작 등)

자바스크립트 엔진 동작 원리

1. 자바스크립트 코드를 보고 태스크를 콜스택으로 보낸다
2. 비동기적으로 처리해야하는 태스크가 들어오면 web api(백그라운드) 부분으로 보내짐
3. web api에서 처리된 태스크는 태스크큐로 보내진다
4. 이벤트루프가 콜스택이 현재 비어있는지(=실행 중인 태스크가 없는지) 확인하고 태스크큐에 있던 태스크를 콜스택으로 보낸다.

이벤트 루프

자바스크립트 엔진과 실행환경을 상호 연동해주는 장치

호이스팅

변수나 함수의 선언부만 코드 최상단으로 끌어올리는 것을 말한다.

호이스팅을 막기 위해서는?

var대신 let,const 키워드를 사용한다. 함수를 선언할 때 선언식은 사용하지 말고 표현식, 화살표 함수 형태로 할당한다.

클로저

함수가 속한 렉시컬 스코프를 기억해서 함수가 렉시컬 스코프 밖에서 실행 되어도 그 스코프에 접근할 수 있도록 하는 것

스코프 및 렉시컬 스코프

변수나 함수 호출시 식별자를 사용하는데 그 식별자를 검색하는 일종의 매커니즘을 스코프라 하고, 렉시컬 스코프란 변수,함수,블록 스코프를 어디에 작성했는가에 따라 정해지는 스코프.

this

바인딩

클래스형 컴포넌트에서 this 주체가 바뀌는 경우가 발생. 바인딩을 하거나 화살표 함수로 바뀌면 주체가 바뀌는 일을 막을 수 있다.

바인딩 방법

new를 사용하면 해당 객체로 바인딩됨 call,apply,bind를 사용해서 명시적 바인딩 사용 객체의 메소드로 호출하면 해당 객체에 바인딩됨 strict mode의 경우 undefined로 초기화된다 일반 브라우저면 window 객체에 바인딩됨

이벤트 전파

이벤트가 발생했을 때 브라우저가 이벤트를 실행시킬 요소를 결정하는 과정을 말한다. 전파 종류에는 버블링, 캡쳐링 2가지가 있다.

이벤트 버블링, 캡쳐링

이벤트 버블링은 하위 요소에서 상위 요소로 전파되는 것을 의미하고 캡쳐링은 상위 요소에서 하위 요소로 전파된다. 이때 기본 동작 방식은 이벤트 버블링이다.

이벤트 위임

하위 요소에서 이벤트 핸들러를 지정하지 않아도 상위 요소에 이벤트 핸들러를 달아 하위 요소들을 제어하는 것을 말한다.

빅데이터의 3대 요소 = 3V

variety(다양성), volume(크기,규모), velocity(속도)

엔티티, 테이블

엔티티는 저장하고 관리되는 데이터의 집합을 의미하며 실제로 존재하지 않습니다. 테이블은 엔티티와 다르게 물리적으로 실재하는 데이터 저장 공간입니다. 이때 엔티티들의 관계를 나타낸 다이어그램이 ERD입니다.

도메인, 스키마, 릴레이션, 뷰

도메인은 속성의 값이 가질 수 있는 범위를 의미합니다. 스키마는 데이터베이스의 구조와 제약조건의 정보를 담고있는 기본적인 구조를 말합니다. 릴레이션은 관계형 데이터베이스에서 정보를 구분하여 저장하는 기본 단위입니다. 뷰는 하나 이상의 물리 테이블에서 유도되는 가상의 테이블 개념입니다.

인덱스

인덱스가 무엇입니까?

데이터베이스에서 값에 대한 주소 정보를 가지는 자료 구조를 인덱스라고 합니다.

인덱스를 왜 사용하며 무엇이 좋습니까?

검색 연산의 최적화를 위해 주로 사용됩니다. 데이터 조회할 때 속도를 높이기 때문입니다.

기본키와 외래키

기본키는 릴레이션의 대표키입니다. 이 기본키를 이용해서 외래키를 통해 다른 릴레이션을 참조할 수 있습니다. 외래키는 다른 릴레이션의 기본키를 참조하는 키를 말합니다.

정규화,반정규화

데이터 중복 등의 이상현상을 없애기 위해 릴레이션을 분해하는 것을 말합니다. 반정규화는 데이터베이스의 관리를 편하게 하기 위해 데이터 중복,통합,분리 등의 작업을 하는 것입니다. 의도적으로 정규화를 위배하는 과정입니다.

무결성

무결성에 대해 말해보고 무결성 제약 조건에 대해서도 설명해보세요.

데이터 결함 없이 정확하고 일관되게 유지되는 성질을 무결성이라고 합니다. 무결성 제약 조건은 데이터의 정확성과 일관성을 보장하기위해 데이터베이스 저장,수정,삭제의 제약을 건 조건입니다.

트랜잭션

트랜잭션에 대해 설명해보세요.

데이터베이스 시스템에서 하나의 논리적 기능을 수행하기 위한 작업의 기본 단위를 의미합니다.

트랜잭션의 특성은 무엇입니까?

트랜잭션 특성은 크게 원자성,일관성,고립성,지속성 4가지가 있습니다.

1. 원자성은 트랜잭션의 연산이 모두 성공하거나 실패해야한다는 점
   2. 일관성은 시스템이 가지고 있는 고정 요소는 트랜잭션 수행 전 후 상태가 같아야 하는 점
   3. 고립성은 동시에 실행되고 있는 트랜잭션들이 서로 영향을 미치지 않는다는 점
   4. 지속성은 성공이 완료된 트랜잭션의 결과는 지속적(영속적)으로 데이터베이스에 저장되어야 한다는 점입니다.

자바의 특징에 대해 말해보세요.

객체지향프로그래밍(OOP)을 지원하며 OOP의 특성으로는 다형성,추상화,캡슐화(은닉),상속이 대표적입니다. (다형성은 한 객체가 여러 타입을 가질 수 있는 것) 가비지 컬렉터를 이용해서 자동으로 메모리를 관리합니다. 운영체제에 독립적입니다. 멀티스레드를 지원합니다.(이는 싱글스레드인 자바스크립트와 반대)

프로세스와 스레드에 대해 각각 설명해보세요.

프로세스는 운영체제에서 시스템 자원을 할당받는 작업 단위를 의미하고 스레드는 프로세스 내에서 실행되는 흐름 단위를 말합니다.

-> 프로세스, 스레드 질문은 운영체제에서 다시 한 번 정리해야겠다!

클래스, 객체, 인스턴스에 대해 각각 설명해보세요. 뭐가 다른가?

클래스는 객체를 설계하는데 필요한 설계도,틀을 말하고 객체는 구현할 대상을 의미합니다. 클래스의 인스턴스입니다. 인스턴스는 클래스를 바탕으로 구현된 실체를 의미합니다.

인터페이스, 추상클래스에 대해 설명해보세요.

인터페이스는 객체를 어떻게 구성할지에 대한 설계도를 말하고 추상클래스는 상속을 위한 클래스로서 인터페이스보다 추상적입니다.

오버라이딩과 오버로딩은 무엇이 다릅니까?

오버라이딩은 상속에서 사용되는 개념으로서 부모 메소드를 자식 메소드에서 재정의하는 것을 의미합니다. 오버로딩은 같은 이름의 메소드를 여러개 정의하는 것을 말합니다. 이때 매개변수의 타입이나 개수가 달라야 합니다.

final은 무엇입니까?

변수와 메소드,클래스 등에서 사용할 수 있는 키워드입니다. 변수에서 final을 사용하면 변경이 불가능한 상수가 됩니다. 메소드에서 사용하게 되면 상속받은 클래스에서 이 메소드를 오버라이딩할 수 없습니다. 클래스에서 사용하면 상속 자체가 불가능합니다.

예외와 에러의 차이는 무엇입니까?

에러는 시스템적으로 발생하는 치명적인 오류로서 메모리 용량 초과, 스택오버플로우 등이 있습니다. 반면 예외는 개발자가 처리 가능한 수준의 오류입니다. 자바에서는 try-catch 중 catch 구문에서 예외처리가 가능합니다.

1. 프로젝트 기본 설명

수행 기간 : 2022.08.18~20

사용 라이브러리 설명

• Language : TypeScript 사용을 고민했으나 단기간에 완성을 목표로만 하여 넣지 못함
• CSS in JS - emotion : js로 관리할 수 있는 css in js 라이브러리 중 하나를 사용하고 싶었고 이용자 수 가 많은 styled-components와 고민. 두 라이브러리가 큰 차이가 없다고 생각해서 그나마 사용 경험이 있는 emotion을 선택
• API - fetch가 아닌 axios : fetch는 응답받은 결과에 대해 json으로 다시 변환해야하지만 axios 라이브 러리는 변환할 필요 없이 간편해서 고름
• Route - react router dom : next.js의 useRouter를 이용해서 페이지 라우팅을 구현해본 적이 있었지만 react만을 이용한 라우팅 구현 경험이 없었음. 고민하던 중 이용자수가 많은 것을 선택

폴더 구조

/src
├── assets
├── components
│ ├── commons
│ └── units
│ ├──signin
│ ├──signup
│ └──todo
├── pages
├── styles
├── App.js
└── index.js

2. 프로젝트 개인 리뷰

GOOD

• 페이지 기준으로 컴포넌트를 분리
• container-presenter 패턴으로 추가 분리 → 상태 관리, api 요청, props 및 UI에 대한 경계가 명확 해지면서 가독성 향상됨
• 투두리스트에 대해 리스트의 각 아이템을 다시 분리했고 이 덕분에 수정 상태의 관리가 쉬워졌음
• 투두리스트 update request을 이용해서 완료 표시도 체크박스로 가능하게 만들었음

BAD

• 공통으로 사용되는 버튼이나 인풋을 공통 컴포넌트로 분리하지 못한 점
• 액세스토큰을 전역 상태로 관리하고 싶었으나 라이브러리 사용에 제약 있을까봐 아예 넣지 않은 점
• api request 이후 컴포넌트 변경 사항에 대해 변경 부분만 리렌더링하는 대신 새로고침(리로드)
• 이메일,비밀번호 유효성 검사에 대해 스타일 변화나 에러 문구 X (input placeholder만 보여줌)

3. 보완하면 좋을 점

• 작은 프로젝트지만 타입스크립트 사용
• api request 부분을 함수 형태로 분리
• 전역 상태로 액세스토큰을 관리했으면 좋았을거 같다
• 공통 컴포넌트 분리
• 이메일, 비밀번호 유효성 검사 문구 추가로 표시 (에러 메세지 등)
• 컴포넌트 변경시 새로고침(리로드)하지 말고 바뀐 부분만 리렌더링

try-catch 구문에서 catch error의 타입

event.target instance

위와 같이 작성해주는 것이 좋다.

Event Type

img 태그 onError 속성의 event type

onError={(event) => {
     if (event.target instanceof HTMLImageElement)
        event.target.src = "에러가 났을때 넣는 이미지 src";
}}

마우스로 인해 발생하는 event type

const onClickMouseEvent=(event: MouseEvent<HTMLDivElement>)=>{
    // 함수 내용
}

<>안에는 어떤 요소에서 마우스 이벤트가 발생하는지 명시 예를 들어 HTMLDivElement는 div 태그에서 마우스 이벤트가 발생함을 뜻한다.

onChange Event type

const onChangeInput=(event:ChangeEvent<HTMLInputElement>)=>{
    // 함수 내용
}

next.js로 프로젝트를 만들지 않으면 React.ChangeEvent와 같이 써야하지만 나의 경우엔 next.js를 사용했으므로 패스!

사실 코드에서 커서 갖다대면 타입 나오긴 합니다..

Props Type

useRef props 넘겨줘야 할 때 쓰는 type

// 예시
navRef: MutableRefObject<HTMLDivElement>;

MutableRefObject를 써주고 제네릭에 어떤 element 타입인지 적어주면 끝.

react-hook-form props type

register: UseFormRegister<FieldValues>;
handleSubmit: UseFormHandleSubmit<FieldValues>;
formState: FormState<FieldValues>;

물론 FileValues도 어떤 값들을 인풋으로 받는지 타입을 설정해줘야 하지만.. 1차적으로 any를 사용하지 않고 props type을 넘겨주는 방법 중 하나이다.

useState에서 setState props type

state 변수 타입이 boolean이면 <>안에 다음과 같이 적는다.

import { Dispatch, SetStateAction, useState } from "react";
Dispatch<SetStateAction<boolean>>;

원인

해당 컴포넌트는 제어되지 않고 변하는 컴포넌트 즉,비제어 컴포넌트이다. undefined 값이 들어올 때 발생할 수 있는 문제.

에러는 아니고 경고 수준이지만 컴포넌트가 렌더링 되었을 때 모든 경우에 대비하는 것이 중요하다고 생각했다.

해결법

값이 undefined일때 || 연산자 등으로 조건부 렌더링하기

원인

components의 이름이 잘못되었거나, import 경로가 잘못 입력되었을때 발생 페이지에 들어가는 컴포넌트 함수를 만들지 않고, 메인페이지에서 렌더시켰더니 발생했다.

해결책

• import된 파일의 경로와 이름을 하나씩 확인
• 혹시 함수가 만들어지지 않은 빈 페이지를 연결한건 아닌지 확인

대소문자 다를 때 구분하려면

 "forceConsistentCasingInFileNames": true

개체가 'undefined'인거 같습니다 에러나오면

"strictNullChecks": false

(참고 링크 : https://github.com/vercel/next.js/discussions/28485)

.eslint.json 파일 삭제 후 .eslint.js에 다음 소스코드 첨부

settings: {
    react: {
      version: "detect",
    },
  },

하지만 이렇게 해도 npx eslint . 를 실행했을때 타입스크립트(tsx,ts) 파일들은 에러가 보이지 않는다. 여전히 npx eslint "*/.tsx"로 실행해야 한다.

타입스크립트 에러는 보이지 않는 이유!

https://pravusid.kr/typescript/2020/07/19/typescript-eslint-prettier.html

위 사이트로 살펴본 결과, 기본적으로 eslint는 js만 찾아낸다고 한다.

그래서 tsx,ts 에러까지 확인하려면

npx eslint --ext .js,.ts,.tsx src

또는

npx eslint src/**/*

라고 작성하는 것이 맞다.

물론 여기에 작성한 명령어 디렉토리 기준은 src이므로 pages나 src 외에 벗어나는 디렉토리에 대해서는 다르게 작성해야 한다.

2달 동안 매달린건 아니지만.. 항상 궁금했던 eslint 문제가 해결돼서 뿌듯하다!

기획과 디자인에서 난관..

디자이너가 없어서 실제 서비스와 가깝게 디자인하는게 너무 어렵다. 팀원들이 각자 디자인을 하다보니 통일성이 없고 제각각이 되어 결국 다시 디자인을 진행하기로 했다.

와이어프레임과 퍼블리싱 디자인을 직접해야하다보니 figma 사용법을 익힐 수 밖에 없었다. 처음엔 오래걸리고 헤맸는데 유튜브 동영상을 보면서 하다보니까 마지막엔 조금 익숙해졌다.

제일 도움된 영상

1. https://www.youtube.com/watch?v=ESxsgBYuMB8

2.연정 디자이너님 유튜브 https://www.youtube.com/watch?v=GsZk8s5JdWg

통일성 있는 디자인을 위해 기존 사이트 참고를 많이 했다 주제가 행사 정보 보여주기+동행구하는 커뮤니티 사이트라서 주로 여행플랫폼, 웹사이트를 참고했다. (마이리얼트립,트립소다,...)

그 외에도 상품 판매 및 결제를 위해 쇼핑몰 사이트도 참고하며 ui를 제작했다.

퍼블리싱 개선

1주차는 Mock-Up 만들기를 위한 퍼블리싱이 주가 되어 고도화된 코드를 짜진 않았지만 더 나은 style을 위해 기존에 짜던 코드보다 개선하려고 노력했다.

• 네비게이션 바를 만들고 스크롤을 해도 최상단에 위치하도록 만들기
• 사이드바 고정 fixed와 sticky 중에 고민-> position: -webkit-sticky; position: sticky; 가 가장 적합해서 sticky로 확정
• 네비게이션 바에서 탭을 누를 때 특정 스크롤 위치로 이동하도록 만들기
• fetch해올 정보가 많을 때는(그리 많지 않은데도..) next.js 렌더링 속도가 너무 느림->개선 필요
• 리액트 lifecycle(useEffect 사용), 가상 DOM(useRef)을 적용은 했지만 더 이해 필요
• grid 스타일 반응형 디자인
  • grid-template-columns 속성을 잘 사용하자
  • grid-gap으로 요소 간의 간격을 조절할 수 있다.

export const GridWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1.25rem;
  @media screen and (max-width: 767px) {
    grid-gap: 0.625rem;
  }
`;

(이런식으로 조절해봤다. 모바일 사이즈에서는 grid-gap을 더 좁게 설정했다)

• 이미지 반응형+정사각형으로 만들기

  export const ImageWrapper = styled.div`
  width: 100%;
  position: relative;
  ::after {
    display: block;
    content: "";
    padding-bottom: 100%;
  }
  :hover {
    cursor: pointer;
  }
  `;
  export const Image = styled.img`
  position: absolute;
  width: 100%;
  height: 100%;
  `;

그 외

기능적인 면에서 동행 커뮤니티에 실시간 채팅 기능을 넣고 싶어서 간단하게나마 강의를 들으며 공부중이다. socket.io가 JS에서 써먹기 좋을거 같아서 비교적 간단하게 만들 수 있을거 같다는 느낌이 든다! CRUD API 적용이 어느정도 될때쯤 바로 채팅 구현을 시작해봐야겠다.

(사진 출처 : https://techblog.woowahan.com)

이제 더이상 master(=main)에서만 작업하지 말자!! 브랜치 이름은 반드시 정해져있는건 아니지만 실무에서 통상적으로 이렇게 나눠서 쓴다.

1. develop(=dev) 개발시 메인이 되는 브랜치

2. feature 세부 기능을 구현할 때

• develop에서만 개발하지 않고 기능별로 feature 브랜치를 생성→develop에 merge (ex: 게시판 목록 브랜치 생성 후 이동git checkout -b feature-boards)
• git issue에서 어떤 기능을 구현할지 적고 그 이슈번호를 feature에 적으면 구분하기 쉽다. (ex: 이슈 번호가 20번-> git checkout -b feature-#21

3. master 개발이 끝나고 배포할 때
4. release 기능 구현이 끝나고 버그만 잡을 때 이용 develop에서 release로 브랜치 이동한 뒤 디버깅이 끝나면 master로 합치기
5. hotfixes

배포 후 생각지 못한 긴급 버그가 발생했을 때 이용 hotfixes 브랜치에서 디버깅→다시 master로 합치기

브랜치 명령어

브랜치 이동 git checkout 이미있는브랜치이름

브랜치 생성하고 그 브랜치로 이동 git checkout -b develop (예시: develop 브랜치로 이동)

모든 브랜치와 현재 위치해있는 브랜치 확인 git branch

브랜치 삭제 git branch -D 삭제할브랜치이름

팀에서의 git 프로세스

1. 팀장은 팀 레파지토리 master에 초기 보일러플레이트를 push하고 develop으로 옮기기 (이 때, 개인은 팀 레파지토리에 접근할 수 없도록)

2. 팀원은 팀 레파지토리를 fork 하고 git clone한다.

3. remote 등록하기 git remote add upstream 팀레파지토리주소

4. 팀원들은 각자 다른 기능을 맡아 서로 다른 파일에서 작업한 뒤 push한다. 이때 develop 내용을 따와서 feature에서 작업해야 한다. 같은 파일을 두 명이상 작업하고 있으면 안된다.

• develop에서 git checkout -b feature-#이슈번호
• git add .
• git commit -m "커밋 메세지"
• git push origin feature-#이슈번호

5. 팀 레파지토리에 pull request를 보낸다. 이후 코드확인 뒤 팀장이 merge (다같이 확인 후 merge 예정!)

6. 각 팀원들은 각 기능 구현이 완료된 코드를 받은 뒤 작업한다. 팀 develop 코드를 받아오기 git pull upstream develop 이때 본인의 develop(또는 master)에서 받아와야 한다.

주의점

1. 같은 기능을 두 명 이상 같이 개발하면 안됨 (merge시 충돌 위험성이 있음)
2. 하루에 두번이상 Pull Request(PR)날릴 때 각 PR이 의존되면 안됨
3. 가급적 최소 1일 1 PR하기
4. 공통기능은 한명이 맡고 잘 구현되어야 함 (예: 로그인)

입출력 예

예시를 보고 생각했던 로직

카테고리에 해시로 되어있길래 질문하기 창에서 찾다가 해시 적용+구현하기 좋은 로직을 발견해서 내가 생각했던 과정을 그대로 옮겨왔다.

동명이인이 있는 3번째 입출력 예시이다.

1. object로 초기화

{mislav:0,stanko:0,ana:0}

2. participant 배열을 돌면서 object key가 있을 때 value 하나씩 증가 {mislav:2,stanko:1,ana:1}

3. completion 배열을 돌면서 이름이 있을때 value를 하나씩 감소

{mislav:1,ana:0,stanko:0}

4. 최종적으로 0이 아닌 key값을 반환 -> "mislav"

최종적으로 구현한 코드

function solution(participant, completion) {
  let hash = {};

  // object 타입으로 hash(해시테이블) 초기화
  for (let el of participant) hash[el] = 0;

  // participant 요소가 hash의 key일때 value 하나씩 증가
  for (let el of participant) if (hash[el] !== undefined) hash[el]++;

  // completion 배열을 돌면서 요소가 hash의 key에 해당되면 value 하나씩 감소
  for (let el of completion) if (hash[el] !== undefined) hash[el]--;

  // value가 0이 아닌 key값을 반환
  for (let key in hash) {
    if (hash[key] !== 0) return key;
  }
}

1xx (정보): 요청을 받았으며 프로세스를 계속한다 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다 5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다

const , let

var는 호이스팅 현상을 최소화하고자 사용 지양 const,let으로 변경 가능 여부를 키워드 정의

화살표 함수

const hello = () ⇒ {} // →화살표 함수

비구조화 할당

객체, 배열 프로퍼티를 꺼내기 쉬워졌다. 참고 : https://velog.io/@dev_lynn/destructuring-assignment-rest-parameter

반복문 (for...of문)

각각의 요소들을 가져옴, for(let i=0;i<n;i++) 같은 증감식 표현보다 효율적이긴 하지만 속도 느림

for(let key of object)

const obj = [1,2,3];

for (let key of obj) {
    console.log(key); // 1,2,3
}

for in과 for of의 차이점

• for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
• for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

스프레드 연산자

깊은 복사 할 때 유용 참고 : https://velog.io/@dev_lynn/js-deep-copy-shallow-copy

기본 매개변수

함수를 실행할 때 파라미터를 별도로 지정하지 않으면 함수 선언부에 작성한 디폴트 값을 사용할 수 있다.

구글 크롬과 node.js에서 사용되는 자바스크립트 엔진

동작 과정

오토마타, 컴파일러를 배운적 있어도 용어만 들어봤을 뿐(parser,ast 정도..?) 구동원리에 대해 아직은 생소하다..

1. parser : 소스코드 파싱 자바스크립트 소스코드를 가져와서 파서에게 넘기면 소스코드를 분석한 후 Abstract Syntax Tree로 변환한다. 각 키워드에 대해 어휘와 문법을 해석한 뒤 파싱하게 된다.

2. ignition 인터프리터로 바이트 코드 변환 자바스크립트 코드를 바이트 코드로 변환하는 인터프리터. 수시로 코드를 파싱하는 작업을 최소화하고 코드의 양을 줄일 수 있다.

3. TurboFan으로 바이트 코드 컴파일 자바스크립트 엔진의 최적화 기법

C++로 작성된 low level 엔진이라 실제 개발과는 거리가 멀다고 생각될 수는 있다. 원리를 이해하며 개발하기까지 조금이라도 찾아보며 공부해야겠다.

1. 다운로드
2. HTML 준비
3. CSS 준비

사실상 1~3번 과정이 HTML,CSS 파일을 parsing하는 과정이다.

4. HTML,CSS 합치기 (= rendering tree를 만드는 style 과정)
5. 위치 그리기 layout (= reflow)
6. 컬러 입히는 레이어 만드는 과정 paint (= repaint)

7. 마지막으로 레이어를 합성해서 실제 화면에 그리는 과정(Composite)

   브라우저마다 레이아웃,페인트 용어 이름은 다르다.

reflow가 repaint보다 시간이 더 오래걸린다. 위치가 바뀌면 사이즈가 바뀌고 그 사이즈에 맞게 색칠을 해야하기 때문에 리소스를 더 많이 잡아먹기 때문이다!

css 프로퍼티마다 layout,paint,composite가 전부 발생하기도 하고 일부만 발생하기도 한다. ->참고 사이트 : https://csstriggers.com/

기본적인 차이

• undefined = no assign 값이 할당되지 않음을 뜻하는 데이터 타입 정의되지 않았음, 초기화되지 않았음 등을 의미 또는 존재하지 않는 배열의 원소값을 접근할 때 또는 존재하지 않는 객체의 프로퍼티를 접근할 때 등을 의미 변수를 선언만 해도 할당됨

• null = no value 명시적으로 값이 '비어있음'을 의미 아무것도 참조하지 않음 객체를 담을 변수를 초기화할 때 일반적으로 사용 변수를 선언한 후에 null로 값을 바꿔야 null이 들어감

자세히 알지는 못하지만 공부하는 입장에서 짧게나마 적으려 한다.

Node.js 자체가 웹서버가 아니다. 얘는 단순히 자바스크립트 런타임으로써 웹서버를 만들 수 있는 방법 중 하나라고 볼 수 있다.

JS는 브라우저에서만 동작하는 프로그래밍 '언어' 중에 하나이다. 파이썬,자바,C와 같은 개념. 브라우저와 문서(Document)를 다루는 개발 도구.

특히 node.js는 웹서버를 만드는 도구로서 장점이 몇 있기 때문에 사용된다.

• 비동기 처리 가능
• 구글 크롬의 V8 엔진 이용 가능
• 적은 양의 자원으로 일 처리

차이점들 요약

리듀서 함수는 네 개의 인자를 가집니다. 누산기 (acc),현재 값 (cur),현재 인덱스 (idx),원본 배열 (src) ->리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 됩니다.

(활용 예제) 팩토리얼을 reduce로도 풀 수 있다.

const array1 = [1, 2, 3, 4];

// 1 * 2 * 3 * 4 = 4!
const init = 1;
const sumWithInit = array1.reduce(
  (p, c) => p * c,
  init
);

console.log(sumWithInit);
//24

(세번째 인자 index까지 포함한 예제) 1부터 10까지 더하기->1부터 n까지 더하기로 발전 가능

const answer=new Array(10).fill(1).reduce((acc,cur,i)=>{
        return acc+cur+i
    },0);