| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |
- 주니어 프론트엔드
- javascript
- 리액트
- llm 활용
- next.js
- 바이브 코딩
- augmented coding
- 실무에서의 접근성
- 코테
- hydration 경고
- react
- 프론트엔드
- Next
- vibe coding
- 코딩테스트
- 회고
- react vs nextjs
- 개발자
- hydration warning
- 웹 접근성 고려
- 넥스트
- 회고록
- 택배 상자 꺼내기
- 주니어 개발자
- 증강 코딩
- next.js 13
- 프로그래머스
- shallowequals
- 자바스크립트
- high order component
- Today
- Total
목록전체 글 (116)
쉽고, 재밌게 정리하고 기록하자
"이 내용은 마이크로소프트의 "What’s next in AI: 7 trends to watch in 2026" 내용을 요약 정리 및 저의 의견을 적은 글입니다😆" What’s next in AI: 7 trends to watch in 2026Seven AI trends to watch in 2026 will make AI a true partner — boosting teamwork, security, research momentum and infrastructure efficiency.news.microsoft.com 위의 내용은 마이크로소프트가 2026년을 바라보며 발표한 AI의 7가지 주요 트렌드를 다루고 있습니다. (현재 시점인 2025년 말 기준으로, 내년을 전망하는 핵심 보고서!)현재 AI..
Augmented Coding: Beyond the VibesNotes from a technically challenging projecttidyfirst.substack.com 이 게시물은 "켄트 벡의 Augmented Coding: Beyond the Vibes"를 읽고 해당 내용의 정리와 저의 생각을 적은 포스트입니다. 들어가기 전에,요즘 개발자들 사이에서는 AI와 함께 코드를 작성하는 '바이브 코딩(Vibe Coding)' 방식이 빠르게 확산되고 있습니다. 저 역시도 AI의 도움을 받아 창의적인 아이디어를 빠르게 실현하고, 반복적인 타이핑을 줄이는 방식으로 협업해 왔습니다.하지만 개발 과정에서 불필요한 로직이 추가되어 코드의 복잡도가 증가하거나, 테스트 커버리지가 충분하지 않아 유지보수가 어려운..
"접근성이 좋은 웹사이트는 모든 사람이 사용할 수 있는 웹사이트입니다."들어가며,웹 접근성(Web Accessibility)이라고 하면 복잡하고 어려운 것 같지만, 사실은 모든 사용자가 우리가 만든 웹사이트를 편리하게 사용할 수 있게 만드는 것입니다. 마우스를 사용하기 어려운 사람, 시각 장애가 있는 사람, 색을 구별하기 어려운 사람 등 다양한 사용자를 고려하는 것이죠.지난 경험을 돌아보면 어떠한 프로젝트를 진행할 때 웹 접근성에 대한 부분들을 고려하지 않고 진행한 경험이 있습니다. 하지만 웹 접근성에 대해 이해하고 학습을 해보니 프론트엔드 개발자에게 웹 접근성은 선택이 아닌 필수입니다. 해당 포스트에서는 실무에서 바로 적용할 수 있는 웹 접근성 핵심 개념들을 쉽게 설명하려고 합니다. 1. 시맨틱 HTM..
들어가면서지난 주니어 개발자로 살아남기 "HOC (High Order Component) - memo, deepmemo 만들기"를 이어서 React Hook을 직접 구현하기까지 오게 되었습니다. 저번 시간에 공부한 걸 살짝 복기를 해본다면 고차 함수를 직접 구현하는 것이었는데 우리가 자주 사용하는 React.memo와 같은 기능이 있는 props의 값이 변경되지 않으면 리렌더링을 방지해주는 고차 함수인 memo와 deepMemo를 구현해 봤습니다. props를 얕은 비교를 하는 memo와 깊은 비교를 하는 deepMemo까지, 오늘은 React의 핵심 Hook들인 useRef, useMemo, useCallback을 직접 구현해 보면서 내부 동작 원리를 깊이 이해해보겠습니다. 이 세 Hook은 서로 연결..
들어가면서,최근 '함수형 프로그래밍'과 '객체지향 프로그래밍'에 대한 학습이 더 필요하다 느껴 이 포스트를 작성하게 되었습니다.프로그래밍을 배우다 보면 '함수형 프로그래밍'과 '객체지향 프로그래밍'이라는 용어를 자주 듣게 됩니다.하지만 이 두 패러다임이 정확이 무엇이고, 언제 어떤 것을 사용해야 할지 헷갈릴 때가 많은데그래서 이번 포스트에선 두 프로그래밍 패러다임을 실제 코드 예시와 함께 쉽게 비교해 보려고 합니다. 🤔 프로그래밍 패러다임이란?프로그래밍 패러다임은 프로그램을 어떤 방식으로 설계하고 구조화할 것인가? 에 대한 접근 방식입니다.마치 건물을 지을 때 한옥 스타일로 지을지, 서양식으로 지을지 정하는 것과 비슷하죠!함수형 프로그래밍 (Functional Programming)"문제를 작은 함수들..
들어가면서지난 주니어 개발자로 살아남기에서 비교함수(shallowEquals(얕은 비교), deepEquals(깊은 비교))를 만들었고 비교함수를 이용해 HOC(고차 컴포넌트)인 memo 함수와 deepMemo 함수를 만들어보려고 한다. HOC (High Order Component)란?HOC(고차 컴포넌트)는 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 React의 디자인 패턴입니다.우리가 주로 사용하는 보통의 함수의 인자(매개변수)들은 string, number, function(콜백함수)등이 있지만 HOC에서는 컴포넌트를 인자로 받아 새로운 컴포넌트로 반환시켜준다는 게 포인트다. 쉽게 말하자면 컴포넌트를 데이터처럼 넘겨주고 반환받는다라고 할 수 있다. Memo 함수memo 함수는? React..
들어가기 전에리액트의 기본기를 더 다지기 위해 다양하게 인터넷 서칭 중에 재밌어 보이는 과제를 보고 나도 한번 해봐야겠다는 생각에 시작하게 되었다. 앞으로 3가지의 개인 과제를 3개의 포스트로 차례대로 진행해 보려고 한다.equalities 함수 만들기shallowEquals.ts (얕은 비교) deepEquals.ts (깊은 비교) HOC (High Order Component) - memo, deepmemo 만들기 React Hooks - useRef, useMemo, useDeepMemo, useCallback 만들기리액트를 사용하면서 주로 사용하는 함수들과, hook들이다. 평소에는 '아~ 이런 기능이구나~ 너무 좋네~" 하면서 사용했던 것들이었는데 코드로 직접 해당 기능들을 구현하면서 어떻게 동..
들어가며,최근까지 엄청난 속도로 발전하고 있는 대규모 언어 모델(LLM)을 일상생활에서도 사용하고, 개발 작업을 진행할 때도 사용을 하고 있는데, 문득 이런 생각이 들었습니다. LLM을 개발에 적용한 후로 개발의 효율성이나 생산성에 매우 도움을 받고 있지만 반면 LLM은 개발자에게 정말 환상적인 도구일까? 아님 나를 정체되게 만드는 걸까? 생각이 되어 다른 개발자분들은 어떻게 사용하고 있으며 어떤 생각을 갖고 있는지 궁금해 이렇게 글을 작성하게 되었습니다. ChatGPT, Gemini, Claude와 같은 LLM을 코드 작성에 활용하는 개발자들이 급증하고 있습니다. 일부에서는 이를 개발 생산성의 혁명으로 환영하는 반면, 다른 한편에서는 코드 품질 저하나 개발자 역량 퇴화에 대한 우려의 목소리도 나오고 있..