hwlink

고정 헤더 영역

글 제목

메뉴 레이어

hwlink

메뉴 리스트

  • 홈
  • 태그
  • 방명록
  • 분류 전체보기
    • Memo
    • Library
    • Coding
      • Svelte,Sveltekit
      • React
      • JS
      • CSS
      • 알고리즘
      • Error
      • TypeScript
      • WEB
      • Network
    • Git
    • Code
    • 마우스버리기
    • Project
      • Weasly(화장품결제구독서비스)
      • Hines(리빙쇼핑몰)
      • 기업협업
    • book

검색 레이어

hwlink

검색 영역

컨텐츠 검색

Coding

  • [Algorithm] LeetCode Twosum JavaScript hash table

    2022.01.23 by hwlink

  • [CSS] Tailwind CSS

    2022.01.16 by hwlink

  • Pwa Web App Manifest / manifest error of react

    2022.01.16 by hwlink

  • [CSS] background 이미지로 처리된 말풍선, css로 처리 확장성

    2022.01.12 by hwlink

  • [JavaScript] Syntactic Sugar

    2022.01.09 by hwlink

  • [Sass] Compile 파일 관리

    2022.01.02 by hwlink

  • [JavaScript] JS DOM

    2022.01.02 by hwlink

  • [JavaScript] Runtime Stack, Queue, Eventloop

    2021.12.31 by hwlink

[Algorithm] LeetCode Twosum JavaScript hash table

Q. Twosum Example 1: Input: nums = [2,7,11,15], target = 9 Output: [0,1] Explanation: Because nums[0] + nums[1] == 9, we return [0, 1]. Example 2: Input: nums = [3,2,4], target = 6 Output: [1,2] Example 3: Input: nums = [3,3], target = 6 Output: [0,1] Solution 1. Brute Foce 이중 for문으로 해결 하였고, 문제에서 n^2안에 해결하면 된다고하여 문제는 없다. var twoSum = function(nums, target) { for(var i = 0; i> key, value 둘 중 골라서 ..

Coding/알고리즘 2022. 1. 23. 01:56

[CSS] Tailwind CSS

프리온보딩 참여 과제를 진행하면서 반응형 페이지를 구현하여야 하는데 마크업을 어떤 스타일로 진행해야 할 지 고민 하던 중 이전부터 쓰고 싶던 Tailwind CSS를 적용해보았다. 사용방법은 공식문서를 참고 하는 것이 더욱 좋을 것 같아 정의와 장단점만 기록하려 한다. Tailwind CSS Tailwind CSS는 Utility-First Fundamentals CSS 프레임워크다. 미리 세팅된 유틸리티를 클래스명에 부여만 해주면 빠른 마크업이 가능하다. 기본 CSS로 작업시 코드 ChitChat You have a new message! Tailwind CSS로 작업시 코드 ChitChat You have a new message! 장점 1. 일관된 디자인 색을 예로 들면 같은 값에 같은 명도,채도의..

Coding/CSS 2022. 1. 16. 22:39

Pwa Web App Manifest / manifest error of react

Manifest Error React CRA 프로젝트 초기 세팅 후 Manifest Error가 발생하게 되었다. Manifest: Line: 1, column: 1, Syntax error. 해결방법 CRA 생성 후 manifest.json 파일을 지웠다면 index.html 내에 해당 link rel~~ 이 부분을 주석처리해주면 에러가 사라진다. manifest.json 하지만 manifest.json 파일이 뭔지 궁금해서 검색해보았다. CRA로 React 프로젝트를 생성하면 public 폴더에 다음과 같이 파일들이 생성된다. 그 중에 manifest.json도 생성되는데 manifest.json는 브라우저에 프로그레시브 웹 앱(PWA) 및 사용자의 데스크톱 또는 모바일 장치에 설치될 때 작동해야 하..

Coding/Error 2022. 1. 16. 09:54

[CSS] background 이미지로 처리된 말풍선, css로 처리 확장성

문제점 프로젝트 진행 중 프로필 클릭 시 background-image 말풍선으로 구현된 유저 private 리스트가 나오는 모달이 있었는데, logout 하단여백이 너무 타이트하다고 느껴 리팩토링을 진행하여야겠다고 생각하였다. 1차해결 처음엔 단순하게 width 값을 늘려주어 하단 여백을 늘려야겠다고 생각하여 기존 width:150px >>> width:165px로 조정해주었다. width 조정해주었더니 하단 여백은 해결이 되었다. 근데 만약 리스트가 추가된다면? 백그라운드 이미지를 교체하거나 사이즈를 일일이 조절해줘야하기 때문에 비효율적이라고 생각하였다. 최종해결 리스트가 추가될 때를 생각하면 어떻게 구현해야 할 지 고민하다가 말풍선을 css로 처리한다면 될 것 같다고 생각하여 검색을 해보았더니 말풍..

Coding/CSS 2022. 1. 12. 18:16

[JavaScript] Syntactic Sugar

정의 구문 내에서 프로그래밍 언어를 읽거나 표현하는 일을 더 쉽게 할 수 있도록 설계되었다. Syntactic Sugar 인간이 사용하기에 언어를 더욱 간결하게 만듭니다. 중복되는 로직을 더 명확하고 간결하게 표현하거나 일부 사람들이 선호하는 대체 스타일로 표현할 수 있습니다. Ex. Suger가 적용되지 않은 방법과 적용된 방법을 나열하겠습니다. 1. 삼항연산자 - Sugar 없는 표현 var a; if(SomeFunction() == 2){ a = 4; } else{ a = 9 } - Suger 적용된 표현 var a; (SomeFunction() == 2) ? a = 4 : a = 9 2. for - Sugar 없는 표현 var i = 0; while (i < num_rows) { j = 0; wh..

Coding/JS 2022. 1. 9. 14:10

[Sass] Compile 파일 관리

Scss 폴더관리 프로젝트 진행 시 개별 scss파일에 _sample.scss 언더바를 붙이면 컴파일이 발생하지 않는다. 그럼 컴파일이 일어나지 않는다면 스타일이 적용이 안되는데 어떡하나? 방법은 main.scss에서 _로 만든 scss파일들을 import 해서 한번에 컴파일 해주어 용량을 가볍게 관리하여 성능에 이점을 줄 수 있다.

Coding/CSS 2022. 1. 2. 22:58

[JavaScript] JS DOM

:: DOM? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보겠습니다. :: DOM 원리 역할 1. HTML 내용을 브라우저에 표시하게 해준다. 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 합니다. 1단계 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정. 2단계 브라우저는 해당 렌더링을 수행. \1번째 과정을 거치면 “렌더 트리..

Coding/JS 2022. 1. 2. 16:09

[JavaScript] Runtime Stack, Queue, Eventloop

Problem 자바 스크립트는 동기적 언어인데 아래의 코드를 실행하면 1번, 2번, 3번 순으로 실행되야하는게 맞지만 실제 콘솔에서는 1번,3번,2번 순으로 실행된다. JS를 처음 사용할 때에는 무지성으로 사용하여 궁금하지 않았었는데 이제는 스스로 코드를 칠 때 이해가 되지 않아 자바스크립트의 동작 원리를 간단히 정리하려고 한다. console.log('1번') setTimeout(function() { console.log('2번'); }, 0); console.log('3번') 1. JS ENGINE JavaScript 엔진은 Memory Heap, Call Stack으로 구성되어 있다. JavaScript 엔진 중 가장 인기 있는건 크롬의 V8 엔진입니다. V8 /엔진은 Node.js 내부에서도 사..

Coding/JS 2021. 12. 31. 21:44

추가 정보

인기글

최신글

페이징

이전
1 2 3 4 5 6 7 8 ··· 10
다음
TISTORY
hwlink © Magazine Lab
페이스북 트위터 인스타그램 유투브 메일

티스토리툴바