2024. 05. 07 (화) Daily Coding - Day09

TO-DO-LIST

🔳 동기 VS 비동기

🔳 Python

🔳 개발에서 말하는 API (Application Programing Interface)

🔳 파이썬 프레임워크(FastAPI)

🔳 맥에서 파이썬 경로 이슈 해결 방법 

🔳 WORDLE javascript

🧐 오늘의 느낀 점

---

 

 

동기 vs 비동기

동기(synchronous : 동시에 일어나는)

비동기(Asynchronous : 동시에 일어나지 않는)

​

동기 방식은 설계가 간단하고 직관적이지만 결과가 주어질 때까지 다음 작업을 못하고 대기해야 하는 단점이 있고,

비동기방식은 동기보다 설계가 복잡하지만 주어진 작업이 끝나지 않아도 다음 작업을 할 수 있어 자원을 효율적으로 사용할 수 있는 장점이 있다 서버와 통신할 때 가장 많은 시간이 소요되므로 네트워크 관련 작업들은 비동기적으로 구현되어 있습니다.

​

비동기 처리는 자바스크립트와 같은 프로그래밍 언어에서 콜백 함수, 프로미스(Promise), async/await와 같은 기능을 통해 구현할 수 있다. 이러한 기능들은 비동기 작업의 완료 여부를 확인하고, 작업이 완료되면 결과를 처리할 수 있는 방법을 제공합니다.

​

 

백엔드 : 필요한 데이터를 처리하는 뒷 부분

서버 : 이러한 백엔드 시스템이 동작하는 컴퓨터나 소프트웨어

서버의 어원 'to serve'

server : 클라이언트나 사용자에게 정보를 제공하는 역할

 

 

 

Python

- 초보자 친화적

- 다양한 라이브러이와 프레임워크

 

a=1

if a==1:
    print(2)
else:
    print(5)

객체 : class로 객체 선언

함수: def 로 선언
불리언 : 대문자로 시작 (True, False)

비교연산자 : &

OR : I

 

개발에서 말하는 API (Application Programing Interface)

서비스의 요청과 응답에 대란 규칙을 의미하지만 보통 API라고 하면 이러한 요청과 응답을 처리하는 서비스(기능)을 의미한다.

 

 

 

파이썬 프레임워크(FastAPI)

프레임워크 - 필요한 기능들을 모아놓은 개발 키트 / 정해진 룰에 맞게 써야함(제한 된 개발 툴)

라이브러리 -  개발자가 자유도 높게 가져다 쓸 수 있음

 

 

 

맥에서 파이썬 경로 이슈 해결 방법 

하기 순서대로 터미널에 명령어를 실행하면된다.

 

1. curl로 python파일을 다운 받는다.

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

 

2. python3버전 경로로 파일을 가져온다.

python3 get-pip.py

 

3. 마지막으로 잘 설치 되었는지 PIP명령어를 쳐본다.

pip

4. 이제 pip install [패키지 이름] 으로 패키지를 설치하면 이슈 해결!!

 

 

WORDLE javascript

//javascript camel 기법
//띄어쓰기 대신에 '대문자'로 쓰는 걸 말한다.
//ex) hi i am ironman => hiIamIronman

const 정답 = 'SUPER';

let attempts = 0;
let index = 0;
let timer

function appStart () {
    const handleEnterKey = () => {

        let 맞은_갯수 = 0;

        for(let i=0; i<5; i++) {
            const block = document.querySelector(`.board-block[data-index = '${attempts}${i}']`);
            // console.log(block.innerText);
            const 입력한_글자 = block.innerText;
            const 정답_글자 = 정답[i];
            if (입력한_글자 === 정답_글자) {
                맞은_갯수 += 1;
                block.style.background = '#6aaa64';
            }
            else if (정답.includes(입력한_글자)) block.style.background = '#c9b458';
            else block.style.background = '#787c7e';
            block.style.color = "white";
            //console.log('입력한 글자:', 입력한_글자, '정답_글자:', 정답_글자);
        };

        const nextLine = () => {
            if (attempts === 6) return gameover();
            attempts += 1;
            index = 0;
        };
            
        const gameover = () => {
            window.removeEventListener('keydown', handleKeydown);
            dislplayGameover();
            clearInterval(timer);
        };

        const dislplayGameover = () => {
            const div = document.createElement('div');
            div.innerText = '게임이 종료되었습니다.';
            div.style = 'display:flex; justify-content:center; align-items: center; position:absolute; top: 40vh; left:36vw; color:white; font-size:40px; background-color:black; width:500px; height:100px';
            document.body.appendChild(div);
        };

        if (맞은_갯수 === 5) gameover();
        else nextLine();
    };
    
    
    const handleBackspace = () => {
        if (index > 0){
        const preBlock = document.querySelector(
            `.board-block[data-index = '${attempts}${index - 1}']`
        );
        preBlock.innerText = "";
        };
        if(index !== 0) index -= 1;
    };


        const handleKeydown = (event) => {
            const key = event.key.toUpperCase();
            const keyCode = event.keyCode;
            const thisBlock = document.querySelector(
                `.board-block[data-index = '${attempts}${index}']`
            );

            if (event.key === 'Backspace') handleBackspace();
            else if (index === 5) {
                
            if (event.key === 'Enter')handleEnterKey();
                else return;
            }   else if (65 <= keyCode && keyCode <= 90) {
                    thisBlock.innerText = key;
                    index = index + 1;
                    //index += 1;
                    //index++;
            };

        
    };

    const startTimer = () => {
        const 시작_시간 = new Date();

        function setTime() {
            const 현재_시간 = new Date ();
            const 흐른_시간 = new Date (현재_시간 - 시작_시간);
            const 시 = 흐른_시간.getHours().toString().padStart(2, '0');
            const 분 = 흐른_시간.getMinutes().toString().padStart(2, '0');
            const 초 = 흐른_시간.getSeconds().toString().padStart(2, '0');
            const timeDiv = document.querySelector('.timer');
            timeDiv.innerText = `${분}:${초}`;
        }
        timer = setInterval(setTime, 1000);

    };

    startTimer ();
    window.addEventListener("keydown", handleKeydown);
}

appStart();

---

🧐오늘의 느낀 점.

강의 따라가기도 바쁜데... 팀장님의 지시(숙제)가 너무 어렵게만 다가온다..

공부할 시간이 부족하다 정말.. 이번주에는 틈틈이 오늘 배운 wordle을 나만의 스타일로 꾸며봐야겠다.