전체 글

[자료구조] 0. 포인터의 개념을 이해해보자

자료구조 처음 배우기 시작하면 가장 먼저 순차 자료구조와 선형 리스트(배열 및 리스트)에 대해 배운다. 이 주제는 프로그래밍 언어의 문법을 학습할 때 배우는 내용과 거의 차이점이 없어 학생들에게도 부담이 적은 부분이라 생각한다. 하지만 이다음으로 순차 자료구조와 비교되는 '연결 자료구조'에 대해 배우게 되는데, 아마 이 부분이 자료구조를 처음 학습하는 학생의 입장에서 마주하는 첫 번째 고비가 아닐까 싶다. 비록 개념 자체는 단순하지만, '포인터'를 기반으로 이루어진 자료구조라, 포인터와 메모리 개념을 잘 이해하고 있지 않는다면 연결 리스트의 개념은 물론 삽입, 삭제, 탐색 연산을 이해하고 구현하는데 상당한 어려움을 겪을 가능성이 높기 때문이다. 그래서 연결 자료구조에 대해 알아보기 전에, 우선 이 포스트..

[JavaScript] forEach문에서 return이나 break를 쓰면 안된다

중간고사가 끝나고 여유가 생겨 오랜만에 코딩테스트 연습을 위해 프로그래머스에서 '올바른 괄호'라는 문제를 풀고 있었는데, 작성한 코드의 로직이 틀린 곳이 없음에도 특정 케이스가 계속 통과하지 않는 문제가 발생했습니다. 그래서 테스트케이스를 직접 작성해보고 코드도 디버깅해보며 오랜시간 전전긍긍하다 결국 문제점을 발견하고 해결했습니다. 이 문제점은 그동안 제가 전혀 몰랐던 내용이었기에, 이렇게 기록으로 남겨둡니다. 결론부터 말하면 자바스크립트의 배열을 순회하는 forEach문에서는 return문이나 break문을 작성해도 코드가 반복을 중단하지 않습니다. 그리고 forEach문 안에서 return문을 만나도 forEach문을 감싸고 있는 함수를 벗어나지 않습니다. 예시코드를 살펴보면 다음과 같습니다. fun..

[CSS] CSS-in-JS의 Styled-Components 사용법 및 문법 정리

CSS-in-JS란? 자바스크립트 파일 안에서 CSS를 작성할 수 있는 방법이다. 자바스크립트의 상태 값을 공유하여 동적으로 스타일링을 하기 위해 등장한 패러다임이다. 인라일 스타일 이용 or 클래스 명으로 조건부 스타일링 props.[props 속성 이름]} import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; function App() { return ( ); } export default App; 이 문법을 활용하면 중복..

[React] 카카오맵 API를 통해 지도를 화면에 띄우기 (에러 해결법)

멋쟁이 사자처럼에서 진행하는 중앙 해커톤을 준비하면서 카카오맵 API를 통해 지도를 화면에 그리는 기능을 구현하게 되었습니다. 카카오에서 제공한 공식문서가 워낙 깔끔하게 잘 정리되어있어 빠르게 지도를 화면에 구현할 수 있었지만, 도중 몇몇 문제를 마주하여 고민했던 부분 역시 있었는데, 이 포스트에선 이러한 문제를 어떻게 해결했는지를 정리하여 비슷한 어려움을 겪고 있는 다른 개발자 분들에게 도움을 드리고자 합니다. (참고로 저는 Web API를 사용하여 구현했습니다.) 로컬 환경에서 테스트할 수 있도록 사이트 도매인 등록하기 로컬 환경에서 카카오맵 API가 올바르게 동작하는 지 확인하기 위해선 로컬 주소를 사이트 도매인으로 등록해주면 됩니다. 저는 처음에 공식문서에서 '웹 서버를 실행시키라'는 언급이 있어..

🚪<방탈출고사> 개인 프로젝트 후기 Part 2

개인 프로젝트 의 후기를 이어서 작성해보려 합니다. 저번 글에선 앱을 개발하며 겪었던 기술적인 고민에 대해 나누었다면, 이번 포스트에선 라는 콘텐츠를 기획하고 개발하며 겪었던 고민에 대해 이야기를 해보겠습니다. (🎮 방탈출고사는 해당 링크를 통해 직접 플레이하실 수 있습니다.) 🕹️ 콘텐츠를 기획한 계기 (미궁 게임 제작자로서의 경험 소개) 우선 제가 이번 프로젝트의 소재를 '방탈출 게임'으로 선정한 이유에 대해 좀 더 자세히 말씀드리고자 합니다. 저는 2021년부터 '미궁 게임' 제작 플랫폼 '더 라비린스'에서 미궁 제작자로 활동을 이어왔습니다. 여기서 '미궁 게임'이란 웹 게임의 장르 중 하나로, 주어진 문제를 풀거나 힌트에 따라 다음 인터넷 페이지로 넘어가는 것이 목적인 퍼즐 게임을 의미합니다. '..

🚪<방탈출고사> 개인 프로젝트 후기 Part 1

작년 5월에 출시한 첫 개인 프로젝트 의 후기를 한 번 자유롭게 써보기 위해 오랜만에 포스트를 작성합니다. 후기 작성이 이렇게 늦어진 이유는, '방탈출고사'를 출시하자마자 기말고사 + 계절학기가 세트로 절 기다리고 있었기 때문이었습니다. 그리고 계절학기 수업의 중간고사가 끝난 지금, 뒤늦게 마음을 잡고 글을 써봅니다. 후기는 2개의 Part로 나누어 작성하려 합니다. 우선 Part 1에서는 라는 앱의 기획 과정과, 앱에 필요한 기능을 구현하면서 겪었던 난관 및 극복 과정 등 '기술적인 측면'에 초점을 맞춰 작성할 예정이고, Part 2에선 게임 콘텐츠를 개발하며 겪었던 고민이나 생각 등과 같은 '콘텐츠적 측면'에서 후기를 작성해보려 합니다. 이 포스트에서는 우선 기술적인 측면에 대해 후기를 적어보고, 콘..

[Web] PWA(프로그래시브 웹 앱)이란 무엇일까?

이번 5월달에 SWYG(스위그)에서 진행하는 스위디(SWYDY) 스터디에 참여하여 PWA에 대해 처음 학습하게 되었습니다. 이번 포스트는 스위디 스터디 1주차 때 배웠던 내용을 바탕으로 작성하였습니다. PWA란 무엇인가? PWA란 Progressive Web Application의 줄임말로, 모바일에서 앱 스토어를 통해 설치하는 네이티브 앱처럼 사용할 수 있는 웹 어플리케이션을 말합니다. 쉽게 말하자면, 웹 어플리케이션을 Mobile App화(化)한 것이라 할 수 있겠습니다. 그렇지만 PWA는 일반 웹 앱처럼 기본적으로 HTML, CSS, JavaScript와 같은 웹 기술을 통해 만들어집니다. 2015년 Google Chrome의 엔지니어 알렉스 러셀(Alex Russel)은 '점진적(progressi..

[Web] CSR과 SSR이란 무엇일까?

SSR과 CSR이란? SSR과 CSR이란 개념은 웹의 UI를 생성하는 렌더링 과정이 어디에서 일어나는 지에 따라 그 차이가 있습니다. 이 두 개념을 잘 이해하기 위해선 웹 브라우저가 어떻게 동작하는지, 웹 사이트가 어떤 과정을 통해 우리 눈 앞에 나타나게 되는지를 미리 알고 있어야 합니다. 이에 대한 내용은 제가 예전에 작성해 둔 포스트를 아래 링크로 달아드리니, 부디 참고해주시기 바랍니다. 주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자 (이 포스트는 velog 플랫폼에 포스팅했던 게시글을 그대로 가져온 것입니다. 감사하게도, 당시 이 게시글이 velog 월간 트렌딩 1위에 올랐습니다. 읽어주신 모든 분께 이 자릴 빌어 진심으로 감사의 sylagape1231.tistory.com 웹에서..

🦁 멋쟁이 사자처럼 11기 합격 후기 (서류, 면접)

웹개발 IT 연합 동아리 '멋쟁이 사자처럼 (이하 멋사)' 대학 11기에 지원해서 합격하였다. 개인적으로 이 동아리에 정말 들어가고 싶어 지원서랑 면접을 나름 열심히 준비했는데, 이렇게 좋은 결과를 얻게 되어서 참으로 뿌듯하다. 사실 나도 멋사 지원을 준비하면서 구글링을 통해 다른 분들의 합격 후기를 여럿 참고했다. 그런 의미에서 앞으로 멋사 지원을 준비할 분들이 나의 후기를 보고 도움을 받으셨으면 좋겠다는 생각이 들어 이 글을 작성하게 되었다. 지원서 작성 우선 지원서에서 내가 받았던 질문들과 그에 대한 답변을 정리해보려 한다. Q. 다양한 IT동아리 중에서 멋쟁이사자처럼 대학 11기를 선택하고 지원하시게 된 이유를 작성해주세요. 기초부터 차근차근 가르쳐주는 멋사의 체계적인 커리큘럼이 다른 IT 동아리..

[OS] 운영체제란 무엇일까? (정의, 종류, 역할)

운영체제의 정의 운영체제는 일종의 프로그램입니다. 다만 메모장이나 인터넷 브라우저처럼 우리가 흔히 쓰는 응용 프로그램과는 성격이 조금 다릅니다. 운영체제는 이러한 응용 프로그램들이 잘 실행될 수 있도록 하드웨어와 소프트웨어를 관리하는 특별한 프로그램 입니다. 운영체제가 존재하기에 사용자는 컴퓨터를 쉽게 다룰 수 있으며, 만일 운영체제가 없다면 컴퓨터는 '깡통 기계'로 전략하게 된다고 볼 수 있을 만큼 운영체제는 매우 중요한 도구입니다. (참고로 '깡통 기계'는 학부 수업 시간에 교수님께서 쓰신 표현이라 여기에도 그대로 적어봤습니다.) 운영체제의 대표적인 예시로는 윈도우, 맥 OS, 리눅스, 유닉스 등이 있습니다. 커널 영역 vs 사용자 영역 컴퓨터에서 프로그램을 실행하려면 메모리에 적재되어야 합니다. 그..