코드사냥꾼의 전리품

"너무 바빴고, 부족함에 많이 울었고 힘들었다." 내가 경험했던 22년은 위의 한 문장으로 정리할 수 있다. 개발자로서의 인생 첫 회고를 부정적인 단어로 시작하는 것이 아쉽지만 언젠가 다시 꺼내보았을 때 미래의 나에게도 큰 동기부여가 될 것 같아 솔직하게 써보려 한다. 1. 2022년 5월 말, 첫 취직 💼 감사하게도 좋은 기회를 통해 B2B 스타트업에서 프론트엔드 개발자로 일하게 되었다. 당시 기존 제품을 SaaS 플랫폼화 하여 글로벌 진출을 목표하고 있어서 맡을 업무에 대한 기대감이 컸고, 실패하더라도 도전하는 것에 큰 의미를 두는 사내 가치관이 나와 잘 맞아서 행복했다. 당시 팀 내 프론트엔드 개발자는 나 포함 3명이었고, 신입 개발자로 이루어져 있었다. 그래서일까? 만나게 된 동료분들도 엄청난 열..

pointer-events ? 해당 속성을 통해 마우스 이벤트(hover, click, drag 등)에 어떻게 동작할지 지정할 수 있다. 다만, 대부분의 속성 값은 SVG 전용이기 때문에 기본 html 태그에는 none 또는 auto 값만 설정할 수 있다. [속성 값] none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다. auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다. inherit : 부모 요소로부터 pointer-events 값을 상속받는다. (더 많은 속성 값은 https://developer.mozilla.org/en-US/docs/Web/CSS/..

문제 https://programmers.co.kr/learn/courses/30/lessons/12954?language=javascript 코딩테스트 연습 - x만큼 간격이 있는 n개의 숫자 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. programmers.co.kr 🚩 해결 function solution(x, n) { let answer = []; for(let i = 1; i

문제 https://programmers.co.kr/learn/courses/30/lessons/12969 코딩테스트 연습 - 직사각형 별찍기 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수 programmers.co.kr 🚩 해결 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); let result = ""; for(let i = 0; i < b; i..

하나의 레파지토리에 성격이 다른 폴더들이 존재할 때 정리를 하고 싶어 진다. 다른 레파지토리로 변경하고 싶을 때 아래와 같이 하면 된다. $ mv 옮길 폴더명 옮겨질 디렉토리 이때, 디렉토리는 pwd를 통해 옮겨질 경로를 확인하면 된다. 이후, git으로 관리할 폴더 안에서 아래와 같이 선언한다. $ git init ls -al 명령을 통해 .git 이 폴더에 잘 생겼는지 확인한다. 이때, git init 명령만으로는 관리를 위한 원격 저장소가 생기지 않는다. 그래서, 'git remote add origin 새로운 레파지토리 주소'를 통해 해당 폴더를 관리할 레파지토리 주소를 원격 저장소로 지정해야 한다. // 현재 디렉토리의 원격 저장소 확인 $ git remote -v // 원격 저장소 지정 $ g..

클론 코딩을 하거나 주어진 과제를 통해 HTML 구조를 잡을 때 쉬우면서도 어렵게 느껴진다. 그 이유는 시맨틱 태그를 적절하게 사용해야하며 어떻게 구조를 잡는 것이 더 효율적인지 고민에 빠지기 때문이다. 이럴 때 나는 잘 만들어진 홈페이지의 구조를 보는데 솔직히 코드만 보고는 명확하게 파악하기 힘들다. 이를 해결하기 위한 방법을 찾아보다가 아주 좋은 팁을 발견하게 되었다. 바로 크롬 개발자 도구 console창에 들어가서 다음과 같이 DOM 요소를 조작하는 것!!! 사용 방법 document.querySelector('*').style.boxSizing = 'border-box'; document.querySelectorAll('div').forEach(e => e.style.border = "1px s..

두 번째 과제는 가격 별 상품 추천하는 프로그램을 구현하는 것이었다. 사용자가 가지고 있는 돈의 액수를 입력받아 해당 금액에 가장 근접한 가격의 상품을 리턴하면 된다. 초반에 작성한 코드는 다음과 같다 [실제 본인 구현부] // 아래에 getItemByAmount 함수를 작성하세요. const getItemByAmount = (data, amount) => { // 사용자의 입력 유효값 범위 지정: 숫자가 아닌 경우, 0인 경우 null if(amount === false || amount === 0) { return null; } // 살 수 있는 상품을 저장하기 위한 변수 let index; for(let i=0; i amount - item.price >= 0) .sort((a, b) => b.pr..

화면을 제작을 하다 보면 내가 작성하지 않았는데 margin, padding 속성이 부여돼서 이상하게 보이는 경우가 있다. '그때마다 수정해주면 되겠지'라고 생각할만한 것은 아니다. 여기서, Reset CSS, Normalize CSS가 필요하고 사용하는 가장 큰 이유는 크로스 브라우징을 위해서이다. 브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요하다. 크로스 브라우징 👉🏻 웹 사이트를 접속했을 때 어느 한쪽에만 최적화됨을 막기 위해 공통 요소를 사용해서 제작하는 것 Reset CSS 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있는데 해당 값을 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정 파일이다. W3C에서 공식적으로 ..

패스트캠퍼스에서 기초 HTML&CSS 수업을 수강한 후 Github 페이지의 헤더를 똑같이 구현하는 것이 첫 과제였다. 팀을 구성해서 러버덕 디버깅으로 5F 방식을 사용해서 회고를 하려고 한다. 5F 방식이란? 👉🏻 https://codechasseur.tistory.com/102 [회고작성법] KPT, 5F 회고에 대해 알아보자 들어가기 전 스스로의 발전을 위해서는 객관적이고 다소 친절하지 못한 회고 작성이 필요하다. 매우 주관적이지만 업무(라고 하기엔 아직 경력도 없는 신입이다..😂)나 자신에게 관대하고 나태 codechasseur.tistory.com 우선, 과제 제출 후 리뷰어님께서 조언해주신 내용은 다음과 같다. 영역에 favicon 추가 로 작성한 nav를 &로 변경 요소 정렬 시 float ..

CSS3 Flexible Box Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. 위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다. Flex Container..