본문 바로가기

IT161

[JavaScript] class, 클로저, Prototype을 통한 객체지향 실질적인 데이터를 가지고 있는 필드와 그 필드에 접근하기 위한 메서드를 묶을 때 객체를 사용한다.이런 경우 자바스크립트에서는 흔히 class를 사용한다.하지만 class 말고 다른 방법으로 구현할 수도 있는데 각 방법을 비교해 보았다. 1. classclass Animator { private currentValue: number = 0; private isAnimating = false; forward() { this.isAnimating = true; this.currentValue += 1; } stop() { this.isAnimating = false; } getValue() { return this.currentValue; }} 특징: this를 통해 모든 .. 2025. 9. 4.
[Infra] Biome.js VSCode 세팅 린트와 포맷팅을 한번에 할 수 있는 성능 좋은 툴 Biome ..하지만 세팅이 항상 헷갈려서 정리해놓음. VSCode에서 저장시 자동 포맷팅이 되도록 하는 세팅 방법이다.npm install -D @biomejs/biome@1.9.42.x버전부터는 아직 VSCode에서 확장 프로그램 지원을 안하고 있기 때문에 1.x버전으로 설치한다. { "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultForm.. 2025. 8. 31.
[Expo] RN 웹뷰 프로젝트 환경 세팅 Expo를 사용하면 리액트 네이티브 환경 세팅을 쉽게 할 수 있습니다. 1. 프로젝트 생성nvm install 22nvm use 22npx rn-new@latest --nativewind유틸성과 개발자 생태계 측면 tailwind가 좋기 때문에 nativewind 프로젝트를 생성했습니다.npm start로 expo 프로젝트를 시작할 수 있습니다. 2. expo go 앱 설치앱을 설치하고 단말기로 QR코드를 스캔하면 바로 테스트를 할 수 있습니다.유의할 점은 서버 시작 환경과 단말기가 같은 네트워크 상에 있어야 합니다. 3. react-native-webview웹뷰를 제공하는 라이브러리입니다.https://docs.expo.dev/versions/latest/sdk/webview/ react-native-.. 2025. 8. 31.
[TortoiseGit] Cherry Pick 하위 브랜치에서 특정 커밋만을 가져와 상위 브랜치에 머지하고 싶을 때는 Cherry Pick을 이용한다.이 작업도 TortoiseGit에선 GUI로 쉽게 할 수 있다. 먼저 상위 브랜치로 체크아웃하고, Show Log로 들어간다. 그리고 아래처럼 파란 글씨를 클릭해 가지고 오고 싶은 커밋이 존재하는 하위 브랜치를 선택한다. 하위 브랜치의 커밋들이 보이면 가지고 오고 싶은 커밋을 선택해서 Cherry Pick을 해주면 된다. 2025. 8. 25.
사이드 프로젝트 개발환경 세팅 계획 현재 React Native와 React를 기반으로 한 사이드 프로젝트의 기획 단계에 들어가 있습니다.아직 앱 이름도 결정되지 않은 러프한 상태입니다.프로젝트에 앞서 패스트캠퍼스에서 제공받은 React Native 강의를 통해 생소하던 개념들을 정리합니다. 하이브리드 앱네이티브 앱 + 웹 앱웹 기술로 개발하여 네이티브 앱의 웹뷰를 통해 실행됨웹 개발자가 개발하기 용이함웹 앱과 달리 카메라, GPS 등 네이티브 앱만 사용할 수 있던 기능들을 이용할 수 있음앱 스토어를 통하지 않고도 업데이트가 가능함웹 콘텐츠를 로딩할 때 성능 면에서 네이티브 앱보다는 떨어짐 ExpoReact Native 프로젝트를 쉽게 개발할 수 있게 돕는 프레임워크 및 플랫폼React Native 개발 환경을 쉽게 세팅할 수 있게 해줌R.. 2025. 8. 3.
[Inner Circle] 5주차~13주차 고찰 및 정리 패스트캠퍼스 INNER CIRCLE 풀스택 개발 5주차~13주차의 내용을 정리합니다.팀 프로젝트를 하면서 고민했던 부분을 멘토링 받은 부분이 포함되었습니다.끝난지는 한달이 다 되어가는데 그동안 배운 내용에 대해서 정리를 덜 했길래 정리합니다. (4주차까지만 정리해놓음) 서버 액션 내부에서 SSR 캐시 무효화를 통해 자동 리패칭 가능서버 액션인 만큼 Next.js 자체 서버를 쓸 때 가능함- revalidatePath를 통해 리패칭- revalidateTag를 통해 my-tag의 캐시만 무효화'use server'import { revalidatePath } from 'next/cache';export async function deletePost(id: string) { await db.delete(i.. 2025. 7. 22.
[Linux] 도커 없이 컨테이너 만들기 강의 정리(1) https://youtu.be/lVtgqmjv4BQ?si=HkWN11XM1uECmBEg위의 카카오엔터프라이즈 강의 내용 정리강의가 생각보다 길어서 절반정도의 내용까지 정리했습니다. - 컨테이너를 쓰려면 리눅스와 런타임(컨테이너 관리 도구)이 있어야 함.- 대규모 서비스를 돌려야 해서 서버를 여러대 사용하고 있다면 한번에 관리하기 위해 쿠버네티스를 사용한다. docker run 명령어를 통해 컨테이너 만든 뒤- ls로 보면 컨테이너의 루트 디렉토리의 FileSystem은 overlay, 호스트서버는 /dev/mapper/... 로 표시된다.- hostname은 컨테이너의 uid, 호스트서버는 pc 이름이 표시된다.- id 명령어를 쳐보면 uid(유저id), gid(그룹id)는 같다- 사실 루트권한으로 프로.. 2025. 7. 20.
[JavaScript] 실행 컨텍스트 https://youtu.be/EWfujNzSUmw?si=Ik297-UzEH90eSmO위의 강의 정리한 내용 실행 컨텍스트는 각 스코프별로 코드가 실행되는 환경 정보를 담고 있는 객체이다. 코드 실행을 위해 존재한다. 0. 실행 컨텍스트는 언제 생성하고 언제 없어지는가- 코드 실행시키면 콜 스택에 실행 컨텍스트를 담는다.- 글로벌 실행 컨텍스트 위에 함수A의 실행 컨텍스트가 올라가고... 이런식. 가장 위에 있는 실행 컨텍스트만 활성화됨.- 일단 실행되면 사라진다.- 마지막 라인까지 코드가 모두 실행되면 글로벌 실행 컨텍스트도 사라진다. 1. Record로 호이스팅 이해console.log(name);var name = "doringri";- var로 정의한 변수 선언문 이전에 해당 변수의 값을 찍었을 .. 2025. 7. 17.
[Spring Boot/NGINX] 로그 없는 웹소켓 연결 에러 에러 상황기존에는 배포서버에 test.com:8080/users 와 같이 8080 포트를 열어놓고 거기로 바로 요청을 보냈다.하지만 이번에 ssl 인증서 갱신하는김에 test.com/api/users 와 같은 식으로 nginx의 /api에 리버스 프록시를 걸어놓고 nginx에서 ssl을 통제시키는 방향으로 변경하기로 했다. 그래서 nginx.conf와 백엔드 환경변수 설정까지 끝냈는데 이런게 떴다. 원인 찾기일단 보다시피 브라우저 콘솔에는 실패했다고만 표시되고 그 밖에 다른 로그는 없다.Spring Boot 콘솔과 var/log/nginx/error.log에도 아무런 에러 로그가 뜨지 않았다. 단서를 찾은 방법은 배포서버 안에서 curl -i http://localhost:8080/ws 로 요청을 보내.. 2025. 7. 8.
[IT] 서버 배포 관련 메모 a레코드: 서브도메인만 등록 가능. 공인 IP가 있어야 함cname: a레코드 등에 연결 배포 서버 하나에 백엔드와 프론트엔드 모두 배포시 기존방법1. 백엔드(8080) 포트의 방화벽을 푼다.2. https://test.com:8080 으로 API 요청을 보낸다. 이 경우 nginx 설정이 되어 있더라도 443, 80에만 관여하기 때문에 8080이랑은 상관이 없음.호스팅센터를 통해 이 서버의 아이피가 test.com이라는 도메인을 가지고 있기 때문에 가능한 것.아무튼 이 방법은 8080 포트를 외부에 여는 것이다.이 방법을 사용하려면, 백엔드 서버에서 ssl 적용을 해야 한다. (Spring Boot의 경우 application.properties)8080은 비표준 포트이기 때문에 보안 정책 밖에 있는 .. 2025. 6. 30.
[Java] JVM이 죽었음다 ㅡㅡ; (Java heap space 에러) 에러 상황 : 파일 업로드가 안된다고 함. 웹서버가 올라간 호스트를 보니 디스크(/dev/vda2) 용량이 96%가 차있었음.일단 데이터를 백업해서 60% 가량으로 떨어트림. 그래도 안된다고 하심.그래서 문제가 됐다는 파일을 받아서 직접 테스트해보기로 함.1GB정도의 jpg 파일이었음. (그냥 개발자라 기가단위 넘어가는 이미지 파일은 처음봄.) 올려보니까 다행히도 500 에러가 발생했음. 로그를 확인해볼 수 있게 되어서 보니까java.lang.OutOfMemoryError: Java heap spaceat java.base/java.util.Arrays.copyOf(Arrays.java:3537) ~[na:na] 대충 읽어봐도 힙 공간이 없다고 한다. 그래서 일단 아래 방법을 써봤음.java -Xmx2.. 2025. 5. 18.
[Inner Circle/프론트엔드] 4주간 진행한 프로젝트 메모사항 바이브 코딩을 위한 AI 기반 IDE (팀원분들 추천)나는 현재 코파일럿과 VS코드 사용중...windsurf(조금더 쌈), cursor 단위를 rem or px? -> rem으로 통일하는게 낫다. - EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식 - REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식이 아니라 **Root의 폰트 사이즈**에 의해 결정되는 방식 문서의 전체적인 통일성을 위해서는 REM을 쓰는 게 낫다. 프론트엔드 개발 방향 조언성능보단 유저 경험을 중요하게 생각하는게 좋다.(진짜 성능이 필요한 웹페이지가 아닌 이상) 예를 들어, 데이터가 없을 때 컴포넌트를.. 2025. 5. 16.
[JavaScript] 그래프 알고리즘 인접한 노드를 탐색하는 자료구조로, DFS를 이용하여 탐색한다. BFS로도 구현할 수 있지만 내가 DFS가 익숙하기에...function dfs(graph, visited, node) { if (visited[node]) return; visited[node] = true; console.log("Visiting:", node); for (let neighbor of graph[node]) { dfs(graph, visited, neighbor); }}// 예시const graph = { 0: [1, 2], 1: [0, 3], 2: [0, 4], 3: [1], 4: [2]};const visited = Array(Object.keys(graph).length).fill(false).. 2025. 5. 9.
[Inner Circle] 프로젝트 기획 이번에 하는 프로젝트는 전형적인 쇼핑몰 프로젝트인데, 특이한 점이라고 하면 SEO를 위해 SSR을 써야 한다.또한 실시간 채팅 기능이 있어서 웹소켓을 통해 이를 구현하는 필수기능이 있다.아래와 같이 개발 스택을 정했다.프레임워크Next.js 15언어TypeScript툴개발 생산성biome.js : 코드 포맷팅과 Linting을 같이 설정할 수 있음. 속도가 빠르다고 함.기획 + 디자인creatie : AI를 활용한 디자인 툴이라고 함. UI는 figma와 매우 흡사함.figmaCSStailwindCSS : 현재 회사에서 사용하고 있고, 팀원들도 대부분 써봤으며 요즘 css-in-js보다 tailwind가 많이 쓰인다고 함. 특히 나는 요소의 클래스명을 고민하지 않아도 돼서 상당히 편했음.ShadCN : .. 2025. 4. 26.
[React/TypeScript] React-Spilt-Table 오픈소스 라이브러리 Inner Circle 두 번째 프로젝트 '오픈소스 라이브러리 프로젝트' 활동에서 만든 라이브러리. https://www.npmjs.com/package/react-split-table react-split-tableA React component for creating split tables with resizable columns and rows.. Latest version: 0.0.20, last published: a day ago. Start using react-split-table in your project by running `npm i react-split-table`. There are no other projects in the npm regiwww.npmjs.com 아래의 순서로.. 2025. 4. 21.