서버리스(Serverless) 아키텍처는 서버 인프라를 프로비저닝하거나 관리하지 않고도 어플리케이션을 배포할 수 있도록 해주는 아키텍처입니다. 이번에는 Next.js에서 서버리스 아키텍처를 이용하여 API 라우팅을 구현하는 방법에 대해 알아보겠습니다.Next.js에서

오랫만에 유노님의 짤을 보며 항상 대충이라는 벌레를 경계하며 시작해본다! 면접을 준비하면서 많이 접했던 주제이고 대략적으로 알고 있지만, 한번 쯤 스스로 정리 하고 싶었던 csr과 ssr에 대해 이번 기회를 통해 정리하려고 한다! 구글에서 저공하는 web.dev에

클린한 자바스크립트 코드에 대한 갈증을 느끼던 나블랙커피 스터디에 참여하게 되었다. 바닐라 자바스크립트로 카페 메뉴판을 만들며스터디원들과 서로서로 코드 리뷰를 하며 진행이 된다!우리팀은 6명인데 경력이 있으신분도 많고 취준하고 계신분도 있다.첫 주차에는 메뉴판에 메뉴를

안녕하세요~ 이번 주에 구름에듀에서 김버그선생님의 강의를 들으면서 새로알게된 CSS 속성과 팁들을 스스로 기억하기 위해 기록한다. 누군가에게는 쉽고 당연할 수 있는 내용들이지만 누군가에게는 나처럼 도움을 받을 수 있길! 1) SVG를 사용했을 때 좋은 점 중에 하

꽤 오래전부터 듣기만 했던 scss와 styled-component에서의 mixin을 한번 알아보고자 정리를 해보았다!사실 10개월간 회사에서 styled-component를 쓰면서 믹스인을 쓴적은 없지만 이전부터 css를 간결하게 써보고 싶었던 욕구를 해소해보고 싶어

알고리즘 k번째 수 문제를 오랫만에 다시 풀어보면서 그동안 헷갈렸던😵‍💫스시리즈 메서드 삼대장 splice slice split를 한번 정리해봐야겠다는 생각이 들었따!오랫만에 MDN을 정독하면서 메서드를 꼼꼼히 살펴봤다.정리를 그다지 깔끔하게는 하지 못했지만 MDN

오늘은 자바스크립트 ES6에서 추가된 데이터 타입의 종류 맵과 셋에 대해서 정리해보려 합니다.아래 내용에서 <정재남> 님이 쓰신 <코어자바스크립트> 책을 참고하여 블로그 글을 작성했습니다.참고 부탁드립니다.자바스크립트의 데이터 타입은 크게 기본형과 참조형이

시간을 거슬러 2017년 겨울. 대학교 4학년 시절 문화콘텐츠를 전공하면서 졸업작품으로 어플리케이션을 기획하고 인천 섬 여행 홍보영상을 제작했다. 졸업전시에서 앱을 기획한 것은 동기 중에 내가 처음이였다. 내가 기획했던 서비스는 시각장애인과 동행자를 위한 오디오 투어

😎들어가며 어느덧 인썸니아에서 인턴으로 보낸 한 달이 훌쩍 지나갔다. 원래 프론트엔드 개발자로 시작하려 했었는데🧐 우연의 기회로 풀스택 개발 인턴을 하게 되었고, 이것도 새로운 기회다 싶어 도전해보게되었다.🤟 높은 진입 장벽에 여러번 깜깜한 동굴에서 부딪히기도

2차 프로젝트가 끝나고, 인썸니아 기업에서 기업협업을 한 달간 진행하게 되었다!백엔드에 대한 벽을 언젠가는 넘어야겠다고 생각했었는데, 생각보다 빨리 맞닥드리게 되었다.빠밤!1주차에 데이터베이스 모델링을 하고 리뷰 받은 내용을 정리해보려 한다.모델링을 할 때 원래 AQu

👉프로젝트 소개 2차 프로젝트로 원티드 사이트를 모티프로 개발자를 위한 채용정보 웹서비스의 기능들을 구현해보았다. 이번 2차 프로젝트는 클래스형 컴포넌트가 아니라 함수형 컴포넌트와 HOOK을 이용하여 리액트를 더 능숙하게 써볼 수 있는 기회였다. 모티프로 한 원티드

2차 프로젝트 겟원티드를 시작한지 1주차! 이번에는 로그인과 회원가입을 구현해보았다. 2차 프로젝트는 클래스형 컴포넌트 대신 함수형 컴포넌트를 써보면서 익숙해 지는데 시간이 조금 걸린 것 같다.styled 컴포넌트도 써보면서 처음에는 불편했지만 익숙해지고 나니 css에

러쉬 클론 코딩 프로젝트에서 setstate의 비동기적 특성부분에 대해 알아가면서 에러를 고치고 리팩토링한 코드를 정리해보려한다!처음에는 componentDidMount()에서 if 문으로 activeTab의 state 값에 따라 fatch를 하는 코드를 두 번 작성했

위코드 1차 프로젝트로 러쉬 코리아 웹을 클론코딩 했다. 예전부터 UI가 깔끔하고 신선한 이벤트가 많은 러쉬코리아를 클론해보고 싶어 제안했었고, 여러 다른 후보들 중에 감사하게도 투표 결과 채택되었다. 리액트로 2주간 프론트엔드 3명 백엔드 3명의 팀원과 함께 진행했다

풀이

클론 프로젝트를 시작하면서 상품리스트페이지와 상품 디테일 페이지 부분을 구현하고 있다! 기능을 구현 하면서 리액트의 라이프 사이클을 생각하면서 조건부 렌더링을 썼던 나의 코드를 리뷰하고자 한다! 아래와 같이 조건부 렌더링을 추가했다.그런데 코드 리뷰를 받아보니 여기서

리액트 1차 프로젝트로 러쉬페이지 클론 프로젝트를 시작했다.어느덧 프로젝트를 시작한 지 1주차 리팩토링 한 코드를 스스로 리뷰 해보려 한다. 상품 디테일 페이지에서 최소 수량을 1개 부터 최대 수량이 20개 까지 조정할 수 있도록 기능구현한 부분에 대해 리팩토링했다.

주어진 숫자 배열에서, 0을 배열의 마지막쪽으로 이동시켜주세요.원래 있던 숫자의 순서는 바꾸지 말아주세요.(새로운 배열을 생성해서는 안 됩니다.)Input: 0,1,0,3,12Output: 1,3,12,0,01) 먼저 배열에서 특정요소 0의 값을 제거해야한다.특정요소의

로그인과 댓글 추가 기능을 구현하면서 두 가지 방법으로 구현을 하는 과정을 거쳤다. 우선 첫번째는 자바스크립트로 직접 DOM에 접근하여 DOM 요소들을 직접 생성하고 조작하는 방법이다. 이 방법은 자바 스크립트가 출현한 2세대 웹에서 웹을 동적으로 만들어 주는 것과

2021년 04월 07일 오후3시 벡엔드로부터 첫 데이터를 받아왔다!역사적인 순간을 기념하며 fetch 함수 사용법과 수정한 코드를 기록하려한다.실무에서는 fetch함수 보다는 axios 라이브러리를 많이 쓰지만, http 통신의 요청과 응답에 대한 이해가 더 중요한데