분류 전체보기 309

[오마이픽] 나만의 OPIc 선생님, 오마이픽

이번 설의 목표는 오픽이다. 예전에 오픽 시험을 준비하고 싶다면, "오픽노잼" 동영상을 정주행하는 것을 추천받았다. 여기에 AI를 이용해 대화해보면서 오픽 연습을 하고 싶었는데, 시중에 존재하는 모델들은이미 학습되어, 정해진 대로만 답변받거나자체 학습 데이터를 바탕으로만 공부해야 한다.다들 각자 원하는 선생님을 통해 오픽을 연습하고 싶을텐데,정작 나와 대화하는 대상이 나와 다른 선생님을 통해 공부했다면, 피드백에 대한 신뢰도가 떨어질 것이다. 그래서, 본 서비스 "OMyPIc"을 기획하게 됐다.목차제품 개요주요 기능챗봇학습 룰북질문 리스트 & 학습 모드 지원오답노트API 키 삽입1. 제품 개요사용자는 오픽 학습을 시작하고 대화형으로 빠른 피드백을 원한다.기존 보이스 모델은 커스터마이징이 제한되어, 사용자..

2026년 2월 1주차 회고

감사가 무너지면 꾸준함이 무너진다.조급해지기 전에, 대안을 찾기전에, 충분히 감사했나?이번 주의 감사데이터 기반 의사소통의 근거를 찾을 수 있게 됨에 감사현재에 집중할 수 있게 됨에 감사항상 무언가를 수행하기.현재 수행하고 있는 구체적인 전술이 무엇인지 정리데이터 기반 전술 평가체계적인 상태를 유지하기.큰그림 그리고 핵심 짚기.처음부터 끝까지 차근차근 전개하기.현 시스템에 대한 감사를 유지하기.보상 체계를 깨끗히 유지하기.입장 중심이 아닌 이익 중심으로 사고하기.팩트와 의견 구분하기.윈-윈 전략 생각하기.단정 짓지 말고, 다음에 무엇을 해야 할 지 상상하기.내가 놓치고 있는 부분이 분명히 존재한다는 걸 인정하기.상대방이 어떤 점을 해결해 주는 것을 원하는가?지금 내가 다음에 무엇을, 어떤 절차로 해야 하..

useState, useEffect - 브라우저 & React의 동작 원리

본 글은 리액트를 빠르게 이해한 후 사용해보고 싶은 백엔드 개발자를 위해 작성되었습니다. 초급 문법 중심이 아닌가장 자주 사용되는 리액트의 훅리액트의 내부 동작원리와 디버깅 시 필요한 기초 지식위주로 작성되었음을 알립니다.현재 나의 프로젝트 핀잇의 경우, 리액트 훅들이 다음과 같은 횟수로 사용되었다. 총 380회 (100.0%)useState 155 (40.8%)useEffect 60 (15.8%)useMemo 53 (13.9%) - DPuseContext 52 (13.7%)useCallback 37 (9.7%) - DPuseRef 23 (6.1%) - 직접 DOM 조작위 통계에서 보듯이, 보통 리액트에서 구현 시 가장 자주 사용되는 핵심 기능으로는 useState와 useEffect라고 할 수 있다. ..

관계, 그리고 목표

주변 사람들의 결혼소식이 주기적으로 들려오는 요즘이다.그렇다 보니 여러가지 주제가 화제로 돌아온다."이제 드디어 취업할 수 있냐?""우리끼리 동반 여행같은 것 좀 해보자." 계속 변명 아닌 변명을 하다 보니, 이런 이야기도 듣는다. 아직도 과거에 얽메여 있는 건 아니지?말로만 한다고 하지 말고 연애를 할 노력좀 해라. 세상의 방식과 너무 떨어지게 되면, 불안함이 생기게 된다.주변 사람들을 쫓아가지 못하면 나중에 후회할 것 같은 불안감?주변의 행복하게 사는 친구들이 증거가 되어 나를 더욱 압박해온다. 다시 또 나는 과거에 얽메였는가? 라는 질문을 해봤지만, 명백히 더 이상은 아니라고 말할 수 있다.그런데 내 가치관은 왜 아직도 변하지 않았을까? 이에 대한 의문을 풀어나가본다.연애 시장에서 "경쟁력 있는..

알고리즘 & 라이브 코테의 접근 전략

기존 문제 해결 전략은 일반적으로 주어진 요구사항을 구현할 때의 접근 방식을 작성해두었다.이번 글은 알고리즘과 라이브 코테로 제한해서 좀 더 자세하게 적어보려 한다. 문제 풀이 단계 - 어떠한 순서대로 문제를 접근해야 하나?아이디어 획득 : “추론”하기이 시기는 체계젹인 상태 유지가 특히 중요한 시점이다.문제만 바라보고 있어선, 아무것도 변화하지 않는다.지금의 너는 문제를 제대로 이해하지 못하고 있다.놓친 조건은 없는지 검토하라.문제의 조건을 "우아한" 수준으로 정의할 수 있는지 검토해라.문제 알고리즘/특징의 “증명”으로 아이디어어떻게 이 동작이 수학적으로 증명되는가?{BruteForce, Greedy, D&C, DP, Graph, math}전체 알고리즘이 “결국 구하고자 하는 것” 놓치지 않기“책임” ..

PS/이론 2026.02.03

"데이터 기반으로 소통"의 의미 - 통제, 방임, 그리고 시스템화

본 글은 데이터 기반으로 의사소통을 하는 방법을 다루는 글이 아닙니다.데이터 기반으로 의사소통을 하는 전략의 이점을 개발자 관점에서 분석한 글입니다.실제로 자신의 직무에서 데이터 기반으로 의사소통을 하는 방법을 찾고 계신다면, 전공/직무/데이터 분석 관련 지식을 포함한 다른 좋은 글들을 추천드립니다. 최근 AI의 발달로, OpenClaw와 같은 새로운 프로젝트들이 속속들이 등장하고,대단한 천재들이 새로운 규칙을 정의하기 위해 개발에 앞다투어 참여하고 있다. 그야말로, 프로그래밍에 대한 모든 규칙이 새로 쓰여지고 있는 시점이다. 다양한 매체에서 AI가 개발자를 대체한다고 대서특필하고 있고, 시대에 따라가지 못하는 것에 대한 불안함이 커지고 있다.이에 대한 나의 생각을 정리해둔다.하나가 되는 것과, 다름을..

2026년 1월 5주차 회고

감사가 무너지면 꾸준함이 무너진다.조급해지기 전에, 대안을 찾기전에, 충분히 감사했나?이번 주의 감사책을 많이 읽었음. 교양에 대한 감사.면접 경험에 대한 감사항상 무언가를 수행하기.체계적인 상태를 유지하기.큰그림 그리고 핵심 짚기.처음부터 끝까지 차근차근 전개하기.현 시스템에 대한 감사를 유지하기.보상 체계를 깨끗히 유지하기.현재 보상 체계가 오염됨 - 사람 만나면서 너무 돈도 막 쓰고, 루틴도 깨지고, 잠도 많이 잠.다음주에 현재 보상 체계에 대한 피드백이 제대로 들어갔는지 검토 필요입장 중심이 아닌 이익 중심으로 사고하기.팩트와 의견 구분하기.윈-윈 전략 생각하기.단정 짓지 말고, 다음에 무엇을 해야 할 지 상상하기.내가 놓치고 있는 부분이 분명히 존재한다는 걸 인정하기.상대방이 어떤 점을 해결해 ..

2026년 1월 4주차 회고

감사가 무너지면 꾸준함이 무너진다.조급해지기 전에, 대안을 찾기전에, 충분히 감사했나?이번 주의 감사Schedule과 Task의 분리를 3일만에 성공할 수 있게 됨에 감사AI의 발전에 감사항상 무언가를 수행하기.체계적인 상태를 유지하기.큰그림 그리고 핵심 짚기.처음부터 끝까지 차근차근 전개하기.현 시스템에 대한 감사를 유지하기.보상 체계를 깨끗히 유지하기.입장 중심이 아닌 이익 중심으로 사고하기.팩트와 의견 구분하기.윈-윈 전략 생각하기.단정 짓지 말고, 다음에 무엇을 해야 할 지 상상하기.내가 놓치고 있는 부분이 분명히 존재한다는 걸 인정하기.상대방이 어떤 점을 해결해 주는 것을 원하는가?지금 내가 다음에 무엇을, 어떤 절차로 해야 하는가?이번주에 한 것HTML/CSS/리액트 각잡고 정리하기 >> 예제..

BEM - CSS,JS 용 클래스 네이밍 규칙

처음 HTML, CSS 를 사용하려고 하다 보면, 각 태그들을 구별할 뚜렷한 클래스 명명 규칙을 찾기 어려워 멋대로 지정해보다가, 프로젝트의 규모가 커지면서 답답함을 느끼게 된다. 선대 개발자들은 이런 문제를 해결하기 위한 고민을 이미 진행해왔으니, 이를 알아보자.태그 위주로 이름 짓기태그를 기준으로 클래스를 네이밍해보자.article { /* ... */ } article aside { /* ... */ } article aside figure { /* ... */ }article div header { /* ... */ } article ul li { /* ... */ } article div ul li { /* ... */ } article div ul li.special { /* ... */ } ..

WEB FE Repository 2026.01.23

시멘틱 태그 - Semantic Tag

시맨틱 태그가 무엇인가?HTML5의 여러 태그들은 그 자체로 어떤 의미를 지니고 있다.이 태그들은 기능적으로는 div 태그와 동일하지만 각각의 종류 자체가 페이지에서 해당 요소가 갖는 의미와 역할을 나타내기 때문에, 시맨틱 태그라고 불린다.시맨틱 태그를 쓰면 뭐가 좋은가?웹 접근성 개선스크린 리더로 페이지를 보는 사람들이 필요한 정보를 보다 수월히 찾을 수 있다.SEO (Search Engine Optimization)검색엔진이 페이지를 분석할 때 각 정보의 종류를 파악하는데 도움이 된다.유지보수와 가독성모든 구획들이 div들로 구성된 페이지보다 코드를 읽고 구조를 파악하기 쉽다.태그별 설명header페이지나 구획의 제목 역할을 하는 요소들을 두는데 사용된다.로고와 제목, 검색창 등이 들어간다. MDN ..

WEB FE Repository 2026.01.23