ChatGPT 선생님과 성장하는 독학 개발자의 기록

2024년 7월 원티드 프리온보딩 프론트엔드 챌린지 간단 요약 어려운 공부해부를 해야 합니다. 추상화를 하나하나 해부해서 그 속을 이해해야 합니다. (Under the Hood)코드 레벨에서 해부하기보다 직접 비슷하게 만들어봐야 합니다. 사내 용어 사내 용어 사전, LINE Words 오픈 여정기안녕하세요. LINE에서 근무하고 있는 테크니컬 라이터 강정일입니다. 혹시, MTG라는 말을 들어본 적 있으신가요? Google에서 검색해 보니 매직 더 개더링(Magic: The Gathering)이라는 게임이 제일 먼저engineering.linecorp.com 아키텍쳐(Architecture)일반적으로 건축을 뜻합니다. 이는 시스템의 구조를 정의합니다.IT에서의 아키텍처는 넓은 범위의 시스템 주요 구성 요소..

원티드의 프리온보딩 프론트엔드 챌린지 실시간 강의를 듣다가 'PoC'라는 말을 듣게 됐다.강의 내용이 아닌 Q&A 시간에 잠깐 스쳐지나가듯 나온 단어로 어디서 들어본 것 같지만, 정확하게 어떤 의미이고, 무엇인지 알 지 못해서 이번에 알아보기로 했다. PoC'PoC'는 Proof of Concept의 약자로 개념 증명을 의미한다. 개발에서 새로운 아이디어, 기술, 방법이 실제로 작동하는지 검증하기 위해 간단한 형태로 구현해보는 것이다.  강의를 진행하셨던 강사님은 리팩토링 하기 전에 'PoC'를 만들어본다고 말씀하셨다. 아마 그 이유는 리팩토링할 코드가 의도대로 작동할 것인지 확신을 얻기 위해서일 것이다. 'PoC'를 통해 발생할 수 있는 문제를 미리 발견하고, 새로운 접근 방식이 좋은 지 확인해볼 수 ..

이번에 토스에서 'Accelerator 1기'를 모집했다.토스에서 진행하는 멘토링 시스템인데, 5명의 멘토(토스 리드)가 각각 3명 씩 멘티들과 관계를 맺어 일하는 방식을 경험하고, 기술 관련 피드백을 나누는 시간을 갖는 프로그램이다. '네카라쿠배당토' 중 '토'를 맡고 있는 토스의 기술력이 국내에서 굉장히 뛰어나다는 건 아마 개발하고 있는 사람이라면 다 알고 있을 것이다. 그래서 그 기술력을 조금 전수받기 위해 이번 프로그램에 지원했다.  지원은 위의 지원 방법에 나타나듯이 굉장히 간단하게 지원할 수 있었다.지원을 완료하고 나서 테스트와 관련된 내용의 메일을 받았다.  정해진 기간과 시간에 테스트를 보면 된다는 간단한 내용의 메일을 받고 나서, 당일이 되면 다시 한 번 테스트에 입장할 수 있는 문자 메..

온라인 강의나 블로그 또는 책을 읽다보면 "중복된 코드는 제거해야 한다", "재사용성을 키워야 한다"는 말을 여러 번 들을 수 있다. 나도 강의를 듣고, 블로그를 읽고, 그러다 보니 이와 관련된 배움을 얻었고, 생각도 하고 있고, 글도 쓰기도 했다. 그러나 정작 제대로 느껴본 적이 없었다. 이것이 얼마나 중요한 지 제대로 느껴본 적이 없는 상태로 생각하고, 글만 작성하고 있었다. 그러다, 이번에 간단한 개인 프로젝트에서 기능 함수를 재사용하는 경험을 하면서 "이래서 필요하다고 한 것이구나"라고 바로 느낄 수 있었다. 간단하게 예를 들어 설명하자면, 아래와 같은 검색 기능을 하는 코드가 있다고 보자.(제대로 된 코드가 아닌 예시 코드)function SearchBar() { const [searchT..

나는 영화 정보를 확인할 수 있는 간단한 프로젝트를 했었다.이 프로젝트는 자바스크립트 기반의 React 프로젝트로 구성되었다. 강의나 실습으로 배운 타입스크립트 지식을 활용해 자바스크립트로 구성된 프로젝트를 타입스크립트로 전환하기로 했다. 설치npm install --save typescript @types/react @types/react-dom `tsconfig.json` 파일 생성을 진행한다.npx tsc --init  기본 설정// tsconfig.json{ "compilerOptions": { "target": "es2016", // 자바스크립트 코드 버전 변환 설정 "lib": ["DOM", "DOM.Iterable", "ESNext"], // 프로젝트에서 사용할 라이브러리 설정 ..

지금까지 페이지를 반응형으로 만들기 위해서는 '미디어 쿼리'를 사용해야 하는 줄 알았다.아니, 정확히 말하면 '미디어 쿼리'만 있는 줄 알았다. 미디어 쿼리를 제외한다면 뷰포트 크기를 조절하기 위해 `rem`, `vw`, `vh` 단위 또는 `flex`, `grid`만 사용해야 하는 줄 알았다. 그러나, 이와 관련된 번역된 글을 보고 나서 '미디어 쿼리'가 아닌 다른 방법에 대해 알게 되었다.  [번역] CSS 미디어 쿼리, 그 너머로어떤 방식으로 반응형 웹을 구축하고 있나요? 우리에게 가장 친숙한 방법은 CSS 미디어 쿼리일 것입니다. 이 글에서는 미디어 쿼리는 여러 도구 중 하나일 뿐이고, 반응성을 높이는 다른 좋은 선velog.io 위의 글을 간략하게 요약하자면, 미디어 쿼리가 실용적인 것은 맞지만..

2024년 05월 18일, 프리온보딩 프론트엔드 챌린지 강의 요약 Next.js를 사용하면 이미지 처리에 'next/image'를 무조건 사용해야 할까?React를 사용할 때, React 답게 사용해야 한다면서 `useState`, `useRef`로만 관리해야 한다든지, Tanstack-Query를 사용할 때는 모든 API 요청을 `useQuery`, `useMutation`으로 처리해야 한다든지 처럼 말이다. Next.js에서는 무조건 `next/image`를 사용해야 할까? 세상에는 그런 건 없다. 알맞은 상황에 맞게 사용하면 된다. next/imageNext.js는 프레임워크로 개발자가 비즈니스 로직 작성에 집중할 수 있도록 여러가지 유용한 기능을 만들었다.`next/image`는 웹 사이트의 로딩..

2024년 5월 14일, 프론트엔드 챌린지 강의 요약 SSR(Server-Side Rendering)웹 사이트 패러다임에 큰 변화를 가져온 'CSR(Client-Side Rendering)'그러나, 모든 기술에는 양면이 있다. SSR 동작 과정 Server-side RenderingGenerate HTML to be rendered on the server in response to a user requestwww.patterns.dev SSR 정의제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법웹 서비스는 화면으로 보여주어야 하며, 그것을 그리기 위해서 클라이언트 단에서 그리냐 서버 단에서 그리냐의 차이 쉽게 비유하자면, 배달 요리가 있다.배달을 통신으로, 음식 재료를 페이지를 그리기 위한 ..