전체 글

[HTML5] main 요소와 섹셔닝 컨텐츠 (Sectioning contents)

들어가며 사이드 프로젝트 마크업을 하다가 문득 의문이 들었다. main 요소 내부를 두 개의 섹션으로 쪼개고 싶은데, main 요소 안에 section 요소가 들어가도 되는가? 가능하다면, main 요소 안에 동등한 자격을 가진 section 요소 두개를 넣는 것이 좋은가? 아니면 지금 main으로 잡아둔 영역을 섹셔닝 요소 두 개로 분리하여, 하나를 main으로 나머지는 section으로 마크업해야 하는가? 그리고 이 의문은 곧 오늘 공부의 시작점이 되었다. 나도 시맨틱 태그를 사용하고 있기는 하지만, 일하면서 어깨 너머로 터득한 지식에 불과하는지라 각각의 요소가 어떤 식으로 관계를 맺고 있는지 정확하게 알지 못한다. main 요소와 section 요소의 정의를 다시 한 번 살펴보고 위와 같은 의문에 ..

[HTML/CSS] 박스 모델 - Box model

박스 모델이란? 모든 HTML 요소(Element)는 박스 형태로 이루어져 있다. 웹 브라우저에서 HTML 요소를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델을 박스 모델이라고 부른다. 이 박스 공간은 각각 Content & Padding & Border & Margin 으로 이루어져있다. CSS 속성(Property)을 이용해 각각의 HTML 요소가 차지하고 있는 박스 모델의 공간을 정의하고, 스타일을 지정하고, 정렬을 컨트롤하는 것이 웹디자인과 웹퍼블리싱의 핵심이다. Content 텍스트나 이미지 등 해당 요소의 내용이 위치하는 부분. width와 height 속성을 이용해 규격을 지정할 수 있다. box-sizing이 content-box일 경우, 규격을 지정하는 기준이 된다. P..

[Windows/Ubuntu 듀얼 부팅] 부팅시 윈도우만 켜지고 grub이 나오지 않는 현상 해결 방법

Windows 10이 깔려있는 PC에 개발을 위해 Ubuntu를 설치했다. 성공적으로 듀얼부팅 설치가 완료되었지만, PC를 재부팅해도 리눅스 부트 로더(Boot Loader)인 grub이 뜨지 않고 윈도우로만 부팅됐다. 리눅스를 켤 때마다 바이오스에 들어가서 Boot override 할 수는 없으니 부팅시 grub이 뜨도록 만들어야 했다. 이 문제의 해결 방법은 크게 두가지로 나뉜다. 1. grub을 다시 설치한다. 2. 윈도우에서 직접 부트 순서를 정해준다. 나는 그 중 두 번째 방법으로 해결했다. 윈도우에서 부트 순서 정해주는 방법 1. 부팅 시 실행된 윈도우에서 명령 프롬프트를 관리자 권한으로 연다. 2. 다음 명령어를 입력한다. bcdedit /set {bootmgr} path \EFI\ubunt..

TIL - 2022.03.14 월요일

오늘 한 것 1. react 드래그 앤 드롭 라이브러리 스터디 우리가 만들고자 하는 서비스의 프론트엔드 핵심 기능을 세가지로 추려서 프론트엔드 멤버 셋이서 각각 하나씩 담당하기로 했다. 그 중 내가 맡은 것은 여행 일정을 드래그 앤 드롭으로 등록 및 수정하는 기능. 그 기능을 구현하기 위해 필요한 세부 기능은 총 두가지이다. 1) 드래그 앤 드롭으로 데이터 배열 변경 2) 드래그 가능한 Item을 리사이징해서 해당 일정의 소요시간 변경 1번 기능 구현 자체는 어렵지 않았다. react-beautiful-dnd 등의 라이브러리를 이용하면 간단하고 깔끔하게 만들 수 있다. 해당 라이브러리에서 제공하는 snapshot 인자를 이용하면 css 수정도 가능하고. react-beautiful-dnd는 대상 Item..

TIL - 2022.03.11 금요일 (+팀프로젝트 시작)

오늘 배운 것 1. Git-flow Wordflow 지금까지는 개인 프로젝트와 공부를 병행하면서 짬나는 시간에 팀프로젝트를 진행했지만, 정규 수업이 종료된 오늘부터는 본격적인 팀프로젝트 시작이다. 팀 프로젝트를 시작하면서 협업시 Git workflow를 어떻게 관리하면 좋은지 학습하는 시간을 가졌다. Git workflow란, Git을 이용한 협업시 브랜치를 어떻게 사용할지에 대한 규칙을 뜻한다. Git workflow도 리액트 컴포넌트 디자인 패턴과 마찬가지로 정해진 표준이 있는 것은 아니다. 회사나 팀별로 합의된 방식을 이용하면 된다. 오늘은 그 중 현재 가장 많이 사용되고 있는 Workflow 중 하나인 Git-flow를 예시로 배웠다. Git-flow의 경우 각각의 브랜치의 역할이 명확하며, 버전..

TIL - 2022.03.08 화요일

오늘 배운 것 1. SSG/SSR 배포 지난 주 금요일부터 오늘까지는 배포의 회오리에 풍선인형처럼 휩쓸려 팔랑거리고 있다. VM 인스턴스만 사용하는 단순 동적 배포는 경험이 있지만, 로드밸런서를 이용해서 부하를 분산시키고 클라우드와 VM을 동시에 이용하는 형태의 현대적 배포는 경험이 없다보니 뭐가 뭔지도 모르겠고 정신이 혼미하다. 지금까지 이해한 것을 먼저 적어보자면. SSG란? : Static Site Generation / 정적 타입 배포 SSR이란? : Server Side Rendering / 동적 타입 배포 로드밸런서(LB)와 CDN을 이용하면 정적 url로 들어갔을 때에는 SSG 방식으로 소스코드를 내려받고, 동적 url로 접속했을 때에는 SSR 방식으로 소스코드를 내려받도록 분기를 나누어 웹..

TIL - 2022.03.03 목요일

이제까지 배운 것 1. 여러개의 요소에 useRef를 병렬로 적용하는 방법 위와 같은 페이지에서 상단의 서브메뉴를 눌렀을 때 페이지를 리로드하지 않고 내용 부분의 컨텐츠만 교체하고 싶었다. 레이아웃을 이용하자니 pageProps 내에 뿌려지는 컨텐츠 안에 레이아웃을 하나 더 만들어서 넣는 방법을 모르겠고. 한동안 고민하다가, 결국 메뉴 버튼와 내용 부분의 index를 연결해서 수동으로 display를 컨트롤하는 방법으로 해결했다. 그것을 위해 필요한 DOM 조작은 useRef를 배열로 넣어서 처리 완료. (props.buttonRef.current[0] = el)} > 내가 산 물건 (props.buttonRef.current[1] = el)} > 내가 파는 물건 (props.buttonRef.curre..

[Javascript ] substr() / substring() - 문자열 자르기

substr() 문자열을 자르는 메서드. 문자열의 특정 위치에서 시작해 일정 길이의 문자를 반환한다. 기본 형태는 다음과 같다. str.substr(start[, length]) substring() 문자열을 자르는 메서드. 대상 문자열의 시작 인덱스로부터 종료 인덱스 전까지의 문자열을 반환한다. 기본 형태는 다음과 같다. str.substring(indexStart[, indexEnd]) substr()와 substring()의 차이 substr의 두 번째 인자는 반환할 문자의 총 개수를 지정한다. 반면 substring의 두 번째 인자는 종료 인덱스를 지정한다. (slice와 유사) 예시를 통해 두 가지 메서드의 차이점을 확인해보자. // substr let str = "abcdefg"; str.su..

TIL - 2022.02.23 수요일

오늘 배운 것 1. 오늘의 집 클론코딩에 결제 시스템 입히기 아임포트를 활용해서 결제 기능이 작동하도록 하는 것에는 성공했다. 결제에 대한 return 값도 성공적으로 들어오는 것을 확인. 그런데 해당 return값에서 imp_uid 정보를 뽑아 포인트 등록 API에 쏘려고 하니 404 에러가 발생했다. 체크해본 요소들을 기록차 정리해둠. - 액세스 토큰 만료 문제인가? : 아님 - useMutation하는 함수 스크립트라 잘못되어있는가? : 결제 기능 정상 작동하는 정환님 코드와 비교해보았는데, 문제 없는 것으로 보임.. - 테스트하는 계정에 문제가 생겼나? : 그래서 다른 계정으로도 테스트해봄. 아님. 400 에러가 아니라 404 에러가 뜨니까 애초에 네트워크탭에 에러 메시지가 뜨지를 않는다. 그래서..

TIL - 2022.02.22 화요일

오늘 배운 것 1. 아임포트를 이용해서 결제 시스템 구축하는 법 아임포트라는 결제 솔루션 서비스를 이용해서 결제 시스템 구축하는 방법을 간략하게 배웠다. 실세로 아임포트 API 소스코드를 사용해서 user 정보에 결제한 만큼의 포인트가 충전되는 실습도 해봤다. 결제 시스템을 구축할 경우 개발 기간을 최소 1~2달 잡아야 한다고.. 2. 오늘의집 클론코딩 UI 정비 기능 우선 구현하느라 방치해뒀던 문의 및 문의 답변 부분 UI를 잡았다. 레이아웃의 Navigation도 해당 페이지의 asPath를 인식해서 자동으로 현재 위치에 하이라이트 표시가 되도록 만들었다. 관리자 메뉴에서만 볼 수 있는 버튼이나 수정/삭제 부분은 userInfo를 글로벌 스테이트로 넘긴 뒤 만지려고 남겨두었다. (구조 변경의 가능성이..