비전공자의 개발 입문 이유"남들은 러닝화 신고 레이스를 달리는데 나는 그 트랙에 맨발로 서있는 기분이야." 재작년 커리어 전환을 준비할 때 친구에게 털어놓았던 고민이다. 준비하던 유학이 코로나로 인해 무산되며 이제 어떻게 해야 하나 많이 힘들었지만, 가만히 있을 수만은 없어 무엇을 하면서 살건지 정말 치열하게 고민했다. 그중 가장 큰 도움이 됐던 '내게 맞는 일을 하고 싶어'라는 책을 읽으며 아래와 같이 직업 선택을 위한 체크 리스트를 정리했다. ✅ 단순 작업이 반복되는 직무는 나와 맞지 않는다. ✅ 어려워도 꾸준히 성장할 수 있는 업무가 더 좋다. ✅ 일반 사무직으로는 성취감을 느끼기 어려웠다. ✅ 내가 하는 일이 직접적으로 나의 스펙 또는 성과가 되길 원한다. ✅ 자기 주도적으로 일할 수 있었으면 좋..
정의 블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용 가능 margin 속성을 이용한 가운데 정렬 position 속성을 이용한 좌우 정렬 float 속성을 이용한 좌우 정렬 margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬됨 이때, 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어짐 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 함 position 속성을 이용한 좌우 정렬 절대 위치 지정 방식(absolute position)으로 위한 요소는 정상적인 레이아웃에서 벗어나..
float 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만듦 현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용됨 clear float 속성이 적용된 이후 나타나는 요소들의 동작을 조절함 컨테이너 요소에 float 속성이 적용되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기 어렵기 때문 따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 허용하여 이후 등장하는 요소들이 더 이상 float에 영향을 받지 않도록 설정해야 함 clear를 설정하지 않으면 위와 같이 원하는 의도대로 배치되지 않음 overflow float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소가 크면, 해당 요소가 일부 밖으로 흘러넘치게 됨 이때, ov..
정의 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표 HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표) 요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음 정적 위치(static position) HTML 요소의 위치를 결정하는 기본값 top, right, bottom, left 속성값에 영향을 받지 않음 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식 정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임 상대 위치(relative position) HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식 고..
정의 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 어떻게 보이는지를 결정 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나를 가짐 👉 block 👉 inline 블록(block) display 속성값이 블록인 요소는 언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지함 ex. , , , , , , ... 인라인(inline) display 속성값이 인라인인 요소는 새로운 라인에서 시작하지 않고, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지함 ex. , , , ... display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 ..
CSS란? 정의 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. Cascading Style Sheets의 약자이다. cascade는 '폭포'라는 뜻으로, cascading이란 정의되어 있는 세부적인 정의가 있다면 해당 값을 사용하고, 정의되어 있는 게 없다면 다음의 기본으로 지정되어 있는 것으로 넘어가는 것을 말한다. 웹 사이트의 스타일링 ＊ 우선 순위는 ↓ 이 방향이다. 이 흐름이 바로 cascading! Author style 개발자가 작성한 CSS 파일 ▪️ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인스타일방식 → !important ▪️ cascading의 연결고리를 끊어내는 방법은 !important이지만, 가능하면 쓰지 않는게 좋다. Use..
오류 내역 페이지가 로드될 때 카카오맵의 마커가 바로 생성되지 않고 어떤 추가 요청을 해야 나머지 마커를 불러오는 상황이 발생했다. 기존 코드 전체 보기 더보기 import React, { useState, useEffect } from 'react'; import { Map, MapMarker, CustomOverlayMap } from 'react-kakao-maps-sdk'; import { styled } from 'styled-components'; import { BiChevronRight } from 'react-icons/bi'; import { useNavigate } from 'react-router-dom'; // window.kakao 객체를 가져옴 const { kakao } = ..
구현하고자 하는 로직 DB에 저장된 위스키바 리스트가 서울시에 한정되어 있기 때문에, 다른 지역으로 넘어가면 지도에 별다른 리스트가 조회되지 않았다. 사용자 입장에서 생각해봤을 때 아래와 같은 로직을 추가하는 것이 유저 사용성이 더 편할 것 같다는 생각이 들어 아래의 로직을 추가했다. 1.서울시 전체 위스키바 크롤링하여 DB 저장, 해당 데이터를 보여주는 방식으로 로직 전면 변경 2. 약 350여개의 업장을 화면에 모두 출력하기보다 react-select를 이용해 '구'를 선택하도록 하여 구별로 업장 출력, 각 구마다 위스키바가 가장 많은 지점을 해당 구의 중앙 지점으로 설정 3. 사용자가 지도를 이동할 경우 idle 이벤트를 이용해 해당 구(또는 지역)을 감지하여 사용자가 이동한 구의 위스키바 데이터를..
오류 내역 반복되는 인증/인가 처리를 효율적으로 진행하기 위해 라우팅을 진행하는 App.jsx에서 Private Route를 이용해 일괄 인증/인가 처리를 진행했다. 이때, 로컬 환경에서는 제대로 인증/인가 처리가 진행되지만 배포 서버에서는 동일한 코드임에도 불구하고 제대로 진행되지 않는 오류가 발생했다. 오류가 발생한 경로 배포 서버에서 로그인 성공 후 마이페이지 진입 시 로그인이 유효하지 않아 재로그인 처리를 할 때와 같이 로그인 페이지로 navigate됨 로그인 관련 데이터가 없는 경우가 아니라서 localStorage에 로그인 token, userFlag는 그대로 남아있고 마이페이지로 route만 되지 않는 상태 오류를 해결하기 위해 시도해 본 것들 1. 모든 인증/인가 if문에 console.l..
서울시 내 위스키바 리스트를 출력하기 위해 방법을 고민하던 중, 카카오맵 API에서 위와 같이 키워드로 장소를 검색하고 목록으로 표출하는 기능을 제공해 준다는 것을 알게 되었다. 데이터를 크롤링할 것인지 vs 카카오 내장 검색 기능을 사용할 것인지 회의를 진행했고 지도 API에서 어차피 리스트를 제공해 준다면 해당 내장 기능을 최대한 활용해 보기로 결론을 내렸다. 구현하고자 하는 로직 1. 페이지가 마운트될 때 사용자 현재 위치 정보 동의 1-1. 사용자가 허용했을 경우 해당 위도/경도 설정 1-2. 사용자가 거부했을 경우 지도 설정 기본 값인 을지로 3가의 위도/경도 설정 2. props로 내려받은 위도/경도값을 주소로 변환해 'X시 Y동 칵테일바'라는 키워드 세팅 3. 해당 키워드를 이용해 지도 AP..
