그야말로 백만년만에 남기는 회고.원래는 2024년 말에 Goodbye 2024 회고도 남기고 싶었고,이직 1개월차에도 이것저것 느낀 게 많아 회고를 남기고 싶었으나...안 쓰던 블로그에 손을 대는 일은 생각보다 쉽지 않아서 늦어졌다. 아무튼 지금이라도 내 과거를 반추해보고자 밀린 회고를 시작해본다.왜 이직하셨나요?이직하였다고 하면 가장 궁금한 주제일텐데, 나의 경우 외적인 이유와 내적인 이유 두 가지가 있었다.일단 외적인 이유이자 결정적인 이유는 직무 변경의 위기 때문이었다.작년 연말 즈음, 내가 몸담고 있던 본부가 회사 내/외부 사정으로 통폐합되고, 다루는 핵심 서비스가 완전히 바뀔 거라는 예고가 있었다. 그리고 변경되는 서비스는 더 이상 웹 서비스가 아니라 SAP에 국한된 서비스였다.즉, 프론트엔드..

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries를 읽고 정리한 문서입니다.미디어 쿼리문법 구조는 다음과 같다.@media media-type and (media-feature-rule) { /* CSS rules go here */}media-type : 미디어 유형(ex: 인쇄 또는 화면)media-feature-rule : css 규칙이 적용될 조건(ex: min-width: 1024px)CSS rules : 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합보통 쓰는 syntax@media all and (min-width: 특정px) { .클래스 { /* css properties */}medi..

ChatGPT Prompt Engineeering For Developers의 Guidelines 강의를 듣고 정리한 문서입니다.효과적으로 프롬프트를 작성하는 원칙명확하고 구체적인 지시 작성모델에게 생각할 시간 주기명확하고 구체적인 지시 작성을 위한 네 가지 전략```, """, ,  , : 와 같은 구분자를 사용하여 입력의 구분된 부분 명확하게 표시하기ex)text = f"""You should express what you want a model to do by \\ providing instructions that are as clear and \\ specific as you can possibly make them. \\ This will guide the model towards the des..

인라인 스타일리액트 jsx 안에 style 프로퍼티로 스타일을 정의하는 것.장점동적 스타일링 용이 : state를 활용해 스타일을 다르게 주고 싶을 때 쉽게 조정 가능스코핑 자동화 : 인라인 스타일은 해당 컴포넌트에 직접 적용되므로 스타일의 충돌을 걱정할 필요가 없다.추가 설정 불필요 : CSS 파일을 별도로 관리하거나 로드할 필요가 없다.단점성능 이슈 : external CSS와 달리 별도의 컴파일 및 축소된 CSS 파일을 사용하지 않기 때문에 HTML 문서의 큰 부분을 차지하여 로드 시간이 늘어날 수 있다. 각 컴포넌트 인스턴스마다 스타일이 복제되어 DOM 요소가 많은 페이지에서는 성능 저하를 초래할 수 있다.재사용성 제한 : 같은 스타일을 여러 컴포넌트에서 사용하고 싶은 경우, 각 컴포넌트에 동일한..

https://sadie100.github.io/CypherTypeTest/ 사이퍼즈 성향 테스트 sadie100.github.io 3년 전에 만들고 Netlify를 통해 배포했던 사이퍼즈 플레이어 타입 테스트.도메인도 만료된 지 한참 전이고, 얼마 전 Netlify에서도 배포했던 프로젝트가 expire됐다는 메일을 받았다.이대로 묵혀둘까... 했는데 그래도 만들어둔 게 아쉬워서,별도의 도메인 구매가 필요 없는 깃헙 페이지를 이용해서 배포하여영원히 사는 프로젝트로 만들기로 했다.하는 김에 깃헙 액션을 통해 CI/CD도 연결해서, 거하게 리팩토링 작업을 했다.  Github Action을 위한 yaml 파일 만들기깃헙 액션 워크플로우를 만들기 위해서는 yaml 파일이 필요하다.해당 워크플로우가 어떤 Git..

Next + React Query로 SNS 서비스 만들기 강의를 듣다가 dayjs에 대해 알게 되었고, 강의 내에서의 dayjs configuration 코드를 보다가 알게 된 점이 있어 글로 남기고자 한다. (강의 내용과는 무관) dayjs는 플러그인 같은 개념이 있어서 쓰고자 하는 기능이 있으면 필요한 플러그인을 등록해줘야 한다고 한다. 예를 들면 이런 식이다. import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.locale("ko"); dayjs.extend(relativeTime); export default function Post() { // ...

다중 스레드 코드 테스트 다중 스레드 코드에서 버그가 있다는 사실을 증명하는 테스트 케이스는 짜기 어렵다. => 동시 갱신 문제가 발생하는 문제는 너무 드물게 발생해서 대개는 테스트로 발견하지 못함. 테스트로 버그를 더 잘 찾아내기 위한 아이디어들 몬테 카를로 테스트 : 테스트로 버그를 더 잘 찾아내기 위한 아이디어. 조율이 가능하게 유연한 테스트를 만든 후 임의로 값을 조율하면서 반복해 돌린다. 시스템을 배치할 플랫폼 전부에서 테스트를 반복해서 돌린다. 부하가 변하는 장비에서 테스트를 돌린다. 그러나 위의 조치를 취하더라도 코드에서 스레드 문제를 찾아낼 가능성은 매우 낮음 스레드 코드 테스트를 도와주는 도구 IBM의 ConTest : 스레드 코드에 보조 코드를 더해 실패할 가능성을 높여주는 도구. 스레..

작업 처리량 높이기 URL 목록을 받아 네트워크에 연결한 다음 각 페이지를 읽어오고 분석하여 통계 보고서를 출력하는 코드를 짠다고 가정. 작업 처리량 계산 - 단일스레드 환경 편의상 다음과 같이 가정 페이지를 읽어오는 평균 I/O 시간 1초 페이지를 분석하는 평균 처리 시간 0.5초 처리는 CPU를 100% 사용하고 I/O는 0% 사용 => 스레드 하나가 N페이지를 처리하면 총 실행 시간은 1.5초*N 작업 처리량 계산 - 다중 스레드 환경 여러 스레드를 사용하면 프로세서를 사용하는 페이지 분석과 I/O를 사용하는 페이지 읽기를 겹쳐 실행할 수 있음 => 단일스레드의 세 배의 처리율로 처리 가능 데드락 다음 네 가지 조건을 모두 만족하면 데드락이 발생 상호 배제 : 여러 스레드가 한 자원을 공유하나 그 ..

라이브러리를 이해하라 Executor 프레임워크 애플리케이션에서 스레드를 사용할 때 Executor 클래스를 고려하면 좋다. Executor 프레임워크는 스레드 풀을 관리하고 풀 크기를 자동으로 조정하며 필요하다면 스레드를 재사용함. Future도 지원 -> 독립적인 연산 여럿을 실행한 후 모두가 끝나는 것을 기다릴 때 유용 스레드를 차단하지 않는 방법(논 블로킹) 최신 프로세서는 차단하지 않고도 안정적으로 값을 갱신함 => 흔히 CAS라 불리는 연산 덕분(데이터베이스 분야에서 낙관적 잠금이라는 개념과 유사) synchronized 키워드가 언제나 락을 거는 것과 다르게, CAS 연산은 스레드가 같은 값을 수정해 문제를 일으킬 때를 감지하여 이럴 경우에만 갱신이 성공할 때까지 재차 시도함 ⇒ 락을 거는 ..

가능한 실행 경로 다음의 incrementValue 메서드가 있는 IdGenerator 클래스가 있다고 하자. public class IdGenerator { int lastIdUsed; public int incrementValue() { return ++lastIdUsed; } } 스레드 하나가 IdGenerator 인스턴스 하나를 사용한다고 가정하면 가능한 실행 경로+결과는 하나다. 하지만 만약 IdGenerator 인스턴스를 스레드 두 개가 호출한다면 다음 결과들이 모두 가능하다. 스레드 1이 94를 얻고, 스레드 2가 95를 얻고, lastIdUsed가 95가 됨 스레드 1이 95를 얻고, 스레드 2가 94를 얻고, lastIdUsed가 95가 됨 스레드 1이 94를 얻고, 스레드 2가 94를 ..