본문 바로가기

전체 글

 (46)
GitHub Flow 이제 알고는 있어야지 오늘 블로그 포스팅에서 다룰 내용은 브랜치 전략 중에 GitHub Flow 전략입니다. 앞전에 제가 TBD에 대해서 소개를 했었습니다. 처음에는 되게 이해하기 어려운 내용들이 많았지만, 이번에는 다른 브랜치 전략을 가져오게 되었습니다. 이번에는 Git Flow가 아닌 GitHub Flow입니다. 어떤 점이 다른지 어느 상황에서 써야 할지에 대해서 한 번 알아보도록 하겠습니다. 이전 TBD나 git flow가 궁금하다면? ⬇️ 이제 git flow는 그만 TBD를 도입해보자.안녕하세요. 이번 블로그 포스팅으로 다룰 내용은 TBD입니다. 기존에 제가 많은 프로젝트를 하면서 git flow 형식을 많이 사용을 했었습니다. 하지만 최근 들어서 조금 안정화가 된 프로젝트와 규ltr2006.tistory.com s..
데이터 바인딩에 대해서 알아보자 안녕하세요, 오늘의 블로그 포스팅 주제는 데이터 바인딩입니다. 양방향 바인딩과 단방향 바인딩 한 번은 들어보셨을 것 같은데, 정확히 어떤 개념인지 잘 모르시는 분들도 많고 내가 쓰는 프레임워크가 과연 양방향일지 아니면 단방향인지도 모르시는 분들을 위해서 오늘의 블로그를 준비했습니다.  데이터 바인딩 (Data Binding)데이터 바인딩은 화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서 바인딩이라고 불리는데, 이러한 바인딩이 서로 간의 데이터를 동기화시키는 것을 데이터 바인딩이라고 합니다. 조금만 더 자세하게 설명을 하자면, HTML에서 서버 or script에서 받아온 데이터를 View에 보여주고 있다가 어떠한 데이터가 변경이 되면 다시 HTML상에 데이터를 변경..
이제 git flow는 그만 TBD를 도입해보자. 안녕하세요. 이번 블로그 포스팅으로 다룰 내용은 TBD입니다. 기존에 제가 많은 프로젝트를 하면서 git flow 형식을 많이 사용을 했었습니다. 하지만 최근 들어서 조금 안정화가 된 프로젝트와 규모가 커진 서비스들이 자리를 잡으면서 유지보수 방면에 있는 서비스 플랫폼들도 존재합니다. 여기서 주변 개발자 지인분들이 TBD를 도입하면 좋을 것 같다.라고 말씀을 해주셔서 "TBD가 뭘까?" 궁금해져서 찾아보게 되었습니다. 먼저 시작하기에 앞서서 평소에도 자주 사용하는 branch 전략인 git-flow 전략을 간단히 설명해 보겠습니다. Git-Flow?우리가 흔히 자주 사용하는 branch 전략 기법 중 하나가 깃 플로우(git flow)라는 것인데, 주로 중대형프로젝트에서 적합한 전략으로 병렬 개발을 위한..
클래스 컴포넌트와 함수형 컴포넌트는 뭐가 다를까? 안녕하세요, 최근에 프론트엔드 신입, 주니어 개발자를 뽑는 공고에 서류 합격을 하여서 서울에 면접을 보고 왔습니다! 기술 면접을 1시간, 컬처핏 면접을 30분 정도 총 1시간 30분 정도를 봤습니다. 근데 기술 면접 중에서 갑자기 훅 들어온 질문이 있었습니다. 그건 바로 "리액트에서의 클래스, 함수형 컴포넌트는 장단점이 각각 무엇이고 어떤 차이가 있는데 구체적으로 설명을 해줄 수 있나요?"라고 질문을 하였다. ES6 이후에 class 형식이 들어오고 확장을 하는 법이나, 작성법에 대해서는 알고 있었지만, 최근 들어서 많은 개발자들이 일반 함수나 컴포넌트를 지향한다. 라고 알고 있었지 왜 그런지는 몰랐다. 그래서 정확히 어떤 차이가 있는지 알아보기 위해서 이번 블로그를 작성을 한다. 클래스형 컴포넌트클래스..
Hi Next 15? 오늘 다뤄볼 내용은 Next.js 15 버전입니다. 최근에 React 19 버전이 업데이트가 되면서, 많은 개발자들 사이에서 화제가 됐었는데, "아니 Next 14 나온 지 얼마나 됐다고 벌써 15가 나올까?"라는 생각이 자주 들고 있다. 나도 프로젝트를 개발하면 React보다는 Next.js 프로젝트가 훨씬 많아서 이번 버전에서는 어떤 것이 추가가 되고 수정이 되었는지 알아보려고 합니다. Next 15?⭐️ React CompilerNext 15 버전에는 React Compiler라는 개념이 도입이 된다고 합니다.React Compiler이란 무엇일까? 🤔React에서는 불필요한 렌더링으로 성능이 저하되는 것을 막기 위하여 내부에서 Memoization을 사용합니다. Memoization은 이미 계산..
Hydrate가 무엇이고 어떻게 해결할까? 오늘 블로그에서 다룰 내용은 제가 최근에 Next에서 개발을 하다가 Hydrate가 발생해서 이러한 개념은 왜 나타나는 것인지, 또 어떻게 해결을 해야 할지 궁금증이 생겼습니다. 많은 개발자들은 이미 많이 들어본 용어가 아닐까 싶습니다. 하지만 이러한 개념이 무엇이고, 어떻게 해결하는지에 대해서 모르거나 더 궁금해하실 개발자님들이 있을 것 같아 이번 블로그에서는 이 Next.js에서 Hydrate가 무엇인지에 대해서 알아보겠습니다! 🔥 먼저, 시작하기에 앞서서 다들 CSR과 Pre-Rendering의 차이는 대충 뭔지 알고 계시죠??간략하게 설명을 해보겠습니다. CSRReact에서는 CSR 방식을 사용하는 거 다들 아시죠? 처음 브라우저가 빈 html 파일을 받아서 실제로 UI에보이지 않다가, 유저의 ..
네이버 지도 Open API 정복하기 최근 들어서 네이버 지도 Open API를 가지고 지도에 관한 토이 프로젝트를 진행하고 있습니다. 아직 정확한 프로젝트의 주제를 잡고 있지는 않고, 그냥 연습 삼아서 사용을 해보고 있는데 재밌어서 많은 사람들에게 소개를 시켜드리고 싶어서 간단하게 오늘 블로그는 네이버 지도 라이브러리를 사용하는 방법에 대해서 설명을 해보려고 합니다.  ⭐️ 네이버 지도 Open API는?네이버 지도 Open API는 기존에 있는 Google, KaKao랑은 다르게 성인 인증을 따로 해야 하고, 신용카드로 결제 수단을등록을 해야 시크릿 키를 알려주기 때문에 다소 복잡한 면이 있는 것 같습니다 🥲  Naver Map Open API를 사용해보자다음 아래의 사이트로 이동을 해서 로그인을 하고 네이버 지도 이용 신청을 클릭해 ..
그냥 함수? 화살표 함수? 뭐가 다를까 오늘 조사를 해볼 내용은 ES6 문법에 나온 arrow function이 기존에 있던 일반 함수인 function과 어떠한 점이 다를지 궁금해서 블로그로 작성을 하게 되었습니다. 지금도 제 주변에서 개발하는 친구들을 보면 그냥 function을 선호하는 경우도 있고 화살표 함수를 사용하는 친구들도 많습니다. 대체 어떤 것이 다르고 개발자들은 어떤 함수 표현법을 더 선호할까요? 함수 선언법 화살표 함수는 기존에 있던 일반 함수에 비해서 더 단순하고 간결하게 작성하는 문법입니다. 작성 방법은 아래와 같은 방법으로 사용합니다. 화살표 함수는 일반 함수에 있는 function이라는 구문과 다르게 익명으로 사용을 할 수 있습니다. 즉 function이라는 이름 없이 선언된 함수를 할당하면 원하는 곳에서 호출이 ..

티스토리툴바