분류 전체보기45 벚꽃이 피는 계절 봄이 왔다 내 불같은 마음은 아직 피지 못한 너의 마음을 불태웠다 혹독한 겨울을 지나 따뜻한 햇살 속에 이제 막 피어나려던 너의 마음은 다시 차갑게 식어버렸다 너무 뜨겁지 않도록 따스히 비춰야 했음을 천천히 다가가야 했음을 그게 곧 배려였음을 뒤늦게 깨달았다 후회되는 순간 속에 시간이 해결해주리라 믿어본다 피우지 못한 꽃은 다음 때를 기다리며 더 진하게 피어나겠지 그땐 내 불같은 마음이 너를 태우지 않도록 조심스럽게 다가가리 수많은 꽃들 속 앙상한 나뭇가지 하나 유독 눈에 띄는 이유는 너의 마음을 닮아서일까 너의 모습이 보여서일까 너의 자리에 다시 꽃이 피길 걷던 걸음을 멈춰 기다리리 네가 피운 그 꽃에 내가 머물러있길 바라보리 벚꽃이 피는 계절 피어나는 꽃들 속에 아직은 준비되지 않은 너와 그 모습을 .. 2022. 4. 5. FoodRiend(푸드렌드) 1차 회고 서비스 소개 맛집을 찾는 사람들은 광고성 글, 도움되지 않는 리뷰 등으로 신뢰할 수 있는 정보를 얻지 못하는 문제를 겪고 있습니다. 따라서 신뢰를 줄 수 있는 존재인 친구를 통해 이 문제를 해결하려고 하는 '푸드렌드'라는 맛집 추천 SNS를 만들게 되었습니다. 서비스 시연 영상 & 기능 설명 1. 로그인 앱을 켜면 가장 먼저 보이는 SplashScreen(로딩 화면)은 앱을 재실행하지 않는 이상 다시 보이면 안 되기에 LoginScreen에서 뒤로 가기 기능을 제한하였습니다. 로그인 과정은 크게 세 가지로 나뉩니다. 1) 사용자가 처음 로그인을 했을 경우 사용자는 카카오 이메일과 비밀번호를 입력하고 회원가입 절차를 밟게 됩니다. 그리고 본 서비스의 시작화면인 FeedScreen에서 발급받은 토큰을 Asy.. 2021. 10. 23. [JS] Set 객체 Set 객체 1. 중복되지 않는 유일한 값들의 집합을 말합니다. 2. Set 객체는 이터러블입니다. 따라서 for...of 문으로 순회가 가능하며 스프레드 문법과 배열 디스트럭처링의 대상이 될 수 있습니다. 3. Set 객체는 수학적 집합을 구현하기 위한 자료구조입니다. 따라서 Set 객체를 통해 교집합, 합집합, 차집합, 부분집합 등을 구현할 수 있습니다. 요소 개수 확인 Set.prototype.size Set 객체에서 요소 개수를 확인할 때는 Set.prototype.size 프로퍼티를 사용합니다. size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 프로퍼티로 외부에서 수정이 불가능합니다. 요소 추가 Set.prototype.add Set 객체에서 요소를 추가할 때는 Set.pr.. 2021. 8. 19. [JS] Map 객체 Map 객체는 이터러블 따라서 for...of로 순회할 수 있으며, 스프레드 문법과 구조분해 할당이 가능합니다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 symbol 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성합니다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 합니다. const map = new Map ([['a', 1], ['b' ,2], ['c',3]]) for(const a of map.keys()) console.log(a) // a, b, c for(const a of map.values()) cons.. 2021. 8. 18. [JS] 타입 변환 타입 변환이란? 자바스크립트의 모든 값은 타입을 가집니다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있는데 이를 명시적 타입 변환 또는 타입 캐스팅이라고 합니다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 합니다. let x = 100 // 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성 let str = x + '' console.log(typeof str, str) // string 100 // x 변수의 값이 변경된 것은 아니다 console.log(typeof x, x) // number 100 타입변환이란, 기존 원시 값을 사용해.. 2021. 8. 11. [React] React routing 라우팅 사용자가 웹사이트의 다른 페이지로 이동하는 프로세스 렌더링 해당 페이지를 UI에 배치하는 프로세스 특정 페이지에 대한 경로를 요청할 때마다 해당 페이지도 렌더링되지만 모든 렌더링이 경로의 결과인 것은 아닙니다 클라이언트 사이드 라우팅 클라이언트 사이드 라우팅이란 서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 여러 페이지들을 왔다 갔다 방문할 수 있는 기능을 말한다 클라이언트 라우팅의 구현에 중요한 핵심 3가지 1. 현재 URL에 맞는 UI(즉, 컴포넌트)를 렌더링 할 수 있어야 한다 2. 페이지의 리로드 없이 다른 페이지를 방문할 수 있는 네비게이션 기능이 있어야 한다 3. 사용자의 액션에 의해 URL이 변경될 때 이를 감지하고 처리할 수 있어야 한다 React 웹 애플리케이션.. 2021. 7. 14. [CSR] 클라이언트 사이드 렌더링 기존의 MPA 방식 기존 웹은 요청 시마다 새로고침이 발생해서 서버로부터 리소스들을 받아 렌더링하는 방식이었다. 서버가 해당하는 HTML을 주는 방식을 SSR(Server Side Rendering)이라고 한다. 대체로 헤더나 푸터는 그대로인데 전체를 다 렌더링하면 비효율적이다. 불변하는 정보도 다 받기 때문이다. SPA와 반대로 MPA에서는 서버로 form 데이터를 전달해서 새로운 페이지 렌더링을 요청하게 된다. 기존에는 SPA와 반대되는 MPA(Multi Page Application) 디자인 패턴으로 많이 개발되었다 다른 페이지로 넘어갈 때 URL도 바뀌고 서버로 들어가는 요청에 응답으로 HTML 파일을 건네서 완전히 새로운 페이지로 넘어가는 것이다. HTML 파일을 건네면 굳이 다시 그리지 않아도.. 2021. 7. 12. [JS] Window, DOM, BOM 주요 BOM 객체 Window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소의 최상위 객체 Document 웹 문서에서 태그를 만나면 만들어지는 객체 HTML 문서 정보를 가지고 있다 Frames 현재 브라우저 창의 모든 하위 프레임을 배열과 같은 객체로 나열 History 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체 Location 현재 페이지에 대한 URL 정보를 가지고 있는 객체 Navigator 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체 Screen 현재 사용 중인 화면 정보를 다루는 객체 Window 자바스크립트의 Window 객체는 웹 브라우저 상태를 제어하는 객체로, 자바스크립트 객체 중 최상위이자 기본이 되는 객체입니다 Windo.. 2021. 7. 8. [JS] 호이스팅이란? 호이스팅 (hoisting) Javascript에서의 호이스팅은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말하며 이는 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행될 수 있다 함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상위로 함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는 스크립트 단위의 최상위로 끌어올려진다 -> 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 var, let, const의 변수 선언과 특징 var var는 한번 선언된 변수를 다시 선언할 수 있다 var name = 'Mike' console.log(name) // Mike var name = 'Jane' console.log(.. 2021. 7. 7. [JS] Promise란? Promise 프로미스는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체 정해진 시간의 기능을 수행하고 정상적으로 기능이 수행이 됐다면 성공의 메세지와 함께 처리된 결과값을 전달 기능을 수행하다가 예상치 못한 문제가 발생했다면 Error를 전달 State : pending(보류) -> fulfilled(이행) or rejected(거부) Promise는 클래스이기 때문에 new라는 키워드를 이용해서 Object를 생성할 수 있다 const promise = new Promise() Promise의 Constructor안을 보면 executor라는 콜백 함수를 전달해 줘야하고 이 콜백 함수에는 또 다른 두 가지의 콜백 함수를 받는다 -> 새 Promise가 생성되면 executo.. 2021. 7. 2. [AJAX] AJAX란? AJAX (Asynchronous Javascript And XML) - AJAX는 Javascript의 라이브러리중 하나이며 Asynchronous Javascript And XML(비동기식 자바스크립트와 XML)의 약자 - 브라우저가 가지고있는 XMLHttpRequest 객체로 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위해 데이터를 로드 - Javascript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술 Javascript에서 비동기 http 통신을 위한 대표적인 방법 3가지 ❓ - Ajax - Axios - fetch HTML과 XML ❓ 같은 Markup Language라, 생긴건 비슷하지만 큰 차이점이 존재한다 HTML의 태그는 이미 약속한 태그들만 사용.. 2021. 6. 29. [WEB] 브라우저 렌더링 원리 브라우저 주요 기능 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 1. 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML을 해석 2. 해석된 문서는 브라우저 렌더링 엔진에 따라서 브라우저에 사용자가 볼 수 있도록 그리기 시작 -> 브라우저 별로 화면에 그리는 방식은 다름 -> 대표적으로 Chrome과 Safari는 Webkit 엔진을 사용하며, 파이어폭스는 Gecko 엔진을 사용하기 때문 Webkit과 Gecko 렌더링 엔진 동작과정 차이 ❓ - Gecko 엔진을 사용하는 Firefox에서 프리젠테이션은 DOM 업데이트를 위한 리스너로 등록하고 "Frame Constructor"에서 프레임을 생성 - Webki.. 2021. 6. 28. 이전 1 2 3 4 다음
