Turtle-hwan

1. Asrock H110M BIOS 설정2. Ubuntu 22.04 WOL 설정안 쓰는 컴퓨터에 우분투를 깔아서 홈서버를 만든 적이 있다.문제는 24시간 동안 켜 놓으니 전기세나 발열은 둘째 치더라도 소음이 너무 커서 잠자기 힘들어서 해결할 방법을 고민했었다. 물론 구형 HDD에 구형 쿨러를 쓰는 탓도 있겠다.1. 쿨러교체 + HDD를 SSD로 교체, M.2 NVMe to SATA converter가 필요2. 본체를 바깥으로 빼고 벽단자 잘 찾아서 공유기 연결하기 or 선을 길게 빼기3. WOL 설정하고 필요할 때만 켜서 쓰기 or 취침 시간에 자동 종료, 자동 켜지게 구성하기1번은 소음 크기는 줄일 수 있어도 소음 자체는 줄이지 못하고, 2번은 사용 중인 것을 제외하고 살아 있는 벽단자가 없었다. 블..

JS와 관련해서 흥미로운 사실을 찾았다. 시스템프로그래밍이나 OS 수업에서 한 번쯤 들어봤을 race condition이 프론트엔드에서도 발생할 수 있다는 것이다. Race Condition? race condition은 두 개 이상의 프로세스, 스레드가 공유되는 자원(critical section)에 접근해서 값을 쓰려고 할 때 발생한다. race condition이 발생하면 공유 자원의 값이 의도치 않게 변경되는 문제점이 생긴다. 백엔드에서의 레이스 컨디션은 실제 바뀐 값으로 권한 상승 등이 일어날 수 있어 CTF에서도 종종 출제되고 보안적으로 상당히 심각하게 다뤄지는 문제이다. 반면 프론트엔드에서는 보여지는 화면만 바뀌는 것이니 그렇게까지 위험하지는 않을 것 같고, Race Condition이 발생..

창업에 적극적인 친구 덕에 24.04.01에 마루180 지하에서 진행된 정창경 설명회에 가게 되었다. 디스콰이엇과 EO의 존재를 원래 알고 이용하면서 어떤 생각으로 이런 서비스를 만들었을지 정말 궁금했었는데 이번 기회에 관련된 이야기를 들을 수 있어 좋았다. 기대보다 큰 울림과 인사이트를 얻었고, 웹 상에서 떠도는 창업 관련 글보다 더 구체적이었다. 실제로 실패를 겪으며 여러 시도 끝에 성공한 창업가 분들 자신의 경험담을 직접 듣는다는 것의 의미가 컸다. 1부 디스콰이엇 박현솔 대표님 메이커들의 막막함을 해결하기 위해 디스콰이엇을 만들었다. 창업을 위해 필요한 요소 4가지 시장에서 간과되는 문제 내가 진정성을 느끼는 문제 타깃 유저 접근성 (타깃 유저가 우리 서비스를 쉽게 접근할 수 있어야 한다) 개발력..

2주차 과제는 주어진 피그마대로 당근마켓 화면1을 기본 HTML + CSS로 동일하게 구현하기였다. git repo fork 후 github pages로 배포해서 화면을 확인할 수 있게 했고, 결과물은 다음과 같다. 미션 결과물-당근마켓 화면1 링크 트러블 슈팅 해당 과제를 하면서 겪었던 이슈와 해결 방안은 다음과 같다. Issue 1 문제 상단 header가 고정이 안되어서 fixed로 고정했다. 그런데 fixed로 고정한 다음, header에 width 100% 를 주면 header가 화면보다 조금 커져서 화면 밖으로 튀어나간다?!?!?! 특히 → display: flex; justify-content: space-between; 해당 속성일 때 튀어나간다. 이 문제도 box-sizing: borde..

CSS class name 이름 짓는 법인 BEM 규칙은 이번에 처음 알게 되었다. 지금껏 정해진 className을 쓰면 자동으로 style을 맞춰주는 tailwind, bootstrap 이나 react에서 자동으로 class name을 만들어주는 CSS Module을 자주 써왔어서 접할 기회가 없었던 것 같다. 추가로 svg 작명법까지 찾아서 정리했다. CSS 우선순위 !important( 예시: .title-box{color: red !important;} inline(HTML에서 style을 직접 지정했을 때) id 선택(#id) class명(.class) HTML 태그(예시 : h3) 상위 Element의 속성 CSS 작명법 BEM(Block Element Modifier) CSS 작명법 BEM..

1) static position 속성의 기본값. 요소를 나열한 순서대로 배치. 원하는 위치에 콘텐츠를 배치할 방법 없음. 콘텐츠를 왼쪽에서 오른쪽으로 추가하다가, 오른쪽에 공간이 없을 경우 다음 줄로 넘겨서 순서대로 배치한다. 2) relative static과 같이 나열한 순서대로 배치되지만 top, right, bottom, left 속성을 사용해 원하는 위치를 지정할 수 있다. 이때 좌표값은 static 기준으로 위치한 곳이 (0px, 0px)이 된다. 지정한 속성에 따라 상/하/좌/우 원하는 자리에 배치하는 것이 가능 하다. 3) absolute top, right, bottom, left 속성값을 이용해 요소를 원하는 위치에 배치할 수 있다. 기준 위치는 position 속성이 relative..

display: grid; 격자 모양으로 보여준다. grid parent 속성과 grid children 속성이 따로 있다. grid track : grid의 행 또는 열 grid cell : grid 한 칸 Grid parent properties display : inline-grid는 grid에 inline 속성을 부여해 준다. .container { display: grid | inline-grid; } grid-template-rows, grid-template-columns : grid track의 크기를 지정해준다. 숫자 값만 넣어도 되며, 다양한 이름을 지원한다. 1fr 1fr 1fr 은 fraction 약자로, 비율을 의미한다. 1:1:1 비율로 나눠준다. .container { grid..

display : flex; 축이 하나인 것. 한 쪽 방향으로 배열할 수 있다. flex 속성을 해당 element (flex container)에 주면, children elements (flex items)의 위치를 결정한다 flex container에 주어야 하는 속성과, flex items에 주어야 하는 속성이 따로 있다. flex container (parent)의 속성 flex-direction : 축의 방향을 결정한다. .container { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap .container { flex-wrap: nowrap | wrap | wrap-reverse; } https://code..

git submodule 사용 계기 이번 ithome 프로젝트를 Next.js + TS 로 마이그레이션 하면서 git submodule 기능을 사용했다. 기존에는 하나의 repository에 프론트, 백이 폴더로 구분되어 같이 들어 있었다. 프론트만 환경을 Next.js로 바꾸면서 프론트 repo를 따로 만들었다. localhost에서 테스트할 때 편의성을 위해 백 repo를 포함시킬 필요가 있어서 submodule로 포함시켰다. ## 기존 구조 ithome ---/frontend (React) ---/backend (Nest.js) ---docker-compose.yaml ## 새로운 구조 ithome-front (Next.js 메인) ---/backend @ 8d972c3 (submodule) ---..

PR11 기존 React + JS로 개발했던 ithome 프로젝트의 Next.js + TypeScript로 마이그레이션 Next.js와 타입스크립트로 마이그레이션을 결정한 이유 => [링크 추가 예정] 그 중 이번주 까지 끝내야 할 내가 맡았던 페이지들을 Next.js + TS 환경으로 마이그레이션 하면서 겪은 것들이다. 0. 먼저 Map.js / SearchSubletInfo.js 파일을 .tsx 파일로 바꾸기. - eslint와 vscode 오류 잡아가는 방식으로 진행. 대부분 해당하는 ts type 추가 => marker 나 naver.map 관련해서 type을 도무지 알 수 없는 것이 있어 임시방편으로 any를 썼는데 나중에 더 자세히 알아보고 수정해야겠다. - 기존 React useEffect ..