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

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

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 사용 왜 신청했나이 과정은 같은 회사 다니는 분(갓생사는 엄청난 열정맨) 께서 알려 주셔서 신청하게 됐습니다. 그렇다고 해서 그냥 대뜸 따라 신청한 건 아니고, 평소에도 프론트엔드 개발자로서는 전문성이 떨어진다는 생각을 했으나 그걸 키울 방법도 마땅치 않은 것이었습니다... 이건 내일배움카드를 가지고 있으면 무료로 과정을 ..

헷갈리는 부분이라 정리. 선수 지식자체 서버를 구성하고 그 서버에서 돌아가는 백엔드와 달리, 프론트엔드는 사용자의 브라우저에서 돌아간다.다시 말해 백엔드 서버에서의 localhost와 프론트엔드에서의 localhost는 서로 다른 장치를 가리킬 가능성이 있다. 브라우저의 출처(Origin) 정의 방법출처(Origin)는 사용자가 실제 접속한 주소로 설정된다. 프론트엔드를 192.168.0.7이라는 IP를 가진 로컬 PC에서 3000번 포트로 돌렸을 경우를 가정해보자.이 경우 localhost:3000으로도 페이지에 접속할 수 있고, 192.168.0.7:3000으로도 접속할 수 있다. 그렇다면 백엔드의 CORS 허용 설정은 접속한 주소를 기준으로 허용해주어야 한다.즉 localhost:3000으로 접속했..

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다.(계속 추가됩니다) 상태관리를 하는 이유효율적인 렌더링을 위해서이다. 상태관리를 하면 필요한 컴포넌트만 렌더링함으로써 성능을 최적화할 수 있다. state의 원리배열을 사용하여 관리하고, 클로저 안에 값들을 관리한다. setState를 사용해야 하는 이유state는 값이 변하면 리렌더링이 발생하는데, setState에 의한 주소 변경에만 반응하기 때문에 값을 변경할 때는 setState를 사용하여 React에서 감지할 수 있게 해야 한다. 이벤트 루프와 콜스택, 태스크 큐

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다.(계속 추가됩니다) DBMS데이터베이스 관리 시스템데이터를 효과적으로 관리할 수 있게 함RDBMS관계형 데이터베이스 관리 시스템SQL을 사용하여 데이터에 쉽게 접근할 수 있음SQL의 DDL, DML, DCLDDL: 데이터 정의 언어. 구조 정의 시 사용. 자동 커밋됨DML: 데이터 조작 언어. 데이터를 조작 시 사용DCL: 데이터 제어 언어. 데이터의 가시성(권한 등) 제어에 사용정규화테이블 간 중복된 데이터를 제거무결성 유지 가능DB의 저장 용량을 줄일 수 있음비정규화복잡한 쿼리 사용 시 성능을 향상시키기 위해 중복 데이터 추가뷰하나 이상의 테이블로부터 유도된 가상 테이블데이터를 제한적으로 보여줌장점: 리소스 낭비 없음, 데이터 액세..

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다. 로드밸런싱이란사용자의 수가 늘어나면 서버 한 대로는 서비스를 운영하기 버거워지는데, 이때 서버를 여러 대 추가할 경우 트래픽을 각 서버에 균등하게 분산시켜 줘야 한다. 이 작업을 로드밸런싱이라고 한다. L4 로드밸런싱, L7 로드밸런싱이 있다. 라운드 로빈(순차적으로), 가중 라운드 로빈(가중치, 특정 서버의 스펙이 좋다면 사용), 최소 연결(가장 적게 연결되어 있는 서버), 최소 응답(응답시간 고려), 해시(특정 사용자는 특정 서버로만 할당) 등의 기법이 있다.

MQTT란?MQTT는 Publisher, Broker, Subscriber의 세 가지 분류로 이루어진 프로토콜이다.Publisher가 Broker 에게 특정 Topic으로 메시지를 보내면, Subscriber는 Broker로부터 받고 싶은 Topic만을 구독하여 메시지를 받는다.  장점Python, Java 등 많은 언어들이 지원하고 있다.메시지 헤더가 작고, 리소스를 적게 소모하기 때문에 대역폭이 낮다. 즉 불안정한 네트워크에서도 사용할 수 있다.페이스북 메신저가 MQTT 프로토콜을 이용한다고 한다.  단점Publisher와 Subscriber가 모두 온라인 상태여야만 메시지를 구독할 수 있다.  구조와 와일드카드Topic은 트리 구조로 이루어져 있으며, 와일드카드를 사용할 수 있다.와일드카드의 종류는..

아니 이게 갑자기 무슨 일인지 모르겠네요...매우 정신없고 혼란스럽지만 연말결산 캘린더 포스팅은 계속됩니다... 사실 제 생일이 며칠 남지 않았는데요, 제가 물욕이 그리 많은 편은 아니라서 뭐 그닥 큼직한 건 딱히 없네요.갖지 못했다기보다 그냥 안 가진 게 대부분이긴 하지만, 카카오톡 위시리스트에 올려놓은 리스트 위주로 적어봅니다. 먼저 제가 러쉬라는 브랜드를 좋아하기 때문에 러쉬 샴푸, 린스를 좀 가지고 싶었고...당 관리중이니까 라라스윗 저당 케이크,상어처럼 생긴 실내 슬리퍼(귀여움),짱구가 가지고 있는 액션가면 시계(한국어 더빙) 이 정도네요...그리고 내심 가지고 싶은 것들은무선 헤드셋, 독거미 풀배열 키보드... 그렇네요.더 생각나면 더 적어야겠습니다.

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다. 인덱스란테이블의 검색 속도를 향상시키기 위한 이진 트리 자료구조잘못 사용하면 성능이 오히려 저하됨규모가 작지 않은 테이블에서 사용하면 좋음INSERT, UPDATE, DELETE가 자주 발생하지 않는 컬럼에서 사용하면 좋음 (정렬되어 있기 때문)JOIN, WHERE, ORDER BY에 자주 사용되는 컬럼에서 사용하면 좋음PK는 기본적으로 인덱스가 잡혀있음예시조회가 빈번히 일어나는 지역 검색 테이블에서는 인덱스를 사용하는 것이 좋다.생성, 수정, 삭제가 빈번히 일어나는 게시판 테이블에서는 인덱스를 사용하는 것이 오히려 좋지 않을 수가 있다.

저번에 블로그 포스팅도 했었던 페어 프로그램 말인데 그동안 후기를 안 적었었지만 어떻게 제가 1등을 해서 치킨을 받았습니다. (아래 글 참고)  [IT/일상] 엑셀 VBA 매크로로 페어 매칭 프로그램 만들기계기최근 회사에서 페어 프로그래밍을 주기적으로 하게 됐는데...페어를 짓는 프로그램을 개발부서원들이 직접 개발하는 소소한 대회(?) 가 열렸다.상품은 무려 치킨이기 때문에 도전하지 않을doringri.tistory.com 페어 프로그램 대회에 대해 이야기를 좀 더 하자면 결과는 부서원들의 투표를 통해 정해졌었습니다.그런데 생각도 못한 참신한 결과물들도 있어서 신기했던 경험이었습니다. 이때까지 나온 결과 빈도에 따라 딥러닝마냥 가중치를 두신 분도 있고... (기술점수 ㅇㅈ)한 분은 유니티를 가지고 만드셨..

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다. Promise란비동기 연산을 처리하는 객체세 가지 상태를 가짐 (초기 상태, 완료된 상태, 실패한 상태)then, catch, finally 메서드를 통해 결과를 처리함Async/Await란Promise를 기반으로 하였으나...비동기 코드를 동기식으로 작성할 수 있게 하여 코드의 가독성 향상async 메소드는 항상 Promise를 반환await는 Promise의 결과 값이 반환될 때까지 함수의 실행을 일시 중단시킴 녹음 결과막히는 부분 없이 잘 대답함 한줄평 : 이대로만 갑시다!

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다. 추상 클래스란추상 메소드를 포함한 클래스추상 메소드를 오버라이딩한 자손의 인스턴스만 만들 수 있음 인터페이스란추상 클래스의 일종추상 메소드와 상수만을 포함할 수 있음여러 부모로부터 상속받는 다중 상속을 구현할 때 사용됨모든 메소드를 오버라이딩한 자손의 인스턴스만 만들 수 있음 녹음 결과자바의 추상 클래스란 추상 메소드가 포함된? 클래스를 뜻합니다. 상수와 추상 메소드를 가질 수 있는 클래스입니다. (일반 메소드도 가질 수 있음) 독립적으로는 인스턴스를 가질 수 없고, 추상 메소드를 오버라이딩한 자식... 클래스에서만 인스턴스를 만들 수 있습니다. 인터페이스는 추상 클래스의 한 종류입니다. 모든 메소드가 추상 메소드로 이루어져 있다는 ..