티스토리챌린지 21

[React] React.memo를 사용해보자

React.memo는 아래 포스트를 통해 개념에 대해 간단하게 다뤄본 적이 있습니다. [React] 리액트 최적화하기React 참조 개요 – ReactThe library for web and native user interfacesko.react.dev가장 큰 팁: 공식 문서를 잘 읽자. 1. useMemo공식 문서 설명재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 입니다.doringri.tistory.com이번 포스트에서는 React.memo에 대해 더 구체적으로 알아보겠습니다. 배경지식React 컴포넌트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링되는 특징을 가지고 있습니다.이때, 자식 컴포넌트를 memo로 감싸면 자식 컴포넌트에게 넘기는 props 값의 변..

IT/React & Next.js 2024.11.27

[일상] 2024.11.26

오블완 챌린지도 이제 이틀 남았군요.3주동안 글을 쓴다는 게 처음에는 말도 안 되는 도전인 것 같았는데 어쩌다 보니까 이렇게 됐네요.살다 보면 "어쩌다 보니" 하게 되는 일이 참 많은 것 같습니다.제 블로그의 이름이 되기도 한 할란 엘리슨의 단편, '괘종소리 세기' 도 어쩌다 보니, 의식하지도 못한 사이에 세월이 흘러갔다는 것을 문득 체감하는 주인공을 그리고 있지요.어쩌다 보니 직장생활을 하고 있고, 어쩌다 보니 어릴 적엔 꽤 많다고 생각했던 돈을 벌어보기도 했습니다.그것들이 생각보단 별것 아니라는 생각도 하게 됐고요.올해는 작년과 달리 여러가지 일에 실패하기도 했습니다.하지만 아이러니하게도 쉽게 얻은 성공보다 기억에 강렬하게 남았습니다.그러니까 흐름을 잃어버린 채로 살아가는 것보단 가끔은 실패하는 것도..

일상 2024.11.26

[일상] 대전 국제 와인 EXPO 후기, 만족한 제품

이번달 초에 대전에서 열린 국제 와인 EXPO를 다녀왔습니다. 여기서 와인잔을 사려면 5,000원 정도를 내야 하니 다이소에서 일회용 와인잔을 사가는 것을 추천합니다.가져온 와인잔으로 시음할 수 있습니다.엑스포 내에는 화장실도 있고, 잔을 씻을 수 있는 곳도 따로 마련되어 있습니다. 특정 시간대엔 한가운데서 시음 존이 열립니다만, 여기서 너무 많이 마시지 않는 걸 추천합니다.일단 제 기준으로는 부스에서 받아 마시는 게 훨씬 맛있었고, 여기서 마신 것 때문에 헤롱헤롱해져서 잠깐 주저앉아 있었다는 슬픈 이야기... 여기서 막 마시다간 훅갑니다 조심하십시오 명칭은 와인 엑스포지만 와인 이외에도 여러 종류의 술들을 시음할 수 있는 부스들이 많더군요.심지어는 안주도 파는데, 여기서 먹었던 어묵이랑 라면땅이 진짜...

일상 2024.11.25

[SI 지식 말하기 연습] DB - 인덱스(Index)

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

IT/기타 2024.11.24

[일상] 2024.11.23

오늘은 매우 오랜만에 친구들이랑 만나서 다음 달에 갈 베트남 여행 계획을 짰습니다.저 같은 경우는 P라 여행할 땐 굵직한 장소 몇 개만 대강 정해놓고 여행 당일엔 즉흥적으로 돌아다니거나 하는 편인데 이번엔 아무래도 해외여행이다 보니 뭔가 상세한 계획이 필요할 거 같긴 하더군요. 그러고 보니까 해외여행이라고 하면 5년 전에 교회에서 선교지로 갔었던 필리핀이 처음이자 마지막이었지요.정확한 지역명도 기억이 안납니다.그래서 이번 여행이 처음으로 친구들과 가는 해외여행인데, 그냥 무탈하게만 다녀 왔으면 좋겠다는 생각이 드는군요.안 싸우고, 사건사고 없기만 해도 평타는 칠 듯. 그래도 인원이 4명이나 되다 보니까 조금 수월한 느낌입니다.집단지성의 힘이란 게 있으니까요... 3박 5일이고, 대충(첫째날) 숙소도착(둘..

일상 2024.11.23

[React] Clean-up 함수에 대해 (feat. useRef)

useEffect는 컴포넌트가 렌더링된 직후 실행되는 훅이다.그리고 보통 컴포넌트가 언마운트될 때 실행할 동작을 설정하기 위해 useEffect 안에서 Clean-up 함수를 호출한다.useEffect(() => { return () => console.log(state);}, []) Clean-up 함수는 리렌더링 직후 의존성 배열의 state 중 변경된 값이 있다면 클로저에 의해 이전 시점의 state를 기준으로 실행되는 함수이다. 의존성 배열에 state가 들어 있으면 두 가지 경우에 실행된다.컴포넌트가 언마운트될 때해당 state의 값이 변경될 때 Clean-up 함수에서 해당 state를 찍어 보면 state가 변경되기 직전의 값이 출력될 것이다. 아래 코드가 그 예시이다.export co..

IT/React & Next.js 2024.11.22

[Spring Boot] RequestBody 필드에 값이 매핑되지 않는 문제

역직렬화가 안돼요!@RequestBody로 POJO 객체를 받을 때, 특정 필드에 값이 자동 매핑이 안 되는 문제가 가끔 발생한다.즉 프론트에서 분명히 body에 {name: "doringri"} 를 담아 보냈는데 {name: ""} 로 도착하거나 한다는 것이다.이때 boolean 형이라면 false로, int형이라면 0으로 도착할 것이다. (각 자료형의 기본값) 이러한 현상이 일어나면 먼저 필드의 이름이 같은지 다시 한번 확인하고, 컨트롤러에서 파라미터 앞에 @RequestBody 어노테이션을 붙였는지 확인한다.@PostMappingpublic void test(@RequestBody UserInfo userinfo) { ...} 문제가 없다는 것을 확인했다면 매우 높은 확률로 Jackson 문제..

[IT/일상] 엑셀 VBA 페어 매칭 프로그램 후일담 (고도화)

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

IT/기타 2024.11.20

[SI 지식 말하기 연습] Promise, Async, Await

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

IT/기타 2024.11.19

[SI 지식 말하기 연습] 추상 클래스, 인터페이스란?

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

IT/기타 2024.11.18

[JavaScript/알고리즘] 의상

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 이번에도 DFS 상태트리로 완전탐색을 시도하였습니다.function solution(clothes) { // 종류에 따라 의상 분류 const classifiedClothes = {}; for (let cloth of clothes) { if (!classifiedClothes[cloth[1]]) { classifiedClothes[cloth[1]] = []; } classifiedClothes[cloth[1]].push(cloth[0]); } ..

[일상] 2024.11.16

오늘은 회사 직원분의 결혼식을 다녀왔습니다.뷔페는 맛있었는데, 코가 막혀서 맛도 잘 못 느끼고 상당히 힘들군요... 숨 쉬기가 고통스럽습니다. 반창고를 미간에 가로로, 콧등을 따라서 세로로, 즉 T자로 붙여놓으면 코가 뚫린다는 글을 봐서 그렇게 해봤는데 개뿔 아무런 효과도 없더군요... 감기는 어쩔 수 없는 건가... 뷔페를 먹고 난 뒤에는 봉무공원에 산책을 다녀왔습니다.  호수 주변으로 노란 고양이들이 몇 마리 있는 것 같더군요. 여기서 사는 건지... 산행 비스므리한 코스도 있고 고운 흙길도 있어서 맨발걷기를 하시는 분도 몇 명 보았습니다.산행 코스로 갔는데 길진 않지만 생각보다 가파릅니다. 그러고 집에 와서는 피곤해서 잤습니다. 콜대원 초록색을 먹고 있는데 먹으면 잠만 오고 효과는 잘 모르겠네요.이..

일상 2024.11.16

[일상] 2024.11.15

오늘이 오블완 챌린지 9일차 되는 날인데 뜬금없이 갑작스럽게 위기가 찾아왔습니다.글을 쓸 소재거리가 없네요.딱히 특별한 일도 없었고... 시간은 20분밖에 안 남았고... 뭐가 있을까요... 감기에 걸렸는데 병원갈지 헬스장갈지 고민하다가 헬스장 간 일? 브리아노의 연구소가 오늘 완결난 일? 집 개가 오늘 혹 제거 수술을 한 일? 뭐 하나 파고들만한 일이 없군요.아마 감기에 걸려서 머리도 잘 안 돌아가는 것도 문제인 것 같습니다.그러니까 오늘은 공부는 pass...내일은 직장동료분 결혼식도 가야 하니까요...

일상 2024.11.15

[일상] 2024.11.14

오늘은 헬스를 쉬는 날입니다.그럼 시간이 많이 남을 것 같지만 은근히 별로 안 남습니다.그만큼 딴짓을 많이 하기 때문이라고 생각합니다... 정신이 피로해져서 그런 것 같습니다. 선임이 휴직 중이라 회사 업무가 많아져서 그렇습니다.그런데 바쁜 것도 생각보다 나쁘지 않더군요.이곳저곳에서 일이 들어오는데 평소엔 잘 소통할 일이 없었던 다른 부서 분들이랑도 업무 이야기를 하기도 하고...도움이 되었다고 고마워하시는 분도 계셔서 좀 보람차기도 했습니다.이럴 때가 제일 행복한 것 같습니다. 아래는 제가 힘들 때 보는 영상입니다.헬스장에서 런닝머신 하면서 우연히 보게 된 영상인데 유튜브에 풀버전이 올라와 있더군요.  38:50부터 스트레스에 관한 이야기를 해주시는데 개인적으로 정말 많이 와닿고 위로가 되었습니다. 과..

일상 2024.11.14

[SI 지식 말하기 연습] 동기, 비동기란?

언젠간 갑자기 들이닥치게 될 면접 대비를 위한 말하기 연습 코너입니다. (2일차) 동기 프로그래밍작업이 순차적으로 진행됨한 작업이 끝날 때까지 다른 작업은 대기어떤 작업의 결과가 다음 작업에 필요한 것처럼 순서가 지켜져야 할 때 필요함키워드: 순차적, 대기, 순서  비동기 프로그래밍병렬적으로 여러 작업이 함께 수행됨특정 작업의 완료를 기다리지 않고 다음 작업을 실행함애플리케이션에서 긴 작업을 기다리는 동안 다른 작업이 수행되어 전체적인 성능을 향상시킬 때 필요함키워드: 병렬, 다음 작업 바로 실행, 긴 작업  녹음 결과네, 일단 동기 방식이란... 하고자 하는 작업의 순서가 지켜지는... 일을 뜻합니다.이 동기 방식이 필요한 순간은....... 어떤 작업의 결과가 다음 작업에 필요할 때... 입니다.그리..

IT/기타 2024.11.13