\
AI가 개발자를 대체하는 시대에 어떤 개발자가 되고 싶은가
·
🪵 LOG/개발에 대한 이야기
서론나는 어떤 개발자가 되고 싶은가? 개발 공부를 2~3년 해오면서, 부트캠프도 다니고 사이드 프로젝트도 여럿 진행했지만 정작 "나는 어떤 개발자인가"라는 질문엔 명확하게 답하지 못했다.AI가 코드를 짜고, 혼자서도 서비스를 만들어내는 시대가 됐다. 개발자가 하던 일의 상당 부분을 AI가 대신하고 있다. 그 흐름을 보면서 질문이 더 선명해졌다. AI가 대체할 수 없는 개발자는 어떤 개발자인가. 나는 그런 개발자가 될 수 있는가. 그 생각을 정리해 글로 남긴다. 개발자가 되고 싶은 이유사람들이 나로 인해 편해지는 것 자체가 좋았다. 개발을 시작한 계기는 순수하지 않았다. 학과 동아리 'CIA'에서 캡스톤 대회를 준비하게 됐고, 솔직히 말하면 대회 수상으로 졸업 시험을 면제받고 싶다는 생각이 컸다. 결과는 ..
[Knock/OpenMind] 3G 환경에서 2초 걸리던 렌더링을 100ms로 줄인 과정
·
💻 PROJECT/트러블 슈팅
반응형 레이아웃에서 뷰포트 너비가 바뀌는 순간, 렌더링할 요소 개수가 늦게 재계산됐다. 브레이크포인트를 넘는 순간 잠깐이지만 이전 개수의 요소가 그대로 노출되는 현상이었다.성능 문제는 아니었다. 하지만 상태 계산 시점이 렌더링과 맞지 않는 구조적인 문제였고, 그냥 두기엔 사용자 눈에 직접 보이는 오류였다. 이 글은 그 원인을 찾고 해결한 과정을 기록했다. 문제무엇이 문제였는가반응형 환경에서 뷰포트 너비를 변경하면 약 0.1초 정도 요소가 추가되는데 시간이 걸렸다.원래라면 뷰포트 786px(Tablet size)을 기준으로 보다 클 때 8개, 작을 때 6개가 렌더링 되어야하는데 아래 사진과 같이 렌더링 지연 시간이 보이는 것을 확인할 수 있다. 가설원인을 어디서 찾았는가가장 먼저, 네트워크 환경에 따라 ..
[기술 면접 대비] Front-end 위주로 보는 컴퓨터 구조
·
📚 STUDY/CS & 네트워크
내가 보려고 만드는 기술 면접 리스트문제 리스트CPU와 메모리는 각각 어떤 역할을 하나?프로그램은 어떻게 실행되는가?메모리 계층 구조를 간단히 설명해보세요.캐시 메모리는 왜 필요한가?지역성(Locality)이란?스택(Stack)과 힙(Heap)의 차이는?콜 스택(Call Stack)이란?스택 오버플로우가 발생하는 시점과 이유메모리 누수는 왜 성능 문제로 이어지나요?멀티코어 CPU가 프론트엔드에 주는 이점은?컨텍스트 스위칭이란?무거운 연산이 UI를 멈추게하는 이유Web Worker는 왜 필요한가요? 들어가기 전,컴퓨터 구조라는 과목은, 말 그대로 컴퓨터의 구조와 관련된 학문으로 내가 공부하고 있는 프론트엔드를 넘어 웹 개발자라면 기본적으로 인지하고 있어야하는 내용입니다.따라서, 공부한 내용은 컴퓨터 구조라..
[JavaScript] JavaScript가 동작하는 원리 - 기본편
·
📚 STUDY/WEB
들어가며"호이스팅이 왜 일어날까?", "스코프 체인이란 무엇일까?", "this는 왜 상황마다 달라질까?" JavaScript를 공부해봤다면, 이 질문들은 한 번쯤 생각해보았을 것입니다. 이 세 가지는 따로 외워야 할 별개의 규칙이 아닌, 실행 컨텍스트라는 개념을 이해하면 전부 같은 원리로 설명됩니다.이 글에서는 실행 컨텍스트가 무엇인지, 내부에 무엇을 담고 있는지, 그리고 호출 스택에서 어떻게 동작하는지를 다룹니다.컨텍스트실행 컨텍스트를 이해하기 앞서, 컨텍스트란 무엇인지 이해해야합니다.컨텍스트(Context)란 상황, 맥락, 문맥 상의 의미를 의미합니다. 이를 개발자답게 해석해보면, 텍스트의 내용뿐만 아니라, 텍스트가 사용된 상황, 이전 문맥, 이후 맥락 등을 모두 가지고 있는 데이터 묶음을 가리킨다..
[자료구조] 스택(Stack)
·
📚 STUDY/자료구조 & 알고리즘
📦 스택(Stack)스택(Stack)은 데이터를 한쪽 방향으로만 넣고 꺼내는 자료구조입니다. 후입선출(LIFO, Last In First Out)방식으로 동작하여 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조입니다.예를들어, 접시를 쌓아두고 위에서부터 하나씩 사용하는 것과 같습니다. 🏓 동작 방식스택의 핵심은 “순서대로 데이터를 넣고, 마지막 데이터를 꺼낸다.” 입니다. 1. 데이터 추가(push)앞에서부터 순서대로 데이터를 추가합니다.2. 데이터 제거(pop)가장 마지막 데이터를 제거합니다.3. 스택의 가장 마지막 데이터 확인마지막에 있는 데이터를 확인합니다.4. 스택이 비어있는지 확인스택이 비어있는지 확인합니다.가장 간단한 방법은 배열의 길이가 0인가를 확인하는 방법입니다.JavaScrip..
[포트폴리오] FE 포트폴리오 페이지를 만들어보자! - 기획 및 디자인
·
PROJECT
더보기포트폴리오 프로젝트 몰아보기 안녕하세요! 전부터 프론트엔드 개발자라면자신의 포트폴리오 페이지정돈 있어야지!... 라고 생각만 하고실천은 없었지만 이번에는 진짜로 만들어볼 예정입니다 :) 기획 먼저, 포트폴리오에서어떤 내용을 강조할까?, 어떤 형태로 보여줄까? 를 많이 고민했으며혼자 생각하는것보다 다른 레퍼런스를 찾아보며 고민했습니다. 레퍼런스 리스트 ⬇️더보기송진경님의 포트폴리오 송진경 | 프론트엔드 개발자프론트엔드 개발자 송진경의 포트폴리오입니다. React, Typescript, Next.js 기반의 웹 프론트엔드를 개발합니다.www.meganmagic.com 이정민님의 포트폴리오 이정민 - Leejeongminjeongmin's dev portfolio siteleejeongmin.ver..