profile
성장하는 개발자
post-thumbnail

감을 잃지 않기 위한 2022 dev-matching 시험 후기

dev-matching 데브매칭은 프로그래머스에서 주관하는, 이직이나 취업을 위한 프론트엔드 테스트이다. 바닐라 자바스크립트로 주어지는 요구사항을 구현해야 한다.

2022년 3월 13일
·
0개의 댓글
·
post-thumbnail

타입 추론과 타입 단언

타입 추론이란 타입스크립트가 자체적으로 코드를 보고 타입을 추론해내는 것을 의미한다. 위 코드를 보면 num 변수의 타입을 지정해주지 않았는데도, 타입스크립트는 자체적으로 num 변수의 타입을 number로 추론해냈고, 에러를 띄워주고 있다.이 말은 타입스크립트에서 반

2022년 2월 5일
·
0개의 댓글
·
post-thumbnail

프론트엔드 테스트가 어려운 이유와 해결방법(storybook, cypress, applitools)

프론트엔드 테스트 흔히들 프론트엔드에서 테스트가 어렵다고 말한다. 이유는 간단하다. 결과값을 데이터로 만들어놓기가 어렵기 때문이다. 프론트엔드 단에서 결과라는 것은 html, css, js 가 결합되어 만들어린 렌더링 트리가 브라우저에 렌더링된 그 그림을 뜻한다.

2021년 9월 8일
·
0개의 댓글
·
post-thumbnail

리액트를 왜 사용할까? 뭐가 특징이고 뭘 배워야 하나?

리액트 리액트의 평가 리액트는 현재 세계에서 가장 많이 사용되는 웹 애플리케이션 UI 구축 라이브러리이다. https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/ 출처 위의 평가에서 확인할 수 있듯이

2021년 7월 27일
·
1개의 댓글
·

virtual DOM, hooks 바닐라로 구현

먼저 과제에 대한 내용은 유출되면 안되기 때문에 과제 자체에 대한 내용은 언급하지 않을 예정이다. 과제 과제는 웹 사이트에서 매우 흔하게 사용되는 기능 일부를 구현하는 것이었다. 쉬운 거였음. 과제 조건 외부 라이브러리는 사용할 수 없었으며 번들링 라이브러리만 사용

2021년 7월 20일
·
3개의 댓글
·

DOM(Document Object Model)

점점 자바스크립트 언어 자체에서 브라우져까지 공부하게 되는 것을 알 수 있다. 자바스크립트는 node.js 나 electron 같은 런타임 환경을 제공받아 사용할 수도 있지만, 기본적으로는 브라우저 환경에서 사용되도록 만들어진 언어이다. 그러므로 브라우저에 대한 의존성

2021년 7월 11일
·
0개의 댓글
·

이터러블(iterable), 스프레드 문법, 디스트럭쳐링 할당

이터러블이라 하면 흔히들 그냥 순회 가능한? 이라고 알고 있다. 나도 그랬다. 물론 이터러블의 목적은 순회를 하기 위해서 만들어졌다. 하지만 파고 들어가면 이 이터러블의 정의는 생각과는 약간 다르다.이터러블은 순회 가능한 자료구조를 만들기 위해 ECMAScript 사양

2021년 6월 29일
·
0개의 댓글
·

🍒자두 캘린더 프로젝트 후기

시연영상 : https://www.youtube.com/watch?v=tlWO8ZRHJQw 기획 끝난지 1주일도 안지났는데 벌써 기억이 잘 안난다. 얼른 정리를 해둬야 될 것 같다. 좋은 프로젝트라는 평을 받아서 기억에 남는 프로젝트기도 했고, 중간에 꽤 내 개발자생

2021년 6월 28일
·
0개의 댓글
·

TIL 210611

돔요소를 바닐라 자바스크립트로 다뤄보았다. 렌더링을 할 때 innerHTML 을 사용해서 렌더링을 할 경우, 기존에 있는 내용들을 모두 지우고 다시 DOM을 만드는 비효율성 발생이 1번 문제, sort의 결합도가 너무 높은 문제 함수 명이 이해하기 힘든 문제 콜백함수를 분리함으로서 이름을 하나 더 만들어내는 문제들이 있었다. 이를 해결하는 것을 고...

2021년 6월 11일
·
1개의 댓글
·

오늘의 음식 ver.1.1 배포 준비, 리드미 업데이트

메인 변경사항은 로그인 기능 구현과 리뷰를 볼 수 있는 피드 리스트의 구현입니다.

2021년 6월 9일
·
0개의 댓글
·

http 와 https 의 차이

HTTP는 TCP / IP 계층의 최고층인 4계층인 응용계층에서 사용되는 프로토콜이다. HTTP는 암호화가 전혀 되지 않아 평문으로 데이터를 구성하는데, 일반적인 정보를 전달하는 네트워크 과정이면 크게 문제될 것이 없겠지만, 인증 시스템이나, 결제 시스템 같은 경우 정

2021년 6월 8일
·
0개의 댓글
·

GET / POST 방식의 차이

HTTP메서드를 사용해서 데이터를 주고 받는 방식을 흔히 REST api 를 이용한 데이터 교환 방식이라고 말한다. 현대 네트워크 시장에서 가장 많은 포션을 차지하고 있는 방식이기 때문에 해당 방식을 잘 알고 있어야 한다.REST 는 Representational St

2021년 6월 7일
·
0개의 댓글
·

Array.prototype (배열)

배열 자바스크립트에서 가장 중요한 3가지를 꼽으라 하면 객체, 함수, 그리고 배열일 것이다. 가장 큰 이유 중에 하나는 JSON이 배열과 객체의 조합으로 이루어져 있다는 것. 하지만 자바스크립트의 배열은 자료구조에서 말하는 엄밀한 의미의 배열이 아니다. 자료구조에서 배

2021년 6월 3일
·
0개의 댓글
·

클래스

클래스는 ES6에서 새로 도입된 객체 생성 방법이다. 자바스크립트는 기본적으로 프로토타입 기반 객체지향 언어이기 때문에, 클래스 기반 객체지향 프로그래밍 언어에 익숙한 개발자는 접근하기 어려웠었다. 생성자 함수와 비슷한 기능을 제공하지만 완전히 같지는 않다. 때문에,

2021년 6월 1일
·
0개의 댓글
·

실행 컨텍스트와 클로저

실행 컨텍스트와 클로저는 자바스크립트 및 함수형 언어의 꽃이라고 생각한다. 특히 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심이라고 생각한다.

2021년 5월 31일
·
0개의 댓글
·
post-thumbnail

14500 테트로미노

완전 브루트포스 문제.모든 테트로미노 블록에 대해, 회전, 대칭으로 만들어지는 모든 경우의 수를 계산해서, 시작점에 대한 숫자합을 모두 계산해주면 풀 수 있다.조금 더 효율적인 방법도 가능할 거 같아, 다른 방법도 시도해 볼만할 듯.특히 배열로, 블록모양을 구현해, 주

2021년 5월 28일
·
0개의 댓글
·

this 바인딩

this 는 일반적으로 객체지향 프로그래밍 언어에서 사용되는 예약어이다. 객체 내부에서 자신이 속한 객체를 참조할 수 있어야 그 객체의 내부의 변수나 함수를 참조할 수 있기 때문에 이 예약어가 필요하다. 자바스크립트는 함수 호출 방식에 따라 객체가 참조하는 this의

2021년 5월 27일
·
0개의 댓글
·

생성자 함수와 프로토타입

생성자 함수와 프로토타입 자바스크립트에서 생성자 함수와 프로토타입은 떨어뜨려 생각할 수 없는 개념이다. 두 개념은 특별한 경우가 아니면, 짝을 지어 생성된다. 물론 항상 둘이 연결되진 않지만, 개념을 이해하는 데는 두 가지를 함께 이야기하는 것이 좋다. 생성자 함수

2021년 5월 25일
·
0개의 댓글
·

자바스크립트의 함수(feat: 객체)

자바스크립트에서의 함수는 엄청나게 중요하다. 객체와 함수만 정확히 알아도 js의 많은 부분을 알았다고 할 수 있을 것이다. 스코프, 실행 컨텍스트, 클로저, 생성자 함수, 메서드, this, 프로토타입, 모듈화 등이 함수와 연관이 된다. 프로그래밍 언어에서 함수는 수학

2021년 5월 18일
·
0개의 댓글
·

자바스크립트의 객체(메모리 할당, 가비지 컬렉션)

자바스크립트의 객체 객체란. 객체란 일반적으로 객체 지향 프로그래밍에서 클래스를 통해 만들어지는 데이터를 말한다. 하지만 자바스크립트에서 말하는 객체는 종류가 다르다. 자바스크립트는 원시타입과 객체로만 데이터가 구성되어 있다. 때문에 객체는 데이터 타입의 일부라 볼 수

2021년 5월 18일
·
0개의 댓글
·