Psychogrammer

🌕 Front 검색 결과

해당 글 60건

[CSS: flex box] flex item의 정렬과 간격 / justify-content /align-items/ align-content

사용예시 .container { display: flex; justify-content: center; align-items: flex-start; align-contents: center; } 1. justify-content : 메인 축 정렬과 아이템 사이의 간격을 제어한다. justify-content: 1) flex-start [default] 2) flex-end 3) center 4) space-between 5) space-around 6) space-evenly flex-direction(메인축 설정): row | row-reverse | column | column-reverse 2. align-items : flex item의 ‘교차 축’ 정렬을 제어한다. align-items: 1) ..

🌕 Front/✨ CSS 2021. 8. 10. 19:18

[React Hook 시리즈 3]: 10가지 Hook들 (useMemo, useRef 등)

1. useMemo() useMemo(() => value, deps), useMemo(fn, deps) const memoizedValue = useMemo(()=>computedExpensiveValue(a,b),[a,b]) - 랜더링 될 때마다 값을 계속 계산하지 않고, 이전에 계산된 값을 메모이제이션하여 불필요한 연산을 줄인다. - 새롭게 계산하는 기준은 두번째 인자, dependency에 적는다. import { useMemo, useState } from 'react'; const App = () => { console.log('리랜더링'); const [isOn, setIsOn] = useState(false); const [users, setUsers] = useState([ { activ..

🌕 Front/⚛️ React JS 2021. 8. 3. 17:28

key에 접근하는 2가지 방법. obj.key, obj['key']

1. 객체의 property에 접근하는 두 가지 방법cosnt obj = { name: 'junha'}obj.name obj['name']// 'junha' 2. object.key 방법의 문제점하이픈(-)이 들어간 property에 접근할 수 없다.obj.a-b// (obj.a) - bobj['b-c']// obj의 key 'a-b'에 접근  var a = { "a" : 1, "b-c": 2, "0d" : 3, // 선언 자체는 가능 "d0" : 4, 2: 5}console.log(a.a) // 1console.log(a.b-c) // ReferenceError: c is not definedconsole.log(a.0d) // SyntaxError: Invalid or unexpected..

🌕 Front/🌱 Vanilla JS 2021. 8. 3. 16:58

OAuth Dance

인터넷 서비스는 SaaS(Software as a Service)의 형태이다. 서비스 중에서 사용자가 필요한 일부만 사용할 수 있게 한다. Facebook이나 트위터가 세상에 널리 퍼지게된 이유 중에 하나가 외부 서비스에서도 Facebook가 트위터의 일부 기능을 사용할 수 있게 한 것이다. 외부 서비스와 연동되는 Facebook이나 트위터의 기능을 이용하기 위해 사용자가 반드시 Facebook이나 트위터에 로그인해야 하는 것이 아니라, 별도의 인증 절차를 거치면 다른 서비스에서 Facebook과 트위터의 기능을 이용할 수 있게 되는 것이다. 이런 방식은 Facebook이나 트위터 같은 서비스 제공자뿐만 아니라 사용자와 여러 인터넷 서비스 업체 모두에 이익이 되는 생태계를 구축하는데 기여하게 될 것이다...

🌕 Front/📑 Web Theory 2021. 8. 3. 08:38

[React Hook 시리즈 2]: useEffect()

1. useEffect 란? 컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다. 컴포넌트의 정보를 다른 데서 가져와 나중에 내용을 업데이트 한다거나, 네트워크 통신 등의 작업을 하는 작업들에 해당한다. DOM 업데이트, Browser Paint가 완료된 후에 UseEffect가 호출된다. 참고로 useEffect는 클래스 컴포넌트의 componentDidMount, componentDidUpdate 를 함수형 컴포넌트에서 구현한 것이다. 2. useEffect 사용하기 1) callback : render()함수가 실행될 때마다 호출되며, return ..

🌕 Front/⚛️ React JS 2021. 7. 22. 11:36

[React Hook 시리즈 1]: 쓰는 이유, useState()

1. React hook 이란? 함수형 컴포넌트는 컴포넌트 내부의 state를 만들 수 없고, 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 그저 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만 사용됐다. 하지만 16.8 버전부터 훅(hook)이라는 개념이 도입되며, 이 둘을 해결할 수 있게 됐다. 두 가지 기능을 함수형 컴포넌트에 "hook into”, 끌어와 연결 한다고 해서 "hook"이라고 부른다. 또한 클래스 컴포넌트에서 귀찮게 사용되는 didMount, render, this 등 대신, 함수형 프로그래밍 스타일로 가독성 있게 코드를 작성할 수 있게 됐다. Class Component import { Component } from 'react';..

🌕 Front/⚛️ React JS 2021. 7. 20. 21:56

[React Router] 라우터 사용하기(react-router-dom v5)

1. SPA와 라우터의 관계 • SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다. • MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고, 여러 페이지 간의 스타일, 컴포넌트를 재활용하여 구현한다. • 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된며, 서버로 부터 데이터만 받아온다. SPA의 기술적 장점 • 서버에서 페이지를(서버 랜더링) 만들 필요가 없으므로 CDN에 캐싱이 가능하다. • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다. • 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다. • ..

🌕 Front/⚛️ React JS 2021. 7. 20. 16:20

[Typescript] 타입스크립트 왜 써요?

Typescript  쓰는 이유1. 안정적이다. 높은 수준의 추상화가 필요할 때,  프로그램에 구조를 만들고 문서화할 수 있다.2. 타입 에러를 컴파일 단계에서 미리 검출하여 디버깅할 수 있다.  (런타임 단계에서 발생하는 에러로 인해 프로그램이 멈춘다면, 운영되는 서비스에 큰 차질이 생길 수 있다.)3. 타입을 하나하나 명시하기 때문에 유지 보수가 유리하다.   Typescript의 특징1. 컴파일러: 프로그래밍 언어인 동시에 Javascript로 변환해주는 컴파일러다.2. 타입 명시: 변수를 선언할 때, 타입을 명시함으로써 데이터 타입을 지정3. 타입 추론(contextual typing): 정적 타이핑을 통해 변수의 타입을 추론할 수 있다.const sum = (a: number, b: number..

🌕 Front/🎫 Typescript 2021. 7. 13. 21:38

모바일에서 CSS hover 적용할 때 효과가 지속되는 문제 해결!

모바일에서 호버 이슈 발생 문제: 모바일에서 버튼을 클릭하면 호버가 계속 적용되어, 다른 버튼까지도 눌림 효과가 유지된다. 해결 방법1. 각각의 사용 환경을 고려하여 css 코드 작성2. 터치 관련 이벤트 발생시, css 효과가 없어지도록 js 코드 작성   1. CSS로 PC와 Mobile을 구분하는 코드 /* smartphones, touchscreens */@media (hover: none) and (pointer: coarse) { ...}/* stylus-based screens */@media (hover: none) and (pointer: fine) { ...}/* Nintendo Wii controller, Microsoft Kinect */@media (hover: hove..

🌕 Front/✨ CSS 2021. 5. 10. 22:55

BEM은 CSS표기법

BEM이란(Block Elements Modifier) BEM은 CSS 개발 방법론, 네이밍 컨벤션이다. html 요소들을 각각 Block, Element, Modifier 세 가지로 분류해 작명한다. Block 다음에 Element(내부요소) 혹은 Modifier(상태)순으로 네이밍 한다.각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙여야 한다. .block {} // 더 높은 단계의 추상(abstraction) 혹은 구성요소(component)를 나타낸다. .block__element {} // block의 자식 | 구성요소 .block--modifier {} // block의 다른 상태 | 버전 | 종류를 나타낸다. 사용 예시 .person {} .person__hand {}..

🌕 Front/✨ CSS 2021. 5. 3. 13:50

오픈 그래프(open graph): 링크의 미리보기를 결정하기

페이스북, 네이버 블로그, 카카오톡에서 링크에 대한 미리보기 제목, 설명, 이미지를 표현할 때 사용한다. HTML 문서의 head와 메타정보 메타 데이터들은 HTML 태그에 담겨있습니다. 크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어렵습니다. 따라서 웹사이트가 직접 저렇게 적어서 알려줘야 하는 것입니다. (아무리 머신러닝, 딥러닝, 자연어처리 기술이 발전해도 웹문서와 같이 비정형적인 정보에 대한 100% 정확도의 의미 인식은 불가합니다.) 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 ..

🌕 Front/📑 Web Theory 2021. 4. 28. 12:01

웹 스크립트 언어: PHP, JSP, ASP

세가지 언어는 모두 웹 스크립트 언어다. 스크립트 파일(a.asp, a.php, a.jsp)을 만들어 올리고 사용자가 해당 페이지를 엑세스 할때, 웹서버에서 즉시 컴파일하여 HTML로 돌려준다. OS: JSP와 PHP는 윈도우, 리눅스, 유닉스에서 돌아가지만 ASP는 Window에서만 운용이 가능하다. DB에 관한 것은 ASP의 경우에도 윈도우 서버에 한정되므로 대부분의 경우 MSSQL을 사용한다. 성능이 좋지만 비싸다. 일반적으로 PHP는 MySQL, JSP는 ORACLE을 사용합니다. 물론 PHP + MSSQL, JSP + MySQL로 구축된 시스템도 있다 PHP와 ASP는 소/중 규모, JSP는 각종 기술을 활용할 대규모 시스템에 알맞다. ASP는 비용이 가장 많이 들어가지만 Window와 IIS,..

🌕 Front/📑 Web Theory 2021. 3. 15. 13:40

JavaScript의 역사

출처: www.youtube.com/watch?v=wcsVjmHrUQg&t=629s 모자이크 웹 브라우저 등장 Netscape: UI 요소를 추가한 정적인 페이지 등장 시장 점유율 80%를 자랑했다. Script언어 추가를 추가한 동적인 페이지 등장 Java는 무겁고 어려워서 스킴 언어로 선택 Netscape Navigator안에 LiveScript를 이해하는 엔진(LiveScript Inrepreter)을 탐재함. 라이브스브립트 언어가 돔 요소를 조작함. 자바의 인기에 올라타서 이름을 자바스크립트라고 지음 자바스크립트 성공에 위기감을 느낀 MS가 역공학을 통해 IE를 만든다. 그대로 배낀 언어를 JScript라고 이름바꿔 시장에 내놓는다. IE와 넷스케이프 브라우저 IE브라우저 간에 호환문제가 생긴다...

🌕 Front/📑 Web Theory 2021. 3. 10. 16:41

Window 객체

Window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있다. 모든 객체를 포함하고 있는 전역객체(글로벌객체)이다. const really = 'Really?' really; // 'Really?' // 전역변수, 어디에서나 사용가능하다. window.really // undefined let과 const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용할 수 없다. window의 메소드 & 프로퍼티 window.open(); window.close(); open메서드는 호출주체를 사용하지 않으면 전역객체로 받아들이기 때문에 window는 생략할 수 있다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 wi..

🌕 Front/🌱 Vanilla JS 2021. 2. 23. 14:44

정규표현식(Regular Expression)

정규표현식을 해석하는 정규표현식 엔진이 언어 별로 다르게 구현되어 있으니 일부 표현이나 문법이 다를 수 있습니다. 본 포스트에서는 JavaScript를 기준으로 작성합니다. 정규표현식(Regular Expression) : 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어이다. 정규식이 필요한 예시 각각 다른 포맷으로 저장된 엄청나게 많은 전화번호 데이터를 추출해야 할 때 사용자가 입력한 이메일, 휴대폰 번호, IP 주소 등이 올바른지 검증하고 싶을 때 코드에서 특정 변수의 이름을 치환하고 싶지만, 해당 변수의 이름을 포함하고 있는 함수는 제외하고 싶을 때 특정 조건과 위치에 따라서 문자열에 포함된 공백이나 특수문자를 제거하고 싶을 때 즉, 문자열의 검색과 치환을 위한 용도로 사용한다. ..

🌕 Front/📑 Web Theory 2021. 2. 14. 20:11

ES(ECMAScript) VS JS(JavaScripit) 차이점

세 줄 요약 1. Javascript는 프로그래밍 언어로써 하나의 개별된 대명사로 쓰인다. 2. ECMAScript는 표준화된 JavaScript를 말하며, 언어의 사양(Specification)을 뜻한다. 3. ES6, ECMAScripit6는 ECMA에서 2015년 6월 발행한 표준화한 범용 프로그래밍 언어 버전을 말한다. More About ECMAScript ECMA, (유럽 컴퓨터 제조업체 협회)는 기술 표준을 만드는 조직으로, 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구다. ECMA 스크립트는 ECMA 인터내셔널에서 발행한 표준이다. 여기에는 범용 스크립팅 언어에 대한 사양이 포함되어 있다.ECMA 스크립트 규격을 준수하는 범용 스크립팅 언어다. 기본적으로 스크립팅 언어를 사용하는 방..

🌕 Front/🌱 Vanilla JS 2021. 2. 13. 11:40

[리액트 삼대장]: Component, State, Props

1. 컴포넌트 1) 기능을 단위별로 캡슐화하는 리액트의 기본 단위 2) 사용자가 보는 뷰는 컴포넌트들을 조합하여 만든다. 3) 함수 혹은 클래스로 만든다. 4) 상위 컴포넌트에서 props를 입력받고, 내부적으로 각자의 state를 관리한다. 5) 컴포넌트의 이름은 대문자로 시작한다. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import Milk from "./Milk"; ReactDOM.render( , document.getElementById("root") ); 컴포넌트는 반드시 하나의 태그만 리턴할 수 있기 때문에, 최상위 태그 안에 태그/컴포넌트들을 배치한다. 2. State - 변수..

🌕 Front/⚛️ React JS 2021. 2. 2. 16:49

컴파일, 인터프리터, JIT

컴파일 컴파일러: 다른 프로그래밍언어로 바꾸어주는 번역 프로그램 or 고수준 언어를 기계어로 번역하는 프로그램을 말한다. 대표적으로 C언어 계열 언어가 컴파일러를 사용한다. 초기엔 프로그램을 작성하기 위해서는 컴퓨터 위에서 바로 돌아가는 기계어를 통하여 프로그래밍을 했다. 그러나 이런 과정은 생산성, 기기 간 호환성, 디버깅등 모든 면에서 효율적이지 않다. 따라서 컴퓨터공학이 발전하면서 많은 부분 추상화된 고수준 언어를 작성하고 이를 번역기를 통해 기계어로 번역하기 시작했는데, 이 번역기가 바로 컴파일러이다. (폰노이만이 제자들에게 잔머리 굴린다고 나무라 친 것이 현재의 컴파일러이다.) 컴파일러는 다음과 같은 세 분류로 나뉜다. 원시 코드를 바로 기계어로 변환하는 정적 컴파일(Static Compilat..

🌕 Front/📚 Theory 2021. 1. 27. 11:36

[JSON] 데이터 주고 받을 때 쓰는 표현 방법, 그럼 XML, BSON은?

JavaScript Object Notation데이터 표현 방법, 데이터 교환 포맷이다. 주로 데이터를 주고 받을 때 사용한다.서버와 클라이언트간 비동기 통신에 많이 사용한다.데이터를 저장하거나 전송할 때 많이 사용한다.key, value 쌍으로 이루어진다.특정 언어에 종속되지 않는다.XML의 불필요한 태그, 많은 용량, 나쁜 가독성 때문에 JSON이 대부분 대체되었다.eXtensible Markup Language: 데이터를 설명하는 태그를 마음대로 정의할 수 있다.data 표현에 집중한 HTML과 달리, data 전달에 집중한 언어다.  JSON 구조{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "act..

🌕 Front/🌱 Vanilla JS 2021. 1. 27. 08:51

[React 입문]: 쓰는 이유, 특징, CRA, CRA구축

1. React is Javascript UI Library 웹 앱은 app처럼 만들어 놓은 웹 페이지를 말한다. 모바일앱으로 발행이 용이하며, 뛰어난 UX를 자랑한다. (버벅거림이 없고 반응속도 빠름) 이는 비즈니스적 강점, 구매전환율이 높아지는 효과를 불러일으킨다. 컴포넌트를 조합하여 페이지를 구축하기 때문에 유지보수가 편리해진다. 2. 기술적인 세 가지 이유​​ 1. 👍: JS언어인데 함수 안에 HTML코드를 작성할 수 있다.(JSX) 2. 👍: 데이터바인딩이 수월하다. 3. 👍: bolierplate(code)과정이 생략된다. => 프로젝트를 진행할 때 마다 써줘야 하는 장황한 코드와 셋팅이 줄어, 프로젝트 시작이 빠르다. 4. 👍: 컴포넌트별로 코드를 나눌 수 있다. 사용자 정의 태그를 만들어 ..

🌕 Front/⚛️ React JS 2021. 1. 26. 09:54