뺑슨 개발 블로그

웹 브라우저 작동 원리 주소창에 https://www.naver.com 혹은 https://www.youtube.com 등 다양한 URL을 검색하여 해당 웹 페이지에 접속한 경험이 있을 겁니다. 그렇다면 어떤 동작 원리로 우리가 입력한 웹 페이지로 접속이 가능한 것일까요? 이번 포스팅에서는 주소 창에 URL 혹은 도메인을 입력했을 때 어떤 과정을 거쳐서 웹 페이지가 보이는지 알아보겠습니다. 브라우저란? 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다. 더보기 script 태그를 body 태그 하단에 위치시키는 아이디어에서 찾을 수 있다. HTML 요소들이 script 로딩 지연으로 인해 렌더링에 지장..

자바스크립트 동작 원리 이벤트 루프를 공부하면서 자바스크립트 동작 원리 안에 이벤트 루프 개념이 포함된다는 것을 깨달았습니다. 그래서 이벤트 루프와 자바스크립트 동작원리를 같이 포스팅하고자 합니다. 자바스크립트는 단일 스레드 기반 언어입니다. 이 말은 JS 엔진(자바스크립트 엔진)이 단일 호출 스택을 사용한다는 의미입니다. 쉽게 말해서, 한 순간에 하나의 작업만을 처리할 수 있습니다. 하지만 여러 웹 페이지의 자바스크립트 환경을 보면 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 대표적인 예로는, 애플 공식 사이트와 같이 애니메이션은 지속적으로 송출되면서 키보드 혹은 마우스 입력을 동시에 처리되는 경우가 있습니다. 자바스크립트는 단일 스레드 기반인 동기적인 언어라는 것을 알 수 있습니다. 그렇다면..

최근 Github에서 push, pull, clone 등 행동을 할 때 로그인이 안되거나, 위와 같은 메시지를 마주치신 분이 있으실 겁니다. 저는 push에서 위와 같은 이슈가 발생했습니다. GIthub에서 2021년 8월 13일부터 비밀번호 사용을 차단하여 생긴 이슈였습니다. 보안 이슈때문에 비밀번호 사용을 금지한 것 같은데 자세한 사항은 위 사진에 적혀있는 깃헙 링크에 가셔서 확인해주시길 바랍니다. 저는 아래와 같이 해결하였습니다. Github 프로필을 눌러서 Setting -> Developer settings -> Generate new token을 클릭합니다. 그 다음 패스워드를 입력하여 들어갑니다. 위 화면에서 토큰을 생성합니다. Select scopes에서 어떤 것을 선택하실지 많이 망설여지..

1. 문제 인식 다른 사이트의 이미지를 복사하여 게시글을 작성하면 이미지가 잘 등록되지만, 특정 이미지나 로컬에 저장된 이미지는 등록이 되지 않는 이슈가 있었습니다. 아래 사진과 같이 Editor에 분명히 로컬에 저장되어있는 이미지를 넣고 등록 버튼을 눌렀지만, 참고로 위 사진은 이슈를 해결하고 나서의 Editor라, 버전은 4.17.2입니다. 이슈가 발생했을 때의 Editor 버전은 4.13.2였습니다. 하지만 버전업이 근본적인 문제 해결책이 아닙니다. 4.17 버전부터 이미지를 Base64로 Editor에 끌어다 놓기를 허용하지만, 등록은 되지 않을 수 있습니다. 아래 사진을 보면 이미지는 사라져있습니다. 2. 문제 해결 lib/common.lib.php 파일을 찾습니다. 위 파일에서, $config..

자기소개서 (서류 전형) 저는 웹 서비스 개발(웹 서비스 페이지 / REST API) 부문 지원자였습니다. 자기소개서는 모든 문항을 500자 이내로 작성해야 했습니다. 이 부분은 좋았습니다. 자기소개서를 제외하고 이력서에 블로그, 포트폴리오 링크를 작성하였습니다. 제가 지원한 부문은 따로 코딩 테스트를 진행하지 않았습니다. 여러 리뷰를 찾아봤을 때, 사전 테스트가 있다고 했지만 따로 저는 보지 않았습니다. 하지만 코딩 테스트 혹은 사전 과제가 있던 직무도 있었습니다. 서류를 합격하면 바로 1차 면접이었습니다. 1차 면접 1차 면접은 대면 다대다 면접으로 진행됐습니다. 3(지원자) : 4(면접관) 면접이었습니다. 자유 복장이었습니다. 1차 면접은 위 건물 1층에서 진행했습니다. 대면 면접은 정말 오랜만이라..

자기소개서 && 코딩 테스트 (서류 전형) 저는 광고 플랫폼 개발 부문 지원자였습니다. 직무는 FE입니다. 11번가는 자기소개서가 굉장히 중요한 것 같습니다. 저도 신중을 가해서 작성하였고 포트폴리오도 제출했습니다. 포트폴리오는 선택이지만 필히 제출하는 것을 추천드립니다. 코딩 테스트 난이도가 쉬워서 자기소개서에서 많이 필터링되는 것 같습니다. 코딩테스트는 기억상 3문제(?) 출제됐던 것 같습니다. 문제 수가 중요한 게 아니라 난이도가 굉장히 쉽습니다. 같이 지원했던 친구는 다 풀고도 서류 탈락한 것을 보면 자기소개서가 중요한 것 같습니다. 1차 면접 (직무 면접) + 사전과제 1차 면접에서는 사전 과제가 주어집니다. 사전 과제 내용은 구체적으로 말씀 드릴 수 없지만, 몇 가지 주제 중에서 하나를 선택하..

자기소개서 저는 Web Application 개발 부문 지원자였습니다. 자기소개서는 다른 기업과 크게 다를 거 없었습니다. 무난하게 작성하였습니다. 저는 github 링크와, 포트폴리오, 블로그 링크를 자소서에 첨부하였습니다. 기술력 진단 서류에 합격하면 인적성검사 + 오프라인 코딩 테스트를 치르게 됩니다. 인적성 검사는 인성검사 + 삼성의 GSAT 같은 문제가 출제됩니다. 난이도는 제 기준에서 조금 어려웠던 걸로 기억합니다. (시간이 부족했습니다.) 오프라인 코딩 테스트는 COS pro 시험입니다. 잘 몰랐던 시험이었는데, 기술력 진단을 보면서 알게 되었습니다. 신촌 CBT 센터에서 시험을 봅니다. 난이도는 쉬운 편에 속합니다. 사전에 언어를 선택하여 볼 수 있습니다. (저는 Java로 봤습니다.) 문..

작년에 약 135km를 뛰었습니다. 의도한 목표는 아닌데 그래도 1년에 100km는 넘게 뛰었네요. 더 뛸 수도 있었는데.. 하는 아쉬움이 남습니다. 올해는 약 500km를 목표로 한번 뛰어보겠습니다. 뛸 수 있을 것 같아요. 그래도 중간에 한 번도 걷지 않고 최대 10km까지는 뛰어봤습니다. 2월부터, 눈 그치고 날이 좀 풀리면 다시 시작해야겠어요. 러닝은 정말 좋은 취미인 것 같습니다. 많은 사람들이 뛰었으면 좋겠네요. 작년에는 계속 혼자 뛰었는데, 올해는 러닝 메이트를 구해서 같이 뛰어야겠습니다. 내년 이 맘때쯤에는 500km 뛴 증거로 포스팅하도록 하겠습니다. 실패 시, 공약은 없습니다. 제가 인플루언서는 아니라서요. 댓글로 적어주신다면 생각은 해보겠습니다. 코로나 시국에 혼자서 찾을 수 있는 취..

https://www.acmicpc.net/problem/16918 16918번: 봄버맨 첫째 줄에 R, C, N (1 ≤ R, C, N ≤ 200)이 주어진다. 둘째 줄부터 R개의 줄에 격자판의 초기 상태가 주어진다. 빈 칸은 '.'로, 폭탄은 'O'로 주어진다. www.acmicpc.net 난이도 : 실버 1 쉽게 헷갈릴 수 있는 구현 문제이지만, 코딩 테스트 용으로 많은 도움이 될 문제인 것 같습니다. 제가 주목한 문제의 조건은 1. "연쇄 반응은 없다" -> 현재 위치의 폭탄이 터질 때, 인접한 폭탄은 터지지 않는다. 2. "1초가 지난 후에 3초 전에 설치된 폭탄이 모두 폭발한다." -> 동시 폭발 3. "3과 4를 반복한다" -> 처음 1,2,3,4를 수행하고 3과 4만 반복된다. 문제에서 주..

https://www.acmicpc.net/problem/1913 1913번: 달팽이 N개의 줄에 걸쳐 표를 출력한다. 각 줄에 N개의 자연수를 한 칸씩 띄어서 출력하면 되며, 자릿수를 맞출 필요가 없다. N+1번째 줄에는 입력받은 자연수의 좌표를 나타내는 두 정수를 한 칸 띄어서 www.acmicpc.net 난이도 : 실버 5 코딩 테스트나 다른 구현 문제에서 한 번쯤 마주쳤을 법한 유형의 구현 문제입니다. 저는 주어진 문제 조건에 반대로 생각하여 문제를 해결하였습니다. 달팽이가 아래 그림과 같이 움직이는 것이 문제에서 주어진 조건입니다. 배열의 정가운데 요소부터 배열의 값을 채울 수 있고, 구현할 수 있지만 난이도가 높아지는듯한 느낌이 받았습니다. (마우스로 그려서 좀 삐뚤빼뚤할 수 있습니다.) 반대..

https://www.acmicpc.net/problem/15686 15686번: 치킨 배달 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸 www.acmicpc.net 난이도 : 골드5 삼성 역량 테스트 기출문제입니다. 완전탐색과 DFS로 해결할 수 있는 문제지만, 문제를 정확히 읽는 것이 중요할 것 같습니다. 도시의 치킨 거리가 모든 집의 치킨 거리인 줄 몰랐습니다. 괜한 곳에 시간을 많이 썼네요. 아래와 같은 로직으로 문제를 설계했습니다. 1. 치킨집과 집을 저장할 자료 구조를 만든다. 2. 치킨집을 완전 탐색한다. (DFS, 백트래킹)..

https://www.acmicpc.net/problem/11404 11404번: 플로이드 첫째 줄에 도시의 개수 n이 주어지고 둘째 줄에는 버스의 개수 m이 주어진다. 그리고 셋째 줄부터 m+2줄까지 다음과 같은 버스의 정보가 주어진다. 먼저 처음에는 그 버스의 출발 도시의 번호가 www.acmicpc.net 난이도 : 골드 4 플로이드-와샬 기본 문제입니다. 주의 사항은 INF를 Integer.MAX_VALUE로 설정하면 안 됩니다. 상황에 따라 오버플로우가 발생할 수 있기 때문입니다. INF는 간선 가중치의 최댓값 * 정점 개수 -1 보다 큰 값을 사용하면 됩니다. - static int map [][]; 각 정점들 사이의 최소 비용을 저장할 이중 배열입니다. - static final int IN..