항해 TIL (Today I learned)

더 좋은 개발자가 되기 위해 오늘 했던 일과 느낌점을 간단하게 정리하려고 한다.git사용 리마인드git 사용은 예전에 공부하고 사용한적이 있으나 사용한지 오래되서까먹은거 같아 다시 공부 하고 사용했다.git clone \~\~~ "파일명"git initgit statu

미니프로젝트 CSS메인 페이지를 CSS로 꾸며줬다.z-index, sticky, flex 등등 찾아보고 직접 적용했다.예전에 CSS는 강의를 듣고 공부해서 복습하기 편하긴했다.하지만 오랫동안 안해서인지 사용법을 조금 까먹었던거갔다역시... 꾸준히 해주는게 중요한거같다.

로그인회원가입이랑 로그인 페이지를 만드는데 각 페이지에 맞게 사용하지 않는건 감추고 사용하는건 보이게하는 형식으로 만든다.id값과 class값을 줘서 버튼 값에 함수를 줘서 하는데 그렇게 하면 일일이 다해줘야는데.toggleClass를 이용해서 이를 간단하게 할수있다.

@app.route('/sign_in', methods='POST')def sign_in(): username_receive = request.form'username_give' password_receive = request.form'password

react 하기 전 javascript REACT 시작전 설치 NVM(Node Version Manager)을 왜 써야할까? nvm은 Node.js의 버전 관리자입니다. 우리 컴퓨터에 node를 설치하는 툴인데 수많은 버전을 마음대로 골라 설치할 수 있게 해주는 멋진

라이프 사이클 함수로 보는 라이프 사이클 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클을 아는 건 중요한데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰냐구요? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문입

Event Listener 이벤트 리스너란? 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요! 더 많은 이벤트가 궁금하다면? → 클래스형 컴

리덕스를 통한 리액트 상태관리 상태관리! 왜 필요할까? 리덕스는 여러 컴포넌트가 동일한 상태를 보고 있을 때 굉장히 유용합니다! 또, 데이터를 관리하는 로직을 컴포넌트에서 빼면, 컴포넌트는 정말 뷰만 관리할 수 있잖아요! 코드가 깔끔해질테니, 유지보수에도 아주 좋겠죠.

keyframes 1) keyframes 사용하기 keyframes는 styled-components안에 이미 들어있습니다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용합니다. transition은 단순한 엘리먼

Firestore Database 클릭컬렉션 시작 클릭컬렉션 아이디 입력 ex)ranking문서아이디 ---> 자동id 클릭\-필드 ex) score number 100 user-name string 이민국 저장 추가한다.

우리가 firestore에서 데이터를 가져올 때 비동기 통신을 한다고 했죠! 리덕스에서 비동기 통신을 할 때 필요한 미들웨어라는 친구 먼저 설치할 거예요.미들웨어가 뭐냐구요?리덕스 데이터를 수정할 때 액션이 디스패치 되고 → 리듀서에서 처리 하던 과정 기억하시죠?미들웨

가하기 버튼을 누르면 → 로딩 스피너를 띄우고 → 추가가 끝나면 → 페이지를 보여줍시다!버킷리스트 앱을 새로고침 해볼까요? redux에 넣어둔 데이터 때문에 자꾸만 가짜 데이터 3개가 먼저 보이죠! 파이어스토어의 데이터만 제대로 보여주고 싶을 때, 어떻게 하면 좋을

하.....~루 종일 과제를 했다...TIL이 자꾸 밀린다...화이팅하자.

선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상이 되도록요!)초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화됩니다!)할당: undefined로 초기화된 변수에 실제 값을 할당var는 가급적

Promise 자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!) 그리고 비동기 작업을 동시에 할 수 있어요. 오잉?🤢 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요? → 자바스크립트는 코어 엔진만 가지고 돌아가지 않아요! 실행환경(런타임)의 도움을 받아 동시 실행을 합니다. (W...

우리는 목록을 가져오고 게시글을 추가하고, 수정도 하겠죠! 이런 기능을 만들 때는 데이터가 어떻게 변할 지 먼저 고민하고 만들기 시작하는 습관을 길러봐요! 🙂 게시글 목록을 나눠서 가져오고, 목록에 게시글 추가하기 위한 준비되셨나요! 😎 여기서 잠깐!우리는 목록을

React에서 match와 props React에서 match와 props는 별로 연관성이 없습니다. 하지만 변수를 다른 컴포넌트로 넘겨 사용할 때 쓰는 건데, 헷갈릴때가 있더라구요..(나만 그럴수도..ㅎㅎ😂) match는 route -> component pr

망했다..또 다시 TIL이 밀렸다..정신차리자

오늘은 realtime database 터트렸다.정말 죽고싶다. 왜 터졌는지 분명하지않아서 더 그렇다기능 구현중 하나가 작동하지않아 경험상 오타가 있다고 생각해 스크립트를 다 뒤져서 확인해 보고console.log도 찍어가면서 봤는데 알수가 없어서 했던 개인 과제를 다

데이터를 처리하는 방식인 동기, 비동기 처리에 대해 많은 글이 있지만 정확하게 와닿지가 않았다. 최대한 내가 이해한 방식대로 서술해 보려고 한다. 동기 (Synchronous)와 비동기(Asynchronous) 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야

변수는 선언, 초기화, 할당 이렇게 3단계를 거쳐 생성된다.선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록한다.\-> 스코프가 참조하는 대상초기화 단계(Initialization phase) : 실행 컨텍스트에 존재하는 변수 객

async & await는 뭔가요? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주죠. 개발자에게 읽기 좋은

Promise가 뭔가요? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 왜 필요한가요? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리...

리덕스 미들웨어 리덕스 미들웨어는 리덕스가 지니고 있는 핵심 기능입니다. Context API 또는 MobX를 사용하는것과 차별화가 되는 부분이죠. 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업

하루 종일 미니프로젝트를 했다. 사실 오늘 머했는지 모르겠다.. 미친거지... 제발 적극적으로 임하자 피곤해서 오늘은 전보다 일찍 잘까한다.

이 글은 나중에 어떠한 문제로 고통받거나, 화가 많이 났을 때 다시 보기 위해 쓰는 글이다.오늘 나는 개발을 하다가 떄려치고 싶은 생각이 들었다.(아니 사실 매일 느끼는거같다.)적어도 한 5000번은 참은거 같다.'내가 지금 이걸 왜 하고 있지'하는 생각도 들었다.지금

이제 미니프로젝트의 마지막 밤이다.사실 내가 무엇을 했는지 잘 모르겠다.사실상 팀원중 한분에게 의지해서 시간만 보낸거같다.해볼려고 많이 시도는 해봤다.아직 내가 멀 해야될지 모르고있는거 같다.어디부터 문제가 있는걸까'내가 지금 멀 하고 있지?'하는 생각을 수도 없이했다

정신이 없다.금요일날 TIL를 작성하지 못한거같다.(새벽6시 까지 프로젝트를 함)이게 핑계 일수도 있지만 일딴 프로젝트 완수가 목표였다.31일차에 32일차에 작성해야할 것을 작성했다.먼가 하나가 무너지니 연쇄적으로 무너지는거 같다.이후에 WIL을 작성 할 껀데 git에

클론 코딩 주차가 시작 됬다.매번 격는거지만 걱정이 많이 된다.기능 구현을 하고 익숙해져야는데 그게 잘안되는거같다.자존심 때문인지 질문을 안하는건지 아직도 부족하다.가끔 내 자신이 한심해질때도 있다.이제 공부 스타일을 좀 바꿔야겠다.일딴 손이 많이 가는 HTML CSS

레이아웃 1 - 스크롤 없는 100% 레이아웃 스크롤 없는 100% 레이아웃은 전체 페이지를 구성할 때 자주 사용할 수 있는 레이아웃이다. 다음 그림과 같이 콘텐츠의 길이에 상관없이 브라우저 화면 전체를 채우는 레이아웃이다. 이 레이아웃에서 웹 페이지의 위에 있는 메뉴 영역의 높이는 고정되어 있다. 부모 영역에서 메뉴 영역을 뺀 나머지 영역 전체를 자식 ...

오늘은 팀을 구성하는 것 때문에 제 정신이 아니였다.사실 내 실력이 누굴 데리고 같이 팀을 할만한 실력이 아니라고생각했기 때문에 섣불리 누구에게 제안을 할수없었다.(배가 부른건진 모르겠지만 왠지 모른 죄책감 때문에...😩)그 죄책감은 팀을 구하는 것에 소극적이고 무관

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다.이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도

axios 밑 코딩 공부 오늘은 axios 사용법에 대해 공부하게 되고 알게 된거같다. (물론 많이 써보고 확인해가면서 내것을 만들어야 하지만) 솔직히 혼자할려고 하니 그냥 막막했다. 우리에겐 구글이 있고 깃허브도 있지만 막역하게 그것을 보고 내것에 적용하기가 너무

redux는 react에서 많이 사용되는 상태관리를 위한 라이브러리라고 볼 수 있다. 즉 리액트 이외에서도 사용할 수 있지만 redux와 react-redux의 npm 다운로드를 비교했을때 아마도 react의 상태관리를 위한 도구로 가장 많이 사용되는 것으로 추정된다.

.git 하위 디렉토리 생성 (폴더를 만든 후, 그 안에서 명령 실행을 실행하면 새로운 git 저장소가 생성된다.)기존의 소스 코드 다운로드/복제로컬 저장소 복제원격 서버 저장소 복제추가 및 확정커밋에 단일 파일의 변경 사항을 포함커밋에 파일의 변경 사항을 한번에 모두

실전프로젝트 2일차다.일딴 저번주에 깃에 대해 공부를 나름 열심히해서 조원분들께 깃에 대해 설명했다.(내가.... 남에게 설명하는 일이 생기다니.. 코딩하면서 별로 못느낀 느낌을 받았다.)깃공부를 나름 열심히 하길 잘했다고 생각한다. ㅎ😆기분 완전 좋다.다만 실전 프

React에서 match와 props는 별로 연관성이 없습니다.하지만 변수를 다른 컴포넌트로 넘겨 사용할 때 쓰는 건데, 헷갈릴때가 있더라구요..(나만 그럴수도..ㅎㅎ)match는 route -> componentprops는 component -> component 로

기어코 또 밀렸다..정신 차리자

오늘은 내가 제 정신이 아닌거 같다.어제 시도 하던 usestate를 이용한 해시태그 만들기가 마음 같이 잘안됬다.조원중 잘하시는분이 계셔 물어볼까했는데 오늘은 부재중이셔서딱히 질문을 드릴수 있는상황이 아니였다.사실 그 상황 때문에 질문을 못했다면 핑계지...그것을 해

라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. 3가지 컴포넌트

달력을 쓸 일이 있어서 React-datepicker 라이브러리를 사용했습니다. 그런데 설명과 예시 소스가 불친절한 느낌을 받았어요. 😥데모버전을 그대로 사용하면 에러가 빵빵 터지더라구요. react-datepicker : www.npmjs.com/package/re

런치약속 작성페이지를 구현했다. 다른건 별로 문제가 되지않았는데 달력을 다는게 너무 힘들었다. 그냥 css를 하는게 아니라 자체 구현 기능이따로있었고 데모를 보며 그걸 판단하고 사용하고자 하는것을 찾아 적용하는게 시간이 좀 오래걸렸고 적용이 잘 안되는 부분이

오늘은 바쁘게 프로젝트를 따라가며 놓친 기본 개념이너무 부족한거 같아 진행중인 실전 프로젝트가 아닌todolist를 만들며 기본을 다시 다졌다.( 실전 프로젝트를 아예 버린건 아님;;; )서버와 연결하면서 하는 것이 아닌 state를 관리하며기본 개념을 공부했는데 하면

padding-top 의 값을 아래와 같이 변화시켜 다양한 비율을 얻을 수 있다.2:1 : padding-top: 50%1:2 : padding-top: 200%4:3 : padding-top: 75%16:9 : padding-top: 56.25%어제와 같이 react

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다. 이번 포스팅에서는 em과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록

3줄 넘어갈시 .... 으로 표시 그리고 오버하는건 숨김display: -webkit-box; \-webkit-box-orient: vertical; \-webkit-line-clamp: 3; overflow: hidden; 그림과 같이 3줄 이상 넘어가

오늘 프로젝트를 진행함에 있어 팀원과의 소통이얼마나 중요한지 새삼 느꼈다.주말에 물론 많은 시간을 집중하진 못햇지만나름 프로젝트에 도움이 되기 위해 노력했지만대화 부재로 생긴 여러 오해들과(그냥 될때로 되라식의 마인드로 생각했다 라든지...)프로젝트의 진행이 막힘으로

오늘 내가 머한지 잘 모르겠다..무한 스크롤을 할려고 공부는 해보는데도무지 이해가 안되고 어떻게 적용시켜야할지감이 안온다.사실 문서를 읽다보면 이게 어떻게 작동 되는지는이해를 하는거같은데 적용하려고 하면 잘 안된다..(결국 제대로 아는것이 아니라는거겠지?)일딴 적용해보

안녕하세요, 오늘은 Intersection Observer API를 이용해서 무한 스크롤을 만들어 볼거에요무한 스크롤은 로드해야하는 게시글 목록이 많은 페이지에서 사용자의 편의성과 클라이언트의 부담을 덜어줄 수 있는 획기적인 아이템입니다.먼저 MDN에서는 Interse

localhost 개발 환경을 모바일에서 확인해보고 싶을 때 우선 제어판 -> 시스템 및 보안 -> Windows 방화벽 ( 제어판\\시스템 및 보안\\Windows 방화벽 ) 고급 설정 인바운드 규칙 -> 새 규칙 새 인바운드 규칙 마법사 -> 포트 -> 특정 로컬

import React, { useState, useEffect } from "react";import styled from "styled-components";import { apis } from "../shared/axios";import { ImSearch } f

중간발표날이다.사실 우리 조과제는 준비가 잘 안됬다고 생각했다.그도 그럴것이 나름 노력은 한다만 기능 구현을 자유자제로 할수 있다고 생각하고 있지않았고 실제로도 그랬다.이런 점에서 미안함도 많이 느꼈다.(사실 미안할것도 없는데 공부하러 온거니깐... 모르는게 당연한거지

React hooks로 탭 기능을 어떻게 구현할까.아래 그림처럼 상단에 탭타이틀이 있고, 하단에 탭 콘텐츠가 있으며, 각 탭 타이틀을 클릭할 경우 해당 컨텐츠가 보이도록 할 것이다.1 ) 탭타이틀을 클릭하면 해당 타이틀에 'is-active'라는 class를 부여해서

npm install --save react-scrollyarn add react-scroll먼저 페이지를 하나 만들어서 이동할 영역 Middle과 클릭 시 Middle 영역으로 이동하게 할 Side 영역으로 나눠준다이렇게 오른쪽 사이드에 생성한 Day 1~Day 4

사이트에 들어가면 위처럼 다운로드 및 깃허브, 데모, 기본 내용 설명 등을 볼 수 있다. 가이드가 자세한 듯 자세하지 않아 적용하는데에 꽤 애를 먹었어서 정리 겸 글을 남겨본다.Owl Carousel의 다양한 데모 중 내가 참고한 것은 AutoPlay Demo. Doc

파일 필드의 디자인은 브라우저마다 제 각각이며, 선택한 파일의 이름을 표시하는 부분과 업로드 버튼이 한데 묶여 있어 이를 각자 컨트롤할 수 있는 방법이 없다. 또한 스타일링을 위해 CSS를 적용해보면 어떤 것은 내부 박스에 영향을 주고 어떤것은 외부를 감싼 박스에만 영

브라우저의 역할은 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정인데 렌더링은 화면에 나타내는 과정을 의미한다. 더 상세하게 알아보면DOM 생성CSSOM 생성Render Tree 생성Render Tree 배치Render Tree 그리기 이러한 과정을 통

각각의 프로그래밍에서 일급객체의 비교에따라 간접적 비교가 가능하다. 함수형 프로그래밍의 일급 객체는 함수 자체가 일급객체가 됩니다. 객체지향 프로그래밍에서는 객체, 클래스 등이 일급 객체가 됩니다. 객체지향은 객체의 특성에 의거하여 접근대상을 제어하고 속에있는 데이터를

이번에는 번들링(Bundling)과 트랜스파일(Transpile) 두 가지 주제에 대하여 얘기합니다. 번들링과 트렌스파일은 독립적인 주제이기는 하나 대부분 빌드 툴 체인(Build Tool Chain)이라는 큰 주제에 같이 묶여서 사용되게 됩니다.TIP빌드 툴 체인이란

JWT의 등장 JWT(Json Web Token)은 위와 같은 일련의 과정속에서 나타난 하나의 인터넷 표준 인증 방식입니다. 말그대로 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 토큰인 것이죠. 따라서 사실 기본적인 인증을 진행하는 구조는 Cooki

서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링의 과정은 아래를 참고하자!SSR은 전통적인 웹 어플리케이션 렌더링 방식으로 사용자가 웹 페이지에 접근할 때, 서버에 페이지에 대한 요청을 한다. 이때 서버에서는 HTML,

.jpg)이미지 출처: www.google.com Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 그렇다고 React에서 SSR이

REACT.js pre-rendering을 안하면 초기에는 아무것도 없다가 js load 된 이후에 페이지의 요소들을 채워 나가는것 NEXT.js pre-rendering을 하면 초기에 사전에 만들어 논 HTML 요소들이 나온다. (여기엔 meta 데이터들도 포함한

http은 Connectionless하고 Stateless 한 프로토콜입니다. 즉, 계속 브라우저와 서버가 연결된 상태를 유지 하지 않는 다는 것입니다. 각각의 요청은 모두 무관한 독립적인 트랜잭션으로 취급합니다. 따라서 Real-Time Communication(실시

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할

포폴 개편 작업을 하다가 react-router를 사용하여 위와 같이 각 path 마다 컴포넌트를 뿌려줄 때, props는 어떻게 전달해주어야 하는지 찾아보았다.예를들어, Education 컴포넌트에서 education이라는 prop이 필요하다고 가정해보자.Educat

최근에 추가됨스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.이제 막 자바스크립트를 배우기 시작했다면 옵셔

오늘은 최종프로젝트에서 기존 자바스크립트의 alert창 대신 많이 사용했던이쁘고 간편한 alert인 sweetalert2 에 대해 간단하게 소개해보고자 한다. ​https://sweetalert2.github.io/sweetAlert은 다음과 같이 기존의 al

6주간 했던 프로젝트를 협렵사나 발표회에 온 회사들에게소개하고 시현 하며 궁금해하는것들을 답하는 시간을 갖는날이였다.그동안 했던것을 선보이고 어떻게 했는지 설명도 하는 자리여서 많이 떨리기도 하고 잘할수있을까 하는 생각이 많이 들었다.프로젝트 자체에 만족하진 못했다.더

자바스크립트에서 문자열을 숫자로 변환할 때 parseInt(), parseFloat(), Number() 등의 메서드를 사용하기도 하지만, 단항 연산자(+)를 사용하면 더욱 간단하고 가독성 좋게 변환할 수 있다.단항 연산자(+)는 한 개의 피연산자, 즉 한 개의 인수와

정적인 메모리: 컴파일할 때 메모리를 할당 받고 시작한다. ex)기본형 자료형동적인 메모리: 실행하는 런 타임에 메모리를 할당 받는다. ex)참조형 자룔형, malloc, calloc LIFO, Last in First out으로 후입선출의 구조이다. 백 트래킹,

각종 수학 계산을 도와줍니다. 이 객체는 Number과는 달리 Math()처럼 함수로는 사용할 수 없습니다.0부터 1 사이의 랜덤 값을 뽑아줍니다. 1은 불포함입니다.Math.random(); // 0.xxxxxxxxx 매번 할 때마다 달라짐Math.floor(값),

질문의 범주를 다음과 같이 4개로 구분하였습니다.단골 질문 - 기본적으로 다 알고 대답할 수 있어야 하는 내용직무 관련 질문 - 최소 70% 이상 대답할 수 있으면 좋지 않을까? 하는 내용그 외 나올 수 있는 질문 - 필수로 알아야 하는 질문은 아니지만 알면 좋은 내용

react로 개발을 하고 있다면 거의 대부분 babel도 함께 사용하고 있을 것이다. create-react-app에도 기본으로 들어있고 기타 react 관련된 튜토리얼을 따라 하다 보면 자연스럽게 babel을 설치하게 된다. 굳이 react가 아니더라도 자바스크립트를

두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여숫자를 오름차순으로 정렬하는 예제를 위와 같이 단순화 할 수도 있습니다.var arr = 'apple','banana', 'kwie','blueberry';var result = arr.includes("kwie");co

토

자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다.Alert는 사용자에게 알림을 주고자 할 때 사용하는데요.자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다.하지만 우리는 이런 알림창보다 더 예쁜 알림 창을 원하죠

정렬되어 있는(이분 탐색의 주요 조건) 배열에서 데이터를 찾으려 시도할 때, 순차탐색처럼 처음부터 끝까지 하나씩 모든 데이터를 체크하여 값을 찾는 것이 아니라탐색 범위를 절반씩 줄여가며 찾아가는 Search 방법이다.1 2 3 4 5 6라는 값에서 6을 찾고자 한다면배

하단 네비게이션 컴포넌트를 BottomNav.jsx 라는 이름으로 파일을 생성하고 아래와 같이 타이핑한다.위와 같이 button이라는 글자가 5개 생겼다.BottomNav.jsx에 css를 적용할 BottomNav.css파일을 생성하고 아래와 같이 타이핑한다.네비게이션

원문: https://andela.com/insights/structuring-your-react-application-atomic-design-principles/필자는 처음 프로그래밍을 시작했을 때, 디자인 패턴, 파일구조와 같은 추상적인 프로그래밍의 개념

CORS Link 🔥 CORS가 뭔가요? CORS는 Cross Origin Resource Sharing의 약자로, 교차 출처 공유라는 의미입니다. Origin은 ① scheme, ② host, ③ port 로 이루어진 도메인을 의미합니다. (IE의 경우 por

오늘은 컴퓨터에 있는 이미지를 업로드 하고 싶을 때, 미리보기를 구현해 보려고 한다.파일업로드를 위해서는 form태그의 enctype='multipart/form-data'를 이용해야한다.multipart/form-data에 대해서는 찾아보길 바란다.form태그에 en

class와 object 차이점

활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이입니다. 요즘은 대형 SI 프로젝트에서

일급 객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 이는 함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나이다.외부 상태를 변경하지 않고 외부 상태에 의존하지도 않