태그 목록
전체보기 (79)TIL(57)JavaScript(25)React(18)CSS(12)html(10)web(8)DOM(5)algorithm(4)알고리즘(4)internet(3)component(3)github(3)spa(3)기업협업(3)number(3)json(2)JOIN(2)객체(2)MPA(2)프론트엔드(2)float(2)split()(2)Map(2)reverse(2)background(2)position(2)class(2)array(2)object(2)function(2)react native(2)project(2)hook(2)git(2)useLocation(2)useState(2)객체지향(2)FHS(1)로그인(1)airbnb(1)인증(1)key Streching(1)virtual DOM(1)path parameter(1)정의(1)배열(1)할당(1)인가(1)Type Coercion(1)Root(1)refactoring(1)선언(1)hooks(1)practice(1)substring(1)sql(1)백엔드(1)패널(1)뉴발란스(1)공유기(1)terminal(1)local starage(1)dynamic routing(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)동적 라우팅(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)관심사의 분리(1)nat(1)역사(1)State hook(1)브라우저(1)path(1)컴퓨팅 사고(1)Type Conversion(1)PORT(1)componentdidupdate(1)타입 표기(1)router(1)튜플(1)Self-Refactoring(1)매개변수(1)Firebase(1)개발자 도구(1)문제해결능력(1)useEffect(1)동작 원리(1)Side Effect(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)pagination(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)Soc(1)호출(1)selector(1)상대 경로(1)절대 경로(1)실행(1)westagram(1)cli(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)Computational Thinking(1)셀프 리팩토링(1)Pop(1)block(1)개발자(1)컴파일(1)console(1)transition(1)custom hook(1)styled component(1)명령어(1)접근성(1)http method(1)master(1)setState(1)프로젝트(1)Fetch(1)Functional Component(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)useNavigate(1)리눅스(1)중첩반복문(1)object.keys(1)Database(1)페이지네이션(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)query parameter(1)animation(1)tag(1)routing(1)argument(1)useParam(1)new 연산자(1)Event(1)
post-thumbnail

[React #15] 관심사의 분리(Separation of Concerns, SoC)와 Custom Hook

Separation of Concerns 하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(걱정)을 부여하게 되면 그 코드를 읽는 사람은 쉽게 혼란에 빠지게 됩니다. 가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 겁니다. 바꿔 말

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

Data 호출을 위한 fetch() 사용

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다. Web API는 클라이언트 측에서 사용할 수 있는 자바스크립트 내장함수로 현업에서는 axio

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

컴퓨팅 사고(Computational Thinking)

개발자란? 세상의 문제를 코딩(기술)으로 해결하는 사람 컴퓨팅 사고 컴퓨터(사람이나 기계)가 효과적으로 일을 수행할 수 있도록 문제를 정의하고, 그에 대한 답을 기술하는 것이 포함된 사고 과정 일체 예시: 인형 뽑기 인형뽑기 기계를 본다 달려간다 천원을 넣는다 천원

2022년 2월 16일
·
0개의 댓글
·
post-thumbnail

[React #14] 페이지네이션과 Query Parameter

Pagination 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 한다. (ex: 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능) 프론트엔드에서

2022년 2월 13일
·
0개의 댓글
·
post-thumbnail

[React #13] 동적 라우팅과 Path Parameter, 그리고 관련 Hooks

라우팅을 위한 기본 코드 구조 index.html : public/index.html에 위치하며 React 페이지 로드 시 가장 먼저 호출되는 영역 index.js : React 앱을 렌더하고 index.html의 div#root 이하에 끼워넣는 역할 Router.j

2022년 2월 13일
·
0개의 댓글
·
post-thumbnail

[React #11] Array, Object in State

item 클릭 시 cart에 담기고, 담긴 item 클릭시 삭제연관된 변수의 묶음은 객체로 처리한다.

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

[React #12] The Effect Hook (feat.useEffect())

웹 사이트를 만들다 보면 화면에 보일 수 있는 데이터를 서버에서 받아오기도 해야 하고, state가 바뀔 때마다 함수를 실행시키거나, 이벤트 리스너를 달았다가 해제하는 등의 동작이 필요할 수 있다. useEffect hook은 바로 이럴 때 유용하게 쓸 수 있다. H

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

[React #10] React Hooks로 함수형, state 효율적으로 쓰기(feat.useState())

Hooks 개발 배경 React의 Class형 컴포넌트로 모든 프로그래밍을 하던 시절, 개발자들은 React팀에 다음과 같은 feedback을 던진다. "Class형은 컴포넌트 간 재사용하기 어려워요!" "Class형은 복잡하고 테스트하는데 시간을 많이 잡아먹어요!"

2022년 1월 3일
·
0개의 댓글
·
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개의 댓글
·