결과는 실패이고 대기자 명단에만 올랐다ㅠ 등록버튼까지는 봤지만 뚫지는 못했다ㅜㅜ에러페이지만 많이 봤다 ㅎㅎ

결과는 대기번호 43.. 500명 뽑는 체크인 미팅에서 43명이 빠질까싶다😭😭

아마 하루에 한 번씩은 홈페이지 들어가서 빠진 인원 체크할 듯...ㅎㅎ

• 비동기 자바스크립트와 XML (Asynchrounous Javascript And XML)의 줄임말(서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것)
• 포맷: JSON, XML, HTML, 일반 텍스트 등
• 특징
  1. 비동기! (페이지 새로고침 X)
     2. 서버로부터 데이터를 받아서 클라이언트단에서 작업을 수행

STEP 1: HTTP request 만들기

• 목적: 서버로 HTTP request를 보내기 위한 Object가 필요하다. 그걸 위한것이 XMLHttpRequest

var xhttp = new XMLHttpRequest();

xhttp.open("GET", '/product/'+data)

• open(param1, param2, param3):
  1. param1: request method.(GET,POST,PUT,DELETE)
  2. param2: 요청할 URL
  3. param3: (생략가능)비동기식으로 수행 여부. 기본값은 true(비동기)이며 false로 작성 시 동기적으로 작동

STEP 2: 서버 응답에 대한 처리

var xhttp = new XMLHttpRequest();

xhttp.onload = function(){
            if(xhttp.status === 200){
                console.log(xhttp.responseText)     // responseText 에는 서버로부터 전송받은 데이터가 담겨있음
                document.getElementById('showResult').innerHTML = xhttp.responseText;
            }
        }

xhttp.open("GET", '/product/'+data)
//xhttp.setRequestHeader('Content-type', 'application/json')    //POST로 데이터 전달 시에 사용
xhttp.send(data)    //서버에 전달할 정보

• onload: 서버로 보낸 요청에 대한 응답 상태 코드 검사 ststus===200 (서버 응답에서 200번대의 코드는 정상 응답을 받았다는 의미) log를 찍어서 응답이 잘 오는지 확인해주고 있다.
• responseText: 서버에서 응답받은 데이터를 텍스트 문자열로 반환한 것.

STEP 3: 서버에서의 응답

// 비동기 상품 검색
    app.get('/product/:title', function(req, res){
        var title = req.params.title;
        title = "%"+title+"%"

        let conn = mysql.createConnection(conn_info)
        conn.query('select title from sell_product where title like ?',title, (err, result)=>{
            res.json(result)
        })
    })

• req.params: 주소에 포함된 변수를 담음. =>ex) http://product/12345 라면 req.params에는 12345가 담겨있음 =>현재 검색어가 data라는 변수로 저장되어 url에 들어가 있기 때문에(xhttp.open에서 '/product/'+data 부분) req.params.title은 data다!
• res.json: 데이터를 클라이언트단으로 넘겨준다!

🔎전체 코드

//ejs
    <input type="text" id="data" value="" >
    <button type="submit" onclick="select_product()">검색</button>  <!--onclick()함수를 이용해서 버튼 클릭했을 때 이벤트 발생시킴-->
<script>

    function select_product(){      //onclick 이벤트 발생했을 때 실행
        var xhttp = new XMLHttpRequest();
        var data = document.getElementById("data").value;

        xhttp.onload = function(){
            if(xhttp.status === 200){
                console.log(xhttp.responseText)     // responseText 에는 서버로부터 전송받은 데이터가 담겨있음
                document.getElementById('showResult').innerHTML = xhttp.responseText;
            }
        }
        xhttp.open("GET", '/product/'+data)
        xhttp.send(data)    //서버에 전달할 정보
    }
</script>

    <div id='showResult'>
    </div>

//router
// 비동기 상품 검색
    app.get('/product/:title', function(req, res){
        var title = req.params.title;
        title = "%"+title+"%"

        let conn = mysql.createConnection(conn_info)
        conn.query('select title from sell_product where title like ?',title, (err, result)=>{
            res.json(result)
        })
    })

• 비동기적으로 검색을 하는 코드를 만들어 보았다. 검색어는 onclick 이벤트가 실행되면서 data라는 변수에 담겨서 라우터로 이동한다.
• 라우터에서는 받은 data를 사용하여 원하는 정보를 db에서 찾아 클라이언트로 보내준다.
• 클라이언트에서는 받은 데이터를 DOM객체를 이용하여 화면에 뿌려준다!

1. 컴퓨터 과학: 컴퓨터 과학과 컴퓨터 공학의 차이가 과연 무엇인가에 대해 구글에 물어봐도 여간 이해가 명확히 되지 않는다. 과학과 공학은 분명히 다른 것인데 누군가 그것이 어떻게 다른것이냐 라고 물어본다면 난 대답하지 못할것이다.ㅠㅠ 🤓그래서 내 나름 머리를 굴려본 결과 과학은 어떤 것의 본질과 기초를 찾아 연구하고 발견해 나가는 것이라면 공학은 그것을 바탕으로 새로운 것을 창조해내는 것이라 생각했다. 그렇다면 컴퓨터 과학이라는 것도 컴퓨터의 본질을 파고드는 학문일 것이다.

2. 2진법: 처음 2진법을 배웠을 때가 고등학생 때 였던 것 같다. 수학 시간으로 기억하는데 저게 대체 왜 필요한가 라는 생각만 가득했다. 우리는 10진법을 쓰기 때문에 2진법 배워서 뭐해~라는 마인드였다. 우리가 10진법을 쓴다면 컴퓨터는 2진법을 쓴다. 10진법이 사람의 언어라면 2진법은 컴퓨터의 언어인 셈.

3. 비트: 초등학생 때 방과후 워드자격증반에서 배웠던 크기를 세는 단위. 그 때는 비트 바이트 메가바이트 등등 외우면서 자격증을 땄지만 정작 무엇인지는 몰랐다. 이번에 좀 더 정확히 배운 것은 2진 숫자를 비트라는 단위로 측정한다는 것. 고로 비트는 0 또는 1을 가리킨다.

4. 비트열: 문자가 모여 문자열이 되는 것 처럼 비트가 모여 비트열이 된다. 8비트가 1바이트가되고, 1,000바이트는 1킬로바이트가 된다.

2. 정보의 표현

1. ASCII: 이걸 처음 들었을 때도 2진법을 첨 배웠을 때랑 비슷한 반응이었다.ㅋㅋ 왜 문자를 숫자로 바꿔? 굳이? ...ㅎ 0과 1밖에 모르는 컴퓨터에게 우리가 쓰는 문자를 숫자(0과 1)로 바꿔 정의해 준 것이 ASCII 코드

3. 알고리즘

1. 알고리즘: 어떠 문제를 해결할 수 있는 수많은 방법들이 있고, 그 중에서 어떠한 규칙을 갖고있는 것. 그게 알고리즘이다.

2. 의사코드: 뭔가 단어가 낯설고 어렵다. 하지만 그냥 명령하는 것이라 정리하면 된다. 내가 동생한테 목마르니까 물갖다줘라고 하는 것처럼, 컴퓨터한테도 ~하면 ~해줘 라고 명령하는 것이 의사코드.

동영상에서 너무 쉽게 잘 설명해줘서 이해하는 데에 큰 어려움은 없었다. 이렇게 공부하면서 컴퓨터 세계에 뿌리를 더 튼튼하게 내리고 싶다. 😁희망사항ㅎㅎ

• 컨트롤러: 일종의 작은 CPU로서, 각 하드웨서 장치마다 존재하면서 이들을 제어하는 작은 CPU(메모리 컨트롤러, 디스크 컨트롤러, 입출력 컨트롤러 등)

2. CPU 연산과 I/O 연산

• 로컬버퍼: 각 장치 컨트롤러가 장치로부터 들어오고 나가는 데이터를 임시로 저장하기 위해 가지고 있는 작은 메모리 ex) 데이터 읽기 명령👉디스크 컨트롤러가 내용을 읽어 로컬버퍼에 저장👉디스크 컨트롤러가 해당 작업 끝났는지 체크👉끝났으면 인터럽트 발생시켜 CPU에 보고
• 인터럽트: 컨트롤러들이 CPU의 서비스가 필요할 때 이를 통보하는 방법. 각 컨트롤러가 인터럽트를 발생시키면 CPU는 하던 일을 잠시 멈추고 해당 인터럽트 수행 코드를 찾아 수행

3. 인터럽트의 일반적 기능

• (좁은 의미의) 인터럽트: 하드웨어 인터럽트
• (넓은 의미의) 인터럽트: 하드웨어 인터럽트 + 소프트웨어 인터럽트
• 하드웨어 인터럽트(Interrupt): 하드웨어(컨트롤러 등)가 발생시킨 인터럽트 보통 인터럽트라고 하면 하드퉤어 인터럽트를 의미
• 소프트웨어 인터럽트(Trap): 소프트웨어가 발생시키는 인터럽트
  • 예외상황(Exception): 프로그램 오류 처리를 위해 발생시키는 인터럽트(비정상적인 작업 시도, 권한 없는 작업 시도 등)
  • 시스템 콜(System Call): 사용자 프로그램이 운영체제 내부에 정의된 코드를 실행하고 싶을 때 운영체제에 서비스를 요청하는 방법(사용자 프로그램이 권한이 없기 때문에)
• 인터럽트 처리루틴(인터럽트 핸들러): 해당 인터럽트를 처리하는 코드
• 인터럽트 백터: 해당 인터럽트를 처리해야 하는 코드가 담긴 주소

4. DMA

• DMA(Direct Memory Access): CPU이외에 메모리에 접근이 가능한 장치 👉메모리는 CPU에 의해서만 접근할 수 있는데, 입출력 장치가 메모리 접근을 원할 때마다 인터럽트를 요청하면 CPU가 방해 받아 효율성이 떨어지기 때문에 대리인 같은 느낌으로 만든 것 👉로컬버퍼에서 메모리로 읽어오는 작업을 CPU가 대신함

5. 하드웨어의 보안

• 커널모드: 운영체제가 CPU의 제어권을 가지고 운영체제 코드를 실행하는 모드(모든 권한 보유)
• 사용자모드: 일반 사용자 프로그램이 제한적인 명령만 수행
• 모드비트(mode bit): 커널모드인지 사용자모드인지 감시하여 해당 권한에 맞는 명령 수행하도록 함
  • 모드비트 0: 커널모드, 모든 명령 수행 가능
  • 모드비트 1: 사용자모드, 제한된 명령 수행 가능 👉CPU가 제어권을 넘길 때 모드비트를 같이 세팅해서 넘김
• 특권명령: 시스템의 보안과 관련된 명령, 모드비트가 0일 때만 수행 가능(=운영체제만 수행)

6. CPU 보호

• 타이머(timer): CPU가 하나의 프로그램에 의해 독점되는 것을 막기 위한 하드웨어(ex무한루프 코드 실행) 👉CPU를 점유할 시간을 세팅하고 타이머가 0이 되는 순간 인터럽트 발생 👉로드 타이머(load timer): 타이머의 값을 세팅하는 명령, 특권명령

7. 시스템 콜을 이용한 입출력 수행

• 입출력 명령은 특권명령에 해당하기 때문에 사용자 프로그램이 직접 수행 불가 👉운영체제에 요청하여 수행

1. 입출력 명령 발생
2. 사용자 프로그램이 운영체제에 시스템 콜이라는 서비스 대행 요청 (소프트웨어 인터럽트)
3. 트랩 발생해 CPU의 제어권이 운영체제로 넘어감
4. 운영체제가 해당 요청 수행 ex)컨트롤러에게 입출력 요청 하도록 명령
5. 컨트롤러가 입출력 수행 완료 시 CPU에게 인터럽트 발생시켜 완료를 알림 (하드웨어 인터럽트)
6. 해당 사용자 프로그램이 다시 CPU 할당받음

용어들이 너무 생소하고 어렵다ㅠㅠ 그래서 강의 들을 때 보다 혼자 정리하는 데 시간이 훨씬 더 필요하다ㅠ 그래도 뭔가 처음부터 차곡차곡 쌓아 나가는 느낌이라 재미있다!🤗

passport-local을 추가로 사용하여 코드를 작성해봤다. 이전에 passport-kakao, passport-naver 사용하여 기능을 구현했고 추가로 local로그인을 위해 작업을 해줬다.

📖참고 사이트: 공식 페이지, 구글 검색

1. 설치

npm install passport --save npm install passport-local --save

• package.json에 추가되었다

2. 모듈 추가&설정

var passport = require("passport"); var LocalStrategy = require("passport-local").Strategy;

--passport는 세션을 사용하기 때문에 app.use(session~~)보다 뒤에 있어야 한다--

app.use(passport.initialize()); app.use(passport.session());

3. 코드 작성

//라우터 파일(login.js)
    passport.use(new LocalStrategy({    
        usernameField: 'username',
        passwordField: 'password'
    }, function(username, password, done){    
        let conn = mysql.createConnection(conn_info);
        conn.query('select id from guest where id=?', username, (err, result)=>{
            if(result.length >=1){
                var user = {
                    id: username
                }        
                return done(null, user)     //done(에러, 성공했을 때 값, 사용자정의 메시지) 
            }else return done(null, false)  //done을 통해 로그인 성공 여부를 판단
        })
    }
    ))


    app.post('/login/local', passport.authenticate('local', {
        successRedirect: '/',
        failureRedirect: '/login'
    })
    )

passport.serializeUser(function(user, done){
    done(null, user.id)
})

passport.deserializeUser(function(req, user, done){ 
    done(null, user)                                
})

//ejs파일(login.ejs)
    <form action="/login/local" method="POST" >    

       ID: <input class="col-md-8" type="text" name="username">
       PASSWORD: <input class="col-md-8" type="password" name="password">
       <button type="submit" class="btn">continue</button>

    </form>    

🔥login.js

🔥logins.ejs

• return done 성공시: done(null, 유저정보) 실패시: done(null, false, {message:''})

• passport.serializeUser()와 passport.deserializeUser()는 필수 => 세션을 생성하고 체크하기 때문!

처음 시작부터 어려웠던 passport를 정리해보기 위해 작성했는데, 오늘 passport-local로 구현한 시간보다 흐름을 정리해서 글 쓰는게 더 오래걸렸다ㅜㅜ 사실 코드는 검색하면서 복붙하면 어느 정도는 커버된다. 하지만 그렇게 하면 내가 이걸 이해하고 사용하는게 아니기 때문에 최대한 글로 정리하면서 코드 진행의 흐름을 이해해보려고 했다. 아직 다 100프로 이해한 것은 아니지만 맨 처음보다 훨씬 가닥이 잡혔고 처음부터 만든다 해도 큰 어려움 없이 할 수 있을 정도로는 배운 것 같다.

이제 또 할 것은 회원가입 페이지도 만들어주고, 로그인할 때 비밀번호도 체크해주기~

그래도 오늘 목표했던 라우터 리팩토링 해주고 마쳤다. 리팩토링보다 저 별거 아닌 에러를 찾느라 시간이랑 기운을 너무 뺐지만ㅠ

기운업성서 일기도 못쓰겠다

강의: http://www.kocw.net/home/search/kemView.do?kemId=1046323

책은 따로 구매하였고 강의는 kocw에서 무료로 들을 수 있다.

1. 운영체제의 정의

1. 운영체제란 컴퓨터 하드웨어 바로 윗단에 설치되는 소프트웨어
2. 컴퓨터 전원을 킴과 동시에 운영체제가 실행되는데 소프트웨어가 컴퓨터 시스템에서 실행되기 위해서는 메모리에 그 프로그램이 올라가 있어야 함(운영체제도 하나의 소프트웨어)
3. 운영체제 중 항상 필요한 부분만을 메모리에 올려놓는데 이 때 메모리에 상주하는 운영체제의 부분을 커널이라고 함(=좁은 의미의 운영체제)
4. 넓은 의미의 운영체제는 커널을 포함한 시스템을 위한 유틸리티들을 광범위하게 포함하는 개념

2. 운영체제의 기능

• 운영체제는 하드웨어를 위한 역할과 사용자를 위한 역할 두 가지로 나눌 수 있음

1. 하드웨어를 위한 역할: 컴퓨터 시스템 내의 자원을 효율적으로 관리
2. 사용자를 위한 역할: 컴퓨터 시스템을 편리하게 사용할 수 있는 환경 제공

3. 운영체제의 분류

• 3가지의 방법으로 분류할 수 있음

1. 동시작업 가능 여부 1-1. 단일작업용 운영체제: 한 번에 하나의 프로그램만 실행시킬 수 있는 운영체제 1-2. 다중작업용 운영체제: 동시에 2개 이상의 프로그램을 처리할 수 있는 운영체제

2. 사용자의 수 2-1. 단일 사용자용 운영체제: 한 번에 한 명의 사용자만이 사용하도록 허용하는 운영체제 2-2. 다중 사용자용 운영체제: 여러 사용자가 동시에 접속해 사용할 수 있게 하는 운영체제(like 서버)

3. 처리방식 3-1. 일괄처리(batch processing): 요청된 작업을 일정량씩 모아서 한꺼번에 처리하는 방식 3-2. 시분할 방식(time sharing): 여러 작업을 수행할 때 컴퓨터의 처리 능력을 일정한 시간 단위로 분할해 사용하는 방식 3-3. 실시간 운영체제(real time): 정해진 시간 안에 어떠한 일이 반드시 처리됨을 보장해야 하는 시스템에서 사용(경성 실시간 시스템 hard realtime system & 연성 실시간 시스템 soft realtime system 으로 세분화)

4. 운영체제의 예

• MS윈도우

1. MS-DOS: 명령어 입력 방식, 초보자에게 어려운 것이 특징
2. MS-WINDOW: 그래픽 인터페이스와 마우스 기능 지원, 플러그 앤 플레이 지원

• 유닉스

1. 대부분의 코드가 C언어로 작성: 당시 대부분의 운영체제가 어셈블리 언어로 작성되어 어려웠음
2. 프로그램 개발에 용이: 여러 가지 유틸리티들 지원
3. 소스 코드 공개: 연구, 개발 용이
4. 높은 이식성: 소프트웨어를 다른 기종의 기계로 옮기는 것이 용이

5. 운영체제의 자원 관리 기능

• 하드웨어 자원과 소프트웨어 자원으로 분류
• 하드웨어 자원: CPU, 메모리, 주변장치, 입출력 장치

🔥CPU 관리 방법: CPU 스케줄링🔥

1. 목표: CPU를 가장 효율적으로 사용하면서도, 특정 프로세스가 불이익을 당하지 않도록 하는 것
2. 기법: 선입선출(First Come First Served), 라운드 로빈(Round Robin), 우선순위(priority) 등 2-1. 선입선출 기법(FCFS): 먼저 온 프로세스를 먼저 처리👉비효율적 2-2. 라운드 로빈 기법: CPU를 한 번 할당받아 사용할 수 있는 시간을 일정하게 고정된 시간으로 제한,FCFS의 단점 보완하고자 고안된 기법 2-3. 우선순위 스케줄링: 대기 중인 프로세스들에 우선순위를 부여하고 우선순위가 높은 프로세스에 CPU 먼저 할당👉우선순위는 과거 기록을 토대로 선정

🔥메모리 관리 방법🔥

1. 목표: 프로그램이 CPU에서 실행되려면 해당 부분이 메모리에 올라가 있어야 하는데 한정된 메모리 공간에 여러 프로그램을 수용하기 위한 효율적인 관리가 목표
2. 방식: 고정분할(fixed partition), 가변분할(variable partition), 가상메모리(virtual memory) 2-1. 고정분할 방식: 물리적 메모리를 몇 개의 분할로 미리 나누어 관리 👉융통성이 없음, 분할 개수만큼만 프로그램 적재 가능, 분할된 크기보다 큰 프로그램은 적재 불가능, 내부조각 발생 ✔내부조각(internal fragmentation): 분할의 크기보다 작은 프로그램이 적재되는 경우 해당 분할 내에 남는 영역이 발생하는 것(=낭비되는 공간, 비효율의 상징) 2-2. 가변분할 방식: 매 시점 프로그램의 크기에 맞게 메모리를 분할해서 사용하는 방식 👉물리적 메모리의 크기보다 더 큰 프로그램의 실행은 불가능, 외부조각 발생 ✔외부조각(external fragmentation): 프로그램에 할당되지는 않았지만 그 크기가 작아 프로그램을 올리지 못하는 메모리 영역

2-3. 가상메모리 기법: 물리적 메모리보다 더 큰 프로그램이 실행되는 것을 지원👉가상메모리의 주소를 물리적 메모리의 주소로 매핑 후 현재 사용되고 있는 부분만 메모리에 적재(나머지는 하드디스크 같은 보조기억장치에 저장 = 스왑영역) ✔가상메모리 주소 공간은 페이지라는 동일한 크기위 작은 단위로 나뉘어 물리적 메모리와 스왑 영역에 일부분씩 저장 = 페이징 기법

🔥주변장치 및 입출력 장치 관리 방법🔥

1. 인터럽트라는 매커니즘을 통해 관리가 이루어짐 ✔인터럽트: 주변장치가 CPU의 서비스가 필요한 경우에 신호를 발생시켜 서비스를 요청할 때 발생시키는 신호
2. 방법: CPU가 CPU스케줄링에 따라 작업을 수행하다가 인터럽트가 발생하면 하던 일을 잠시 멈추고 인터럽트에 의한 요청 서비스를 수행(하던 일 저장해두고 다시 인터럽트 처리 후 다시 돌아옴)
3. 컨트롤러(controller): 주변장치들이 각 장치마다 그 장치에서 일어나는 업무를 관리하기 위해 가지고 있는 일종의 작은 CPU👉해당 장치에 대한 업무를 처리하고, 이를 메인 CPU에 인터럽트를 발생시켜 보고하는 역할

작년에 정보처리기사를 공부하면서 배웠던 내용이라 생소하지는 않았다. 하지만 자격증을 위한 공부를 했고, 설명도 너무 어려웠기에 용어를 외워 자격증 취득에만 집중했다. 그래서 용어는 익숙해도 이게 무슨 의미인지 전혀 몰랐다ㅜㅜ

그런데 이 책은 너무 쉽게 설명이 되어 있다. 강의를 듣기 전에 정독을 먼저 하는데도 교양책 읽는 것 처럼 쉽게 이해가 되었다. 강의를 들으면서 한번 더 익히고, 마지막으로 블로그에 정리하면서 또 읽으니까 이제 운영체제라는 것이 이전처럼 그리 어렵게만 느껴지지는 않는다.

두 지도를 합쳤을 때 어느 한쪽이 "#"이라면 전체 지도도 "#"이다. 전체 치도를 '#' 와 " "(공백)으로 구성된 문자열 배열로 출력하는 문제

2. 풀이

1. arr에 담긴 10진수들을 2진수로 변환한다.
2. 같은 index끼리 비교해서 어느 한쪽이 1이면 "#"반환 그렇지않으면 공백 반환

🌈문제가 어렵진 않다. 하지만 "#"을 반환하는 코드를 어떻게 작성해야 할지 고민을 좀 하는 시간이 필요했다.

3. 생각해봐야 하는 부분

1. nxn의 지도이기 때문에 10진수👉2진수 했을 때 5자리여야 하지만 1은 2진수로 바꿔도 1이기 때문에 이 부분을 처리해줘야 했음 🌈나는 for문을 돌려서 뒤에서부터 탐색해서 n만큼 돌려줬음 🌈다른 사람들은 repeat()나 padStart()를 사용했다

4. 코드

function solution(n, arr1, arr2) {
    var answer = [];
    var temp = ""

    arr1 = arr1.map(d=>d.toString(2))    //2진수로 변환
    arr2 = arr2.map(d=>d.toString(2))

    for(var i=0; i<arr1.length; i++){
        for(var j=1; j<=n; j++){
          //arr1[i]와 arr2[i]의 맨 마지막 값부터 탐색
          //어느 하나라도 1이면 "#"반환 그렇지 않으면 공백 반환
            if(arr1[i][arr1[i].length-j] == 1 || arr2[i][arr2[i].length-j] == 1) temp += "#"
            else temp += " ";
        }
      //맨 뒤부터 탐색했기 때문에 뒤집어 주어야 함
        answer.push(temp.split("").reverse().join(""))
        temp = ""
    }

    return answer;
}

5. 배운 것

🌈문제가 어렵지는 않았지만 다른 사람의 코드를 보면서 이렇게 간단히 만들 수 있고, 이런 기능들을 사용할 수 있다는 것을 배운 문제이기 때문에 작성해 본다.

1. 특정 길이만큼 특정 문자열로 채울 때: repeat()나 padString()을 사용할 수 있다.
2. 나는 for문을 돌려서 구현했지만 비트연산자: |를 활용할 수 있다. 몰랐던 덕분에 이중for문으로 노가다하는 코드를 짜버림... 👉비트 연산자.. 정보처리기사 딸 때 열심히 공부했지만 오랜만에 봐서 그런지, 실제로 사용해보지 않아서 그런지 낯설었다..ㅜㅜ 또 하나 배워간다!

6. 다른 사람의 코드 첨부

function solution(n, arr1, arr2) {
    return arr1.map((i, index) =>('0'.repeat(n) + (i | arr2[index]).toString(2)).slice(-n)).map(i => i.replace(/0/g, ' ').replace(/1/g, '#'));
}

프로그래머스: 2019 KAKAO BLIND RECRUITMENT>실패율 카카오가 붙어있어서 풀기도 전에 쫄았다..ㅠㅠ 하지만 이제 프로그래머스 level1에서는 카카오나 챌린지 문제 밖에 없기 때문에 풀어야 한다😭😭 😎그래도 풀었긴 함!! 한...3시간쯤 걸려서요...

1. 문제

• 정리: 게임 스테이지마다 실패율을 계산한 후 내림차순으로 반환하기

• 문제를 천천히 읽으면서 이해해야 한다!

2. 해결과정

🌈 간단!

1. 실패율을 구한다.
2. 내림차순으로 정렬한다..

매우 간단하지만 코드 작성과정은 그렇지 못했음. 푸는 과정에서 접근 방법도 많이 바꾸며 삽질 여러번 했음 ㅠㅠ

1. 문제를 잘못 이해해서....실패율 구하는 과정에서 시간을 많이 버려버림 ㅜㅜ
2. 내림차순 할 때 스테이지를 어떻게 return 할 것인지 고뇌에 빠짐: key와 value값을 주기로 함.
3. 이제 key와 value에 어떻게 접근해야할 지 고뇌에 빠짐: 내림차순 정렬 하기위해서 혼자 이것저것 해보다가 결국 구글검색함(매우 간단했음)
4. 코드 다듬어주기: 일단 구현을 목적으로 짠 코드라서 for문이 두개가 되었고, 코드가 매우 길었기 때문에 for문을 합쳐주고! 불필요한 부분 떼내고 다듬어 줬음(이 작업하면서 통과했던 테스트케이스가 안돌아가고..ㅎ..계속 수정의 반복..)

3. 코드

// 2019 KAKAO BLIND RECRUITMENT

function solution(N, stages) {
    var answer = [];
    var fail = [];
    var now = [];
    var result = [];
    var fail_count = 0;
    var now_count = 0;

    for(var i=0; i<N; i++){        //실패율 구해서 result 배열에 담는다
        stages.map(num =>{
            if(num==i+1) fail_count += 1;
            if(num>=i+1) now_count += 1;
        })
        fail.push(fail_count);        //스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수
        now.push(now_count);        //스테이지에 도달한 플레이어 수
        fail_count = 0;
        now_count = 0;
        result.push({fail:fail[i]/now[i],stage:i+1})    //실패율 계산해서 result에 담는다
    }//1️⃣console.log(result)

    result.sort((a,b)=>b.fail-a.fail).map(n=>answer.push(n.stage))
  //👆result를 내림차순 정렬 한 다음에 차례로 result.stage의 value를 answer에 담는다

    return answer;
}

• if(num==i+1) fail_count += 1;: 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수
• if(num>=i+1) now_count += 1;: 스테이지에 도달한 플레이어 수

👉실패율: 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수

• //1️⃣console.log(result)의 결과
• result.sort((a,b)=>b.fail-a.fail): 배열안의 value에 접근해서 내림차순 정렬하는 코드

4. 후기

• 풀 때는 힘들었는데 정리하면서 보니까 새로운 메소드를 사용한 것도 아니고, 푸는 과정이 복잡한 것도 아니다ㅠㅠ 그런데 풀 때는 왜케 어려웠던 것인지ㅜㅜ

검색결과 이유는 단순했다. 종이를 재단할 때 반으로 재단해도 같은 비율을 유지해야 낭비되는 종이가 없기 때문(A0/2=A1). 그렇게 만들어진 종이가 A4사이즈 ㅎㅎ

종이가 (세로)x:1(가로)의 비율일 때 반을 자른 후에는 (세로)1:x/2(가로)가 되어야 같은 비율을 유지한 채로 새로운 종이가 탄생한다. 결국 1:루트2의 비율이 나와야하고 그게 A4의 비율이었던 것.

그냥 공부하다 refresh겸..써본 일기

A4용지 속에 숨겨진 규격의 비밀에서 본 정보😗

비전공자로써 전공자가 4년동안 배우는 지식을 털끝만큼이라도 따라가기 위해 발버둥 치던 중 네이버 부스트코스에서 CS50 스터디를 모집한다는 광고를 보고 바로 신청했다! 😎혼자하는 공부보단 역시 같이하는게 항상 더 힘이나고 동기부여가 된다! 신청과정은 약간의 문제+지원동기만 간단히 작성하면 되었고 스터디에 참가하게 되었다~!

📢1주차 진행 중 문제아닌 문제가 발생했는데 팀 리더분이 개인사정으로 중도하차 하셔서 팀원 중 한명이 리더를 맡아야 했고 그게 내가 되었다 아무것도 모르는 내가 잘 할 수 있을 지는 모르지만 열심히 해보기로 했다ㅜㅜ!🤗

🚩이제 2주차가 진행되고 있는데 6주차까지 탈 없이 진행됐으면 좋겠고 많이 배울 수 있는 계기가 되었으면 좋겠다!!!!!!

+이번주는 C언어를 배우는 주간이다. C언어와는 처음만나는데 너무 설렌당..💖

컴퓨터를 제대로 이해하려면 C언어를 배우라는 글을 본 적이 있기에 그 이유가 뭔지 느끼고 싶다!

• 단어마다 짝수 인덱스는 대문자로, 홀수 인덱스는 소문자로만 바꿔주면 되는 문제

2. 풀이 계획

1. 받은 문자열을 배열에 쪼개 넣어줌: split('')
2. for문으로 돌리면서 짝,홀수 체크 후 upper또는 lower처리한 문자를 answer에 넣어줌
3. 공백 만났을 때는 index[0]부터 공백까지 잘라내버림

3. 에러 발생

• 계획은 나름 괜찮았으나 많은 에러를 만났고 수많은 테스트 케이스를 실패했다. 테스트 케이스가 공개되어 있지 않기 때문에 직접 만들어가면서 테스트ㅠㅠ 결론은 전체적으로 봤을 때 for문을 부적절하게 사용하고 있던게 원인이었다.

1. 첫번째 원인: 공백 처리 시 break 사용을 하지 않아서 무한루프에 빠져버림(후에 break 안써줘도 되도록 for문 조건을 수정) + 런타임 에러
2. 두번째 원인: for문을 제 때 끝내지 못해서 toUpperCase()와 toLowerCase()가 undefined를 체크하게되어 type error 발생
3. 세번째 원인: 공백 처리 시 continue 사용을 하지 않아서 공백이 연속으로 나오면 처리할 수 없었음

4. 코드

function solution(s) {
    var answer = '';
    var word = s.split('')    //배열에 한 글자씩 담기

    for(var i=0; i<word.length; i++){
        if(word[i]==' '){    //공백일 때
            answer += ' '    //공백을 answer에 넣고
            word.splice(0,i+1);    //index[0]부터 공백까지 다 잘라버림
            i = -1;        //i++이 되기 때문에 -1로 설정해줘야 다시 0부터 시작가능
            continue;

            //if(word.length==0) break;
        }
        if(i%2 == 0){    //
            answer += word[i].toUpperCase();
        }else{
            answer += word[i].toLowerCase();
        }
    }
    return answer;
}

5. 후기

• 예상치 못했던 문제들을 너무 많이 만나서 그냥 다른 사람들이 작성한 코드를 보고 따라서 작성하고 싶은 생각이 계속 들었지만 내가 생각한 방향으로 끝까지 작성해보고 싶었고 결국 해냈다. 효율적이지 않더라도 일단은 내가 생각했던 방향으로 해낸것이 뿌듯 ㅎㅎ

2. 풀이 과정

• 문제를 보자마자 너무 반가웠다! 이전에 소수찾기 문제에서 제곱근을 활용한 부분을 이해하기 위해 쏟아부었던 시간을 보상받는 느낌이었기 때문!! 그래서 전에 정리했던 제곱근을 활용해서 문제를 풀어보고자 하였다.

1. 약수를 배열에 저장 =>for문으로 돌리되 증가하는 변수 i의 값은 n의 제곱근까지만 증가하도록해서 쓸데없이 for문이 많이 진행되지 않도록 하였다.
2. map을 활용하여 배열에 저장된 수를 다 더해줌

3. 코드

function solution(n) {
    var answer = 0;
    var aliquot = []

    for(var i=1; i*i<=n; i++){
        if(n%i==0){
            aliquot.push(i, n/i)
        }
    }

    var sqrt = Math.sqrt(n)
    if(Number.isInteger(sqrt) == true) aliquot.splice(aliquot.indexOf(sqrt), 1)

    aliquot.map(num => answer += num)

    return answer;
}

• 몇몇 테스트케이스를 통과 못하는 상황 발생ㅠ 탐색 후 예외처리 해줌 🚩예외처리: aliquot.push(i, n/i)에서 만약 n이 36이고 i가 6이라고 가정한다면 배열에 6이 두번 들어가는 상황이 발생하기 때문에 테스트를 통과하지 못했던 것.
• =>for문안에 코드를 작성하여 예외처리를 할 수도 있었으나 그렇게 한다면 비효율적이라 생각하여 밑에 코드를 따로 추가해서 한 번만 체크하도록 작성하였다.*

4. 배운 것

• Math.sqrt(): 숫자의 제곱근을 반환 Math.sqrt(9); // 3
• Number.isInteger(): 값이 정수인지 판별하는 메서드 Number.isInteger(9); // true

5. 후기

• 매일 너무 못하는 것 같아 자괴감에 빠지면서 힘들고 그랬는데 그래도 그렇게 투자한 시간들이 때때로 오늘처럼 갑자기 빛을 보는 순간이 있다. 정말 별거 아니지만 이 순간들이 있어서 더 열심히 하게된다.

• 이 문제를 풀면서 내가 문제를 풀기위한 코드만 작성하는 것이 아닌 효율성을 생각하면서 코드를 작성하고 있다는 사실을 알고 놀랍기도 했지만 어색하기도 했다. 이전에 전혀 상상할 수 없었던 나의 모습이기 때문엥ㅎㅎㅎ너무 신기하다. 물론 그렇게 해서 내가 작성한 코드가 진짜 효율적인지 확신은 못하지만 메서드 사용법도 몰라 문제푸는 데에만 전전긍긍하던 일주일 전을 생각하면 감격스럽다😊

2. 해결 방법 구상

🌈테스트 케이스: s는"AB", n는 1 이라고 가정

1. s("AB")를 Ascii 코드로 변환해 배열에 담는다
2. 배열 값마다 +n(+1)을 해준다
3. 예외 처리를 해준다(a~z:65~90 / A~Z:97~122 이므로 해당 범위 넘어갈 경우와 공백일 경우의 처리 필요)
4. 배열에 담긴 Ascii 코드를 String으로 변환 후 문자열로 return 한다

3. 코드

function solution(s, n) {
    var answer = '';
    var ascii = []

    for(var i=0; i<s.length; i++){    //Ascii변환 후 배열에 담는다    
        ascii.push(s.charCodeAt(i))
    }

    ascii = ascii.map((item) => {    //예외처리와 +n 해준다
        return item<92?(item==32?(item):(item+n>=91?(item+n-26):(item+n))):(item==32?(item):(item+n>=123?(item+n-26):(item+n)))
    })

  //string으로 변환 후 배열을 문자열로 반환한다
    answer = ascii.map(item => String.fromCharCode(item)).join("")


    return answer;
}

4. 예외처리

🌈 +n을 한 결과값이 Ascii코드의 알파벳 범위를 벗어난 경우 🌈 공백일 경우 item<92?(item==32?(item):(item+n>=91?(item+n-26):(item+n))):(item==32?(item):(item+n>=123?(item+n-26):(item+n)))

1. item<92: 대/소문자 구분
2. item==32: 공백 여부 확인 2-1. 공백이 맞으면: return item 2-2. 공백이 아니면: 3번으로
3. (대문자)item+n>=91 / (소문자)item+n>=123: +n을 했을 때 Ascii 코드의 AZ / az의 범위를 넘어가는지 확인 3-1. 넘어갈 경우: item+n-26(알파벳이 26개 이므로 한바퀴 빼줘야 함) 3-2. 넘어가지 않을 경우: item+n

5. 다른 사람의 풀이

• 아스키코드로 변환하지 않고 쓴 코드 중 가장 깔끔하다고 생각한 코드

• 난 무조건 아스키코드로 해야겠다라는 생각 뿐이었는데 이렇게 할 수도 있구나라고 생각하게 해 준 코드

  function solution(s, n) {
    var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var lower = "abcdefghijklmnopqrstuvwxyz";
    var answer= '';
  
    for(var i =0; i <s.length; i++){
        var text = s[i];
        if(text == ' ') {
            answer += ' '; 
            continue;
        }
        var textArr = upper.includes(text) ? upper : lower;
        var index = textArr.indexOf(text)+n;
        if(index >= textArr.length) index -= textArr.length;
        answer += textArr[index];
    }
    return answer;
  }

6. 배운 것

• charCodeAt(): 해당 인덱스의 문자를 Ascii코드로 변환 'ABC'.charCodeAt(0); // returns 65
• fromCharCode(): Ascii코드를 문자로 변환 String.fromCharCode(65, 66, 67); // "ABC"
• includes(): 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환 'Blue Whale'.includes('blue'); // returns false

시험은 기억력 테스트 4분 + 논리력 테스트 2시간 둘 다 16단계에서 실패했다 기억력 테스트는 15단계까지는 집중하면 풀 수 있었는데 16부터는 어나더 레벨이라고 느껴졌다ㅠㅠㅠ모든 시간을 16단계 푸는데 갖다 부었다ㅎ 논리력 테스트는 연습으로 한 번 풀어봐서 그런가 난이도는 비슷하게 느껴졌다. 15단계에서 거의 한시간을 사용한 것 같다.. 한 10분 정도 남겨놓고 아슬아슬하게 풀었다. 다음 16단계도 풀어보고 싶었는뎅..

결과는 48시간 안에 온다하는데 불합격한다 하더라도 난 2시간 동안 최선을 다해서 문제를 풀었기 때문에 쿨하게 받아들일 것. 라 피신을 경험하고 싶은 미련은 남겠지만..😊..

2020/1/19 테스트 합격 메일이 왔다ㅎㅎㅎ 다행이다 근데 체크인 미팅 신청이 너무 빡셀 것 같다 일주일만 더 일찍 알았다면 1/14체크인 미팅 도전할 수 있었을 텐데ㅠㅠ아쉽다.. 내 앞에 대기자만 1300명 ㅠㅠㅠㅠㅠㅠㅠ 다가올 체크인 미팅 신청할 때 수강신청 하는 기분을 오랜만에 느낄 수 있을 것 같다 실패하면 또 다음 신청을 기다려야 하기 때문에 테스트보다 더 떨릴 것 같소...

• 이 문제에서는 다섯개만 사용해서 사용해서 저 42를 다 먹어야 한다.
• 맨 처음 몇 문제 빼고는 전체적으로 재귀함수로 동작한다.
• 이 문제 또한 마찬가지인데 저 빨간부분에서 빨간색에만 집중하다가 문제의 해결방법을 놓치고 있었다. 빨간색으로 어떻게든 해보려고...난리를...ㅎ

후기

• 재귀함수를 이용한 알고리즘을 주구장창 푸는 느낌이었다.
• 재밌지만 힘들다ㅠㅠ또 정답을 찾기가 어려워 뭔가 더 막막한 느낌도 있다.
• 풀면서 느꼈는데 지난번에 재귀함수에 시간을 쏟아서 한 번 정리한 이후로 훨씬 편해진 느낌이다. 문제에서 빨간색에만 집착하지 않았어도... 금방 풀었을 건데.. 아직 부족하다는 걸로 받아들이고 더 공부해야겠다.

정답🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩

🧡항상 느끼고 생각하는 거지만 뭐든 처음이 제일 어렵다. 누군가에게 먼저 처음 말을 걸어보니 내 영어가 부족해도 의사소통은 잘 되었고, 그렇게 활동하다보니 다른 외국인들이 나에게 먼저 채팅을 보내왔다. 그렇게 거의 하루종일 다양한 사람들과 영어로 채팅을 한 것 같다.

💛불과 한 달 전만 하더라도 내가 누군가와 영어로 소통을 할 수 있으리라곤 생각도 못했는데 부족할지라도 누군가에게 영어로 내 생각을 전달할 수 있다는게 신기하다. 물론 내 생각을 영어로 업데이트하는 시간이 좀 걸려서 아직 스피킹은 좀 무리겠지만 글로써 간단한 대화하는 것 만으로도 장족의 발전이다. 이 순간들을 잊지말고 계속 공부하자👏👏

• 문자열의 특정 문자를 기준으로 오름차순 정렬하는 문제

2. 해결방법

• 메서드 사용법만 안다면 상당히 간단한 문제였다.
• sort()메서드의 사용
• localeCompare()메서드의 사용 👉sort는 거의 공식 외워 쓰듯이 해서 작동 원리를 제대로 알지 못했고 localeCompare은 전혀 몰랐던 메소드라서 좀 헤맸던 문제이다. 이 문제를 풀기위해 검색하고 공부하면서 두 개의 메서드를 내 것으로 익혔다! 👉요즘 모르는 메서드나 찾고싶은 메서드가 있으면 MDN사이트를 먼저 들어가게 된다. 이전에는 사람들이 하나하나 설명해 주는 글이 아니면 이해하기 너무 어려웠는데 이젠 MDN으로 보는 것이 편해졌다 ㅎㅎ 조금 공부하다보니 깔끔한 예제와 설명이 최고인 것 같다.

  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare

3. 코드

function solution(strings, n) {
    var answer = [];
    return answer = strings.sort((a,b)=>a[n]===b[n]?a.localeCompare(b):a[n].localeCompare(b[n]))
}

• 문제 이해하기는 쉽다. 범위 안에서 소수의 개수 찾기
• 하지만 풀긴 어려웠다. 나한텐 다 어렵다ㅠ

2. 해결 과정

• 처음은 단순히 이중 for문으로 돌렸다. 하지만 시간 초과로 실패하고 검색을 시작. 이중 for문을 쓸 순 있으나 더 효율적으로 작성해야 했던 것.
• 내 목표는 일단은 다양한 알고리즘을 접하고 다양한 해결 방법, 메서드 익히는 것이기 때문에 이전처럼 너무 시간을 끌지 않으려고 한다.
• 에라토스테네스의 체를 사용한다는 정보와 관련 코드를 발견했고, 코드를 살펴보았다.

  🚀에라토스테네스의 체

• 거의 ctrl+c ctrl+v처럼 보이지만 코드를 이해한 다음 내가 비슷한 방향으로 직접 작성해 본 것에 의의를 둔다.

3. 코드

• 순서 정리
  1. 0부터~입력받은 숫자(n)까지 배열에 담아준다.
  2. for문을 돌리면서 소수가 아니라면 해당 인덱스의 값을 0으로 바꿔준다.
  3. 숫자가 남아있는 배열의 길이를 반환한다.

function solution(n) {
    var answer = 0;
    var before = []
    for(var i=0; i<=n; i++){    //입력받은 숫자까지 배열에 담아줌
        before.push(i)
    }
    for(var j=2; j*j<=n; j++){
        if(before[j]){        //해당 배열의 값이 0이 아니라면
            for(var k=j*j; k<=n; k+=j){        //j*j값부터 j만큼 증가시키면서 k위치의 값을 0으로 만듦
                before[k]=0;
            }
        }
    }
    before[1] = 0;

    answer = before.filter((c)=>c).length

    return answer;
}

🔥for(var j=0; j*j<=n; i++){}와 for(var k=j*j; k<=n; k+=j){}는 이해하기 어렵기도 했고 나중에 다시 까먹을 것 같아서 나름대로 정리를 해봤다. 알고리즘의 진행을 이해못한 것이 아니고 왜 제곱을 사용했는지에 대한 정의? 증명?을 해서 분명히 알고 싶었다. =>일단 이유와 원리는 알겠다. 하지만 말로 설명하기는 아직 무리인 것 같다.. 지금 이거만 붙잡고도 몇시간을 있었는데ㅠㅠ 하지만 내 목표는 내가 깔끔하게 이해하는 것+다음에 헷갈리거나 까먹을 때 봐도 바로 이해할 수 있도록 나만의 방법으로 정리하는 것 이었기 때문에 여기까지 정리하는 것으로 한다.

4. 후기

• 배고프다...

https://bblog.tistory.com/300