FrontEnd

    [Next.js] SSR프레임워크 Next.js와 css-in-JS
    FrontEnd/React

    [Next.js] SSR프레임워크 Next.js와 css-in-JS

    이번에 진행하는 프로젝트에 Next.js를 적용하려는 생각을 해보았다. 프로젝트는 이제 갓 시작해서 한 10%~20% 정도 진행된 것 같다. 이상황에서 Next.js를 적용하고 싶었던 이유는 1. SSR의 장점 SPA(Single Page Application)는 리소스를 많이 잡아먹을 수 밖에 없다. 기타 등등 이유 2. Next.js 학습 Next.js 를 제대로 다뤄본 경험이 없었기에 이 기회에 프로젝트에 적용을 해보고 싶었다. 3. 기업들 내가 목표로하는 몇몇 기업들에서 Next.js를 사용하고 있기에 해당 기술의 사용경험이 꼭 필요했다. 등등.. 여러가지 이유가 있지만 사실 2-3번이 가장 큰것 같다. 그럼에도 Next.js로 이주하지는 않기로 했다 그이유는 1. emotion과 next.js의..

    [React] Deep Dive 모던 리액트(6) 클래스형&함수형 컴포넌트
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(6) 클래스형&함수형 컴포넌트

    함수형 컴포넌트는 리액트 0.14버전부터 있었던 생각보다 오래된 문법이다. var Aquarium = (props) -> { var fish = getFish(props.species) return {fish} } var Aquarium = ({species}) => {getFish(species)} 이당시 함수형 컴포넌트는 클래스형 컴포넌트에서 별다른 생명주기 메서드나 상태가 없이 단순히 render를 하는 경우에만 사용되었다. 함수형 컴포넌트에 훅이 등장하면서 점점 복잡한 클래스 컴포넌트보다 함수형 컴포넌트가 사용되었다. 이 과도기에서 문제도 많았고 과연 함수형 컴포넌트와 클래스형 컴포넌트의 차이가 무엇인지 알 필요도 있다. 클래스형 컴포넌트 리액트 16.8 미만으로 작성된 코드는 대부분 클래스형 컴..

    [JS] 징검다리 건너기
    FrontEnd/프로그래머스

    [JS] 징검다리 건너기

    문제를 푸는 접근방식은 단순했다. k범위만큼씩 자르면서 해당 범위의 최댓값중 가장 작은 값을 얻어내면 된다. [ 2, 4, 5 ] [ 4, 5, 3 ] [ 5, 3, 2 ] [ 3, 2, 1 ] [ 2, 1, 4 ] [ 1, 4, 2 ] [ 4, 2, 5 ] [ 2, 5, 1 ] 예제로 따지면 위 범위중에서 범위안의 최댓값 중 최솟값은 3이다. 따라서 정답이 3이 되게 된다! 하지만 아래와 같이 내장함수를 사용해서는 풀 수 없었다. (예상한대로) function solution(stones, k) { let ret = Infinity for (let i = 0 ; i 0 && this.ary[idx][1] > this.ary[parentIdx][1]) { this.swap(idx, parentIdx); ..

    [React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(5) 가상 DOM & 리액트 파이버

    리액트의 가장 큰 특징중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다! 이러한 가상 DOM은 왜 만들어졌고 실제 DOM과는 어떤차이가 있는지 알아보자. DOM(Document Object Model) 웹페이지에 대한 인터페이스로 브라우저가 웹 페이지의 콘텐츠와 구조를 어떠한 방식으로 보여줄지에 대한 정보가 담겨있다. 브라우저가 웹 사이트 접근 요청을 받고 화면은 그리는 일은 아래의 순서대로 일어난다. 1. 브라우저가 URL에서 HTML파일을 다운로드 2. HTML을 파싱하여 DOM 트리를 만든다. 3. (2)번과정 진행중 CSS파일을 만나면 CSS파일을 다운로드 4. CSS를 파싱하여 CSSOM을 구성 5. (2)번 DOM노드를 순회한다. (display : none 과 같은 사용자에게 안..

    [React] Deep Dive 모던 리액트(4) JSX
    FrontEnd/Deep Dive

    [React] Deep Dive 모던 리액트(4) JSX

    이제 리액트의 핵심 요소들을 하나씩 알아보자. JSX(JavaScript XML) 많은 프론트엔드 개발자들이 착각하는 것은 JSX가 리액트의 전유물이라는 것이다. 물론 JSX가 리액트가 등장하며 소개된 구문인점은 맞지만 리액트와는 독립적으로 동작하는 문법이다. JSX는 ECMAScript 자바스크립트 표준의 일부는 아니기 때문에 해당 코드를 바로 실행하면 에러가 발생한다. 따라서 JSX를 활용하려면 트랜스파일러를 거쳐서 의미있는 JS 코드로 변환하는 작업이 필요하다. JSX의 주 목적중 하나는 HTML이나 XML을 JS내부에 표현하는 것이다. 그 외에도 JSX내부에 트리구조로 표현하고 싶은 다양한 것들을 작성하고 이를 JS가 이해할 수 있는 코드로 변경하는 것이 주된 목적이라고 할 수 있다. JSXEle..

    FrontEnd/프로그래머스

    [JS] 불량 사용자

    정규표현식과 set , dfs 를 활용하여 해결한 문제였다. https://school.programmers.co.kr/learn/courses/30/lessons/64064 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 정규표현식은 불량 사용자인지 아닌지를 가져오기 위해서 사용했는데 굳이 정규표현식이 아닌 반복문을 활용해서 풀었어도 상관은 없을 문제인듯 하다. 1. 정규표현식으로 banned_id마다 가능한 아이디의 조합을 가져오기 EX) TEST CASE 3 [ [ 'frodo', 'fradi' ], [ 'frodo', 'crodo' ], [ 'abc..

티스토리툴바