기존의 Hello World 프로젝트를 Next.js로 마이그레이션을 하기로 했다. 마이그레이션과 함께 CI/CD를 도입하기로 팀원과 의견을 나누었고 AWS와 Jenkins를 사용하기로 결정했다. 그 전에 클라우드와 CI/CD에 대해 알아보자.비즈니스의 비용 절감과 생

🤔 공식 블로그를 읽게 된 계기? 최근 2주간 러버덕 중심으로 Be real FE 스터디 친구들과 공부하고 있다. 이번에는 Event Handler html에 달렸었는데 어떠한 이슈로 가장 가까운 div?에 달리도록 Event Pooling 이전에는 이벤트 풀링을

🤔로그인 인증 왜 하는 거지? 맨 처음 로그인 기능을 구현했었을 때 단순히 사용자가 정보를 입력하고 이를 서버에서만 확인하는 것이라고만 생각했었다. 하지만 프론트 개발을 점차 공부하면서 어떻게 사용자 세션을 유지할 것인지가 중요하다는 것을 알았다. 왜냐 HTTP 통신

🤔 렌더링 성능 최적화란? React.memo 고차 컴포넌트(Higher Order Component) 컴포넌트가 불필요한 재평가가 이루어지는 것을 막기 위해 사용. React.memo로 랩핑된 컴포넌트는 결과를 메모이징(Memoizing)하여 성능을 향상시킴. 컴

회원가입을 위해 필요한 것들 : 간략한 설명 및 필요한 이유 MongoDB Next-auth : 소셜로그인을 쉽게 관리할 수 있는 라이브러리. OAuth 비밀번호 복호화? 암호화를 위한 필요한 패키지 jwt credentials 1.next-auth 설치 몽고 디비

기초 4. Generic 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법. 제네릭을 사용하는 이유 자료구조에서 유용하게 사용할 수 있다 any를 타입으로 지정하면 저장하고 있는 자료의 타입이 모두 같지 않다는 문제점이

doWork를 Next.js로 마이그레이션 중, snack bar 컴포넌트를 createPortal를 써서 구현하려고 했다. 그러던 중 만난 아래와 같이 document is not defined... '왜 오류가 났을까?'하며 원래 코드부터 분석하기로 했다.내가 작성

2021년 10월, React에 대해 기반 지식을 다지고자 프로젝트를 시작하였다가 끈기있게 개발하지 못했었다. 그 후 2022년 9월 부트캠프를 마치고 부족한 부분들과 미구현했던 기능들을 추가하기로 마음 먹었다. 이에 타입스크립트와 웹팩 설정을 복습 겸 추가하여 다시

5명이서 자발적으로 아이디어를 내서 약 한 달동안 진행한 프로젝트가 마무리되었다. 프로젝트한 소감 스터디를 하면서 좋은 아이디어가 나오게 되어 같이 합류하여 프로젝트를 하게 되었다. 다같이 노력한 만큼 좋은 결과물이 나와서 기쁘고 무엇보다 여러 사람들의 지식이 공유됨

헬로워드 회고록 적기

개발의 민족 회고록 적기

Q. 🤔 이전에 나에게 build란? 나에게 build는 단순히 배포하기 전에 거쳐야 하는 단계. 당연히 거쳐야 하는 단계라는 생각에 뭐하는 단계이지? 왜 쓰는 거지? 와 같은 의문을 가지지 않았다. 이번에 팀 프로젝트를 webpack으로 build하면서 나오는 오

개발을 하면서 무수히 많은 폼 요소들을 마주한다. 이 요소들 중 원하는 input요소에 focus를 하기 위해 DOM요소를 어떻게 제어해야될 지에 대해 고민하게 된다. ref라는 프로퍼티를 익히고 이를 해결해보자.ref는 render 메서드나 return값으로 생성된

🤔왜 React는 SEO가 힘들까? Dom에서 보여지는 것과 내가 처음에 만든 오리지널 HTML과 차이가 있기 때문이다. 이는 React뿐만 아니라 SPA로 구현되는 페이지에서 나타나는 현상이다. 검색 엔진 봇이 코드가 동적으로 추가되기 이전의 HTML 초기 컨텐츠를

일급 객체 무명의 리터럴로 생성 === 런타임에 생성 가능 변수나 자료구조에 저장 함수의 매개 변수에 전달 가능 함수의 반환값으로 사용 가능 함수 자바스크립트의 함수는 위의 조건을 만족 => 함수는 일급 객체. 객체와 동일하게 사용할 수 있다는 의미. 함수의 매개 변

🤔 JSX와 portals? JSX? JS를 의미하는 건가? 뒤에 x과 붙은 건 무슨 의미일까 궁금해진다. portals은 react에서 어떻게 쓰이고 있는 걸까? 오늘의 공부 주제들은 흥미롭다. 예시를 학습하며 공부해보도록 하자. JSX UI를 가독성있게 짤 수

🤔상태관리를 위한 useReducr? 상태관리를 하는 방법들은 많다. 흔히 useState를 통해서 관리할 수 있고 context를 사용하여 전역변수로 사용한다던가 Redux와 같은 라이브러리를 사용하기도 한다. 이 수많은 상태관리 방법 중에 useReducer를 사

🤔 객체 지향 프로그래밍?? 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 '객체(object)'라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다. 객체란 하나의 역할을 수행하는 '메소드와 변수(데이터)'의 묶음으로 봐야

식별자가 유효한 범위 또는 식별자를 검색할 때 사용하는 규칙.변수나 함수, 함수의 매개 변수 등과 같은 식별자는 선언된 위치가 중요. => 식별자 참조 여부가 결정됨. 스코프를 통해 식별자의 이름 충돌을 방지할 수 있음. => 다른 스코프 내에서 같은 이름의 변수 사

🤔 왜 자바스크립트에 없을까? 이번에 다룰 인터페이스는 자바스크립트 환경에서는 다뤄지지 않는다. 이는 인터페이스가 타입 체크가 목적이기 때문이다. 타입 체크는 컴파일시 타입이 결정되는 정적 타입 언어에서 가능하다. 그렇기에 동적 타입 언어인 자바스크립트에서는 인터페이