투두리스트 만들어보기 - 수정, 삭제 기능

2020-02-04

간단한 CRUD 기능이 있는 투두리스트를 만들어 보았습니다. demo : https://simsimjae.github.io/react_todolist 위 예제는 다음 레포지토리에 저장되어있습니다. git clone https://github.com/simsimjae/react_practice.git get reset --hard eb11259927…

투두리스트 만들어보기 - 조회, 작성 기능

2020-02-04

간단한 CRUD 기능이 있는 투두리스트를 만들어 보았습니다. demo : https://simsimjae.github.io/react_todolist 위 예제는 다음 레포지토리에 저장되어있습니다. git clone https://github.com/simsimjae/react_practice.git get reset --hard eb11259927…

[Next.js] Automatic Static Optimization

2020-01-31

Next는 페이지에 가 없으면 해당 페이지는 페이지라고 판단하여 한다. 페이지를 pre-render한다는 말은 빌드할떄 그 페이지를 html파일로 만들어버린다는 얘기이다. 유저의 요청이 들어왔을때 서버에서 html파일을 만들어서 주는게 아니라 미리 빌드할때 페이지를 만들어둔다. 그 페이지에서 비동기 요청을 해서 받아온 데이터로 마크업이 달라지지 않기 때문…

[Next.js] scss import시 Link 컴포넌트 작동 안함 이슈

2020-01-31

발견된 현상 pages 디렉토리에 와 가 있었다. about.js에는 swiper 컴포넌트를 가져와서 사용하고 있었는데 스타일링을 위해서 about.js에서 swiper.scss를 import해서 사용하고 있었다. 그런데 이 scss를 추가하자 갑자기 메인페이지에서 about페이지로 Link컴포넌트(next/link)로 라우팅이 안되는 이슈가 발견되었다.…

[LeetCode] counting-bits

2020-01-30

문제 Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the number of 1's in their binary representation and return them as an array. Example 1: Input: 2 Ou…

[Next.js] Getting Started, Pages, Routing

2020-01-28

요즘 SPA를 만들기 위한 많은 라이브러리와 프레임워크들이 있지만 대부분 러닝커브가 크다. SEO와 UX를 위해서 서버사이드 렌더링도 배워야 한다. 그래서 우리는 간단하지만 커스텀가능한 Next.js를 개발했다. next 사용 조건 및 특징 next를 사용하기 위해서는 와 같은 파일에서 리액트 컴포넌트를 default로 export해야한다. next는 웹…

[MonoRepo] lerna? yarn workspace? 크게 개념만 잡아보기

2020-01-23

yarn workspace? lerna? 비유와 예시를 통해 이해해보기 대기업에 재직중인 yarn과 lerna가 있다. lerna는 대기업 팀장이고 yarn은 lerna 팀장 밑에서 일하는 직원이다. lerna는 여러가지 패키지들(packages)을 관리하는 관리자이다. yarn은 각 패키지 하나하나를 관리하는 사원이다. 는 관리자 역할을 오래 해왔기 때…

동적 Context API

2020-01-20

위 예제는 다음 레포지토리에 저장되어있습니다. git clone https://github.com/simsimjae/react_practice.git get reset --hard 6425494561510d85fc7fb098ba4256e1d59f2fbd yarn start or npm run start 실행 서론 이전 버전에서는 리액트만으로 상…

Mono Repo

2020-01-17

프로젝트 구조를 구성하는 방식 3가지가 위에 나와있다. , , 이다. 구조는 하나의 레포지토리안에 하나의 패키지안에 여러개의 서비스가 폴더로 구분된다. 구조는 하나의 레포지토리안에 하나의 패키지안에 하나의 서비스가 들어간다. 구조는 하나의 레포지토리안에 큰 공통 패키지하나안에 여러개의 서브 패키지들(서비스)이 들어있다. 구조는 비슷한 여러개의 소규…

[Webpack] 웹팩 컴파일 에러 디버깅하기

2020-01-16

웹팩 플러그인을 붙이다보면 많은 오류를 만나게된다. 심지어, 많은 플러그인들이 문서화가 제대로 안되있는 경우가 많아서 디버깅을 해야 하는일이 생긴다. 미리미리 웹팩을 디버깅하는 방법을 알아두면 큰 도움이 될것이다. 웹팩은 친절하지 않다. 웹팩은 위와 같이 어디에서 에러가 발생한건지 정확한 위치를 알려주지 않는다. 오류를 찾기 위해서 플러그인을 하나씩 제…

[Nodejs] 심볼릭 링크

2020-01-15

Node.js 에서는 간단한 모듈 불러오기 전략을 사용한다. require()로 모듈을 불러오면 다음과 같은 일들이 벌어진다. 제일먼저 코어 모듈인지 확인하고 로드한다.(Node에 기본 내장된 모듈, http 같은 모듈들..) 상대경로로 모듈이 require되었으면 그 모듈을 로드한다. node_modules의 외부 모듈을 찾는다. 만약에 모듈이 거기에 …

[Nodejs] 심볼릭 링크2

2020-01-15

때떄로, 내 프로젝트 코드 뿐만아니라 외부에서 불러온 패키지 모듈도 같이 살펴봐야 할 때가 있다. 내가 지금 새로운 노드 모듈을 만들고 있는데 이 모듈에 대한 테스트를 아직 못끝냈다고 해보자. 이럴때 새롭게 만들고 있는 노드 모듈을 또 다른 내 프로젝트에 설치()한 다음에 테스트해볼수있다. 이때 문제가 생기면 외부 모듈과 내 프로젝트를 동시에 디버깅해봐야…

[Nodejs] node_modules의 .bin폴더의 정체

2020-01-15

패키지 안에는 .bin이라고하는 숨김 폴더가 존재한다. 이 폴더는 뭐때매 있는건지 궁금해서 찾아보았다. .bin 이 폴더는 이름에서도 유추할수있다시피 바이너리 파일들이 저장되는 곳이다. (바이너리 파일이란 1과 0으로만 이루어진 파일이다.) 모듈을 npm install로 설치하고나서 node 방금 설치한 모듈 를 입력해서 노드로 그 모듈을 실행 할 수도있…

[LeetCode] subsets

2020-01-13

문제 Given a set of distinct integers, nums, return all possible subsets (the power set). Note: The solution set must not contain duplicate subsets. Example: Input: nums = 1,2,3 Output: [ 3, 1, 2, 1,2,…

[LeetCode] longest-substring-without-repeating-characters

2020-01-12

문제 Given a string, find the length of the longest substring without repeating characters. Example 1: Input: "abcabcbb" Output: 3 Explanation: The answer is "abc", with the length of 3. Example 2: Inp…

[LeetCode] max-increase-to-keep-city-skyline

2020-01-11

문제 Example: Input: grid = [3,0,8,4,2,4,5,7,9,2,6,3,0,3,1,0] Output: 35 Explanation: The grid is: [ 3, 0, 8, 4, 2, 4, 5, 7, 9, 2, 6, 3, 0, 3, 1, 0 ] The skyline viewed from top or bottom is: 9, 4, 8, …

[LeetCode] reverse-linked-list

2020-01-11

문제 Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5->4->3->2->1->NULL Follow up: A linked list can be reversed either iteratively or recursively. Could you implement both? …

[LeetCode] implement-strstr

2020-01-11

문제 Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle is not part of haystack. Example 1: Input: haystack = "hello", needle = "ll" Output: 2 Example 2…

[LeetCode] custom-sort-string

2020-01-10

문제 S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S was sorted in some custom order previously. We want to permute the characters of T so that they match th…

[LeetCode] long-pressed-name

2020-01-10

문제 Your friend is typing his name into a keyboard. Sometimes, when typing a character c, the key might get long pressed, and the character will be typed 1 or more times. You examine the typed charact…

[LeetCode] Valid Palindrome II

2020-01-09

문제 Given a non-empty string s, you may delete at most one character. Judge whether you can make it a palindrome. Example 1: Input: "aba" Output: True Example 2: Input: "abca" Output: True Explanation…

[LeetCode] min-cost-climbing-stairs

2020-01-08

처음으로 90%를 넘긴 문제.. 신기하다 문제 On a staircase, the i-th step has some non-negative cost costi assigned (0 indexed). Once you pay the cost, you can either climb one or two steps. You need to find minimum c…

[LeetCode] Climbing Stairs

2020-01-08

앞 전 문제와 비슷하지만 이번엔 경우의수를 구해보는 문제. 문제 You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb 1 or 2 steps. In how many distinct ways can you climb to the to…

[LeetCode] group-the-people-given-the-group-size-they-belong-to

2020-01-08

문제 There are n people whose IDs go from 0 to n - 1 and each person belongs exactly to one group. Given the array groupSizes of length n telling the group size each person belongs to, return the group…

[LeetCode] complex-number-multiplication

2020-01-08

문제 Given two strings representing two complex numbers. You need to return a string representing their multiplication. Note i2 = -1 according to the definition. Example 1: Input: "1+1i", "1+1i" Output…

[LeetCode] is-subsequence

2020-01-07

문제 Given a string s and a string t, check if s is subsequence of t. You may assume that there is only lower case English letters in both s and t. t is potentially a very long (length ~= 500,000) stri…

[LeetCode] array-partition-i

2020-01-06

문제 Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1, b1), (a2, b2), ..., (an, bn) which makes sum of min(ai, bi) for all i from 1 to n as large as …

브라우저 로딩 과정

2020-01-06

처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 , , , , , 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 h…

[LeetCode추천75문제/4번] Product of Array Except Self

2020-01-04

문제 Given an array nums of n integers where n > 1, return an array output such that outputi is equal to the product of all the elements of nums except numsi. Example: Input: 1,2,3,4 Output: 24,12,8,6 …

CSS Sprite 애니메이션

2020-01-03

CSS 애니메이션을 단계별로 끊어서 실행시키는 방법은 잘 알려져있지 않다. CSS 스프라이트 내의 이미지와 이미지 사이의 빈 공백은 보여주고 싶지 않으며 스프라이트 이미지를 하나의 프레임으로 취급해서 부드럽게 애니메이션을 적용할 수 있다. 위 사진을 보면 하나의 스프라이트 이미지 내의 이미지 사이사이가 키프레임에 포함되서 빈 공백 부분이 보여지는것을 알…

CSS 트랜지션과 애니메이션

2020-01-02

트랜지션의 특징 마우스를 올리기전엔 박스가 이런 모양이다. 마우스를 올리고난 후엔 박스가 커지며 백그라운드가 노란색으로 변경된다. 속성에 값이 변할때 동안 변화시키겠다를 지정했기 때문에 마우스를 올렸을때 부드럽게 변화한다. 만약에 값 뿐만아니라 div의 다른값이 변했을때도 애니메이션 효과를 주고 싶다면 대신 라고 지정하면 된다. 트랜지션을 트리거 …

[LeetCode추천75문제/3번] Contains Duplicate

2020-01-02

문제 Given an array of integers, find if the array contains any duplicates. Your function should return true if any value appears at least twice in the array, and it should return false if every elemen…

GraphQL의 Fragments란 무엇인가?

2020-01-02

Fragments 한마디로 란 쿼리의 일부분을 재활용 가능한 단위로 나눠놓은것이다. 이 예제에서 우리는 라고 하는 템플릿 파일을 사용할것이다. 이 템플릿 파일로 블로그의 게시글들을 찍어낼수 있다. 템플릿 파일 안에는 포스트를 불러오기 위한 쿼리와 그걸 보여주기 위한 마크업이 존재한다. 포스트 내용을 불러오기 위한 쿼리는 다음과 같다. 위 쿼리를 살펴보면…

GraphQL에서 Object Types이란?

2020-01-02

Object Types GraphQL 스키마 언어에서 새로운 객체를 정의하는 방법은 아래와 같다. 객체는 필드와 메소드를 갖는다. 위 Query타입에서는 메소드를 정의하고 있다. 시간이 지남에 따라 객체에 더 많은 기능이 필요한경우

DevOps란 무엇인가?

2020-01-02

그동안 DevOps란 말을 들어만 봤지 정확히 이게 어떤 의미인지를 제대로 알지 못해서 이 기회에 한번 정리해보기로 했다. DevOps 회사에서 개발을 하다보면 개발만 한다고 되는것이아니다. 프로젝트를 빌드하고 배포하고 테스트하는 운영 업무도 같이 해야 한다. 보통 회사에서는 이 두개의 일을 하는 조직을 나눠서 관리하게 된다. 그런데 하나의 서비스를 두개…

GraphQL개론

2020-01-02

GraphQL 이란? 은 클라이언트에서 서버의 데이터를 효율적으로 가져오기 위한 목적이다. 은 백엔드에서 데이터베이스의 데이터를 효율적으로 가져오기 위한 목적이다. 서버에서 작성된 어플리케이션은 을 쿼리로 입력받아 처리한 결과를 다시 응답으로 돌려줍니다.은 특정 데이터베이스나 플랫폼에 종속적이지 않습니다. GrapqhQL 파이프라인 REST API와 …

반응형 웹 사이트 제작 - margin, padding을 rem이나 em단위로 설정하지 마라!

2019-12-25

크리스마스에 코딩하고 있는 내 인생이 레전드 같지만 오늘도 달린다.. 블로그를 만들면서 포스팅 목록을 보여주는 부분을 작업하고 있는데, 만들면서 보니 내가 반응형 처리에 미숙한 부분이 많다는걸 알게 되어서 다시 처음부터 공부하기 시작했다. 오늘 공부하면서 알게된것들을 정리한다. 😄 🙂 rem단위 사용해라, 그리고 font-size는 100%로 설정하라. …

2019 프론트엔드 밋업(원티드, 배민, 토스)

2019-12-17

원티드 AB테스트 원티드는 3가지 단계로 프로덕트를 개선한다. 가설이라는건 사람마다 다르게 생각하고 결과 예측도 사람마다 다 다르게 한다. 남을 설득하거나 설득 당할수 있다. 경험이나 감만으로 결과를 예측하는것은 위험하다. 테스트 단계에서 프론트엔드 개발팀이 기여했던 경험에 대해서 얘기해보겠다. 회원가입전환룰 높이기위해 진행한 ab테스트 채용공고 신…