티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

Terry의 개발파도
검색하기
블로그 홈

블로그 홈

Terry의 개발파도

world-developer.tistory.com/m
신고

깊게 공부하려고 노력합니다.

구독자
3
방명록 방문하기
구독하기

주요 글 목록

  • 프론트엔드 면접 모아보기1 1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다. 2. 자바스크립트의 동작 원리에 대해 설명해주세요.자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립.. 공감수 3 댓글수 2 2024. 11. 27.
  • 프론트엔드 면접(배열) 1. 자바스크립트 배열에 대해서 설명해주세요.자바스크립트의 배열은 순서가 있는 리스트 형태의 배열입니다. 따라서 여러 값을 하나의 자료구조에 저장할 수 있습니다. 자바스크립트 배열은 동적 배열이기 때문에 크기를 미리 지정해 놓지 않아도 되며, 요소를 자유롭게 추가하거나 제거할 수 있습니다. 요소를 추가할 때마다 배열의 크기가 자동으로 조절되는 방식으로 동작합니다. 또한 배열은 자바스크립트의 객체와 유사한 방식으로 관리됩니다. 해시 테이블과 같은 형태로 구현되어 있어, 배열 요소들은 메모리 상에서 연속적이지 않아도 되고, 배열 크기를 미리 지정하지 않아도 사용할 수 있습니다.마지막으로 내장된 메소드를 사용하여 배열을 쉽게 조작할 수 있습니다. 예를 들어 reduce, map 등의 메소드가 존재합니다.정리하.. 공감수 0 댓글수 0 2024. 11. 26.
  • 프론트엔드 면접(의존성배열) 1. useEffect 사용 시 의존성 배열에 빈 배열을 넣는 것을 지양해야 하는 이유는 무엇일까요?useEffect는 의존성 배열로 전달한 값의 변경에 의해 실행되야 하는 훅입니다. 그러나 의존성 배열에 값을 전달하지 않고 단순히 최초 렌더링 때 한 번 실행하도록 한다면 이 콜백 함수로 인해 발생하는 부수 효과가 실제로 관찰해서 실행돼야 하는 값과는 별개로 작동한다는 것을 의미하기 때문에 빈 배열을 넣는 것은 useEffect 훅의 취지와 맞지 않습니다. 공감수 0 댓글수 0 2024. 11. 25.
  • 프론트엔드 기술 면접(heap, CI/CD) 1. 힙에 대해 설명해주세요.힙은 동적 메모리 할당에 사용되며, 프로그램 실행 중에 메모리 크기가 결정됩니다. 힙에 할당된 메모리는 개발자가 직접 관리해야 하며, 사용이 끝난 메모리는 명시적으로 해제해야 합니다.2. CI/CD에 대해 설명해주세요."지속적인 통합/지속적인 서비스 제공 또는 배포 CI(Continuous Integration)/CD(Continuous Delivery, Continuous Deployment)"의 약자입니다.`지속적인 통합(CI)`은 코드 변경사항을 정기적으로 빌드 및 테스트를 거쳐 공유 레포지토리에 통합하는 것을 의미합니다. 협업에서 발생할 수 있는 conflict를 수시로 확인하고 해결이 가능하며, 새로운 업데이트의 테스트와 출시 시간을 단축시킬 수 있습니다.`지속적인 .. 공감수 0 댓글수 0 2024. 11. 24.
  • 프론트엔드 면접(script 코드의 위치) 1. 코드는 태그와 태그 중에 어디에 들어가는 것이 좋은 것 같은지 본인의 생각을 말해주세요.자바스크립트 파일의 크기와 사용성에 따라 다를 수 있지만 파일의 크기와 사용성이 비슷하다면 태그 제일 하단에 들어가는 것이 좋습니다. 렌더링 엔진은 HTML을 읽어 DOM을 생성합니다. 생성중 script 태그를 만나게 되면 코드 파싱 제어권이 렌더링 엔진에서 자바스크립트 엔진으로 넘어가게 됩니다. (이를 blocking이 일어났다고도 합니다) 이후에 자바스크립트 파싱과 실행이 종료되면 다시 렌더링 엔진으로 제어권이 넘어가 HTML 파싱이 중단된 시점부터 다시 DOM 생성을 시작합니다.결국 코드를 만나게 되면 위에서 아래로 동기적으로 이루어지던 파싱이 중단된다는 의미이고 블로킹되는 것은 DOM 생성을 지연시킬 수.. 공감수 0 댓글수 0 2024. 11. 23.
  • 프론트엔드 면접(render, commit단계) 1. 리액트의 render phase와 commit phase에 대해서 설명해주세요.리액트의 랜더링 과정은 render phase과 commit phase로 나뉩니다. render phase에서는 DOM에 그려질 요소들을 파악하는 단계입니다. 이때 재조정 과정을 거치게 됩니다. 재조정 과정에서 이전에 생성한 가상 DOM 트리와 새로 만든 가상 DOM 트리를 비교해서 실제 DOM 트리에 반영할 변경 사항을 파악합니다. 그리고 상태 업데이트가 발생한 컴포넌트를 호출해 새로운 가상 DOM트리를 만듭니다.다음으로 commit phase에서는 render phase에서 진행한 두 가상 DOM트리의 변화를 실제 DOM에 적용하는 단계입니다. 요약해서 render phase는 변경된 사항을 파악하는 단계이고, com.. 공감수 0 댓글수 0 2024. 11. 22.
  • 프론트엔드 면접(hydrate, render) 1. hydrate란 무엇인지와 render와의 차이점을 설명해주세요.hydrate함수는 생성된 HTML 콘텐츠에 자바스크립트 핸들러나 이벤트를 붙이는 역할을 합니다.render와의 차이점은 다음과 같습니다.hydrate는 이미 렌더링된 HTML이 있다는 가정하에 이 렌더링된 HTML을 기준으로 이벤트를 붙이는 작업만 수행합니다. 하지만 render는 빈 HTML에 정보를 요소들을 렌더링하며 여기에 이벤트를 붙이는 작업까지 모두 한 번에 수행합니다. 공감수 1 댓글수 0 2024. 11. 21.
  • 프론트엔드 면접(클래스) 1. 자바스크립트 ES6에서 클래스는 무엇인가요?클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성됩니다. 그런데 ES6에서 클래스는 함수의 한 종류입니다. 그렇기 때문에, 함수와 동일하게 클래스 선언(Class declarations)과 클래스 표현(Class expressions)으로 클래스를 만들 수 있습니다. 공감수 1 댓글수 1 2024. 11. 20.
  • 프론트엔드 면접(브라우저 렌더링) 1. 브라우저 렌더링 파이프라인에 대해서 설명해주세요.- 알고있는 내용 먼저 브라우더는 HTML을 파싱하여 document object model, 즉 DOM을 생성합니다. 이때 css 파일을 만나면 DOM생성을 잠시 중단하고 파싱하여 CSSOM을 생성하고, 자바스크립트 파일을 만나면 역시 DOM생성을 중단하고 자바스크립트를 파싱합니다. 모든 코드를 파싱하면 DOM과 CSSOM을 합쳐 렌더트리를 생성합니다. 마지막으로 레이아웃과 페인트 과정이 진행되며 웹페이지를 그리는 순으로 렌더링이 진행됩니다. - 매일메일로 보충한 내용 브라우저 렌더링 파이프라인은 브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정을 의미합니다. 저는 이 과정을 5단계로 나눠 설명해보겠습니다. 첫 번째로 DOM트리 생성 단계입니다.. 공감수 0 댓글수 0 2024. 11. 19.
  • 프론트엔드 면접(HTTP 통신) 1. HTTP 통신에 대해서 설명해주세요.HTTP는 HyperText transfer protocol로 웹에서 정보를 주고받을 수 있는 프로토콜입니다. 그래서 클라이언트와 서버간에 통신을 가능하게 합니다. 클라이언트가 서버로 웹페이지나 데이터를 요청하면 서버는 클라이언트에게 요청받은 웹페이지나 데이터를 전송하게 됩니다.2. HTTP의 stateless에 대해서 설명해주세요.HTTP 통신은 stateless의 특징을 가지고 있습니다. stateless는 이전 요청의 결과, 즉 상태를 저장하고 있지 않음을 의미합니다. 따라서 모든 요청은 독립적인 특징을 가지고 있습니다.3. HTTP 프로토콜의 request와 response 구조에 대해 설명해보세요.HTTP request를 보낼때는 구조에 맞게 보내야 하는.. 공감수 1 댓글수 1 2024. 11. 18.
  • 온라인 디그리 졸업전시회 프로젝트 회고(24.08-24.11) 매년 10월에 한동대 디자인학부의 큰 행사인 디그리 행사가 진행한다. 콘디 학생들의 1년동안의 노력이 담긴 작품들을 전시하고 많은 관계자들이 참여하는 큰 행사이다. 콘디 학생이 아니기 때문에 도록을 만드는 이유는 모르겠지만, 우리학교는 종이도록을 통해 전시회 이후에도 작품 감상이 가능했다. 하지만 이러한 아날로그 방식은 도록을 가지고 있는 사람에게만 작품이 노출된다는 점에서 불편함이 있다. 따라서 디자인학부측은 종이도록을 없애고 온라인 졸업전시회를 기획하게 되었다. 파드에서 운영진으로 활동하던 나는 외주 요청으로 들어온 온라인 졸업전시회를 1인 개발자로 맡게 되었다. 개발팀을 꾸려 협업할 수도 있었지만, 졸업 이후 원격으로 소통해야했기 때문에 소통리소스가 개발보다 많이 들 것 같았고, 0to1 서비스 개.. 공감수 2 댓글수 0 2024. 11. 17.
  • 프론트엔드 면접(props, state) 1. 리액트의 props와 state에 대해 설명해주세요.props는 부모컴포넌트에서 자식 컴포넌트로 전달하는 데이터로 전달된 데이터는 자식컴포넌트에서 수정이 불가능합니다. 이를 통해 컴포넌트 간에 데이터 흐름의 예측이 가능하고 데이터를 바꿀 수 없기때문에 컴포넌트를 재사용할 수 있습니다. state는 컴포넌트 내에서 관리되는 데이터로 setState로 값을 변경할 수 있으며 값이 바뀔때마다 리랜더링이 이루어 집니다. 따라서 state가 변경되면 리랜더링을 통해 UI가 업데이트 됩니다. 공감수 1 댓글수 1 2024. 11. 16.
  • [트러블슈팅] Layout Shift 해결하기 온라인 전시회를 무탈하게 운영하고 (운영하는 동안 큰 이슈가 없었고 사용자 피드백을 받으며 계속 개선해나아갔다!) 링크드인에도 글을 올리며 운영 경험을 포함해 웹사이트를 홍보했습니다. 프로그래머스 데브코스를 하면서 만난 훌륭한 멘토님이 계시는데, 여쭤볼 것이 있어서 이것저것 여쭤보다가 멘토님도 링크드인 게시글을 확인했다며 개선 사항들을 추천해주셨습니다. 그 중 하나가 Layout Shift!!Layout Shift로 인한 문제점링크드인으로부터 처음으로 웹사이트를 접속하는 사용자(특히 데스크탑 사용자)들은 웹성능이 캐시된 데이터를 사용자는 사용자보다 좋지 않았습니다. 따라서 데스크탑 첫 화면에 로딩되는 비디오가 느리게 로딩되었고, 이로 인해 로고 이미지가 위로 올라오는 Layout Shift 문제가 발생하.. 공감수 1 댓글수 1 2024. 11. 15.
  • Frontend 이미지 최적화하기 이미지 최적화를 하게된 계기한동대학교 온라인 졸업전시 프로젝트(One In Christ)에 1인 개발자로 참여했습니다. 참여하겠다고 생각한 순간부터 가장 먼저 떠오른 생각은 이미지 최적화였습니다. 왜냐하면 디자인학부 졸업 전시회의 특성상 이미지를 가장 많이 사용하고, 디자인 작품이다보니 이미지 용량이 20MB 이상 차지하는 것이 대부분이라 웹 성능에 영향을 미칠 것이라고 생각했기 때문입니다. 특히 작품들이 나열되어 있는 works 페이지의 경우 여러 작품들이 한 번에 로딩되어야 하기 때문에 웹서버로부터 이미지를 요청하고 응답받는 데 시간이 오래걸릴 것이라 예상했습니다. 이는 웹사이트의 성능을 낮추기 때문에 좋지 않은 사용자 경험을 야기할 것이라고 판단했습니다.이미지 최적화 방법1️⃣ 이미지 포맷 변경(.. 공감수 4 댓글수 4 2024. 11. 14.
  • 프론트엔드 면접(이벤트 루프) 1. 이벤트루프에 대해 설명해주세요.이벤트 루프는 자바스크립트 엔진이 비동기 작업을 처리하는 방식입니다. 자바스크립트는 싱글스레드 기반으로 동작하기 때문에 모든 작업들은 하나씩 처리되고, 콜스택에 작업이 쌓이게 됩니다. API를 통해 데이터를 받거나 오래걸리는 작업 등의 처리를 위해 비동기 처리가 필수적으러 이루어져야 하는데요, 이때 Web API를 통해 비동기 작업이 이루어질 수 있습니다. 콜스택에 비동기 작업이 실행되면 비동기함수는 Web API를 호출하고 Web API는 Task queue라고도 하는 Callback Queue에 콜백 함수를 넣습니다. 이벤트 루프는 콜스택과 콜백큐를 계속 확인하여 콜스택에 있는 작업을 우선적으로 처리하고 콜스택이 비면 콜백큐에 있는 작업을 콜스택에 넣어 처리하는 방.. 공감수 0 댓글수 0 2024. 11. 13.
  • 프론트엔드 면접(이미지 최적화) 1. 이미지 최적화 경험이 있던데 어떤 방식으로 진행되었는지 설명해주세요.온라인 졸업전시 사이트를 운영하며 이미지 최적화를 진행했습니다. 20MB이상의 용량이 큰 이미지를 주로 사용하고 있던 졸업작품 사이트의 특성을 고려하여 사용자가 긴 로딩없이 빠르게 작품을 감상할 수 있도록 이미지 최적화를 진행했습니다. 먼저 파일 포맷을 변경하는 작업을 진행했습니다. webp 포맷을 사용하여 용량을 개선했는데요, webp 포맷은 구글에서 발표한 포맷으로 압축 효과가 좋아 많은 용량을 줄일 수 있기 때문에 png 포맷에서 webp로 변경하게 되었습니다. 그 결과 png 포맷일때보다 31%의 용량 개선이 있었습니다.  두번째로 이미지 사이즈가 실제 웹사이트에서 사용하는 것보다 1.5배정도 큰 사이즈로 사용되고 있어서 웹.. 공감수 0 댓글수 0 2024. 11. 12.
  • 프론트엔드 면접(실행컨텍스트, 스코프 체인) 1. 실행컨텍스트에 대해 설명해주세요.실행컨텍스트는 자바스크립트에서 코드가 실행되는 환경을 의미합니다. 함수와 같이 자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 실행컨텍스트가 존재합니다.실행컨텍스트는 자바스크립트가 처음 실행될 때 전역으로 먼저 생성되고, 함수가 호출될 때 역시 생성됩니다. 이러한 실행 컨텍스트는 생성될 때 콜스택에 쌓이게되며 함수가 종료되거나 프로그램이 종료될 때 사라지게 됩니다.2. 실행컨텍스트는 어떤 구성 요소로 이루어져 있나요?실행컨텍스트는 변수 객체와 스코프체인, this 로 구성되어 있습니다.먼저 변수 객체는 실행 컨텍스트 내에서 사용되는 변수와 함수의 선언을 저장하는 공간입니다.스코프 체인은 현재 실행 중인 컨텍스트와 외부 렉시.. 공감수 0 댓글수 0 2024. 11. 11.
  • 프론트엔드 면접(reflow, repaint) 1. reflow와 repaint의 차이점에 대해 설명해주세요.reflow와 repaint는 모두 렌더링과 관련이 있습니다. 화면이 리랜더링 됐을 때, 각 상황에 따라 reflow와 repaint가 일어나게 됩니다. reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 의미하고 repaint는 계산 결과를 바탕으로 화면에 다시 그리는 과정입니다. reflow는 DOM의 구조가 변경되거나 요소의 크기나 위치가 변경될 때 일어납니다. repaint는 레이아웃은 그대로이고 색상이나 배경 등의 스타일만 변경되었을 때 일어납니다. 레이아웃을 다시 계산하는 reflow가 일어나면 repaint가 필연적으로 일어나기도 하고, reflow는 비용이 더 들기 때문에 레이아웃 계산이 다시 일어나지 않도록 관리.. 공감수 0 댓글수 0 2024. 11. 10.
  • 프론트엔드 면접(클로저, 클로저의 단점) 1. 클로저에 대해 설명해주세요.클로저는 선언됐을때 그때의 렉시컬 스코프를 기억하는 함수입니다. 자바스크립트에서 모든 함수들을 Environment라는 프로퍼티를 가지는데 여기에 외부 함수의 변수의 참조값이 저장되어 외부 함수의 변수에 접근이 가능합니다.https://enjoydev.life/blog/javascript/6-closure JavaScript의 클로저(Closure)란? (feat. React의 useState)JavaScript의 클로저의 원리를 쉽게 배워보고 어떤 상황에 사용되는지 알아보도록 하겠습니다.enjoydev.life2. 클로저의 단점과 해결방법에 대해 설명해주세요.클로저는 외부환경의 변수를 계속 기억하고 있기 때문에 가비지컬랙터의 대상이 되지 않아 메모리 누수가 일어날 수 있.. 공감수 5 댓글수 5 2024. 11. 9.
  • 프론트엔드 면접(Sync, Async, 자바스크립트의 동작 원리, Call Stack, TaskQueue, Event Loop) 1. Sync, Async의 차이점(동기, 비동기의 차이점)에 대해서 설명해주세요.Sync는 작업 요청이 이뤄지고, 요청 응답을 기다리는 것을 의미합니다. Async는 특정한 요청의 응답을 기다리지 않고 다음 작업을 수행하는 것을 의미합니다. 자바스크립트는 기본적으로 싱글스레드이기 때문에 요청된 작업을 하나씩 수행하지만 setTimeout이나 fetch과 같은 Web API를 사용하여 비동기로 처리할 수 있게 됩니다. 2. 자바스크립트의 동작 원리에 대해 설명해주세요.자바스크립트는 자바스크립트 엔진 위에서 동작하는데요, 대표적으로 구글의 V8엔진이 있습니다. 자바스크립트 엔진은 메모리힙과 콜스택으로 구성되어 있습니다. 메모리 힙은 변수, 함수 등 메모리 할당이 이루어지는 공간입니다. 콜스택에는 자바스크립.. 공감수 0 댓글수 0 2024. 11. 8.
  • 제54회 SQLD 합격 후기(전공자, 다른 일 하면서 7일 공부) SQLD 시험본 지 벌써 3달이나 지났네요.. 그땐 엄청 더웠는데 지금은 온도가 0도까지 내렸갔습니다. 다들 감기 조심하셔요!! 더 추워지기전에 후기를 남겨놓지 않으면 평생 못남길 것 같아 늦었지만 남겨봅니다!!저와 비슷한 스팩으로 시작하신 분들은 이 글이 도움이 되실 것 같습니다!!1. 컴퓨터공학 전공 2. Database 수업을 잘 따라갔던 수준 3. 기본 명령어(DML, DDL, TCL 등) 사용 경험이 있음📝 SQLD 시험 정보, 합격 기준SQLD는 두과목으로 나눠지고 총 60점 이상 받아야 합격입니다. 하지만 과목별로 40% 미만 취득하면 과락으로 떨어집니다. 데이터 모델링의 이해 과목은 문항수가 적지만 공부안하면 과락될 수 있으니 꼭 공부하고 가시길 바랍니다 :)✏️ 7일 공부어제 뭐 먹었는지.. 공감수 5 댓글수 4 2024. 11. 7.
  • AWS cloudfront 배포 화면이 S3 결과와 다른 이유(feat. 무효화) S3의 업데이트된 정적 리소스는 최신 상태인데, cloudfront의 배포 결과는 이전 배포 결과인 문제를 겪어보신 적 있으신가요? 저는 최근에 해당 원인을 몰라 새벽 내내 해맸던 경험이 있어 제가 겪었던 어려움을 똑같이 겪고 계신 분들을 위해 해결하는 방법을 기록하려고 합니다! 문제S3와 cloudfront를 성공적으로 연동하고 도메인을 이용하고 있다가, 프로젝트의 업데이트가 필요해서 새로 배포를 진행했습니다. 그런데 S3 정적 리소스는 업데이트된 버전이 잘 나오지만, 실제 도메인이 보여주는 리소스는 업데이트하기 전의 리소스였는데요, 이는 cloudfront로 배포된 S3 정적 리소스들이 AWS 엣지 로케이션에 전송되어 아직 새로 업데이트가 되지 않았기 때문입니다. 이 엣지 로케이션의 캐시는 24시간으.. 공감수 5 댓글수 3 2024. 10. 13.
  • VSCode Vitest "이 작업 영역에서 아직 발견된 테스트가 없습니다." 오류 해결 vitest 라이브러리 설치와 extension 설치, 테스트 코드 작성까지 모두 다 한 이후, vitest extention을 이용하여 테스트를 실행하려고 할때 아래 이미지와 같이 테스트 항목이 뜨지 않는 오류가 있었다.해당 이슈를 겪고 있는 사람들이 꽤나 많이 있다.https://github.com/vitest-dev/vscode/issues/196 Vitest extension completely non functional on mac · Issue #196 · vitest-dev/vscodeDescribe the bug Vitest completely fails to work on any of my vitest repos To Reproduce Steps to reproduce the behavi.. 공감수 0 댓글수 0 2024. 9. 20.
  • [Docker] docker: Error response from daemon: Ports are not available | address already in use 포트충돌 해결 컨테이너를 실행하려는 도중 3000번 포트가 로컬에서 이미 사용중이어서 포트충돌(이미 사용중) 오류가 났다. 열려있는 port 닫고 새로 실행하는 방법1) 열린 포트 확인하기sudo lsof -PiTCP -sTCP:LISTEN2) 특정 포트 확인하기sudo lsof -i :[port]sudo lsof -i :3000 // example3) 포트 닫기특정 포트를 확인한 결과에서 PID를 이용하여 특정 포트를 닫아줄 수 있다.sudo kill -9 [PID] 이후 컨테이너를 실행하면 특정 포트에 대한 연결이 잘 이루어질 것이다. 더보기참고https://jongsky.tistory.com/41 (Mac) port 확인 방법 및 5000 port 삭제 방법1. 글을 작성하게 된 계기 docker-compose를.. 공감수 0 댓글수 0 2024. 9. 20.
  • AWS 프리티어 적용 범위 이미지 최적화를 위해 AWS S3와 CloudFront를 통한 CDN서비스를 이용하려고 한다. 나는 아직 프리티어 계정이 유효하기 때문에 S3와CloudFront의 제공 범위에 대해서 기록해놓고 과금이 나오지 않도록 조심해서 사용해보려고 한다. Amazon CloudFront (AWS의 CDN서비스)프리티어와 관계없이 모든 고객에게 월 1TB 데이터 송신, HTTP/HTTPS 천만건, CloudFront 함수 200만건 무료Amazon S312개월 동안 5GB 제공, GET 요청 20000건, PUT 요청 2000건 중요한 것은 아직 저 건수가 너무 추상적이다,, 실제로 돌려보고 체감을 해봐야 실제로 어느정도의 사용량이 있을 지 알 수 있을 것 같다. 해킹으로 인한 과금과 무료로 제공되는 지원을 넘었을 .. 공감수 1 댓글수 0 2024. 9. 13.
  • FE 프로젝트 아키텍처에 대한 고민(feat. FSD 아키텍처) 프로그래머스 최종 프로젝트에서 프론트엔드 폴더구조에 대한 논의를 거쳐 FSD 아키텍처에 대해 공부하고 내용을 공유하기로 했다. FSD 아키텍처는 어떤 구조인지 살펴보며 이전에 사용하던 방식과 FSD 아키텍처를 사용했을 때를 비교하여 좋은 점을 살펴보고 우리 프로젝트에 적용했을 때 얻게되는 이점 또한 생각해보려고 한다. FSD 공식페이지 : https://feature-sliced.design/ Welcome | Feature-Sliced DesignArchitectural methodology for frontend projectsfeature-sliced.design공식문서에 다양한 서비스들의 깃허브 주소가 있다. 레퍼런스로 활용할 수 있을 것 같다.FSD(FeatureSliced Design) Arc.. 공감수 1 댓글수 0 2024. 9. 6.
  • [Git & Github] 로컬 브랜치 <-> 원격 브랜치 동기화 1. 원격에서 삭제한 브랜치 로컬에도 동기화시키기이슈를 처리하고 브랜치를 삭제한경우 해당 원격브랜치를 동일하게 로컬에서도 삭제해야하는 경우가 있을 수 있다. 원격에서 브랜치를 삭제했는데 로컬에 남아있는지 확인하는 방법은 아래와 같다git branch -rorigin/브랜치명 -> 과 같이 뜨는 경우 원격의 브랜치가 아직 로컬에 있다는 것! 따라서 아래 명령어를 통해 깃허브에서 삭제한 브랜치를 로컬에도 적용시키자.브랜치 목록 동기화를 하는 명령어이다.git fetch -p그러면 gir branch -r 했을때 origin/브랜치명 이 안뜰 것이다!2. 로컬에서 만든 브랜치 원격에 동기화시키기git branch # 새로운 브랜치 생성git push # 원격에 올리기잘 적용됐는지 확인하기 위해선 1번에서.. 공감수 1 댓글수 1 2024. 9. 1.
  • [트러블슈팅] vite+react-ts+tailwind 작동안됨 해결 이번에 비트로 프로젝트를 생성하고 tailwind를 적용시키는데 tailwind가 적용되지 않아 삽질을 정말 많이 했다. 공식 문서에 나온 단계로 동일한 과정을 진행했음에도 불구하고 스타일 적용이 안됐지만 결국 해결하여 이건 기록해두고 나중에도 똑같은 이슈 발생시 사용해야겠다는 마음으로 작성한다.. 구글링 진짜 많이했다.. 👉🏻 문제상황공식문서에서는 vite.config.ts에서 설정하라는 것이 없었는데, 구글링을 하다보니 vite를 사용하면 따로 설정을 해주어야 한다고 한다.그래서 아래 코드를 넣어 두 라이브러리를 plugin에 추가해줬는데도 style이 적용이 안됐다..import tsconfigPaths from "vite-tsconfig-paths";import tailwindcss from .. 공감수 2 댓글수 0 2024. 8. 16.
  • [트러블슈팅] Git 파일명 대소문자 변환 인식 불가 문제 더보기동아리 프로젝트의 이미지 파일명의 대소문자를 변경해야하는 필요가 있어서 변경했던 적이 있었다. 당연히 git이 이러한 변경사항을 인지했을거라고 생각했고(그냥 당연하다고 생각했다) 다른 파일들의 변경사항들이 있어서 git add . 로 바로 합쳐서 commit을 진행했다(이것도 내 실수,, 어떤 파일이 어떤 상태에서 처리되고 있는지 계속 확인하고 올바르게 커밋하는 습관을 들였어야 했는데 변경된 파일들 다 들어갔겠지~하고 넘어갔었다..) 결국 내가 바꿔놨던 이미지 파일의 변경사항이 반영안된 상태로 깃허브에 계속 남아있게 됐고,, 그 버전을 채은이가 clone하게 되었다(문제의 시발점...) 채은이가 코드를 수정할때마다 코드에서 이미지 파일명을 수정해서(왜냐하면 현재 코드 내의 이미지 파일 명은 내 버전.. 공감수 0 댓글수 2 2024. 8. 14.
  • [Algorithm-JS] 프로그래머스 코테 Lv2 - 기능개발(array) ✔️ 문제링크https://school.programmers.co.kr/learn/courses/30/lessons/42586?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr✔️ 문제요약배포되어야 하는 작업들이 순서대로 담긴 배열 progresses가 존재하며 각 작업의 값은 배포된 정도를 의미한다. 매일 수행할 수 있는 작업의 속도가 담긴 배열 speeds도 존재한다. 각 작업들은 배포 순서가 존재하기 때문에 먼저 100% 배포 준비가 됐더라도 앞선 작업이 배포 준비가 되지 않는다면 배포가 불가능하다. 배포가 가능한 날에 .. 공감수 0 댓글수 0 2024. 8. 7.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.