JEEWONSCRIPT

프로그래머스 : 멀쩡한 사각형 https://programmers.co.kr/learn/courses/30/lessons/62048 문제풀이 이번 문제는 프로그래머스의 "Summer/Winter Coding 2019" 코딩 테스트에서 출제되었던 문제입니다. 이 문제를 스스로 풀기 위해 이런저런 고민을 다 해보았지만, 결국 구글의 도움을 받을 수 밖에 없었습니다. 이 문제는 단위 사각형으로 이루어진 직사각형의 대각선을 지나는 사각형의 개수를 알아내는 것이 포인트 입니다. 물론 직접 좌표의 개념을 도입하거나 선의 기울기를 활용하여 푼 분들도 있지만, 저로서는 아무리 머리를 싸매도 못했겠다 싶었던 해답이었습니다. 이 문제에 직접 연관이 있는 개념이 기술된 블로그를 함께 첨부하겠습니다. https://m.blo..

프로그래머스 : 신규 아이디 추천 https://programmers.co.kr/learn/courses/30/lessons/72410 문제풀이 이번 문제는 카카오 블라인드 채용의 코딩 테스트에서 출제되었던 문제입니다. 풀이는 문제에 제시한 대로 각 단계를 구현하면 되지만, 푸는 방식이 사람마다 다르기 때문에 가지각색의 풀이가 보입니다. 제 풀이는 그다지 좋은 풀이는 아닌것 같네요.. ㅜㅜ 정규식을 아직 제대로 활용하지 못하기 때문에 풀이를 단순 무식하게 푼 것 같습니다. if문에 들어간 level은 단순히 단계를 구분하기 위해 사용한 것으로, 제거하여도 문제는 통과합니다. new_id의 모든 대문자를 대응되는 소문자로 치환합니다. new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(..

프로그래머스 : 폰켓몬 https://programmers.co.kr/learn/courses/30/lessons/1845 문제풀이 이번 문제는 중소/중견 기업 채용연계 프로그램 "찾아라 프로그래밍 마에스터" 코딩 테스트에서 출제되었던 문제입니다. 풀이는 생각보다 간단한데요. nums 배열 길이의 n/2과 nums 배열 요소에서 중복값을 제거한 길이를 비교합니다. nums의 n/2 가 더 크다면 중복값을 제거한 종류의 수를 반환하고, 종류가 더 많다면 nums의 n/2 길이를 반환합니다. 이번 풀이에서 첫번째 코드는 제가 풀었던 방식이고, 두번째 코드는 자바스크립트의 Set 객체를 사용한 풀이입니다. Set 은 중복된 값을 허용하지 않는 고유한 객체이며, 수정이나 추가 적용될 때마다 === 와 동일한 연..

프로그래머스 : K번째수 https://programmers.co.kr/learn/courses/30/lessons/42748 문제풀이 풀이는 문제에 주어진 대로 그대로 수행하시면 됩니다. 코드 function solution(array, commands) { let answer = []; // 결과를 담을 배열을 선언 및 초기화 for(let i=0; i a-b); // 오름차순으로 정렬 answer.push(tmp[commands[i][2]-1]); // 결과 배열에 i번째 commands 배열의 3번째 수를 찾아 넣어줍니다 } return answer; } 리뷰 이 문제는 어렵지 않은 문제지만, sort() 함수 부분에서 정확히 a-b 대소관계를 정의해주지 않으면 통과가 되지 않습니다. sort()..

프로그래머스 : 로또의 최고 순위와 최저 순위 https://programmers.co.kr/learn/courses/30/lessons/77484 문제풀이 이번 문제는 프로그래머스에서 상반기에 진행한 "2021 Dev-Matching: 웹 백엔드 개발자" 코딩 테스트에서 출제되었던 문제입니다. 순위나 맞춘 번호, 지워진 번호 등을 신경써야 될 것 같아 복잡해 보이지만 결과물은 의외로 간단하게 도출해 낼 수 있습니다. 지워진 숫자를 카운트합니다. 맞춘 숫자를 카운트합니다. 결과는 [최고등수, 최저등수] 의 형태로 반환하기 때문에, 지워진 숫자가 모두 맞으면 맞출 수 있는 "최고 등수", 모두 틀리면 "최저 등수"가 됩니다. 정답은 [7-가장 많이 맞춘 수, 7-가장 적게 맞춘 수] 코드 function ..

[CS] 웹 브라우저 동작 원리(3) 이번에도 저번 웹 페이지 로드과정에 이어서 웹 브라우저의 구성요소와 동작 과정에 대해서 살펴보겠습니다. 아마도 이번 포스팅이 "웹 브라우저 동작 원리"의 마지막 포스팅이 될 것 같습니다. 웹 브라우저 주요 구성 요소 아래 그림은 웹 브라우저의 주요 구성 요소를 도식화 한 이미지입니다. 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 위의 이미지만 보면 저게 다 뭔지 싶을 수 있습니다.. 각 단계를 찬찬히 살펴보겠습니다. 텍스트로만 보면 이해하기 어려울 수 있기 때문에, 실제 웹 페이지를 보면서 이야기해보겠습니다. 제가 운영하는 핸드메이드 액세서리 브랜드입니다 ^^ 사용자 인터페이스 주소 표시줄, 이전/다음, 새로고침,..

[React/Typescript] 반응형 네비게이션 만들기 (Navigation with CSS media queries) 이번 포스팅에서는 React 라이브러리와 Typescript로 화면 크기에 따라 배치가 바뀌는 반응형 네비게이션을 만들어보겠습니다. 반응형 웹이란 하나의 웹사이트에서 PC, 태블릿/패드, 모바일 등 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다. 위키백과 : 반응형 웹 디자인 Overview 우선 최종 결과가 어떤 식으로 나오는지 보시면 좋을 것 같습니다! 최종적으로 코드를 적용하고 실행한 웹 페이지의 모습입니다. iPhoneX 기준의 디스플레이 사이즈를 적용한 모습입니다. 반응형이 잘 적용되어 상단 메뉴들은 사라지고, 네비게이션 왼쪽에..

[CS] 웹 브라우저 동작 원리(2) 이번 포스팅은 저번 웹 브라우저 동작 원리 (1)에 이어서 웹 페이지 로드 과정 중 Processing과 Load 과정을 살펴볼 예정입니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification https://www.w3.org/TR/navigation-timing-2/#processing-model 위의 "W3C Navigation Timing Level 2 Specification"의 도식에서 processing과 load 부분을 조금 더 자세히 살펴보면 ..

[CS] 웹 브라우저 동작 원리(1) 그동안 웹 개발을 공부하고 프로젝트를 진행하면서, 필요한 기능을 구현하고 동작시키는 것에 그치지 않고 조금 더 효율적이고 최적화된 코드들을 작성해보고 싶어졌습니다. 그러기 위해서 웹이나 브라우저의 구동 방식 등 기초적인 지식을 차근차근 공부해 보면 좋겠다는 생각이 들었는데요! 이번 포스팅에서는 웹 브라우저 동작 원리 및 브라우저가 웹 페이지를 어떻게 표현하는지에 대해 공부한 내용들을 일부 정리해보겠습니다. 웹 페이지 로드 과정 아래 그림은 W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지입니다. W3C Navigation Timing Level 2 Specification ..

안녕하세요? 프론트엔드 개발자 이지원입니다! 웹 프론트엔드 개발을 하고 있는 이지원이라고 합니다 :) 저는 대학교 2학년 때까지 디자이너를 진로로 삼아 공부했으며, 실제로 디자인 업무나 외주를 받아 일을 하기도 했었습니다. 사실 개발이나 디자인뿐만 아니라 패션/잡화, 요식업, 경호 등 여러 분야를 도전하고 낯선 타지에서의 생활도 해보며 나에게 맞는 진로를 찾기 위해 많은 도전과 고민을 했었던 것 같습니다... 그 중에서 웹 프론트엔드 개발이라는 분야가 저에게 가장 적합한 진로라고 느꼈습니다. 개발 공부는 작년, 2020년 7월부터 시작했는데요. 스스로 성장하고 공부하는 보람이 있다고 생각했습니다. 기존에 가지고 있던 디자인 역량을 접목시키고 활용할 수 있다는 점이 매력적이기도 했습니다만 그것뿐만은 아니었..