All contents

오늘 게시글은...참 부끄럽습니다. 이것을 제가 몰랐다는 사실을 실은... 혼자 알고싶었습니다. 너무 부끄러워서 제가 모른다는 것을 인정하고 싶지 않았기 때문입니다. 하지만... 주위 프론트 지망생들도 대부분 오해하고 있더군요...? 저처럼 너무 늦게 알게되어 슬퍼하지 않으시길 바라는 마음에 용기내어 작성해봅니다. 나, 비동기 처리 방법 모르는 구나. SSAFY 특화 프로젝트로 웹 게임을 개발하던 중, 동시성 이슈가 발생하게 되었습니다. 서바이벌 게임 특성상, 동시성 이슈가 아주 중요한데, 이를 해결하기 위해서는 실행 순서가 개발자의 뜻대로 보장되어야 합니다. 하지만 디버깅 하다보니... 보장되지 않는 이슈가 발생했습니다. 저희는 비동기 처리가 잘 되지 않았음을 파악했고... 비동기 처리를 정말 모르고 ..

this를 공부하기 위한 선수 지식 일반함수와 메서드의 차이 this는 JavaScript에서 조금 복잡할 수 있지만, 기본적으로 어떤 함수나 메서드가 작동하는 현재 객체를 참조한다고 생각하면 됩니다. this가 무엇인가요? this는 현재 실행 중인 컨텍스트에 있는 객체를 가리키는 키워드입니다. 예를 들어, 객체 내부의 함수(메서드라고도 함)에서 this를 사용하면, 그 함수가 속해 있는 객체를 가리키게 됩니다. this 예제 let myObject = { name: 'ChatGPT', greet: function() { console.log('Hello, ' + this.name + '!'); } }; myObject.greet(); // 출력: "Hello, ChatGPT!" 이 예제에느 myObj..

문 (문과 표현식을 확실히 이해하는 것이 중요하다. ) 문 (명령문) : 프로그램을 구성하는 기본 단위이자 최소 실행 단위 토큰 : 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 문은 선언문, 할당문, 조건문, 반복문 4가지로 구분 function foo() {} // 함수 선언문 var x; // 변수 선언문 x = 5; // 할당문 if (x>1) { console.log(x) } // 조건문 for (var i=0; i

문제 : https://school.programmers.co.kr/learn/courses/30/lessons/118667#qna 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 간단히 말해서, 두 개의 큐를 조절해서 각 큐의 요소들의 합이 같게 만드는 문제. 입력 문제 해설 오랜만의 문제 풀이라 그런지 많이 풀이를 생각해 내는 것이 꽤 어려워서.. 풀이를 보고 풀었습니다. 1. queue 1의 합만 체크해서 queue1의 합이 목표 숫자 (총합 /2) 보다 작으면 다른 큐에서 받아오고, 크면 다른 큐로 내보낸다. 2. 최대 이동 횟수는 모든 원소 ..

본 문서는 지극히 작성자의 주관적인 기준으로 모던 자바스크립트 Deep Dive 서적의 스크랩 하고 싶은 부분을 모은 게시글 입니다. 변수 변수(variable)은 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. -> 값의 위치를 가리키는 상징적인 이름 var의 대표적인 단점 var 키워드의 여러 단점 중에서 가장 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다. var 키워드는 폐기 (deprecated)되지 않았다. ES6 이전 사양으로 작성된 코드는 var 키워드를 사용해 구현되어 있을 것이며, ES6 이후 사양을 따른다 ..

[!tip] This Post exists for #Jest TDD 방식 개발 방법론이 유행하기 시작하면서 테스팅 기법에 대한 관심도가 올라가기 시작했는데, 우리는 이러한 흐름에 맞춰서 테스팅 기법이 무엇인지, 프론트엔드에서 어떤 방식으로 TDD가 이뤄지는지 알아보도록 하겠다. TDD TDD[^1]는 소프트웨어를 개발하는 여러 방법론 중 하나, 제품이 오류 없이 작동하는 지에 대한 여부와 프로그래머가 코드를 작성한 이후 테스팅을 통해 안정적으로 서비스를 유통하기 위한 목적임. 즉, 안정적인 서비스의 개발과 테스팅을 통한 버그가 없는 코드를 만들고자 할 때에 사용할 수 있다. 하지만, 단점으로는 사용자가 무조건 개발자가 원하는 방향으로 흘러가지 않는다는 점과, 테스트가 명확하게 설계되지 않으면, 개발에서 ..

SASS란 무엇인가? CSS 전처리기란? CSS 전처리기는 CSS 코드를 작성할 때 보다 효과적이고 조직적으로 스타일을 관리하기 위한 스크립팅 언어입니다. 이 전처리기는 특별한 문법을 사용하여 작성되며, 웹사이트를 실행하기 전에 일반 CSS로 컴파일됩니다. SASS에는 SCSS와 Sass가 있습니다. SASS 사용의 장점 코드 재사용: 믹스인, 변수, 함수 등을 사용하여 코드 중복을 줄임 유지 및 관리 용이성: 분할 및 구조화된 코드 관리 고급 기능 사용: 조건문, 반복문, 연산 등 SCSS와 Sass의 차이 Sass는 CSS 전처리기의 한 형태로, 처음에는 들여쓰기 기반의 문법을 사용했습니다. 이를 "들여쓰기 문법" 또는 간단히 "Sass"라고 부릅니다. SCSS는 Sass의 새로운 문법이며, CSS와..

REST API REST API는 Representational State Transfer의 약자로, 웹 서비스의 설계 패러다임 중 하나입니다. 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념에 전송방식을 결합해서 원하는 작업을 지정한다. 웹의 장점을 최대한 활용할 수 있는 아키텍처(설계구조)로써 REST를 발표 HTTP URI를 통해 제어할 자원(Resource)을 명시하고, HTTP Method(GET, POST, PUT, DELETE)을 통해 해당 자원을 제어하는 명령을 내리는 방식의 아키텍처 REST 구성 자원 (Resource) : URI 행위 (Verb) : HTTP Method 표현 (Representations) REST 특징 자원 지향: 각 URL은 특정 자원을 나타냅니..

프로젝트 초기 설정 없이 프로젝트를 바로 시작해봅시다. 아래는 제가 구성한 boilerplate 인데요, Vue, TS, AntdV가 설정되어있습니다. TS가 아니라 JS로 하고싶으신 분들은 조금 기다려주세요! 프로젝트를 직접 세팅하고 싶으신 분은 아래 링크를 참고해주세요. https://lire-eruel-dev.tistory.com/entry/Vue-3-AntDV%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0 Github 로그인을하고 접속합니다. 사용할 언어에 맞게 Github에 접속합니다. TypeScript : https://github.com/LireEruel/boilerplate-vue-ts-antd JavaS..

Vue 3부터는 vite 기반으로 프로젝트가 생성됩니다. 오늘은 npm과 yarn이 있다고 가정하고 프로젝트를 세팅하도록 하겠습니다. 기본적인 세팅을 함께하고, 제가 하는 프로젝트 초기 세팅도 함께 해보겠습니다. Vue 3 생성하기 npm create vite@latest 위 명령어를 입력하면 여러가지 설정을 할 수 있습니다. 그리고 yarn을 입력해서 패키지를 설치합니다. yarn success가 뜨고, yarn lock 파일이 생긴 것을 볼 수 있습니다. 이제 실행해봅시다. yarn dev http://localhost:5173/ 에 접속해봅시다. 이렇게 간단히, 프로젝트를 생성하였습니다. 화면에 보이는 것처럼 VS CODE에 Volar를 설치하는 것이 더 편합니다. Ant Design Vue 적용하..