본문 바로가기
반응형
footer 하단에 고정(feat.flex) content의 양이 적을 때 footer를 페이지 가장 아래에 고정 시키는 방법은 여러가지가 있지만 제일 좋은 방법을 알게 됐다. 바로 flex를 이용하는 방법인데 내가 아는 방법 중에는 가장 간단하고 쉽게 해결할 수가 있었다. html, body에 height: 100%를, body에 display: flex, flex-direction: column 속성을 넣는다. content 영역에 flex: 1을 주면 끝. 이렇게 하면 뷰포트 크기에 상관없이 footer가 항상 하단에 고정된다. 코드 헤더 메인 콘텐츠 푸터 2022. 3. 30.
[JS] switch 사용법(feat.타입스크립트) switch는 하나의 표현식에 대해 여러 조건들이 존재할 때 유용하게 쓸 수 있다. 즉, 어떤 상황에 대해 여러 경우(분기)로 나누어질 때 사용하면 좋다. (과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 등) 구문(syntax)과 예시를 통해 살펴보자. 구문(Syntax) switch (expression) { case value1: // 표현식(expression)의 결과가 value1과 일치할 때 실행 됨 break; case value2: // 표현식(expression)의 결과가 value2과 일치할 때 실행 됨 break; // ... case valueN: // 표현식(expression)의 결과가 valueN과 일치할 때 실행 됨 .. 2022. 3. 27.
VS Code 커서 스타일 및 애니메이션 변경하기 Visual Studio Code에서 커서의 스타일(색상, 너비 등)과 애니메이션을 변경할 수 있다. cmd(윈도우는 ctrl) + shift + p로 명령 팔레트 실행 json 검색 기본 설정: 설정 열기(JSON) 커서 스타일 색상 코드 "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" } 커서 색상 선택 참고 - Color Tool 너비 코드 "editor.cursorWidth": 6 스타일 line(기본값) block underline line-thin block-outline underline-thin.. 2022. 3. 18.
[프로그래머스] 신고 결과 받기 | JavaScript 문제 풀이 이게 정말 레벨1 문제인가..? 카카오 기술 블로그에서는 해시 자료구조를 활용할 수 있는지에 대한 문제라고 설명한다. (게다가 정답률이 80.13%다. 😲) 1. userList 만들기 const userList = id_list.reduce((result, currentId) => { result[currentId] = [0, []]; return result; }, {}); 먼저 신고된 횟수와 신고한 유저를 담을 userList를 만든다. reduce() 메서드를 통해 이런식으로 객체를 만들 수 있다는 것을 다시 한번 배우게 됐다. 2. userList에 신고된 횟수, 신고한 유저 ID 담기(중복 제거) for (const id of new Set(report)) { const [REPOR.. 2022. 3. 10.
개발자가 알아야 할 광고 용어 모음(feat.광고 플랫폼 개발자) 회사에서 면접을 볼 때 나는 이런 말을 했다. "제가 전혀 모르는 분야인 광고라는 플랫폼에 개발이 접목되면 재미있을 것 같고, 호기심이 생겨서 지원하게 되었습니다." 그렇게 디지털 광고 회사를 다니게 되었고, 모르는 광고 용어가 굉장히 많았다. 자주는 아니더라도 광고 용어들을 접하다보니 어느 정도는 알아야 개발을 더 수월하게 할 수 있을 것 같았다. 완전히 외우지는 못하겠지만 '까먹기 때문에 살려낸다'라는 생각을 갖고 정리를 해보자. 매체사(Media Company) - 광고 플랫폼을 가진 회사 광고를 진행할 수 있는 플랫폼을 가진 회사들을 뜻한다. '광고 매체 + 회사 = 매체사'인 것이다. 구글, 네이버, 카카오 등을 매체사라고 부른다. 퍼블리셔(publisher)라고도 하는 것 같다. 🤔 비딩(Bi.. 2022. 3. 6.
신입 프론트엔드 개발자 첫 프로젝트 회고 첫 프로젝트가 끝이 났다. 어리바리한 첫 출근부터 시작해서 그동안 사내에서 느꼈던 것들에 대해 블로그 글도 몇개 쓰기도 했다. 요즘 시간이 너무 빠르게 지나가서 한편으로는 불안하다. 개월 수는 늘어나는데 내가 그만큼 성장을 하고 있는지, 올바른 방향으로 나아가고 있는지 모르겠다. 기술적인 부분 외에도 배울 게 참 많다는 것을 느끼는 요즘이다. 개발자로서 첫 프로젝트를 끝낸 기념으로 회고 글을 쓰려고 한다. 회사에서도 회고를 진행하긴 했지만 마침 향로님이 블로그에 프로젝트 회고 관련 글을 올려 주시기도 했고, 해당 글에 있는 회고 질문을 내게도 적용을 해보고 싶었다. 그래서 글에 있는 질문을 토대로 조금 바꿔서 작성을 해보려고 한다. 이번 프로젝트 회고에서 이야기했으면 하는 주제가 있나요? 협업 도구 협업.. 2022. 3. 2.
React Hook Form 사용 후기(feat.IE11) 어렵다..어려워 리액트로 폼 다루기가 정말 힘들다. 이메일을 보내는 폼에 유효성 검사와 함께 메세지를 띄우는 게 이렇게나 어려운건지 몰랐다. 서로 다른 인풋들에게 하나하나 조건을 달아주며 전혀 깨끗하지 않은 코드로 어찌저찌 구현은 했지만 사이드 이펙트가 계속해서 생겨났다. 게다가 프로젝트 기간이 얼마 남지 않아서 어지러운 코드를 리팩토링 할 시간이 있을지도 미지수였다. React hook form 그래서 선택을 해야 했다. 결국 어느 정도 검증되고 성능이 괜찮은 외부 라이브러리를 찾기 시작했고, 그렇게 찾은 것이 React hook form(이하 리액트 폼)이다. 공식 홈페이지에 설명도 잘 되어 있고 사용 해보니 내가 작성한 코드보다 훨씬 사용성이 좋고 직관적이었다. 그래서 기존 코드를 복사한 후 리액트.. 2022. 2. 27.
반응형

티스토리툴바