전체 글 (81) 썸네일형 리스트형 백엔드 개발자를 위한 프론트엔드 필수 개념 #4: React 폼과 안전한 제출 흐름 AI 활용 안내이 글은 직접 학습하고 실습하며 정리한 내용을 기반으로 합니다. AI를 활용해 글의 구조와 표현을 다듬고, 적절한 예제를 추가했습니다.이번에는 React에서 폼을 처리할 때 필요한 개념을 정리해보겠습니다.폼을 공부하면 다음 개념을 한꺼번에 만나게 됩니다.controlled와 uncontrolled inputFormData와 ref이벤트 핸들러와 이벤트 전파preventDefault()와 stopPropagation()클라이언트와 서버 검증로딩·오류·중복 제출 처리optimistic update와 rollback각 개념을 따로 외우면 서로 어떤 관계인지 이해하기 어렵습니다.따라서 이번 글에서는 사용자가 값을 입력하고 서버에 전달하기까지의 흐름을 따라가며 살펴보겠습니다.사용자 입력→ 입력값 관.. 백엔드 개발자를 위한 프론트엔드 필수 개념 3: React Hooks는 왜 등장했고, 언제 무엇을 사용해야 할까? AI 활용 안내이 글은 직접 학습하고 실습하며 정리한 내용을 기반으로 합니다. AI를 활용해 글의 구조와 표현을 다듬고, 적절한 예제를 추가했습니다.React를 공부하면 다음과 같은 Hook을 만나게 됩니다.useStateuseEffectuseRefuseMemouseCallbackuseContextuseReducer각 Hook의 사용법만 외우면 간단해 보이지만, 실제 코드를 작성할 때는 다음 질문이 생깁니다.이 값은 state로 관리해야 할까?useRef에 보관해도 될까?계산 결과를 useEffect로 갱신해야 할까?useMemo와 useCallback은 언제 필요한 걸까?이 질문에 답하려면 Hook의 문법보다 먼저 Hook이 왜 등장했고, 각각 어떤 문제를 해결하는지 이해해야 합니다.1. Hook이 등.. 백엔드 개발자를 위한 프론트엔드 필수 개념 2: JavaScript 비동기 처리의 발전 과정 AI 활용 안내이 글은 직접 학습하고 실습하며 정리한 내용을 기반으로 합니다. AI를 활용해 글의 구조와 표현을 다듬고, 적절한 예제를 추가했습니다.지난 글에서는 JavaScript의 함수, this, 프로토타입, 스코프와 클로저를 살펴봤습니다.이번에는 JavaScript의 비동기 처리에 대해 알아보겠습니다.JavaScript의 비동기 문법을 공부하면 보통 다음 개념을 한꺼번에 만나게 됩니다.콜백 함수호출 스택Web API태스크 큐마이크로태스크 큐이벤트 루프Promiseasync/await이 개념들을 각각 외우려고 하면 서로 어떤 관계인지 이해하기 어렵습니다.따라서 이번 글에서는 다음과 같은 발전 과정으로 살펴보겠습니다.동기 실행→ 콜백 기반 비동기 처리→ 콜백의 중첩과 에러 처리 문제→ Promise→.. 백엔드 개발자를 위한 프론트엔드 필수 개념 #1 AI 활용 안내이 글은 직접 학습하고 실습하며 정리한 내용을 기반으로 합니다. AI를 활용해 글의 구조와 표현을 다듬고, 적절한 예제를 추가했습니다.들어가면서프론트엔드 개발을 시작하면 콜백 함수, this, 프로토타입, 클로저처럼 백엔드 언어에서는 다소 낯선 개념을 만나게 됩니다.이번 글에서는 JavaScript의 비동기 처리 방식을 이해하기 전에 알아두면 좋은 핵심 개념을 정리합니다.1. JavaScript는 싱글 스레드로 코드를 실행한다JavaScript 엔진은 기본적으로 하나의 호출 스택(Call Stack)을 사용해 코드를 실행합니다. 따라서 한 번에 하나의 작업만 처리하며, 작성된 코드는 기본적으로 위에서 아래로 실행됩니다.console.log(1);console.log(2);실행 결과는 다음과.. [SW Maestro 6편] AI 활용을 전제로 한 개발 플로우 정립하기 # 들어가면서소프트웨어 마에스트로를 하면서 codex, claude pro 플랜을 쓰면서 AI를 적극적으로 활용한 개발을 하고 있습니다. 처음에는 그냥 cli키고 ~해줘 하는 식으로 했는데 어느 정도 익숙해지니까, 저만의 flow가 생기기 시작했습니다. 이런 ai를 사용하여 개발하는 것이 당연시 되어 가는 상황에서 저만의 개발 방식을 정립해두면 나름 일관된 + 효율적인 업무가 가능할 것 같아 이 포스팅을 하게 되었습니다. # STEP 1. 요구사항 명확히 하기 & 글로 남기기AI에게 단순히 ~~ 해줘 하면 이 프로젝트에 대해 이해하기 위해 코드를 많이 읽고 시작하거나, 요구사항을 명확히 이해하지 못하고 구현할 때가 많습니다. 매 세션마다 프로젝트의 목적이나 상황을 매번 입력하기가 어렵기도 하고, 귀찮기도.. 동시성 제어를 위한 기법 조사 동시성을 제어하기 위한 기법은 정말 다양합니다. 너무 많아서 어떤 상황에서 어떤 것을 선택하는 것이 올바른지 현재 아키텍처 + 상황에서 적합할지를 알아보는 시간을 가지고자 합니다. # 어떤 기법들이 있을까? ## 애플리케이션 레벨Spring 같은 서버 단에서 애플리케이션 레벨의 동시성 제어가 가능합니다. ### 1. synchronizedsynchronized는 Java에서 여러 스레드가 같은 코드 또는 객체에 동시에 접근하지 못하게 하는 동기화 키워드입니다. 즉 한 스레드가 작업중이면 다른 스레드는 작업이 끝날 때까지 기다리게 만듭니다. synchronized는 객체의 모니터 락을 이용해 동시성을 제어합니다. 모니터 락이란 Java 객체를 기준으로 현재 어떤 스레드가 이 객체를 사용하고 있는지 관리하는.. [DDIA - 1장] 신뢰할 수 있고 확장 가능하며 유지보수하기 쉬운 애플리케이션 1장의 메인 소재1장에서는 "데이터 시스템"에 대하여 정의를 하고, 좋은 데이터 시스템을 어떻게 설계할 수 있을지에 대해 이야기하고자 합니다. 이때 아키텍처를 설계할 때의 중요한 3개의 관심사 신뢰성, 확장성, 유지보수성에 대해 소개합니다. 데이터 시스템이란하둡, 스파크와 같은 데이터 분석에 활용되는 시스템을 말하는 것이 아닙니다. 이 책에서는 요새 애플리케이션이 복잡하거나 오래 걸리는 계산 중심이 아닌 데이터를 읽고 저장하는 기능이 핵심인 데이터 중심적이라고 이야기 합니다. 데이터베이스와 메시지 큐는 데이터를 저장한다는 점에서 표면적으로는 비슷하지만, 서로 다른 특성이 있기 때문에 구현 방식이 상당히 다릅니다. 그럼에도 불구하고 이 책에서는 이 모든 것을 데이터 시스템이라는 용어로 묶습니다. 전통적으.. [SW Maestro 3편] AI활용을 잘하는 개발자가 되기 위한 고민 2026년, AI를 열심히 사용하고 있습니다.ChatGPT가 처음 나왔을 때 회사에서 몰래 쓰다가 뒤에 누가 오면 후다닥 알트탭을 눌렀던 게 엊그제 같은데, ai를 대하는 개발자들의 태도가 180도 바뀐 것 같습니다. SW Maestro에 들어와 멘토님들로부터 여러 회사들의 분위기를 보았을 때 AI로 비즈니스 로직은 작성하지 못하는 회사부터 AI로 PR리뷰까지 모두 처리해버리는 회사까지 회사의 도메인 / 규모에 따라 천차만별이긴 하지만 결국에 AI를 도입하는 방향으로 전환되고 있다는 것은 모두 동일합니다. 저희 팀도 프로젝트를 진행하면서 AI를 활용해 업무 효율을 높이기 위해 여러 방식을 시도하고 적용해보고 있습니다.1. LLM Wiki를 이용해서 팀의 지식을 자산화하고 업무 맥락을 보존하고 있습니다... 이전 1 2 3 4 ··· 11 다음