괘종소리 세기 ✒️ 방명록 github

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은 비표준 포트이기 때문에 보안 정책 밖에 있는 ..

에러 상황 : 파일 업로드가 안된다고 함. 웹서버가 올라간 호스트를 보니 디스크(/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..

바이브 코딩을 위한 AI 기반 IDE (팀원분들 추천)나는 현재 코파일럿과 VS코드 사용중...windsurf(조금더 쌈), cursor 단위를 rem or px? -> rem으로 통일하는게 낫다. - EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식 - REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식이 아니라 **Root의 폰트 사이즈**에 의해 결정되는 방식 문서의 전체적인 통일성을 위해서는 REM을 쓰는 게 낫다. 프론트엔드 개발 방향 조언성능보단 유저 경험을 중요하게 생각하는게 좋다.(진짜 성능이 필요한 웹페이지가 아닌 이상) 예를 들어, 데이터가 없을 때 컴포넌트를..

인접한 노드를 탐색하는 자료구조로, 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)..

이번에 하는 프로젝트는 전형적인 쇼핑몰 프로젝트인데, 특이한 점이라고 하면 SEO를 위해 SSR을 써야 한다.또한 실시간 채팅 기능이 있어서 웹소켓을 통해 이를 구현하는 필수기능이 있다.아래와 같이 개발 스택을 정했다.프레임워크Next.js 15언어TypeScript툴개발 생산성biome.js : 코드 포맷팅과 Linting을 같이 설정할 수 있음. 속도가 빠르다고 함.기획 + 디자인creatie : AI를 활용한 디자인 툴이라고 함. UI는 figma와 매우 흡사함.figmaCSStailwindCSS : 현재 회사에서 사용하고 있고, 팀원들도 대부분 써봤으며 요즘 css-in-js보다 tailwind가 많이 쓰인다고 함. 특히 나는 요소의 클래스명을 고민하지 않아도 돼서 상당히 편했음.ShadCN : ..

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 아래의 순서로..

25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 ..

25/03/31css 선택자 중 특정 속성인 요소를 제외하려면 :not(속성명) 을 붙이면 된다. :not(:disabled) 이나 :not(.submit-btn) 등...마지막 엘리먼트를 가지고 오려면 HTMLElement.lastElementChild 로 가져온다. 25/04/02String.replace("a", ".")는 정규식을 쓰지 않으면 문자열에 포함된 첫 번째 문자열만 바꾼다.모든 a를 모두 .로 바꾸고 싶다면 String.replaceAll()을 쓰거나 "a" 대신 정규식 /a/g를 사용하자.replaceAll은 ES2021부터 추가된 문법으로, 버전은 tsconfig에서 바꿀 수 있다. 25/04/03멘토님 추천 사이트들 변경하기 쉬운 코드Guidelines for easily modi..

Inner Circle 진행하면서 알게된 사실을 블로그에도 포스팅... 스택 : vite + TS + CSS 25/03/24forEach보단 for of문을 쓰자. (가독성+효율성 면에서 더 낫다)DOM 엘리먼트 변수에 붙이는 $ prefix는 최근 잘 안쓰인다. (jQuery 시절에나 쓰였다고...)import/export를 쓰려면 태그 안에 type="module"를 붙이면 된다. 안써도 되면 안붙여도 된다. 25/03/25타입 단언 (as ...) 는 웬만해선 안 쓰는 게 좋다. (차라리 narrowing이 낫다고 한다.)document.querySelector()는 제네릭 타입을 지정할 수 있다.input[type=number] 엘리먼트는 valueAsNumber로 값을 가져올 수 있다.비슷한 ..

초딩때 많이 들었던 해킹송을 보면 아래와 같은 가사가 나옵니다.  "아이피 어떻게 알아냈지 공유기 사용중일텐데" ... 이 가사를 보면 해커는 공유기를 사용중인 작성자의 컴퓨터를 모종의 방법으로 해킹했습니다. 공유기는 공인 IP(외부 IP)를 사설 IP로 바꿔주는 역할을 합니다.공인 IP는 여전히 외부에 공개되어 있지만, 보통 보안을 위해 포트포워딩을 통해 '특정 포트'만 열어놓습니다.예를 들어, 223.xx.xx.xx이라는 공인IP의 50001 포트로 접속하면 사설 IP인 192.168.xx.xx의 3001 포트로 들어오도록 포워딩하는 것이죠. 그 밖에도 외부에서 내부로 접속하는 방법은 VPN 서버를 구축(특정 공유기 기종은 기본 제공하며, 윈도우에서도 제공함)하는 방법이 있다고 합니다. 어쨌거나 공유..

INNER CIRCLE이 무엇인가재직자(연차 조건은 없으나, 3년차 정도가 적합하다고 보는듯) 대상 과정강의 없이 100% 프로젝트로 진행됨월화수목 19:30 ~ 22:30, 토 09:00 ~ 18:00 에 진행3개월 과정내일배움카드 있으면 무료웹캠 필요함 (저 없어서 오늘 다이소가서 사왔습니다)국비지원이라서 고용24 출결어플로 출첵함Slack, Notion, Figma, Github 사용 왜 신청했나이 과정은 같은 회사 다니는 분(갓생사는 엄청난 열정맨) 께서 알려 주셔서 신청하게 됐습니다. 그렇다고 해서 그냥 대뜸 따라 신청한 건 아니고, 평소에도 프론트엔드 개발자로서는 전문성이 떨어진다는 생각을 했으나 그걸 키울 방법도 마땅치 않은 것이었습니다... 이건 내일배움카드를 가지고 있으면 무료로 과정을 ..

이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.export enum CharacterType { LANCER, ROUXLS, RALSEI}export const getCharacterOrderByName = (name: string) => { switch (name) { case "lancer": return CharacterType.LANCER; case "rouxls": return CharacterType.ROUXLS; case "ralsei": return CharacterType.RALSEI; }} enu..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 4일차 내용 정리코드출처는 아래 링크입니다.https://github.com/himprover/wanted-2025-2-challenge RCC only'use client';interface Props { num: number;}export function RCC({ num }: Props) { const [json, setJson] = useState(null); const fetchHandler = async () => { const data = await fetchJson(num); setJson(data); }; useEffect(() => { fetchHandler(); // eslint-disable-next-line..

오랜만에 다시 하는 코딜리티...A와 B 사이에 K로 나눴을 때 몫이 0이 되는 수가 몇 개인지 세는 문제입니다. https://app.codility.com/demo/results/trainingGDW5F8-WJ7/ Test results - CodilityWrite a function: function solution(A, B, K); that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.: { i : A ≤ i ≤ B, i mod K = 0 } For example, for A = 6, B = 11 and K = 2, your fapp..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 3일차 내용 정리 Streaming HTML데이터(HTML)를 한번에 로드하지 않고 일정한 단위로 점진적으로 처리하는 기술이다.(HTTP 기술임)맨 처음에 사이트에 접속했을 때 GET 요청으로 index.html을 이미 줬는데 어떻게 html을 다시 주는 걸까?HTTP Header에 Transfer-Encoding: chunked 라면 Streaming HTML로서 동작한다.Content-Length를 지정하면, 지정된 값까지만 받는다는 것을 서버가 클라이언트에게 알려준다.하지만 Content-Length를 지정하지 않으면, 계속 통신을 열어놓으면서 지속적으로 html을 준다.\r\n 으로 나누면서 하나씩 날아온다. (한번에 다 줄수 없..