전체 글

안녕하세요. 사진과 철학에 관심이 많은 웹 프론트엔드 개발자 오원종입니다. 시간이 지나도 꾸준히 읽힐 수 있는 글을 쓰고 싶습니다. 재미있는 일만 하면서 살고 있는 사람입니다.
자바스크립트에서 일정 시간 동안 발생하는 프로그램의 움직임을 어떻게 표현하고 나타낼 것인지에 대해 그동안 많은 연구가 있었다. 오늘은 그러한 연구의 결과 중 하나인 비동기성(Asynchrony)에 대해서 알아보고자 한다. 프로그램에서 '지금'에 해당하는 부분 그리고 '나중'에 해당하는 부분 사이의 관계가 바로 비동기 프로그래밍의 핵심이다. 자바스크립트 프로그램은 .js 파일 하나로도 작성될 수 있지만 보통은 여러 개의 덩이(chunk), 곧 '지금' 실행 중인 프로그램 덩이 하나 + '나중'에 실행할 프로그램 덩이들로 구성된다. 가장 일반적인 프로그램 덩이 단위는 함수이다. 여기서 명심해야 할 부분은 프로그램은 '지금'과 '나중' 사이에 중단되지 않으며 이 때 작업이 비동기적으로 처리되어 단지 '지금' ..
이번 포스팅에서는 CSS 관련 예상 질문과 답변을 정리해 보고자 한다. CSS class와 id의 차이점을 설명해 주세요. id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다. float가 어떻게 동작하나요? float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다. 클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요? float 속성의 영향에서 벗어나기 위해 사용하는 ..
프론트엔드 개발자로 면접을 준비하면서 나올 수 있는 질문 리스트를 틈틈이 작성해 보고자 한다. 첫 번째로 웹 브라우저와 HTML 관련된 질문 리스트를 적어 본다. 참고로 이는 화상 면접이나 전화 면접에서 나올 만한 예상 질문들을 정리하는 내용으로, 경력 3년 이하 주니어 개발자 면접을 대비하기 위함이기에 너무 자세하고 깊은 내용보다는 간결하고 핵심적인 내용 위주로 적어보았다. Web Browser 브라우저의 동작 원리를 간단하게 설명해 주세요. 브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립..
지난 2주간의 크로스핏 일기를 적어보려 한다. 중간에 연휴가 있어서 센터가 쉰 날도 있었고, 개인적인 사정으로 운동을 쉰 날도 있어서 지난 2주 동안은 평소만큼 운동을 많이 하지는 못했다. 분발해야 할 기록 적당히 좋지도 나쁘지도 않은 기록 스스로 만족한 기록 4월 28일 화요일 WOD Deadlifts 5 sets 8 reps Bench Press 5 sets 8 reps Dips 5 sets 8-12 reps 이날은 스트렝스 훈련을 했다. 1RM의 60% 정도의 무게를 드는 훈련으로 나의 경우 데드는 185lb, 벤치 프레스는 115lb 정도로 8reps를 했던 것 같다. 아직 많이 부족하다. 악력도 키워야 하고 무엇보다 힘이 강해져야 함을 느꼈다. 스트렝스 훈련도 WOD와 별도로 틈틈히 하도록 하자..
나는 요즘 네트워크 공부를 하고 있다. 학부에서 배우지 않았지만 업무를 하면서 필요성을 많이 느꼈고, 기본적인 지식은 알고 있어야 겠다는 생각으로 공부를 시작하게 되었다. 나는 Udacity에서 라는 무료 강의를 통해 공부 중이며, 강의 수가 많지 않아서 빠르게 완강할 수 있다. 공부를 하면서 기본적인 개념들을 이렇게 블로그에 정리를 해 놓으려고 한다. https://www.udacity.com/course/networking-for-web-developers--ud256 Networking for Web Developers You've used the Internet. Now find out more about how it works. www.udacity.com 우선, 이 강의에서 간단한 실습들을 하..
· 끄적끄적
스쿼시를 배우기 시작한지 한 달 정도 지났다. 아직 기본기를 배우는 단계이지만, 나중에도 기억하기 위해 스쿼시 기본기에 대해서 하나씩 차근차근 정리해 보려고 한다. 첫 번째는 스텝과 움직임에 대해서 정리해 보려고 한다. 스쿼시는 공이 정말 빠르게 왔다갔다 하고, 눈 깜짝할 사이에 공이 움직이기 때문에, 빠르게 움직이지 않으면 공을 놓치기 쉽다. 하지만 그렇다고 계속 빠르게 움직이려고 한다면 지치기가 쉽다. 나는 아직 이정도 수준이 되려면 멀었지만, 선수들의 경기를 보면 계속해서 공을 구석구석으로 찔러 넣는데 그걸 다 따라가서 치는 건 상당히 체력적으로 부담이 된다. 따라서 효율적인 스텝과 최소한의 움직임을 아는 것이 굉장히 중요하다. https://www.youtube.com/watch?v=L_bO2Ik..
오늘 살펴볼 문제는 카카오 19년 겨울인턴 코딩테스트 4번 문제이다. https://programmers.co.kr/learn/courses/30/lessons/64063 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 카카오는 매번 코딩테스트마다 문제 해설을 자사 블로그에 공개한다. 관심있는 분들은 읽어 보아도 좋을 것 같다. 2019 카카오 개발자 겨울 인턴십 코딩 테스트 문제 해설 2019 카카오 개발자 겨울 인턴십 코딩 테스트 문제 해설 – tech.kakao.com “2019년 카카오 개발자 겨울 인턴십” 공개 채용을 위한 1차 코딩 테스트가 지난..
오늘 살펴볼 문제는 백준 9202번 문제이다. https://www.acmicpc.net/problem/9202 9202번: Boggle 문제 상근이는 보드 게임 "Boggle"을 엄청나게 좋아한다. Boggle은 글자가 쓰여 있는 주사위로 이루어진 4×4 크기의 그리드에서 최대한 많은 단어를 찾는 게임이다. 상근이는 한 번도 부인을 Boggle로 이겨본 적이 없다. 이렇게 질 때마다 상근이는 쓰레기 버리기, 설거지와 같은 일을 해야 한다. 이제 상근이는 프로그램을 작성해서 부인을 이겨보려고 한다. Boggle에서 단어는 인접한 글자(가로, 세로, 대각선)를 이용해서 만들 수 있다. 하지 www.acmicpc.net 사실 이 문제는 굉장히 어려웠다. 그래서 나는 다른 분의 코드를 어느정도 참고해서 풀었다..
DevOwen
오웬의 개발 이야기