태그 목록
전체보기 (71)TIL(49)JavaScript(24)CSS(12)React(11)html(10)web(8)DOM(5)알고리즘(4)algorithm(4)github(3)spa(3)기업협업(3)component(3)internet(3)number(3)프론트엔드(2)array(2)background(2)git(2)객체(2)객체지향(2)reverse(2)function(2)json(2)project(2)JOIN(2)split()(2)position(2)object(2)class(2)react native(2)MPA(2)float(2)Map(2)Event(1)FHS(1)로그인(1)airbnb(1)인증(1)key Streching(1)virtual DOM(1)정의(1)배열(1)할당(1)인가(1)Type Coercion(1)Root(1)refactoring(1)선언(1)practice(1)substring(1)sql(1)백엔드(1)패널(1)뉴발란스(1)공유기(1)terminal(1)local starage(1)API(1)link(1)npm(1)URI(1)인자(1)반환(1)드림코딩(1)framework(1)library(1)OOP(1)Elements(1)restful api(1)server(1)http(1)bind(1)linux(1)객체 순회(1)transform(1)Home(1)navlink(1)REST(1)image(1)Event Handler(1)반응형(1)Request(1)Response(1)event flow(1)lifecycle(1)include(1)nat(1)역사(1)브라우저(1)path(1)Type Conversion(1)PORT(1)componentdidupdate(1)타입 표기(1)router(1)튜플(1)Self-Refactoring(1)매개변수(1)Firebase(1)개발자 도구(1)동작 원리(1)Web system(1)img(1)for ~ in(1)defaultProps(1)async(1)for 중첩문(1)return(1)parameter(1)Route 이동(1)for(1)network(1)branch(1)includes()(1)bubble(1)클론(1)타입스크립트(1)웹서버(1)string method(1)UI(1)ip(1)frontend(1)Backend(1)Flexbox(1)1차(1)unshift(1)댓글(1)access token(1)호출(1)selector(1)상대 경로(1)절대 경로(1)실행(1)westagram(1)styled component(1)반복문(1)Node(1)protocol(1)CEIL(1)필터링(1)const(1)let(1)var(1)session starage(1)생각(1)box-sizing(1)1세대(1)repeat(1)숨고(1)2세대(1)componentWillUnmount()(1)웹시스템(1)소셜 로그인(1)프로그래밍(1)application(1)loop(1)foreach(1)history.push(1)bcrypt(1)String(1)data type(1)key(1)instagram(1)commit(1)authorization(1)flow(1)media query(1)State(1)함수(1)this(1)arrow function(1)styled components(1)Constructor(1)모던웹(1)semantic(1)object.entries(1)clone(1)System Architecture(1)shift(1)@property(1)생애주기(1)User Agent Stylesheet(1)configs(1)CSR(1)SSR(1)EventListener(1)셀프 리팩토링(1)Pop(1)block(1)컴파일(1)console(1)transition(1)명령어(1)접근성(1)http method(1)master(1)setState(1)프로젝트(1)local(1)translate(1)developer tools(1)Defer(1)app(1)render(1)toString(1)FLOOR(1)JSX(1)레거시 코드(1)cookie(1)RDBMS(1)변수(1)salting(1)리눅스(1)중첩반복문(1)object.keys(1)Database(1)cli(1)math expressions(1)Object Oriented Programming(1)endswith(1)startswith(1)DHCP(1)round(1)Props(1)accessibility(1)정규화(1)hash(1)origin(1)remote(1)object.values(1)김버그(1)ES6(1)componentDidMount(1)가독성(1)Payload(1)capture(1)react router(1)Stateless(1)3세대(1)authentication(1)google(1)터미널(1)scope(1)닷컴붐(1)typescript(1)animation(1)tag(1)routing(1)argument(1)new 연산자(1)
post-thumbnail

[WEB #14] RESTful API (feat. path/query parameter)

REpresentational State Transfer의 약자로 웹상의 여러 리소스(이미지, 동영상, 데이터)에 고유한 URI를 부여해 자원에 대한 주소를 지정(HTTP Method)하는 방법론, 규칙을 의미한다.API 시스템을 구현하기 위한 아키텍쳐 중 가장 널리

2021년 11월 2일
·
0개의 댓글
post-thumbnail

[WEB #13] 인증과 인가(개인정보 관리)

인증(Authentication) 유저의 identification을 확인하는 절차 (아이디, 비밀번호 확인) 우리 서비스를 누가, 어떻게 사용하는지 추적하기 위해 사용한다. 인증에는 아이디, 이메일 주소, 비밀번호* 등이 필요하다. 비밀번호 관리 비밀번호는 개인정보보

2021년 11월 1일
·
0개의 댓글
post-thumbnail

[WEB #12] SPA vs MPA, CSR vs SSR

SPA는 3세대 웹이 등장하면서 기존의 웹이 제공해주지 못했던 풍부한 UX를 구현할 수 있게 해준 중요한 개념이다. SPA는 CSR과 SSR, 두 가지 방법으로 지원할 수 있다.MPA는 Multi Page Application의 약자로 정적 웹사이트로 개발된 HTML

2021년 10월 26일
·
0개의 댓글
post-thumbnail

[React #9] styled-components로 효과적인 스타일링

현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다. CSS in JS

2021년 10월 25일
·
0개의 댓글
post-thumbnail

[Project] 맥주와 함께하는 숙소 예약 서비스 'BeerBnB'

프로젝트 소개 메인 서비스 맥주, 소주, 위스키 등 '술과 어울리는 숙소'를 테마로 지역별, 유형별 원하는 숙소를 검색하고, 예약할 수 있다. '호스트 등록'을 서비스를 통해 내 숙소를 쉽게 등록하고 호스트가 될 수 있다. 프로젝트 기간 : 2021.08.02

2021년 10월 19일
·
0개의 댓글
post-thumbnail

[React #8] React-Router로 SPA 구현하기

SPA SPA(Single Page Application)은 페이지가 한개인 어플리케이션을 뜻한다. HTML에서는 페이지 수만큼 HTML 파일이 존재하지만, React에서 .html 파일의 개수는 1개다. 즉, React는 SPA 기반으로 작동된다. 한 웹페이지 안에서

2021년 10월 12일
·
0개의 댓글
post-thumbnail

[React #7] Component Lifecycle(생애주기) Methods

Component Lifecycle React components는 create, render, DOM에 추가, 업데이트, 삭제될 수 있다. 이 스텝들이 컴포넌트의 생명주기(lifecycle)라고 한다. Mounting : 컴포넌트가 초기화되고 DOM에 놓이는 첫 순

2021년 10월 12일
·
0개의 댓글
post-thumbnail

[React #6] .map()만 잘써도 React 좀 한다지(feat. key)

자바스크립트 배열 메서드인.map() 함수는 React에서도 코드를 효율적으로 구성하는 데 유용하게 사용할 수 있다.반복되는 컴포넌트를 렌더링하기 위해 자바스크립트의 내장 함수인 map()을 사용한다.map() 함수는 파라미터로 전달된 함수를 사용해, 배열 각 요소를

2021년 10월 8일
·
0개의 댓글
post-thumbnail

[Practice] JavaScript로 Instagram 로그인 & 댓글 페이지 구현

HTML&CSS 정리 init() 초기화 시작점을 쉽게 찾기 위해 명확하게 표현하기 위한 함수 쓰지 않아도 무관. querySelector vs getElementBu 큰 차이는 없지만 쿼리셀ㄹ게터 메모리 효율에 좋다. 0 인덱스로 접근하는 이유 clssname은

2021년 10월 8일
·
0개의 댓글
post-thumbnail

[Algorithm #4] 공통 시작 단어 반환하기(feat. substring)

strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요.예를 들어 strs = 'start', 'stair', 'step' return은 'st'strs = 'start', 'wework', 'today' return은 ''strs 인자로 받

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[Algorithm #3] 숫자 반전 비교하기(feat. toString)

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부)예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[Algorithm #2] 숫자 뒤집어 반환(feat. dynamic array methods)

reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.x: 숫자 return: 뒤집어진 숫자를 반환!예들 들어, x: 1234 return: 4321x: -1234 return: -4321x: 1230 return: 3211\.

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[Algorithm #1] 숫자 배열과 특정 수 (feat. 중첩 for문)

코드카타는 프로그래머가 연습과 반복을 통해 기술을 연마하도록 돕는 프로그래밍 연습입니다. 1999 년이 용어는 The Pragmatic Programmer의 공동 저자 인 Dave Thomas가 무술의 일본 개념 인 kata에 대한 활로 사용되었다. 코드 태권도 같은거

2021년 10월 4일
·
0개의 댓글
post-thumbnail

[React #5] React 상태 관리 {state}

휴대폰을 예로 들어보자.props는 사용자가 화면에서 보는 UI를 조작하는 장치이며,state는 제품을 열었을 때 내부적 조작 장치 매커니즘이라고 할 수 있다. 출처: 생활코딩즉, props는 컴포넌트를 사용할 때 사용자에게 중요한 외부적 정보이며, state는 pr

2021년 10월 3일
·
0개의 댓글
post-thumbnail

[React #4] React 만능키 {props} & Event handler

React Component들이 서로 연결되고 반응하기 위해서는 하나의 component 값들을 다른 component로 보내주어야 한다. 하나의 컴포넌트에서 다른 컴포넌트로 넘겨주는 값, 정보(information)를 "props"라고 한다. Props propert

2021년 10월 2일
·
0개의 댓글
post-thumbnail

[React #3] React Component 혁명

Component 재사용 가능한 각각의 독립된 모듈 (프로그래밍적 정의) 특징 FE는 ui 만들엉 UI 단위 코드 재활용 증가, 유지보수 용이 해당 페이지가 어떻게 구성되어있는지 파악 용이 컴포넌트는 다른 컴포넌트를 포함한다(부모 컴포- 자식 컴포 = 레고블럭) (부분

2021년 9월 30일
·
0개의 댓글
post-thumbnail

[React #2] HTML + JavaScript == JSX

JSX syntax extension for JavaScript 자바스크립트 확정바전 React.js를 사용하기 위해 JSX 문법이 포함되어 있다면, 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요하다. 장점: html 태그를 그대로 사용하기 떄

2021년 9월 29일
·
0개의 댓글
post-thumbnail

[JavaScript #20] Basic of JavaScript - DOM Event Flow

이벤트의 작동 원리를 알아야 이벤트를 제대로 쓸 수 있다!김버그님의 DOM 강의를 듣고 학습한 내용입니다. 어떤 요소에서 이벤트가 발생했을 때, 그 이벤트를 전파하여 감지하는 흐름을 의미한다.HTML은 중첩된 구조(HTML -> body -> div)로 이루어져있다.만

2021년 9월 28일
·
0개의 댓글
post-thumbnail

[JavaScript #19] Basic of JavaScript - DOM Event

좋은 웹사이트란 무엇일까? 웹사이트 내 오류가 없고, 이동이 자연스럽고 부드러워야 하며, 클릭했을 때 빠르게 반응해서 사용자의 분노를 일으키지 않는 사이트가 좋은 사이트일 것이다. 특히 요즘에는 화려하고 다양한 기능이 들어가는 웹 사이트가 늘어나면서 프론트앤드 개발자가

2021년 9월 28일
·
0개의 댓글
post-thumbnail

[JavaScript #18] Basic of JavaScript - DOM! DOM!

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다. JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. DOM은 브라우저에 내장되어 있는 API(Application Programming Inte

2021년 9월 28일
·
0개의 댓글