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

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..

최근 피아노 반주를 배우고 있어서... 스무스하게 공부하고 있는데 간단하게라도 정리해봅니다.장3도 : 근음(도미솔이라면 도에 해당하는 음)기준 3번째꺼(미)단3도 : 장3도를 반음 내린거 보이싱: 세븐 코드에서 첫음을 빼는 것. 즉 도미솔시 -> 미솔시  1. 메이저세븐(CMaj7): 장3도 + 장7도도미솔도 -> 도미솔시도미솔도에서 맨끝(도)음을 '반음' 내린것.2. 도미넌트세븐(G7): 장3도 + 단7도솔시레솔 -> 솔시레파솔시레솔에서 맨끝(솔)음을 '온음' 내린것.GMaj7 이라면 반음 내리므로, 솔시레파# 이 된다.쉽게외우기: 끝음만 온음 내리기3. 마이너세븐(Cm7): 단3도 + 단7도도미솔도 -> 도미♭솔시♭쉽게외우기: 중간음 반음, 끝음 온음 내리기4. 어그먼트(+), 디미니시(-), 마이너..

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

이제 한달만 더 있으면 제가 회사에 들어온지 3년이 됩니다.그동안 많은 일이 있었던 것 같기도 하고 별 일이 없었던 것 같기도 합니다.사실 기억력은 그다지 좋지 못해서 디테일한 일상은 매일 쓰는 일기에 의존하여 기억합니다. 이직 시도는 매번 좌절됐지만 그래도 실력이 늘고는 있는 것 같다는 생각은 듭니다. 라고 생각했는데...오늘 코드리뷰를 하면서 부장님께 피드백을 받았는데 세상에...정말 생각지도 못한 부분을 지적받아서 깜짝 놀라고 말았습니다. 어떤 상태가 있고, 상태 변경 시 한 스택 이전의 상태로 돌아가는 기능(undo)을 만들어야 하는 상황이었습니다.저는 DB에 히스토리를 남기는 식으로 작업했는데, 부장님께서 굳이 DB에 히스토리를 쌓지 않고 그냥 클라이언트에서 한 스택 이전의 상태를 남기면 되지 ..

이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.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 으로 나누면서 하나씩 날아온다. (한번에 다 줄수 없..

원티드 프리온보딩 챌린지 "Next.js 확실히 알고 레벨업 하기" 3일차 내용 정리 Shared Component상황에 따라 RSC(React Server Component)나 RCC(React Client Component)로 동작하는 컴포넌트.RSC에서 import하면 RSC로 동작하고, RCC에서 import하면 RCC로 동작한다. 아래에 코드 예시가 있다.RSC, RCC의 코드 예시는 이전 게시물 참고. (https://doringri.tistory.com/231)interface Props { text: string;}export function Shared({text}: Props): Element { return {text};} RSC에서 Shared Component를 impo..

오늘은 그냥 간단한 글입니다. type PrintUser = (name: string, age: number) => void;const printUser: PrintUser = (name, age) => { console.log(name, age);};printUser("aa", 10);뷰에서 커스텀 훅이 리턴하는 함수를 호출할 일이 있었는데 위와 같은 방법(함수형 개별인자 타입)으로 호출하였다.왜냐면 뷰에서 객체를 만들기가 싫었기 때문이다. (코드가 지저분해져서)하지만 이러한 방식은 순서가 바뀌었을 때도 타입스크립트에서 잡아줄 수 없는 상황이 될 수 있기 때문에, 위험성이 있다. type User = {name: string; age: number};const printUser = (user: Use..

나는 왜 그렇게 커스텀 훅이 헷갈렸는지 모르겠는데, 최근 원티드 강의도 듣고 코드리뷰도 하고 챗지피티랑 놀다보니 슬슬 감이 잡히는 것 같다. 꼭 재사용되는 로직이 아니라도, 컴포넌트의 UI와 직접적으로 관련 있는 로직이 아닐 경우 뽑아내면 각자의 역할에 충실한 코드가 된다. VAC(View Asset Component) 패턴을 구현하기 위해서는 중요한 부분이다. 사실 내가 이걸 왜 쓰는지 감을 못 잡았어서 그렇지 구현은 정말 별것 없다.아래는 버튼을 누를 때마다 엘리먼트(box)를 1px씩 밑으로 내리는 로직을 useAction으로 뺀 것이다.export default function useAction(콜백) { const box = useRef(null); const count = useRe..

오늘 회사에서 코드리뷰를 하는데 한분이 useEffect와 state를 제거할 수 있을 것 같다는 말씀을 해주셨다. 리액트 개발자들이라면 잘 알고 있듯이 useEffect와 state는 불필요한 렌더링을 발생시킬 수 있으므로 성능을 위해 꼭 필요한 경우에만 사용하도록 하는 것이 좋을 것이다. 아무튼 내가 짰던 코드를 대충 설명하면, props로 가져오는 객체 데이터가 있는데, useEffect 안에서 props가 변경될 때마다 그 데이터를 정제해서 두 개의 state로 나누고 그 state들을 뷰에 사용하는 형태였다.const [state1, setState1] = useState(null);const [state2, setState2] = useState(null);useEffect(() => { ..

enum, const enum 비교나는 상수를 선언할 때 습관적으로 enum을 사용했었는데, 타입스크립트에서 enum보다는 const enum을 사용하는 게 더 좋다는 글을 보았다. enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0const enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0 enum의 문제는런타임에 객체를 만들기 때문에 오버헤드가 발생한다.사용되지 않는 코드들도 번들에 포함되어 번들 용량이 증가한다. (즉, Tree Shaking이 안 된다.)  const enum을 사용하면 위의 문제들이 해결되지만, 제한이 있다.리버스 매핑이 안 ..