profile
oneThing
태그 목록
전체보기 (139)프로그래머스(15)코드스테이츠(11)알고리즘(8)타입스크립트(5)React(5)typescript(4)virtual DOM(4)CSS(4)재귀(4)쿠키(4)udemy(3)노마드코더스(3)배열(3)node.js(3)Side Effect(3)JSON.parse(2)JSX(2)Flex(2)cookie(2)Pseudocode(2)redux(2)웹접근성(2)sop(2)rendering(2)Polymorphism(2)Map(2)html(2)반복문(2)reducer(2)cors(2)프로토타입(2)Client Side Rendering(2)와이어프레임(2)spa(2)비동기(2)CSR(2)렌더링(2)Vercel(2)Props(2)wireframe(2)다형성(2)JSON.stringify(2)배포(2)Sort(2)기본형(1)routing(1)메모리(1)undefined(1)Function Component(1)프로그래머스 과제테스트(1)WCAG(Web Content Accessibility Guidelines)(1)css - preprocessor(1)User Flow(1)부수효과(1)substring(1)리엑트 라우터(1)CD(지속적 배포)(1)BEM(1)웹팩(1)promise(1)figma(1)요소(1)(1)커스텀 훅(1)순수함수(1)vw(1)이진법(1)깊은복사(1)lifting state up(1)terminal(1)버츄얼돔(1)data fetching(1)자료구조(1)시맨틱 HTML(1)public(1)npm(1)버추얼돔(1)indexOf(1)무한스크롤(Infinite Scroll)(1)custom property(1)LNB(Local Navigation Bar)(1)GET(1)POST(1)session storage(1)css variables(1)Effect Hook(1)버추얼 돔(1)alias(1)isOdd(1)React Hooks(1)OOP(1)객체지향프로그래밍(1)Component-Driven Development(1)회선교환(1)스코프(1)refresh-token(1)rds(1)http(1)cookies(1)상태(1)css 변수(1)코드 분할(1)Cmarket Redux(1)SMACSS(1)Same Origin Policy(1)stack(1)queue(1)한국형 웹 콘텐츠 접근성 지침 2.1(1)호이스팅(1)git revert(1)transform(1)가변(1)eslint 콘솔창(1)배포 자동화(1)최대공약수(1)뷰포트(1)클라우드 컴퓨팅(1)깃허브 마일스톤(1)세션(1)타입 안정성(1)옵셔널 체이닝(1)dependency array(1)classes(1)반응형(1)responsive(1)Secrets of the JavaScript Ninja(1)vmax(1)웹콘텐츠(1)캔버스(1)토글(1)불변객체(1)교차출처리소스공유(1)React.lazy(1)oAuth(1)자동완성(1)OOCSS(1)함수형 프로그래밍(1)객체(1)swap(1)UI/UX 사용성 평가(1)memoization(1)Web Storage(1)네트워크 요청(1)페이지네이션(Pagination)(1)vmin(1)recursion(1)인덱스(1)react-icons(1)Class Component(1)credentialed requests(1)데이터 무결성(1)박스모델(1)추상 클래스(1)카카오 채용 인턴쉽(1)비밀지도(1)숫자 문자열과 영단어(1)react hook form(1)라우팅(1)Cmarket Hooks(1)제일 작은 수 제거하기(1)행렬(1)Semantic HTML(1)Dispatch(1)lexical environment(1)트리(1)참조 자료형(1)NomadCoders(1)csrf(1)SaaS(1)null(1)specificity(1)vh(1)TCP/UDP(1)spacing(1)Prototype(1)storybook(1)preflight requests(1)이진트리(1)ajax(1)ux(1)사용자 지정 속성(1)abstract class(1)Fetch API(1)초보자도 쉽게 만드는 React 웹 서비스 만들기(1)Bubble Sort(1)TCP/IP 4계층(1)구조화된 CSS(1)while(1)검증 헤더(1)조건부 요청(1)태그(1)버셀(1)웹 스토리지(1)usedispatch(1)store(1)JavaScript(1)On-premise(1)&&(1)고차함수(1)graphql(1)Viewport(1)(1)웹서버(1)UI(1)ip(1)콜라츠 추측(1)optional chaining(1)Flexbox(1)Clickjacking(1)SQL injection(1)access token(1)searching algorithms(1)simple requests(1)keyframes(1)action(1)hoisting(1)제이콥 닐슨(1)캐러셀(Carousel)(1)GNB(Global Navigation Bar)(1)VOID(1)deploy(1)lighthouse(1)웹인증(1)code evolution(1)inheritance(1)조건문(1)반응형웹(1)문자열(1)refactor express(1)calculator(1)ec2(1)any(1)XSS(1)cli(1)REST API(1)JWT(1)json(1)조건부 effect(1)big o notation(1)패킷교환(1)온프레미스(1)드롭다운(1)React SPA(1)세션스토리지(1)클로저(1)Tree Shaking(1)repeat(1)문자열 내 마음대로 정렬하기(1)약수의 개수와 덧셈(1)라우터(1)Math.min(1)얕은복사(1)수박수박(1)filter(1)웹캐시(1)open API(1)UI디자인 패턴(1)배열 in 배열(1)CSS in JS(1)cherry-pick(1)bubblesort(1)interface(1)인터페이스(1)calc()(1)인증정보를 포함한 요청(1)tree(1)삼항연산자(1)SEB_FE_39기(1)BFS(1)타입(1)local storage(1)CORS에러(1)nano(1)React Diffing Algorithm(1)flattenArr(1)내장고차함수(1)media query(1)State(1)useMemo(1)useRef(1)함수(1)cross browsing(1)깃허브 이슈(1)핸드폰 번호 가리기(1)protected(1)OWASP(1)원시 자료형(1)코드 에볼루션 강의(1)cascade(1)nvm(1)크로스 브라우징(1)middleware(1)Sass(1)styled components(1)코플릿(1)useCallback(1)useselector(1)pure function(1)동일출처정책(1)removeExtremes(1)reduce(1)REST 성숙도모델(1)splice(1)모달(1)타이머API(1)로컬스토리지(1)피터 모빌(1)IP Packet(1)바닐라자바스크립트(1)jwt-decode(1)cpu(1)memory(1)overloading(1)정렬(1)git reset(1)최소직사각형(1)transition(1)custom hook(1)최소공배수(1)클래스(1)reverse(1)번들링(1)css selector(1)구조분해(1)flatten(1)성장형마인드셋(1)readonly(1)스택(1)메타인지(1)k번째 수(1)CSS3(1)상태관리 라이브러리(1)unknown(1)yup(1)JWT토큰(1)이중for문(1)웹공격(1)rem(1)components(1)aws(1)github(1)프리플라이트 요청(1)Java(1)객체지향(1)seo(1)Spread/Rest(1)Binary Search(1)이진탐색(1)컴퓨터 구조(1)Web Server(1)pixel(1)call signatures(1)시저암호(1)express(1)next.js(1)slice(1)css 전처리기(1)자바(1)단순요청(1)Generics(1)변수(1)react cookie(1)미들웨어(1)일급객체(1)Code Spliting(1)CI(지속적 통합)(1)W3C(1)DFS(1)그래프(1)토큰(1)Token(1)postman(1)아르파넷 프로젝트(1)useForm(1)드림엘리(1)Naive String Search(1)(1)JavaScript Koans(1)원시타입(1)참조타입(1)arrSum(1)보안(1)참조동등성(1)em(1)AMI(1)트리 순회(1)검색엔진 최적화(1).gitignore(1)algorithm(1)private(1)Redux-hooks(1)files changed(1)Suspense(1)set(1)참조형(1)Real DOM(1)react router(1)netlify(1)never(1)웹표준(1)터미널(1)cdd(1)git(1)OSI 7 계층(1)WAI-ARIA(1)fidelity(1)그리드 시스템(1)아코디언(1)canvas(1)최적화(1)trim에러(1)animation(1)Mock-up(1)리액트데이터흐름(1)

[CSS In Depth] Responsive Design

반응형 디자인의 첫 번째 원칙: 모바일 버전을 먼저 만들어라데스크탑에 필요한 디자인을 다 만든 후 모바일 버전을 위해 scale down 하는 것이 더 힘들다. 모바일 버전을 먼저 갖춰놓은 후 데스크탑을 위한 기능들을 점진적으로 붙여나가는 것이 훨씬 편한 방법이다. 1

약 13시간 전
·
0개의 댓글
·

[CSS In Depth] Grid layout

사용자 정의 줄 이름을 사용하여 열 구조를 정의하면, 그리드 아이템을 배치할 때 이 이름들을 참조하여 더 쉽게 위치를 지정할 수 있다.영역에 직관적으로 이름을 붙이므로써 시각화를 돕는다. 각각의 영역은 사각형 모양이다. 해당 아이템을 어느 그리드에 놓아야 할지, 작업해

2023년 5월 12일
·
0개의 댓글
·

React-Query

TanStack Query 1. Motivation 기존의 많이 쓰이던 상태관리 라이브러리는 클라이언트 상태를 작업하기에는 좋으나 async나 서버 상태 작업에 최적화되어있지는 않다. 그 이유는 서버상태는 완전히 그 개념이 다르기 때문이다 > #### server

2023년 5월 3일
·
0개의 댓글
·

Redux Tookit

Redux란 Javascript를 위한 것 state container predictable Redux를 이용해야하는 이유 predictable한 방법으로 어플리케이션의 전역상태를 관리하기 위해 Redux Toolkit Redux의 몇 가지 단점을 보완하기 위

2023년 4월 16일
·
0개의 댓글
·

[CSS in Depth] Flexbox

flexbox는 display 속성을 사용하여 구현한다. display: flex를 줌으로써 해당 컨테이너의 첫번째 자식요소들에 flex를 적용할 수 있다. display: inline-flex를 사용할 수도 있다. display: flex와 다른 점은, inline-

2023년 4월 7일
·
0개의 댓글
·

[CSS In Depth] box model & float

초기 상태html 코드위 사례의 4번째 해결 방안에 만일 button요소를 더 추가하게 되면 바로 문제가 발생하게 된다. 해당 요소를 선택하여 margin-top을 다시 적용하면 된다고 생각하겠지만 이렇게 건당 처리하는 것보다 좀 더 일괄적으로 적용될 수 있는 솔루션이

2023년 3월 2일
·
0개의 댓글
·

[CSS In Depth] 3. Mastering the box model

너비가 300px인 요소가 있을 때, 여기에 padding: 10px, border: 1px solid을 주게되면 너비가 322px로 바뀐다. magic numbers: border과 padding을 뺀 만큼 너비를 계산해서 적용하기 일반적으로 magic numbers

2023년 2월 10일
·
1개의 댓글
·

알고리즘: 푸드 파이트 대회

수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일

2023년 2월 6일
·
0개의 댓글
·

[CSS in Depth] 2. Working with relative units - part 2

상대단위로 em과 rem만 있는 것이 아니다. 브라우저 뷰포트의 상대적 크기(길이)를 정의하기 위한 뷰포트 단위도 존재한다. Viewport 란출처: MDN - Viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사

2023년 1월 26일
·
0개의 댓글
·

[CSS in Depth] 2. Working with relative units

2.1. The power of relative values CSS는 웹페이지에 동적바인딩(late-binding) 스타일을 부여한다. > 동적바인딩(late-binding) 바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는

2023년 1월 20일
·
0개의 댓글
·

[CSS in Depth] 1. Cascade, specificity and inheritance

2개 이상의 각기 다른 css 문법을 동일한 요소에 선언할 경우 conflicting declarations(선언한 내용이 서로 충돌함)이 생길 수 있다. 위와같이 <h1> 태그를 각기 아래와 같이 선택하여 css를 선언했을 때 결과적으로 어떤 선언이 이기게 될까

2023년 1월 11일
·
0개의 댓글
·

알고리즘: 두 개 뽑아서 더하기

정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요.numbers의 길이는 2 이상 100 이하입니다.nu

2023년 1월 10일
·
0개의 댓글
·

Big O notation

알고리즘을 푸는데 걸리는 최악의 시간시간 복잡도장기적으로 데이터가 증가함에 따른 처리시간의 증가율을 예측하기위해 만든 표기법 -> 상수는 무시함ex) 이진탐색법으로 알고리즘을 푸는데 걸리는 시간은 O(logn)이다. 하지만 이진탐색법으로 모든 알고리즘 문제를 풀었을 때

2023년 1월 5일
·
0개의 댓글
·

알고리즘: 숫자 문자열과 영단어

네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.1478 → "one4seveneight"234567

2023년 1월 5일
·
0개의 댓글
·

알고리즘: K번째 수

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다.예를 들어 array가 1, 5, 2, 6, 3, 7, 4, i = 2, j = 5, k = 3이라면array의 2번째부터 5번째까지 자르면 5, 2, 6, 3입니

2023년 1월 4일
·
0개의 댓글
·

알고리즘: 문자열 내 마음대로 정렬하기

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 "sun", "bed", "car"이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로

2023년 1월 4일
·
0개의 댓글
·

알고리즘: 비밀지도

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다.지도는 한 변의 길이가 n인 정사

2023년 1월 3일
·
0개의 댓글
·
post-thumbnail

Building the page at runtime - Real DOM

출처: Secrets of the JavaScript Ninja웹애플리케이션 생애주기 내 여러 단계HTML 코드가 웹페이지로 어떻게 바뀌는지JavaScript 코드 작동 순서이벤트 상호작용이벤트 루프Client-side 웹 어플리캐이션의 라이프사이클은 사용자가 브라우저

2023년 1월 2일
·
0개의 댓글
·

알고리즘: 최소직사각형

명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길이와 세로 길이를 조사했습니

2023년 1월 2일
·
0개의 댓글
·

알고리즘: 시저암호

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를

2023년 1월 2일
·
0개의 댓글
·