본문 바로가기

전체 글372

노드 입문 Node란- 자바스크립트 런타임 - ECMAScript 사양만 따르면 되고, 별도의 표준이 없음- 오랫동안 브라우저만이 작성/실행할 수 있는 유일한 장소였음 Node REPL- 윈도우 기준 powershell을 열고, node를 입력하면 node REPL에 접근할 수 있음- 웹 브라우저가 제공하는 건 없음 ... > 대신 global이있다 프로세스와 argv -> argument vector - process; 글로벌 객체 - 대표적인 사용 법 process.argv ;- 기본값 [0] ; 노드.js 프로그램의 자체 실행 경로- 기본값 [1] ; 현재 실행한 js 파일의 경로 - 인수는 [2]부터 들어온다 파일 시스템 모듈 ; FS- 모듈? : 가져와야 사용가능한 모듈이다 - 파일을 읽기/쓰기 하는 .. 2025. 11. 10.
터미널 정리 터미널 명령어 알아야 하는 이유 - 액세스 권한 터미널이란 / 컴퓨터 입출력을 담당하는 단말 통칭 셸이란 / 터미널에서 작동하는 소프트웨어Bash / 맥에서 기본으로 깔려있던 Shell 현재 디렉토리 정보 보기 - ls / list- pwd / 현재 위치 / print working directory 디렉토리 이동 - cd / change directory - cd .. ; 위로 가기 - 절대경로와 상대경로 -> 상대경로는 현재 나의 위치 기준 경로 -> 절대경로는 루트경로로부터 전체 경로를 입력한 경로 -> cd /{} -> 절대 경로 입력 -> cd ~ -> 홈 디렉토리 이동 디렉토리 생성- mkdir ; make directory - 띄어쓰기로 뒤에 목적어를 입력해서 여러개를.. 2025. 11. 1.
프로토타입 클래스 그리고 OOP 이사진의 저걸 프로토타입이라고 함사진의 프로토타입은 = 배열의 템플릿 객체나만의 개체 타입을 정의하고그 객체 만의 프로토타입을 정의할 수도 있음 **array가 아니라 Array로 써야 한다 + 이미 존재하는 객체에 프로토타입을 추가할 수도 있음String.prototype.yell = function() { return 'OMG!!'} 개발자도구의 콘솔에서 보는 __proto__는 참조객체.prototype -> 이건 객체 function makeColor(r,g,b){ const color = {}; color.r =r ; color.g = g; color.b = b ; color.rgb = function() { const {r,g,b} = thi.. 2025. 10. 28.
AJAX API Postman ; API 테스트하는 웹 서비스 Hopp GET; 정보를 가져옴 POST ; 데이터를 보냄 Status code- 2로 시작하는 경우 ; 정상처리 됨 - 3로 시작하는 경우 ; 리디렉션 경우 - 4로 시작하는 경우 ; 클라이언트 측에서 잘못되었을 때 코드 - 5로 시작하는 경우 ; 서버 사이드 오류- 개발자도구 네트워크 탭에서도 확인 가능 쿼리 스트링- URL - URL/:id (변수가 들어가는 경우) ; : 대신 {}를 쓰기도 한다. - URL?sort=desc&color-green ; 쿼리 스트링 HTTP 헤더 - 요청과 함께 정보를 전달하는 부수적 방식 MAKING XHRs- XHR = XMLHttpRequest- 프로미스나 비동기 함수를 지원 X - 연속적인 요청이 종속 관계가.. 2025. 10. 26.
GlobalLink 2025 트랜스퍼펙트 세미나 참석 후기 지난 5년 동안, 아래 프로젝트를 진행하면서, 쌓인 인사이트가 많았다. - 매뉴얼 저작 프로그램 + CMS + PMS- AI 활용 매뉴얼 문장 검수 PoC한 편으로 정리가 잘 안됬었는데,이번 세미나에서 세계1위 번역사의 생각들을 들으면서 정리가 좀 되었다. - 조직구조에 대한 생각 제약에서 TMF 관리 시스템을 운영하기 위한 3가지 워킹 그룹 분류 1 기록 유형 / 감독 / 관리 2 기록 템플릿 / 시스템개발 3 로칼라이제이션 그룹 즉, 비즈니스에서 AI 앱 유지보수할 역할군은 셋이다. 1. 데이터 유형을 정의하고, 분류하고 관리하고 변경 내용을 팔로업할 데이터 거버넌스 그룹 2. 데이터 거버넌스 그룹이 발의한 요구사항을 개발에 옮길 데이터 및 데이터 시스템 개발 그룹 3. 비즈니스 특화 .. 2025. 10. 25.
프런트엔드 : 비동기식 JS 콜 스택 - js 해석기가 사용하는 매커니즘 - 스크립트에서 해당 위치를 추적함 - loupe라는 툴이 콜 스택을 비주얼라이징 시켜줌 - 혹은 콘솔 > 소스 탭 > 브레이크 포인트 지정하고 콜스택 볼 수 있음 webAPI와 단일스레드 - 타임아웃 함수 > 다른 함수 ... 작동시켜보면, 다른함수 > 타임아웃 순서로 작동한다- 즉, 탑다운으로 작동 X - 작동은 C++로 만들어진 브라우저가 한다. (js문서는 그냥 브라우저에게 넘겨질 뿐)- js는 단일스레드로 브라우저에게 일단 넘길 뿐- 실제 콜 스택은 브라우저가 갖고 있다. 콜백예시) makeRequest( () => {}, () => {}) // 성공, 실패-> 위의 문제 때문에. 엄청난 중첩이 발생할 수 있다 - Promise ; 어떤 연산 비동.. 2025. 10. 20.
'25 AWS 코리아 SUMMIT, 개인적으로 재밌게 본 거 정리 데이터로그 발표 : LLM observability에 관한 발표 LLM 서비스 모니터링은 어려움.서비스 사용자들은 대개 아래를 모니터링하고 걱정함 - 퀄리티- 할루시네이션 - 보안 위험 ; 프롬프트 인젝션 LLM 서비스의 퀄리티란? 사용자 답변에 부적절한 답변이 나가는 경우를 말하며,그 종류는 여러개가 있다. - 기술적인 문제의 답변 실패 (경험해 봄) - 사용자가 부정적인 답변을 돌려주는 경우 (경험해 봄) - 사용자 질문이랑 상관 없는 답변 (경험해 봄) - 한글 질문이 영문으로 나가는 경우 (경험해 봄) LLM 서비스 관리자들은 이런 문제들을 유형화화고 그룹핑해서 알고 싶어한다. 데이터로그는 이런 서비스를 제공한다고 한다. - 데이터 쌓은 후 > 체크 > 한번에 대규모 개선- 서비스 뒷단에서 .. 2025. 10. 18.
프런트엔드 : DOM (document object model) window 객체가 있듯, document 객체가 있다- 웹이 실행되면, html은 트리형태의 자료구조로 재편 ... 각 노드마다 js객체가 생긴다 - console.dir(document) 치면 좀 더 보기 좋은 구조로 볼 수 있음 document.getElementById()- 해당 id를 가진 요소를 찾아줌 document.getElementsByTagName()- 배열은 아니지만, 배열처럼 인덱스로 조회는 가능함 (js오브젝트 = 엘리먼트 ) document,getElementsByClassName()- 클래스 이름으로 조회 querySelector()- 다 인수로 받을 수 있음- 'h1' '#red' '.big' : 이런식으로 css 쓰는 것과 같은 방법으로 쓸 수 있음 - 제일 첫번째만.. 2025. 10. 18.
프런트엔드 기록용 : JS js는 number 라는 타입만 있지, int/float 등 구분 X 변수 정의 방법let 변수 ; i++ 이후 엔터치면, 바로 반영 안됨그 이후의 i 에 반영됨 ...- i = 0 - i++ 하면 0 나옴... (아니 출력은 1이 나와야 되는 ..게 아님) 상수 정의 방법 const 상수이름 메서드 - 비파괴 메서드와 파괴 메서드 : 기존 값을 바꾸는 것과 아닌 차이 - .trim() / .toUpperCase() /... etc - .slice() / .replace() 템플릿 리터랄- 백틱 (`)을 사용해야 함 - ${ } 이 안에 있는 건 표현식으로 취급- `hello ${1+2+9}` -> "hello 12" Math- 콘솔창에 Math 입력하면 상세 내용들을 볼 수 있음 -.round(.. 2025. 10. 11.
프런트엔드 기록용 : 부트스트랩 Bootstrap 시작하기 · Bootstrap v5.3 Bootstrap 시작하기Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.getbootstrap.kr이걸 따라서, 부트스트랩을 CDN을 통해서 받아서 사용할 수 있다 js는 안정적으로 html 및 css가 적용된 이후에 로딩하기 위해서 body 태그 맨 마지막에 소스 다운로드하는 코드를 삽입한다 div class ="container"- 이게 기본 부트스트랩 버튼 부터 익숙해지면 좀 편함 타이포그래피 & 유틸리티 배지 경고 버튼그룹 그리드 시스테은 컨테이너에만 적용된다 맨 위에 container로 지정하고row 클래스로 감싼 엘리먼트는 같은 row로 작동 네비게이션 바는.. 2025. 10. 8.
반응형

티스토리툴바