브라우저 렌더링 과정 브라우저 렌더링 과정은 웹페이지를 표시하는 데 필요한 리소스를 다운로드하고 화면에 표시하는 과정을 크게 4단계로 나눌 수 있습니다. DOM + CSSOM 생성 DOM (Document Object Model): HTML 파일을 분석하여 브라우저가 이해할 수 있는 DOM 트리를 만듭니다. 각 HTML 요소가 노드로 변환되어 트리 구조를 형성합니다. CSSOM (CSS Object Model): CSS 파일을 분석하여 CSSOM 트리를 생성합니다. 이 트리는 CSS 규칙을 이해하고 각 DOM 요소에 스타일을 적용할 수 있도록 도와줍니다. Layout DOM과 CSSOM 트리를 조합하여 렌더 트리를 생성합니다. 각 요소의 위치와 크기를 계산하고 화면에 요소들을 배치합니다. 이 과정을 통해 브라우저는 각 요소가 화면에서 어디에 위치할지 결정합니다. Paint 레이아웃 과정에서 배치된 요소에 색을 칠하고, 그림자나 테두리 같은 시각적 스타일을 적용합니다. 이 단계에서 …

들어가기 앞서 재택근무를 하다보면, 개인 컴퓨터에 회사 Github 계정을 함께 사용하는 경우가 발생할 수 있습니다. 이 때, 아무런 개인 컴퓨터에 아무런 설정을 하지 않는다면 회사 Private Repo를 Clone하는 과정에서 문제가 발생할 수 있습니다. 저 또한, 이러한 문제를 해결하기 위해 시간을 많이 사용했습니다. 그래서 이번 글을 통해 저 처럼 고생하시는 분들이 조금이나마 도움을 드리기위해 글을 작성했습니다. 1.SSH 계정 만들기 먼저 최상위 폴더에 있는 ssh 폴더로 이동을 합니다. 그리고 SSH Key를 생성하는 명령어를 실행합니다. 아래는 개인 계정, 회사 계정을 나누어서 SSH를 생성했습니다. 아래 명령어를 실행하면 다양한 질문을 하는데 저는 그냥 Enter를 계속 눌러 진행했습니다. -C는 ssh 키를 식별하는 데 도움을 주는 명령어 입니다. -f는 ssh 키가 저장되는 파일 이름을 나타내는 명령어 입니다. 아래의 명령어를 통해 제대로 SSH가 제대로 생성되었…

외부 라이브러리를 관리 하는 방법 왜 의존성을 줄여야 할까요? 외부 라이브러리를 사용할 때 최대한 의존성을 줄이는 것이 중요합니다. 외부 라이브러리가 업데이트되거나 문제가 생기면, 우리 프로젝트에도 영향을 끼칠 수 있기 때문입니다. 그렇다면 외부 라이브러리와의 의존성을 최소화하는 방법은 무엇일까요? 의존성 줄이는 방법 최근 쏙쏙 들어오는 함수형 코딩책을 가지고하는 함수형 프로그래밍 스터디에 참여해서 많은 것을 배울 수 있었습니다. 그 중에서도 을 이용하여 외부 라이브러리의 의존성을 줄이는 방법을 배웠습니다. 은 우리가 필요한 인터페이스만을 노출시키고, 그 외의 기능들은 Wrapping 함수로 가려놓는 것입니다. 이렇게 하면 외부 라이브러리와의 의존성을 최소화할 수 있어서 유지보수성을 높일 수 있습니다. 추상화 벽 사용시, 장점 추상화 벽을 사용하면 여러 가지 장점이 있습니다. 외부 라이브러리와의 관리 포인트를 줄일 수 있습니다. 외부 라이브러리의 변경사항이 생기면, 해당 추상화 벽…

아래의 아키텍처가 정답이 아니라고 생각합니다. 너그러운 마음과 피드백을 주시면 감사하겠습니다.🙇🏻‍ ✔️ 새로운 아키텍처를 도입해 얻은 장점 코드 응집성을 높여 관리 포인트를 줄였습니다. 코드 유지보수에 더 유연하게 대응할 수 있게 되었습니다. 다른 팀원의 코드를 이해하는 데 필요한 리소스를 줄였습니다. ✏️ 새로운 아키텍처를 도입한 이유 새로운 아키텍처를 도입한 가장 큰 이유는 협업을 통한 개발 환경과 코드 응집성을 개선하고, 이로 인해 관리 포인트를 줄이기 위함입니다. 협업 시, 각자 다른 생각으로 폴더명을 지정해 개발을 진행하게 됩니다.(물론 팀내 폴더 컨벤션이 있을 때에는 다릅니다.) 이로 인해 다른 사람이 개발한 코드뿐만 아니라 해당 폴더명에 코드를 추가한 이유까지 파악해야 하는 상황이 발생합니다. 이는 코드를 이해하고 개발하는 데 많은 리소스를 필요로 하게 만듭니다. 따라서 팀원들과 회의를 통해 이 문제를 해결하고자, 더 나은 코드 아키텍처를 만들기로 결정하였습니다. 이를 위해 …

인트로 저희 서비스는 전문투자자와 스타트업 관련 서비스를 제공해주는 플랫폼 입니다. 플랫폼을 이용하기 앞서, 먼저 스타트업 종사자 혹은 전문 투자자를 인증하는 페이지가 존재 합니다. 그 페이지에는 다양한 Form과 Validation이 존재합니다. 이번 스프린트에서 저는 기존에 React로 개발된 페이지를 Next로 마이그레이션 하는 작업을 맡게 되었습니다. 이번 스프린트을 통해 을 알게 되었고, 왜 을 선택해 개발하게 되었는지 정리하고자 이 글을 작성합니다. 또한 이번 스프린트를 통해 스스로 되돌아 보는 시간을 갖기 위해 글을 작성합니다. 요구사항 참고 React Hook Form vs Formik 비교 번역글 인프런 - React Form 컴포넌트 개발기 참고

Facts 컴포넌트 개발을 진행하면서, 타입 설계를 작성하지 않고 개발을 진행해 개발의 방향이 잘 잡히지 않았다. Feelings 타입 설계를 먼저 잡고, 개발을 하는 부분이 많이 익숙하지 않다. 그래서 스스로 답답하다. Findings 팀원분께서 타입 설계와 다른 좋은 피드백을 주셔서, 여기에 정리해 좋은 조언을 체화하고자 한다. 개발을 할 때, 을 시작해야 합니다. 예를 들어 가 어떤 값이 들어올지 모르는 상황에서 타입을 작성하고 있지 않다가 가 갑자기 많아진다면, 기존에 작성한, 가 어떤 타입으로 지정해야 하는지 모르게 됩니다. 또한 개발 하기 앞서 팀에서 얼라인 맞춘 내용 중 타입을 먼저 설계하고 개발을 진행 있는데, 그렇게 개발을 하지 않는 것은 서로의 신뢰를 깨는 행위 입니다. 재사용가능한 컴포넌트를 개발하는 과정에서 혼자서 개발하기 보다는 디자이너와 협의를 통해, 어떤 디자인이 지속적으로 유지되는 건지 또는 어떤 디자인은 변경 가능성이 많은지를 확인하면서 컴포넌트 …

‍구조화된 데이터란? 웹 페이지에 있는 정보를 구조화하여 검색 엔진이 이를 이해하기 쉽도록 만드는 것을 의미합니다. 예를 들어, 제목, 저자, 출판사, 출판일 등의 정보를 태그로 감싸는 것입니다. 검색 엔진은 이러한 정보를 수집하여(리치 스니펫) 검색 결과를 더욱 정확하게 제공할 수 있습니다. Snippets은 검색어와 관련된 정보를 미리 보여주는 정보 블록으로, 사용자가 검색 결과를 더 빠르게 식별하고 선택할 수 있도록 도와줍니다. 콘텐츠에 구조화된 데이터를 제공할 경우 위와 같이 더 풍부한 검색 결과를 제공할 수 있으며, 이는 검색을 하는 사용자들이 해당 사이트의 유입률을 높여줄 수 있습니다. ‍구조화된 데이터란 어떻게 작성하는가? schema.org 구글, 마이크로소프트, 야후, 어도비 등의 대형 인터넷 기업들이 공동으로 개발한 구조화된 데이터 마크업 언어입니다. 이 언어를 사용하면 웹페이지의 콘텐츠를 구조화된 데이터로 표현할 수 있어 검색 엔진이 이해하기 쉬운 형식으로 정보…

Facts ORM에 대한 개념이 궁금해졌다. Feelings 회사 프로젝트 내부에 ORM이 존재했는데, ORM에 대해 자세히 알아보지 않았다. 부끄러웠다. Findings 개념 ORM(Object Relational Model)은 사물을 추상화시켜 이해하려는 OOP적 사고방식과 DataModel을 정형화하여 관리하는 RDB 사이를 연결할 계층의 역할로 제시된 패러다임으로 RDB의 모델을 OOP에 Entity 형태로 투영시키는 방식을 사용한다. 즉, Object와 DB간에 연결 역할을 해주는녀석이 ORM이다. 등장 배경 ORM을 사용하지 않을 경우 개발자가 개발 하기위해 DB에 접근하기 위해서는 SQL Query문을 직접 만들었다. SQL문법을 알고 있어야하기 때문에 쿼리문 작성시간이 오래걸려 개발이 지체되는 문제가 발생했다. 개발 코드와 DB가 서로 종속되는 문제가 생겨나기 시작했다. 이러한 문제점을 해결하기 위해 ORM이 등장하였고 ORM이 등장함으로서 SQL Query 문법에서…

Facts 고향가는 기차를 놓쳤다. Feelings 와야할 지하철이 오지 않아, 많이 당황스러웠다. 그렇다고 짜증이 나거나 화는 나지 않았다. 오히려 후회를 최소화하기 위한 노력을 순간적으로 했다. Findings 먼저 1호선은 앱에 제시하는 시간에 오지 않는 경우가 많다는 사실을 알게 되었다. 명절에는 평소보다 30분 일찍 출발해야 겠다.(정작 평소에는 일찍 출발하면서, 오늘은 딱 맞춰서 출발했다.) 이미 기차를 놓쳤다는 사실을 알면서도, 실날 같은 희망을 붙잡고 싶어서 늦게 도착한 1호선 기차를 타고 용산역에 갖지만, 결국 예매한 기차를 놓쳤다. 여기서 배운점은 이미 벌어진 사건에 대해 미련을 갖지 말고, 앞으로 해야할 행동에 집중해야 후회를 덜 한다는 사실을 알게 되었다. 오히려 후회를 덜 하기 위해, 글로 남겨서 앞으로 이런일을 방지하고자 하는 것이 오히려 후회를 최소화 하는 일이라고 생각되어졌다. 이번 일을 통해 후회하지 않은 삶을 살기위한 좋은 경험을 한 것 같다. P.…

Facts 에 대한 개념을 잘 알지 못했다. Feelings 팀원분들이 개발하신 코드가 왜 좋은지 몰라 부끄러웠다. Findings 최상단 컴포넌트에 Wrapper로 를 사용하게 되면 이미 Provider에서 인스턴스화된 값을 내부 컴포넌트에서 사용하면 된다. 즉, 하나의 인스턴스만 참조하고 역할을 분리했으며, 사용부에서 필요한 요소의 의존성을 주입해서 커스텀화하게 사용할 수 있다. 이러한 개발적인 상식을 알아야 동료들의 코드가 왜 좋고 나쁜지 공감할 수 있고, 피드백을 줄 수 있다는 사실을 알게 되었다. ex) React.Context, QueryClient.Provider 참고

Facts graphQL 작동원리에 대해 제대로 인지 하지 못하고 있었습니다. Feelings 그저 막연하게 팀원분이 공유해주신 부분만 알고 개발을 진행하다보니, 요구사항에 맞게 개발하는데 어려움을 느꼈습니다. Findings 파일은 WebStorm이 제공하는 기능을 설정하기 위해 작성된 파일입니다. 는 WebStorm GraphQL Plugin에서 사용하는 것이며, Query를 작성할 때, 를 통해 쿼리 필드 값 추론을 해줍니다. 참고

Facts 개발 실력이 부족함을 느낀다. 주변 팀원분들에 비해 코드를 이해하는 속도나, 무언가를 해결해서 모든 팀원에게 도움을 주는 것 그리고 맥락을 빠르게 파악하는 것이 부족함을 느낀다. Feelings 자괴감이 든다. 근본적인 질문까지 든다. Findings 일단은 에 집착하지 말자. 차분히 생각을 정리하는 습관을 들자. 생각을 잘 정리해서 코드에 녹일 수 있도록 많은 도전을 하자. 해야 할것이 많다고 생각만 하지말고 당장 내가 무엇이 부족한지, 무엇부터 채워야 할지 행동을 하자 DO TS 설계 및 사용이 익숙하지 않다. 그래서 현재 책을 보고 정리하면서, 실무에 쓰고 있는 것들 파악하고, 적용할려고 노력하고 있다. 코드 퀄리티와 코드를 어떻게 작성애햐 성능상에 좋은지에 대한 관련 지식이 없다. 관련 자료를 찾아보고 적용해보자 ex) 프론트엔드 웹 성능 최적화 가이드 Next.js, React, React-Query, JS, HTML, CSS, WEB에 대한 기본 지식을 탄…

Facts 컴포넌트 사이 간격을 조절하는 과정에서 반응형일 때, 지정한 간격 값이 외부에 의해 변하는 문제에 직면했습니다. Feelings CSS를 중요시 여기지 않고 개발한 자신이 부끄러웠습니다. Findings Flex 박스의 유연한 레이아웃을 가능하게 하는 요소는 와 그 중 는 속성을 부여한 경우 적용되지 않음. 기본 값이 1이기 때문에 자동으로 외부에 의해 아이템이 축소될 수 있음. 축소되는 것을 방지 하기 위해 을 선언 하면 됨 참고

Facts 를 하는 과정 중에 에러가 발생하면 구문 안 로직이 실행되지 않았다. Feelings 일단 당황스러웠다. 하지만 차분히 하나씩 찾아보았고, 팀원분들과 함께 분석하였다. Findings 와 다르게, return 타입이 라는 사실을 알게 되었다. 그래서 대신에, 를 사용해서 에러가 발생했을 때, catch구문에서 원하는 로직을 작성할 수 있었다. 또한 Catch 구문의 로직을 작동시키기 위해 fetcher 함수 내부에서 fetcher가 실패했을 때, 와 는 다르다는 사실을 알게 되었다. 결론만 말하면 일 경우에는 Catch구문에 들어가지 않습니다. return을 붙이면 에러의 값을 해서 값을 return하기 때문에 Catch구문으로 가지 않게 된다. 참고 queryClient.prefetch 내용

Facts 에서 redirect 속성 값 중에 가 어떤 역할을 하는지 궁금했다. Feelings 실제로 프로젝트 내부에서 다양하게 사용되어 지고 있었는데, 정확하게 알지 못해 스프린트 개발진행에 있어 기존 코드 분석에 어려움을 겪었다. Findings Permanent 옵션 값에 따라 를 307이나 308로 내려 줌. HTTP Status Code 307 & 308 307 : 임시 리다이렉트(목적지에 가기 위해 잠시 임시로 들리는 곳을 나타냄) 308 : 영구 리다이렉트(목적지에 가기 위해 잠시 들릴 수 있지만, 무조건 목적지를 향함) 기존 method 요청 유지하고 body 안버림 HTTP Status Code 301 & 302 301 & 302는 redirect 시킬 때 get으로 method를 변경하고 body를 버림(이럴 경우 생각한대로 동작이 안됨) 참고 Next.js의 Redirect 속성 값

Facts 이번 스프린트 개발 속에서 를 사용하고 있지만, 작동원리를 제대로 알지 못해 기획의 추가 요구사항에 제대로 대응하지 못했습니다. Feelings 그래서 스스로 답답함을 느껴 팀원분들이 작성하시는 코드를 보면서 이해할려고 노력했습니다. Findings GraphQL Code Generator 정의 Generation of typed queries, mutations, subscriptions and typed GraphQL resolvers 즉, GraphQL에서 가져온 스키마 중에 우리가 필요한 Query에 맞게 타입을 생성해주는 역할 graphql-codegen 의 config 내부 설정 요소 : 재료(GraphQL로 가져온 타입들) : 레시피(어떤 타입을 추출할지 알려주는 것) : 결과물(필요한 타입들) 참고 GraphQL Code Generator Doc

Facts 를 사용하면서 왜 사용하는지 의문이 들었습니다. Feelings 막연하게 사용하고 싶지 않았습니다. 왜 사용하는지 궁금했습니다. Findings 가장 큰 이유는 직관적인 인터페이스 입니다. 예를 들어 이동하고자 하는 path을 하드 코딩으로 아래와 같이 표현 할 수도 있지만, constructing을 사용해서 path를 표현 할 수 있다는 사실을 알게 되었습니다. 또한, 공식문서에서도 강력한 형식의 매개 변수화된 라우팅 경로를 구성하기 위한 도구이며, 하드 코딩된 문자열을 경로로 전달하는 것을 방지하는데 도움을 주는 라이브러리라고 소개되어 있습니다. 참고 ts-routes 공식 문서

Facts 개발을 하는 과정에서 와 를 사용하는 데, 상황에 따라 어떤 것을 써야 하는지 의문이 들었음. Feelings 그래서 개발하면서 아무 생각없이 개발하고 있는 내 자신을 보면서, 올 해에는 이렇게 개발하면 안되겠다는 생각을 하게 됨. 즉, 의식적 노력을 동반한 개발을 해야겠다고 생각함. Findings export 한 파일 내에서 여러 변수들을 export하는 것이 가능 import할 때에는 export할때 사용된 변수명을 동일하게 설정해야한다. 다른 이름으로 할때에는 를 사용한다 export default 하는 곳에서 자유자재로 이름을 붙여 줄 수 있기 때문에, 위험 밑에 처럼 거대한 객체를 내보낼 때, 웹팩에서 이 안됨 즉, 웹팩 입장에서는 다 사용하는 줄 알고 다 번들링 진행(메모리 낭비) 도 웹팩의 옵션을 통해, 을 해줄 수 있다. :사용하지는 않지만 번들에 포함되는 코드들 직접적으로 사용하진 않지만, 다른 코드에 영향을 끼칠 수 있다고 판단되면 고 한다. 이…

Facts 코드숨 과제를 진행하면서 에 가 제대로 할당되지 않는 문제가 발생했다. Fellings 원인은 파악했지만, 1시간 이상 해결하지 못하고 있어 너무나 답답하다. 그리고 일단 이 테스트를 무시하고 과제를 진행해야 해야 할지 고민이 되기도 했다. Findings 이런 경우 어떻게 해야 할지 먼저 트레이너 분에게 물어보고, 더 고민을 할지 아니면, 과제를 진행해야 할지 판단해야겠다. 그리고 구조 분해 할당에 대해 정확한 개념을 집고 사용해야겠다. 막연하게 스스로 알고 있다고 생각했던 부분에서 막혀버리니 더욱 당황하고 마음만 조급해지는 것 같다.

Facts 코드숨 과제를 진행하다가 함수 테스트 코드가 통과되지 않았다. 계속 원인을 찾아보아도 발견을 못해 스스로 초조하고 답답했다. Fellings 잠시 과제를 중단하고, 조금 쉰 다음에 차분히 원인을 하나씩 분석해 보았다. 결국 원인을 발견했다. 의 리턴 값이 빈 배열이다 보니 계속 테스트가 통과되지 않았다. 임시로 의 리턴 값으로 변경하니 테스트 코드가 정상적으로 통과되었다. Findings 앞으로는 어떤 문제에 직면했을 때, 잠시 숨을 고르거나 혹은 잠깐 쉬었다가 다시 문제를 바라보는 것도 좋은 것 같다.

Facts 오늘 회사에서 디자이너 분과 자사 서비스 새로운 디자인에 대해 회의를 진행했다. Fellings 개선해야할 것들에 대해 서로 의견을 내다보니, 신기하게 좋은 아이디어가 나와 뿌듯했다. Findings 평소 앱, 웹 UI/UX에 대해 관심이 있어 관련된 글도 읽고 영상을 보았던 것들이 오늘 많이 도움이 되었던 것 같다. 개발뿐만아니라, 다른 사람들에게 도움을 줄 수 있도록 나의 생각을 적극적으로 공유해야겠다.

Facts 회사에서 하단 모달 필터 기능을 구현했다. 기존 탭에 하단 모달 필터 기능을 구현을 처음 하다 보니, 어떻게 를 공유하고 업데이트하는지 잘 몰라 많이 당황했다. Fellings 그리고 당장 내일 새로운 기능을 배포해야 하니 마음도 조급했다. Findings 팀장님께서 일단, 하나의 탭 안에 를 다루는 로직부터 작성해 보라고 말씀하셔서 구현은 했지만, 무언가 찜찜한 기분이 남아있었다. 문득 밥먹다가 코드숨에서 배운 상태 관리를 통해, 리팩토링할 수 있겠다는 생각이 들었다. 주말에 리팩토링을 해봐야겠다. Facts 코드숨 TIL 쓰는 법 강의를 들었다. Fellings TIL 쓰는 법을 알게 되서 기분이 좋았다. 또한 다른 사람들이 작성한 TIL를 통해, 각자의 시간 속에 느끼는 감정이나 생각들을 들을 수 있어 귀감이 되는 시간이었다. Findings 매일 TIL를 작성하는 것이 좋을 것 같아, 앞으로 TIL를 작성해 공유 해야겠다.