개발자 퉁이리

2023년은 제게 있어, 새로운 경험과 도전이 가득했던 해였습니다. 프로그래머스 데브코스에서의 학습, 카카오브레인에서의 인턴 생활, 그리고 네이버 면접까지. 각각의 경험은 새로운 지식과 시야를, 실패를 겪으면서는 다시 일어서는 법을 배웠습니다. 1️⃣ 문제의 근본적인 이해: 멈추지 않는 질문 문제 해결에 있어서 '왜'라는 질문은 단순히 문제를 해결하는 것을 넘어 근본 원인을 이해하는 데 중요한 역할을 합니다. 제 경험을 예로 들어볼까요? 한 프로젝트에서 메모리 부족 문제에 직면했을 때, 표면적인 해결책으로는 단순히 메모리를 증가시키는 것이었습니다. 그러나 이러한 접근은 문제의 근본적인 원인을 파악하고 해결하는 데 도움이 되지 않았습니다. 저는 이 문제를 다루면서 먼저 '왜 이런 문제가 발생했는가'에 대해..

웹 사이트와 애플리케이션에서 이미지는 사용자 경험(UX)에 큰 영향을 미칩니다. 이미지와 원활한 로딩 속도는 사용자의 만족도를 높이고, 결과적으로 전환율과 사용자 참여도를 향상시킵니다. 최근 초고속 인터넷 시대에 접어들면서 사용자는 더 좋은 화질을 원하고 자연스럽게 이미지 크기는 점점 더 커지고 있습니다. 하지만, 고화질 이미지는 용량이 크고 로딩 속도가 느려질 수 있으며, 이는 사용자 경험에 부정적인 영향을 줄 수 있습니다. 따라서 이미지 최적화는 프론트엔드 성능 향상에 핵심적인 역할을 합니다. 이미지 파일은 웹 사이트에서 가장 많은 용량을 차지하는 콘텐츠이기도 합니다. 2022년 HTTP 아카이브 연구에 따르면, 페이지 용량에 가장 큰 영향을 주는 리소스 콘텐츠 유형의 중앙값을 확인했을 때, 이미지가..

캐시는 프로세서와 메모리 사이의 속도 차이를 해결하기 위해 사용되는 작고 빠른 메모리입니다. 주로 프로세서가 빠른 반응 속도를 위해 자주 사용하는 데이터를 캐시에 저장하여 전체 시스템 속도를 높입니다. 캐시는 지역성 원리(Principle of Locality)를 따르며, 시간 지역성(Temporal locality)과 공간 지역성(Spatial locality)으로 구분됩니다. 지역성 원리를 이해하기 위해 구체적인 예시를 들어볼게요! 예를 들어, 컴퓨터에서 어떤 프로그램을 실행한다고 가정해 봅시다. 이 프로그램은 배열(Array)에 저장된 데이터를 반복적으로 읽고 쓰는 작업을 수행합니다. 배열의 크기는 1,000,000이고, 프로그램은 다음과 같은 순서로 데이터에 접근합니다. 1. 0번 인덱스부터 99..

이 글에서는 웹 페이지 로딩 과정에서 발생하는 FOUC(Flash of Unstyled Content)와 FOUT(Flash of Unstyled Text) 현상에 대해 알아보고, 브라우저 렌더링 원리를 이해하고 이를 극복하는 최적화 전략을 소개합니다. FOUC(Flash of Unstyled Content)와 FOUT(Flash of Unstyled Text) FOUC와 FOUT은 웹 페이지 로딩 과정에서 일시적으로 스타일이 적용되지 않은 콘텐츠와 텍스트를 사용자에게 보여주는 현상입니다. 두 현상 모두 스타일 로드 및 적용 시점과 브라우저 렌더링 시점 간의 차이 때문에 발생합니다. FOUC는 일반적인 콘텐츠에, FOUT은 웹 폰트에 대한 스타일 적용 지연 때문에 발생합니다. FOUC - 일반적인 콘텐츠..

서론 현대 웹 애플리케이션 개발은 복잡한 과정으로, 개발자들은 다양한 문제들을 해결하며 프로젝트를 진행해야 합니다. 이러한 문제들을 해결해 주는 SaaS(Software as a Service) 툴들은 개발자들에게 효율적인 개발 환경을 제공합니다. 이 글에서는 Vercel이라는 SaaS 툴이 웹 애플리케이션 개발에서 어떤 이점을 제공하며, SaaS 없이(without vercel) 웹 애플리케이션을 배포하고 관리하려면 어떻게 해야 했는지에 대해 서술해보려합니다. SaaS SaaS는 "Software as a Service"의 약자로, 소프트웨어를 서비스 형태로 제공하는 것을 의미합니다. SaaS는 클라우드 컴퓨팅의 한 형태로, 사용자가 웹 브라우저를 통해 인터넷에 접속하여 소프트웨어를 사용할 수 있게 합..

안녕하세요! 저는 컴퓨터sw 재학 중인 4학년 퉁이리입니다. 2022년 12월 18일에 F - UNIV CAMPERENCE 행사를 성공적으로 마무리하고 회고글을 작성해 보려고 합니다. 동아리, 프로젝트, 스터디, 강의 등 여러 프로그램을 진행한 경험은 있지만 컨퍼런스 관련 경험은 없었어요. 새로운 부분에 대해 도전하는 건 언제나 두렵지만 새롭고 재미있으면서 배울 부분이 많네요. 까먹기 전에 빨리 적어야겠어요! https://www.f-univ.kr 사건의 발단 사실 컨퍼런스를 열 생각은 아니였어요. 스터디를 하려고 했습니다. 결과물은 컨퍼런스가 되었지만... 교내에서 Frontend 관련 스터디를 하고 싶었어요. 그리고 사람을 모집해봤지만 지원자를 한 명도 구할 수가 없었습니다. 제가 만든 교내 IT 동..

첫 회고글 안녕하세요! 저는 컴퓨터sw 재학 중인 4학년 퉁이리입니다. 취업을 준비하며 최근 많이 받았던 질문 중 하나를 고르자면 왜 프론트엔드를 선택했는지에요. 그래서 언제부터 프론트엔드를 시작했고 그 이유가 무엇인지에 대해 그냥 일기장 적듯... 제 생각도 정리해볼 겸 편하게 적어보려고 해요. 프론트엔드 개발자의 길 선택 프론트엔드 공부는 2022년 2월부터 시작했어요. 이전까지는 평범한(?) 컴퓨터 전공 대학생으로 살았습니다. 왜 프론트엔드를 선택했냐라고 물으신다면 인턴십에서 최우수상을 받고나서부터였어요. 인턴십은 학교에서 대학교와 스타트업을 이어주는 프로그램이 있었는데 운 좋게 웹개발자로 참여할 수 있었고, 6주간 스타트업에서 웹 개발을 한 후에 성과보고대회에서 최우수상을 수상했습니다. 해당 인턴..

https://school.programmers.co.kr/learn/courses/30/lessons/118666?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ⊙ 문제 ⊙ 제한사항 ⊙ 입출력 예 ⊙ 문제 접근 과정 servey와 choices가 주어진다. servey는 앞은 비동의일 때, 뒤는 동의일 때 어떤 유형인지 알려준다. choices는 동의 여부에 대해 알려준다. 4를 분기점으로 나눈다. 이때 4의 경우는 결과에 영향이 없어서 고려해주지않았어요. 배열을 하나 만들고 거기에 점수만큼의 해당 유형을 추가해주었다. c..

타입스크립트 프로그래밍 책을 읽다가 생소한 단어가 눈에 들어왔어요. 타입 어노테이션. 타입 어노테이션과 타입 추론, 둘을 비교하면서 어떠한 친구들인지 한번 알아보는 시간을 가져보아요! 타입 추론 선언과 초기화를 동시에 하여 초기화된 값을 통해 타입을 해석하는 동작을 말해요. const tooo1 = '퉁이리' 위와같이 선언과 초기화를 동시에 해주면 타입스크립트는 tooo1의 값을 string으로 간주해요. 초기화를 해준 '퉁이리'의 값을 통해 string을 추론한 것이죠. 실제로 typeof를 통해 확인해보면 'string'이라고 나옵니다. 원래 C언어나 C++ 등 자바스크립트 이전 언어들은 보통 타입을 선언해주었어요. string tooo1 = "퉁이리"; 다음과 같이요. 그렇지만 우리 멋진 자바스크립..

https://programmers.co.kr/learn/courses/30/lessons/12973 코딩테스트 연습 - 짝지어 제거하기 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙 programmers.co.kr ⊙ 문제 ⊙ 제한사항 ⊙ 입출력 예 ⊙ 입출력 예 설명 ⊙ 문제 접근 과정 총 3번의 도전. - 첫 번째 풀이 - 2중 반복문 + replace (일부 통과, 시간 초과) def solution(s): while len(s): flag = True for i in range(len(s)): if s[i]+s[i] in s: s = s.replace(..