본문 바로가기

전체 글

(154)
HTTP 완벽가이드 1장 : HTTP 개관 (용어 정리) HTTP 완벽 가이드 - 예스24 웹 세상을 떠받치고 있는 HTTP에 대한 모든 것모든 성공적인 웹 트랜잭션 뒤에는, 웹 클라이언트와 서버가 문서와 정보를 교환하는 언어인 HTTP가 있다. HTTP는, 회사 인트라넷에 접근하거나 절판된 www.yes24.com 1장은 앞으로 배울 내용들에 대한 간단한 소개 및 기본적인 단어 정리이다. 책 내용에서 부족한 부분들을 일부 보충하여서 정리하였으며, 보충한 문서는 최하단의 별도로 표기하였다. HTTP란? HyperText Transfer Protocol의 약자로 주로 서버와 클라이언트(웹 브라우저)간 요청/응답 프로토콜이다. 웹 서버 웹 콘텐츠를 보유하고 있으며, 클라이언트의 요청에 따라 필요한 데이터를 주고 받는 역할을 수행한다. 웹 리소스 웹에서 활용하는 모..
[독후감] 몰입 몰입 합본판 : 네이버 도서네이버 도서 상세정보를 제공합니다.search.shopping.naver.com 몰입 1부/ 2부 합본 책이다. [ 책을 읽은 이유 ] 개발자들은 항상 공부해야한다. 하지만, 시간은 24시간이다. 공부도 하고, 일도 하고, 운동도 하고, 연애도 하고... 항상 부족하다. 그래서 시간관리를 하기 위해서 해당 책을 읽게 되었다. 이 책을 읽었면서 좋았던 정보들과 내 개인적인 견해를 소개하고자 한다.  [ 몰입이란? ] 몰입  : 깊이 파고들거나 빠짐 사전적 정의는 깊이 파고들거나 빠지는 것이다.  책을 읽기 전 내가 생각하는 몰입의 정의는 강한 집중이다. 집중력이 너무 높아서, 같은 시간 내에 더 많은 일을 할 수 있는 것이다.  하지만, 작가님이 생각하는 몰입은 조금 달랐다. 오..
힘들었나보다. 이직을 준비하면서, 운 좋게도 가고싶은 기업들은 연달아 세 군데 서류합격을 했다. 그리고 코테, 1차 면접, 최종면접 등 다양한 과정에서 떨어졌다. 많이 힘들었는지, 이 블로그나 github에 방문하지 않고 적당히 일하면 살았던 거 같다. 이번에 쉬면서 스스로를 되돌아보니, 어느샌가 내 삶의 목적은 이직이였다. 더 좋은 개발을 위한 공부보다는 면접을 잘 보기 위한 공부를 하였다. 그럼에도 계속 떨어지는 것에 나도 모르게 좌절을 해버렸던 거 같다. 운 좋게도, 이번에 좋은 책을 읽었다. 그러면서, 좋은 사람들이 나에게 해준 덕담이 이번에 기억났다. 초심을 되찾으면, 나는 좋은 서비스를 개발하고 싶다. 좋은 서비스로 어떠한 문제를 해결하는 데 기여하고 싶다. 더 빠른 세상이든, 더 쉬운 세상, 더 재밌는 세..
[js] Leetcode 45. Jump Game II 문제 Jump Game II - LeetCode Can you solve this real interview question? Jump Game II - You are given a 0-indexed array of integers nums of length n. You are initially positioned at nums[0]. Each element nums[i] represents the maximum length of a forward jump from index i. In other wo leetcode.com 각 배열에는 몇 칸 움직일 수 있는 지가 기록되어있다. 마지막 배열에 도달하는 최소 움직임(걸음) 수를 구하시오 아이디어 1. 이동거리 배열을 만들고, 직전 값을 기준으로 DP 처리..
[js] Leetcode 22. Generate Parentheses 문제 Generate Parentheses - LeetCode Can you solve this real interview question? Generate Parentheses - Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. Example 1: Input: n = 3 Output: ["((()))","(()())","(())()","()(())","()()()"] Exa leetcode.com n개의 ()로 만들 수 있는 모든 경우의 수를 생성하시오 아이디어 최초의 재귀를 통한 완탐/백트래킹을 생각했다. 하지만, DP로 풀기위해서 이 방식으로 풀지 않았고, 도저히..
Styled-Components 에러 - 'Over 200 classes were generated for component Component. Consider using the attrs property' drag & drop을 styled-components로 제작도중 갑자기 속도가 느려지면서 다음 경고문이 발생했다. Over 200 classes were generated for component styled.div with the id of "sc-jwKbUx". Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.background, }, }))`width: 100%;` 문제의 원인 원인은 drag & drop에서 props를 이용하여 le..
Axios를 이용하여 formData 객체를 전송 시, 서버에 빈 객체가 전달되는 문제 문제의 발생 비어있는 FormData가 전달되는 현상이 발생했다. 난 분명 데이터를 담아서 보냈는데, 빈 객체가 전달된다. 결론부터 말하면 axios 요청으로 formdata를 넘길 때, 1번처럼 보낼 시 form이 빈 객체로 전달된다. // 1, 빈 객체가 전달됨 axios .post( '/test1', { form }, { headers, } ) } // 2, 제대로 form이 전달됨 axios .post( '/test1', form, { headers, } ) } 그러니 절대로, 1번처럼 {}를 씌우지 말자. 왜 이런 일이 발생할까...? 원인은 axios 에 있을 것이라 생각하여 axios 코드를 분석해봤다. Axios 코드 분석 axios는 Content-Type과 data에 따라서 데이터를 가..
FormData 에러 (console.log , boundary 미확인) FormData에 대한 지식이 부족해서 사용하면서 생긴 사소한 에러들이다. 1. console.log가 안찍히는 현상 아래 내장 함수를 통해서 확인할 수 있다. form.forEach((value, key) => { console.log(`key: ${key} / value: ${value}`); }); 2. header에서 boundary가 안보임 Content-Type은 Header에, Data(payload)는 body에 담깁니다. 그래서 header에서 저 한 줄만 보이는 게 정상이고 Data는 payload 탭에서 확인하는 게 맞습니다.