ougi FE

오늘은 코딩테스트를 풀다 자주 봐왔던 개념인 깊은 복사와 얕은 복사를 자세히 알아보고자 합니다얕은 복사 깊은 복사가 무엇일까?얕은 복사란 객체의 참조 값(주소)를 복사하는 것 입니다깊은 복사란 객체의 실제 값을 복사하는 것 입니다 JavaScript에서의 값은 원시 값과 참조 값으로 나누어집니다원시 값은 기본 자료형을 말합니다원시 값에는 Number, String, Boolean, Null, undefined 등이 있습니다 참조 값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다참조 값에는 Object, Symbol 등이 있습니다 깊은 복사의 예시const 똥 = "응가";let school = "student";school = "teacher";console.log(똥) // result: "응가..

안녕하세요 오늘은 제가 최근에 제가 좋아하는 게임인 사과게임을 따라서 만들어보았는데 이 게임을 만드는 과정에 대해서 글을 써보고 싶어 이렇게 글을 써보게 되었습니다저는 토마토 버전으로 만들어보았습니다 ㅎㅎ사과 게임 소개사과게임이란 주어진 시간 안에 랜덤한 숫자 값이 들어있는 사과들을 없애는 것이 목표인 게임인데 사과를 없앨 수 있는 조건은 드래그 해서 생긴 네모 칸 안에 숫자 값들이 합해서 10이 되는게 조건입니다사과 한개 당 1점을 받습니다만드는 과정 과정을 나누어 보자면 크게 이렇게 나누어 구현 했던 것 같습니다시간 타이머 바 구현하기토마토들에 1-9까지 랜덤한 값을 주어 canvas에 그리기드래그하면 네모 칸 만들어지게 하기네모 칸 안에 숫자들이 10 되는지 확인하고 되면 사과를 없애고 점수 올라가..

오늘 제가 소개할 것은 Shadow DOM인데 어쩌다 Shadow DOM을 소개하게 되었냐면 공부할 것을 찾으면서 FrontEnd 로드맵을 보다가 잘 모르는 Shadow DOM이라는 것이 있길래 찾아보게 되었습니다❓ Shadow DOM이란? Shadow DOM은 웹 컴포넌트(Web Components)의 핵심 기술 중 하나로 DOM 요소에 캡슐화된 DOM 트리를 제공하여 외부의 CSS나 JavaScript의 영향을 받지 않도록 하는 기능입니다웹 컴포넌트 spa 프레임워크에서 제공하는 html코드 조각들을 컴포넌트화 하여 관리하는 것과 같은 기술들을 칭합니다 캡슐화 Shadow DOM에서의 캡슐화는 DOM 트리, 스타일, 그리고 동작을 외부로부터 격리시켜, 컴포넌트의 내부 상태를 보호하는 것을 뜻합니다 다..

오늘은 여러 블로그에서 여러 글에서 봤었는데 공부하기가 귀찮아 미루던 Closure에 대해서 소개드리겠습니다!❓ Closure? 그게 뭘까?내부함수와 그 함수가 선언될 때의 렉시컬 환경(Lexical Environment)의 조합입니다.사전적 의미로 Closure은 폐쇄라는 의미인데 Closure의 핵심은 스코프를 이용해 변수의 접근 범위를 폐쇄하는 것입니다.Closure의 특징들을 말해보자면 외부에서 내부는 불가능하지만 내부에서 외부로 스코프 접근이 가능합니다.외부 함수가 반환된 후에도 이 접근이 유지됩니다.내부함수란?다른 함수 내부에 정의된 함수렉시컬 환경함수가 선언될 때 생성되는 환경으로 해당 함수의 스코프에 있는 모든 변수와 함수를 포함❓ 왜 Closure 함수로 작성할까?function exte..

개발하다가 보면 이 아마 두가지 파일을 본 적이 있을 것입니다 이름도 비슷한 두가지 대체 무슨 차이가 있을까요?오늘은 package.json과 package-lock.json의 차이를 알아보겠습니다❓ 그 파일들이 뭔데?먼저 package.json은 npm 패키지 설치를 위해서 존재하는 파일로 일반적으로 프로젝트의 이름, 버전, 설명, 프로젝트 실행에 필요한 의존성 목록들을 포함하고 있습니다가끔 정확히 명시하지 않아서 팀원과 버전 문제가 발생할 수 있습니다..package-lock.json은 패키지들의 정확한 버전 정보를 명시하고 있는 파일입니다  ❓그래서 둘이 무슨 차이?package.json는 version range를 사용합니다쉽게 말하자면 18.2.0버전을 사용합니다 라고 명시하는 것이 아닌  ^1..

저는 오늘 코딩 테스트를 풀다가 어이없는 실수들을 하면서 제가 했던 실수들을 반성하며 다시 이런 실수들을 하지 않도록 이렇게 글로 남겨보았습니다먼저 이 문제에 대해서 설명 간단히 설명드리자면 배열 안에 최소 값을 뺀 배열을 return 하는 것인데 만약 최소 값을 빼고 남은 요소가 없으면 -1이 있는 배열을 return 하는 문제였습니다 이제 제 실수들을 말씀드리며 저의 첫 번째 트러블 슈팅을 시작하겠습니다!!⚽ 첫 번째 실수 먼저 제가 했던 첫 번째 실수에 대해서 설명드리겠습니다 처음 실수는 문제에 이해에 대한 실수였습니다 이 문제는 제일 작은 값을 빼지만 배열의 순서가 바뀌면 안 되는 문제였습니다 하지만 테스트 케이스는 내림차순으로 정렬이 되어 있는 것처럼 보여서 이런 실수를 하게 되었습니다 일단 제..

저는 얼마 전 아이디어페스티벌을 하다가 같은 팀인 친구가 profile 이미지 설정을 구현하다가 어떻게 할지 몰라 고민하는 모습을 보고 같이 조사를 해보다 알게 된 Cropper.js에 대해서 소개해보겠습니다✂️ Cropper.js? 어떤 라이브러리일까?Cropper.js는 이미지를 자르는 기능을 지원해주는 라이브러리 입니다예를 들어 사진을 게시물에 올릴 때나 프로필 사진을 설정할 때 이미지를 원하는대로 잘라서 원하는 부분만 올리신 적이 있으실 겁니다 이 기능을 구현할 때 사용됩니다🎯어떻게 사용할까!!!npm install cropperjs # npmyarn install cropperjs # yarn먼저 cropper.js를 설치해줍니다 먼저 기본적인 html..

저는 예전부터 유용하게 사용하던 ESLint라는 도구를 소개해드리고 싶어서 이렇게 글을 작성하게 되었습니다 이 도구가 무엇을 도와주는 도구인지 어떻게 사용하는지 설명 드리겠습니다혹시 코드가 문법상으로 오류가 있는데 오류가 안나서 힘들었던 경험이 있나요? ESLint를 이용하면 더 이상 힘들어하지 않아도 됩니다!!📌 ESLint가 뭘까?ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미입니다 즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구입니다++ 코드 스타일 정리🎯 사용법 npm init -y # package.json 파일 생성npm install eslint --save-dev..

저는 프로젝트를 하다 채팅기능을 구현하게 되어서 어떻게 구현해야 할지 열심히 찾아보다가 알게 된 WebSocket을 소개 드리겠습니다!!WebSocket💬이란 무엇인가??서버와 클라이언트가 연결을 끊지 않고 유지하면서 양뱡향 소통이 가능하게 하는 기술입니다 이것을 이용하여 실시간 데이터 교환을 할 수 있기 때문에 실시간 채팅, 주식 등을 구현할 때 많이 사용됩니다HTTP 통신방법과 WebSocket의 차이점WebSocket 프로토콜은 접속 확입에 HTTP를 사용하지만, 그 후의 통신은 WS라는 프로토콜을 이용합니다Header가 작아서 overhead가 적다는 특징이 있습니다장시간 접속을 전제로 하기 대문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다더불어 데이터의 송신과 수신에 각..

저는 요즘 프로젝트를 진행하면서 저장소(LocalStorage와 SessionStorage)를 제대로 활용하지 못하고 있다는 생각이 들었습니다. 그래서 조금 더 깊이 이해하고자 이렇게 글을 쓰게 되었습니다. 그리고 쿠키도 비슷한 기능을 가지고 있는 것으로 알고 있어 쿠키까지 조사하게 되었습니다.💾 LocalStorage란?데이터를 저장합니다도메인 별로 남아있습니다시간 제한이 없습니다 브라우저가 꺼져도 남아있습니다값을 지우려면 직접 삭제해야 합니다장점저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다단점HTML5 미만의 브라우저에서는 지원을 하지 않습니다💾 SesstionStorage란?데이터를 저장합니다브라우저가 종료될 때까지 데이터가 존재합니다세션이 종료되면 없어집니다소멸 타이밍이 존..