영어강사 개발일기

[200제] 08. 변수 선언하기 let & var

프로그래밍에서 데이터를 다루려면, 그 값을 어디에 저장 해야 할까?우리가 일상에서 물건을 보관할 때 서랍이나 박스를 사용 하듯 프로그램에서도 그 값을 보관하는 공간(메모리)가 필요 하다. 그 역할을 하는것이 바로 변수다. ✅ 변수란?말 그대로 '변'하는 값이라는 뜻을 가지고 있다. 다시 말해 선언을 한 후 값을 바꿀 수 있는 것을 변수라고 한다. 자바스크립트에서는 변수를 선언시 주로 var 와 let 을 사용한다. let은 ES6에서 새로 도입된 변수 선언 키워드 이다. 키워드 도입 시기 스코프 특징키워드도입 시기스코프특징varES5 이전함수 스코프(Function Scope)중복 선언 가능, 호이스팅 발생letES6블록 스코프(Block Scope)중복 선언 불가, 호이스팅 제한적 // var는 함수 ..

[200제] 07. 주석 Comment

모든 프로그래밍 언어는 코드 설명 혹은 추후 유지보수를 위해 주석(Comment)을 작성을 한다. 주석은 프로그램의 실행에는 전혀 영향을 주지 않지만, 코드의 가독성을 높이고 협업을 원활하게 하는 중요한 역할을 한다. 특히, 팀 프로젝트나 오픈소스 개발에서 **좋은 주석**은 필수적이다. ✅주석(Comment)이란?프로그램 소스 코드에 작성하는 메모로, 컴퓨터가 실행 하지 않는 부분주석은 사람이 코드를 읽고 이해 하기 위해 작성하는 문장. ✅Node.js에서 주석 작성법한 줄 주석//로 시작 하며, 해당 줄 끝까지가 주석으로 처리주로 간단한 설명이나 코드 옆에 설명을 적을 때 사용// 한 줄 주석// 이 함수는 두 숫자의 합을 반환합니다.function add(a, b) { return a + ..

[200제] 06. `${변수}` 백틱(backtick)을 이용한 포맷팅

때는 바야흐로 몇 주전.. 국비 교육중 마지막 수업이 web 수업을 들을때였다. 마지막 1~2주 정도를 프로젝트를 진행하는데 갑자기 강사님께서 백틱을 입력 하라는 말을 하셨고백틱이 어디에 있는거지? 라고 헤매었던 기억이 있다. 이 백틱이 있는지는 알고 있었지만 어디에 사용하는지는 몰랐었다. 이번에 처음 써보는 문자 백틱이였다. ✅백틱이란?기호 : ` 키보드에서 보통 숫자키 1옆에 있는 키 ~와 같은 키에 있음용어: backtick 또는 grave accent 라고 함용도: 프로그래밍에서 문자열 처리, 명령 실행, 포맷팅 등에 사용되는 특수 문자.✅Node.js 에서 백틱의 의미탬플릿 리터럴을 정의 할 때 문자열을 감싸는 기호특징변수/표현식 삽입가능 → `${변수}`멀티라인 문자열 지침 → 줄바꿈 그..

✅ Formating(포맷팅)이란?데이터를 보기 좋은 형태로 정리 혹은 특정형식에 맞춰 변환하는 것을 의미프로그래밍에서는 Formating은 주로 출력 형태를 제어 하는데 사용예시숫자: 1234567 ⇨ 1,234,567 천 단위 구분소수점 3.151592 ⇨ 3.14 소수점 두자리로 제한문자열 이름:Roy, 나이: 36 ⇨ 가독성 좋게 정렬 ✅ 왜 Formating이 필요할까?가독성 향상 ⇨ 로그나 디버깅 시 데이터가 깔끔하게 보임정보 전달력 강화 ⇨ 사용자에게 보기 좋은 형태로 출력표준화 ⇨ 통일된 형식으로 출력시 유지보수가 쉬움✅ console.log() vs 테스트 코드개발 시 test 코드를 작성하여 메서드 단위로 검증하는 방식을 권장그러나 console.log()를 사용하여 눈으로..

모든 프로그래밍을 시작 할때 가장 먼저 해 보아야 할 것이 무엇일까?바로 Hello 를 출력 해보는 것이다. 모든 언어는 Hello 로 시작 한다고 해도 틀린말은 아닐 것이다(내 피셜이다) Node.js의 출력은 console.log() 를 사용한다. console.log는 디버깅을 하거나 로그를 남길때, 혹은 해당 코드가 정상 작동 하는지 테스트를 하기 위하여 사용한다. 복수의 값을 출력 하려면 콤마(,)를 사용 하여, 여러개를 작성 하면 된다. 참고로 console은 클래스 이며, .log는 메서드 이다. 추가로 console.error() console.warn() 등 다양한 메서드를 사용 할 수 있다. 백틱(`)을 사용 하면 변수나 상수를 사용하여 원하고자 하는 값으로 출력이 가능 하다. ..

자바스크립트에서도 많이 봐왔었던 ES6. 이번 포스팅은 이것이 도대체 뭔가? 라는 의문을 가지고 포스팅을 작성 해 보도록 하겠다. (사실은 아 그냥 ES6구나 라고만 헀지.. 책에 없었음 궁금하지도 않았을것이지만... 교재에 있으니 궁금증을 가지고 알아보자) ECMA?ES6에서 ES는 뭘 뜻하는 것일까?ECMAScript 라는 표준 문서로 ECMA(European Computer Manufacturers Association)라는 국제기구에서 발표한 자바스크립트의 표준 스펙이다. ES6는 해당 표준 문서의 6번째 개정판이여서 ES6라고 한다. 2015년도에 발표 했기에 ES2015라고도 한다. 현재 ES7까지 있으나 ES6와 별 차이가 없기에 ES6를 더 많이 사용 한다. ES6란?정의: JavaSc..

Node.js 로 개발 시 웹스톰을 이용하면 편하게 개발이 가능.기타 편집기를 이용해도 가능 하다 물론 VS 코드를 사용 해도 괜찮으니 본인은 이번 포스팅 이후로는 VS 코드를 사용 하도록 할 예정이다.웹스톰을 설치 하기 앞서 웹스톰이 어떤 녀석인지 확인 해보자 웹스톰은 https://www.jetbrains.com/webstorm에서 다운이 가능하다.해당 제품은 30일 평가판이며 유료이다. 그렇기에 돈이 없는 본인은... 무료인 VS 코드를 사용 하도록 하겠다. 해당 내용은 GPT 에게 물어본 내용을 정리 해보았다. (이번 포스팅은 쉬어 가는 포스팅으로 넘어가자...) ✅ 웹스톰(WebStorm)이란?제작사: JetBrains (IntelliJ, PyCharm 만든 회사)용도:JavaScript, ..

더보기이제 국비 과정의 교육이 다 끝나가며 2달간의 파이널 프로젝트만 남았다. 포스팅에 대한 내용은 작성은 당분간 불가능 해 질 것으로 생각이 되지만 간간히 올리도록 하겠다. 시작 하기 전에 Node.js 를 설치하는건 개인이 알아서 설치를 하고 읽어주길 바란다. 자 그럼 이제 다시 시작 하자. Node.js란? 정의구글 크롬의 V8 자바스크립트 엔진 기반웹 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 서버 사이드 플랫폼 주요 특징:비동기 I/O 처리요청과 파일 읽기/쓰기, DB 작업 등을 블로킹 없이 처리가 가능하여 빠른 성능을 자랑이벤트 기반(Event-driven)이벤트와 콜백 함수 중심으로 동작서버가 효율적으로 요청을 처리싱글 스레드하나의 스레드로 동작하지만 비동기처리를 통해 많은 ..

지금까지의 프로젝트 진행 과정 중간 보고 프로젝트 계획 수립챗봇 프로젝트의 목표와 방향 설정초기 버전은 단답형 챗본으로 구현차후 채팅형 UI로 확장 예정Api key등 민감 정보는 .env 파일로 관리 하여 보안 유지Flask 서버 프레임 워크 사용 GPT API와 연동해 동작 하도록 설계.env 파일 제작 API Key와 같은 민감 정보를 .env 파일에 따로 저장기본 웹에이지(index.html) 구조 설계챗봇 UI를 이루는 기본 요소 구상:제목 영역()질문 입력창()전송 버튼()답변 표시 영역()기본 웹페이지(index.html) 제작HTML 코드 작성 로 전체 UI 감싸기나중에 CSS 적용 및 JS 이벤트 처리를 위해 ID 및 클래스 부여 현재는 CSS 없이 뼈대만 완성, 디자인은 추후 전부 구현..

Flask 서버 연동중 발생 한 오류 기록이번 파트에서는 Flask 서버와 API를 분리하여 구현하려 한다. Flask 서버는 질문자의 질문을받고 JSON형태로 답변을 반환하는 역할을 한다. 우선 진행 하기 전에 Flask 를 install 진행하자 pip install flask 코드를 작성해보자from flask import Flask, request, jsonify# GPT API 호출 모듈 importfrom CHATBOT_GPT_API import get_gpt_response# Flask 앱 초기화app = Flask(__name__)# 기본 라우트 (테스트용)@app.route("/")def home(): return "챗봇 서버가 실행 중입니다."# 질문 처리 라우트@app.rou..