profile
쿼카를 사랑하는 프론트엔드 개발자입니다 :)
post-thumbnail

React _ LifeCycle과 조건부 렌더링

React를 사용하다 보면 상위 컴포넌트로부터 데이터를 잘 전달받았는지, 현재 어떤 데이터를 가지고 있는지 등을 확인 하기 위해서 console.log를 자주 쓰게 된다.componentDidMount에서 받아온 state값을 로그로 찍는다고 했을 때, 바로 값이 받아

6일 전
·
0개의 댓글
post-thumbnail

React _ ComponentDidUpdate 무한 렌더링 이슈 해결

이마트 피코크 사이트를 만들면서 상품 리스트 불러오기, 장바구니, 상품 좋아요 누르기 등 다양한 기능들을 구현하고 있다. 내가 맡았던 카테고리별 상품 리스트 불러오기 페이지를 개발하던 중, 막히는 부분이 생겼다.KOREAN에 마우스를 올려놓으면 한국 음식 리스트를 불러

6일 전
·
0개의 댓글
post-thumbnail

RESTful API

웹상에서 아용되는 여러 리소스를 HTTP URI로 표현하고, 그 리소스를 어떻게 할 것인지(불러올 것인지, 받아올 것인지 등) HTTP Method로 정의하는 방식이다.HTTP Method + Payload 형식으로 깔끔하게 표현 가능하다.PayloadHTTP requ

2021년 10월 7일
·
0개의 댓글
post-thumbnail

Instagram Clone Review

2주간 Instagram 로그인 페이지와 메인 페이지를 클론코딩 해보았다.먼저, 어떤 기능들을 구현했는지 간단하게 정리해보자.id에 @가 포함되고, pw가 5글자 이상인 유효성 검사를 통과하면 로그인 되어메인 페이지로 넘어가는 기능이다. 처음에는 id의 value를 가

2021년 10월 3일
·
0개의 댓글
post-thumbnail

React _ 서버와 통신하기

만들어두었던 인스타그램 Login 페이지를 이용하여, 백엔드로 Request를 보내서 회원가입과 로그인을 하는 연습을 했다.어떤 방식으로 통신이 이루어졌는지 간단한 흐름을 정리해보자.아이디와 패스워드를 입력하고 버튼을 클릭했을 때, 서버로 아이디와 패스워드 값을 전송하

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

인증 & 인가

웹사이트에서는 유저에게 해당하는 권한을 부여하기 위해 회원가입과 로그인 과정을 거친다. 인증과 인가는 프론트엔드와 백엔드가 유저 데이터를 주고 받기 위해 필수적으로 알아야 하는 개념이다.회원가입과 로그인하는 과정이다.유저의 아이디, 패스워드, 이메일 등을 이용해서 지금

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

React_Map 사용시 'Unique Key Prop' 오류

React를 사용하여 인스타그램 클론코딩을 하던 중, 콘솔창에 다음과 같은 에러가 뜨는 것을 발견하였다.정확히 어떤 부분에서 오류가 났는지도 파악하기 어렵고, 오류는 나지만 기능적인 부분에서 딱히 작동이 안되는 부분이 없어서 무시했다. 기능을 다 구현하고 나서 코드 리

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

React_State & Props

React를 사용하면 화면을 컴포넌트 단위로 구분해서 구현한다. Nav, Main, Footer로 나뉘어져 있을 것이고, 또 Main은 프로필 컴포넌트, 제품 설명 컴포넌트를 가지고 있을 것이다. 따라서 부모 컴포넌트 아래에 자식 컴포넌트가 속해 있는 구조가 되고, 부

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

Git _ Conflict(충돌)

여러 사람이 깃허브로 프로젝트를 관리하다 보면, 코드를 수정하는 과정에서 충돌이 발생할 수가 있고 이를 conflict가 발생했다고 한다. 꽤 자주 접할 수 있는데, 제대로 안다면 해결하고 간단히 끝낼 수 있지만, 모른다면 해결하는 과정이 상당히 두려울 것이다. 따라서

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

React 시작하기

React를 사용하는 이유 3세대 웹 요즘 웹은 예전처럼 단순하지 않다. 다양한 기능, 사용자의 눈길을 사로잡는 디자인, 다양한 기기에 따른 반응형의 구현, 그리고 넘쳐나는 데이터들에 맞는 웹을 만들다 보니, 이전보다 훨씬 동적이고 복잡해졌다. 따라서 웹을 개발할 때

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

HTTP 통신

웹사이트에서는 클라이언트와 서버가 통신을 한다. 서버에서 필요한 데이터를 가져오고, 클라이언트에서 변경할 데이터를 서버에 다시 보내준다. 데이터를 주고받기 위해서는 서로 어떤 형식으로 보내줄 것인지 약속을 정해야하는데, 그것이 바로 HTTP이다. HTTP(Hyper

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

Git & GitHub

개인이나 회사에서나 개발 프로젝트를 진행할 때 대부분 Git을 사용하는 것을 볼 수 있다. Git이 무엇이고, 왜 사용하고, Git을 사용하는 방법에 대해서 정리를 해보고자 한다. Git이란? Git은 VCS(Version Control System)중에 하나로, 로

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

Javascript_getElementById와 querySelector의 차이

Javascript에서 HTML 요소에 접근하기 위해서는 DOM(Document Object Model)에 접근해야 한다. DOM을 제어할 수 있도록 도와주는 함수에는 여러 종류가 있다. 그 중, getElementBy...()을 사용하는 것과, querySelecto

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

Code Review _ Object

Repl에서 문제를 풀다가 마지막쯤에 object 문제를 만나게 되었다.이미 존재하는 객체의 value값들을 조건에 맞게 변경하고, 새로운 key값들을 추가해서 새로운 객체를 반환하는 문제였다. 단순히 객체에 key와 value를 추가하는 것은 어렵지 않지만, 조건이

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

Semantic Tag

Semantic. 많이 들어보긴 했는데 무슨 뜻인지 모르고 그냥 썼던 것 같다. 번역 해봤더니 의미론적인! 의미론적인 태그가 무엇일까? Semantic Tag란? > non-semantic tag: div, span 등 semantic tag: header, sec

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

CSS_Display

display 속성이란? position이 element를 어떤 흐름으로 배치할지를 정하는 속성이었다면, display는 element를 어떻게 보여줄지를 정하는 속성이다. HTML 각 태그에는 기본적인 display 속성이 있다. (ex) div는 block, a는

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

CSS_Position

최근에 자기소개 웹페이지를 만들면서 HTML과 CSS를 많이 사용했다. CSS를 사용할 때 마다 항상 드는 생각인데, 속성을 제대로 알고 사용하는 경우도 많지만, 스타일이 조금씩 꼬이기 시작하면 이것 저것 넣어보다가 때려 맞추는(?) 경우도 꽤 많은 것 같다. 오늘은

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

크로스 브라우징(Cross Browsing)

프론트엔드 개발자가 하는 일에 대해 알아보던 중, '크로스 브라우징' 이라는 단어를 접하고 궁금하여 알아보았다 ❕ 크로스 브라우징이란? 크롬, 인터넷 익스플로러, 파이어폭스, 오페라, 사파리 등등... 우리가 사용하는 웹 브라우저의 종류는 다양하다. 개발자가 어떻게 코

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

Javascript_함수 생성 및 호이스팅 & this 바인딩

1. 함수 생성 함수 선언문 방식 함수 선언문 방식은 리터럴 표기법과 같이 선언하는 방법이다. > 리터럴 표기법: 변수를 선언함과 동시에 그 값을 지정해주는 표기법 위의 예시를 보면 리터럴 표기법으로 표현하게 되면 그 변수명이 꼭 정의되어야 한다. 함수 선언문 방식도

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

Javascript_배열(Array)과 메소드

slice 메소드는 start값부터 end - 1 값까지의 복사본을 <span style="color: \`\`\`javascriptlet numbers = 10, 20, 30, 40, 50;console.log(numbers.slice(2, 4)); // 20,

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