개발 기록

스마트폰에 깔린 OS환경에 맞게 그 전용으로 개발된 소프트웨어장점네이티브 앱은 OS에서 주어진 모든 자원과 기능들을 활용할 수 있다.그렇기 때문에 스마트폰의 성능을 최대한 활용할 수 있는 고퀄리티의 앱을 만들 수 있다.스토어에서 다운받을 수 있어 검색이 쉽고 원하는 위

✍🏻 컨퍼런스 웹사이트 만들기 부스트코스를 끝나고 뭔가 만들어보고는 싶은데 막연하기만 하던 차에 빔캠프라는 곳에서 진행되는 튜토리얼 강의를 알게되었다. 차근차근 잘 따라할 수 있도록 설명을 해주시고 내용도 알찬 것 같아 하나씩 따라해보기로 했다. 📝 구조 타이

✍🏻 이미지 갤러리가 있는 웹페이지 만들기 오늘은 Easy Tutorials의 이미지 슬라이드가 들어간 반응형 웹 만들기를 해 보았다. 📝 구조 내용이 많이 들어가는 디자인이 아니기 때문에 html은 길지 않다. 크게 왼쪽 단과 오른쪽 단 두 부분으로 나누어

✍🏻 이미지 갤러리가 있는 웹페이지 만들기 코드 결과 참고강의 > https://www.youtube.com/watch?v=fx8Lg1A5IZs

기본적인 header를 만들었다면 JS를 이용해 스크롤 동작에 따라 css를 적용될 수 있도록 하기위해 스크롤 시에 sticky라는 class를 생성해 준다. 생성된 .sticky에 스타일을 적용해 준다.https://www.youtube.com/watch?

게임을 위해 고려할 큰 줄기는 다음과 같다. 제시어가 입력됐을 때 올바른지 판단하는 것은 2번 차례부터 가능하다. 좀 더 풀어보자. https://youtu.be/vX-RnlPpj_k

HTML페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당한다.CSS실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당한다.(정적)JS콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당한다.통신 프로토콜컴퓨터나 원거리

index.html브라우저가 기본적으로 프로젝트 단위로 화면에 출력될 때 index라는 이름을 가진 html파일을 가장 먼저 찾는다. 파일을 찾기 쉽게 index.html이라고 파일명을 지정해주자.DOCTYPE(DTD)마크업 언어에서 문서 형식을 정의.웹 브라우저에게

자식 요소바로 아래에 감싸고 있는 요소만을 지칭하위(후손) 요소감싸고 있는 모든 요소를 지칭빈태그 뒤에 /를 입력하는게 안정성이 높다안 붙이면 나중에 프레임워크를 배울 때 오류가 나는 상황이 생길 수 있으니 붙이는 습관을 들이자글자처럼 취급된다고 생각하면 쉬움인라인 태

px : 픽셀% : 상대적 백분율em : 해당하는 요소의 글꼴 크기rem : 루트 요소(html)의 글꼴 크기vw : 뷰포트 가로 너비의 백분율vh : 뷰포트 세로 너비의 백분율기본적으로 브라우저는 16px의 font-size를 가진다visible, hiddenscro

작성한 코드에 기대한 원래의 동작은 무엇인가?기대한 것과 다르게 어떤 동작이 발생했는가?디버깅을 하기 전 문제를 발생할 수 있는 다양한 가정을 먼저 생각해 본다. 이는 문제를 찾거나 해결하는 시간을 줄일 수 있게 해준다.예시올바른 API를 사용하고 있는가?(올바른 개체

유사 배열 객체란 length 프로퍼티를 가진 객체로 for 문으로 순회할 수 있는 객체를 말한다.유사 배열 객체는 배열이 아니므로 배열 메서드를 사용할 경우 에러가 발생한다. 이는 Function.prototype.call, Function.prototype.appl

인터넷에 있는 오류는 다 겪은거 같다...최신 버전을 다운 받자!일단 해보고 사용된 개념들을 정리해야겠다 생각했고 다음의 거의 블로그를 따라했다. 우분투 터미널을 열고 아래를 진행해준다.리눅스 - 우분투 VM ssh 서버, 로컬 PC에서 접속하기config 파일을 열어

인간의 언어를 일정한 규칙에 따라 2진수로 변환하는 방식문자 집합 : 사용할 수 있는 문자들의 집합유니코드, ISO-8859, ASCII 등문자열 인코딩 : 문자를 코드로 표현하는 방식UTF-8, UTF-16, UTF-32 등 (유니코드라는 문자 집합을 표현하는 문자열

객체나 배열을 변수로 분해 할 수 있게 해주는 문법함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 유용원본은 파괴되지 않는다 변수로 재할당하는 과정이 줄어드는 것 뿐필요없는 요소는 가져오지 않는 방법모든 이터러블은 구조 분해가능하다배열, 객체, 변수 뭐든지 할당

컴퓨터를 실행시키기 위해 차례대로 작성된 명령어 모음컴퓨터 내에 실행중인 프로그램을 일컫는 용어프로그램이 실행되면 프로세스가 생성되고 메모리에서 해당 프로세스의 address space가 할당된다.작성된 소스코드가 들어있는 부분읽기만 가능하다.크롬을 여러 탭 띄우고 있

일괄 작업 방식한 번에 하나의 작업만 처리하는 것시분할 작업 방식CPU가 시간을 쪼개어 여러 프로세스에 적당히 배분함으로써 동시에 실행하는 것처럼 느껴지게 동작하는 것운영체제가 프로그램을 메모리의 적당한 위치로 가져온다.그와 동시에 작업 지시서를 만든다. 이를 프로세스

버전은 사용하려는 버전에 맞춰 입력해줍니다.mysql 포트번호는 3306입니다. 여러개의 mysql 을 만들시 에는 3307:3306, 3308:3306... 이런식으로 만들어주면 됩니다.이렇게 컨테이너를 생성하면 mySQL은 locale이 기본적으로 latin1입니다

오랜만에 유튜브 강의 따라 만들기를 해봤다.\[데브리]바닐라 자바스크립트 채팅 앱! 초보도 할 수 있다! Node JS (express), Socket.io, Flex강의를 들으며 chatting-app이라는 디렉토리에서 작업했고 저장소에 올리기 위해 git도 사용했다

스토리 보드(story board)사이트 제작에 필요한 정보가 담겨있는 화면설계서정책, 프로세스, 기능정의, 콘텐츠 구성 등work breakdown structure프로젝트 범위와 스케줄을 세부적으로 분할한 것전체 스케줄 표as-is는 개선되기 전, 현재 상태to-b

현재 코드스쿼드 마스터즈 과정을 진행중이다. 이번 달 부터 코드리뷰를 시작했다. 코드리뷰를 받는 방법은 github을 기반으로한 온라인 코드 리뷰 방법을 보고 따라하면 된다.영상을 보면 첫 step1 브랜치를 리뷰를 받고 메인에 머지되면 리베이스 후 다음 작업을 이어나

이번 미션에서 검색어 자동완성 기능이 있었는데 500ms동안 새로운 입력이 없어야 이벤트가 발생하도록하는 조건이 있었다. 처음에 sleep함수를 만들어 단순히 500ms가 지난 후에 이벤트 핸들러가 실행되도록 구현했었다.sleep 후 실행되는 핸들러는 서버에 자동 완성

이 글은 디바운싱과 쓰로틀링에서 이어진다. 앞에서 디바운싱으로 해결될 듯 했던 문제는 해결되지 않았다. 디바운싱을 적용했음에도 왜 같은 오류가 발생하고 있는 걸까? 그것은 이벤트가 여러번 발생했을 때 네트워크 응답이 도착하는 순서가 다른 것이 문제인데 디바운싱을 해도

리액트 디벨로퍼 툴을 사용하면 리액트로 작성한 컴포넌트들의 구조를 확인할 수 있다. 확장 프로그램을 설치하고 개발자 도구에 들어가면 탭이 생긴 것을 확인할 수 있다.(출처: 리액트 공식 사이트)평소 F5를 눌러 실행하던 것과 동일하게 디버깅을 할 수 있다. 먼저 lau

map메서드를 통해 엘리먼트를 생성하는 부분에서 다음과 같은 에러가 발생했다.처음에는 오류 문구 그대로 key prop을 주지 않아서 발생한 거라 생각해서 빠진 부분을 수정했는데 오류는 해결되지 않았다!🙀 심지어 수정하고나서 map을 사용한 다른 부분들도 이런 오류가

CORS가 뭔지도 찾아봐야겠네

로그인 기능을 구현하는 중이다.클라이언트에서 요청에 사용자의 아이디와 비밀번호를 담아서 보내고 그 값들을 읽어야하는데 접근이 안됐다. 자꾸 undefined가 반환됐다.분명 이렇게 보내고이렇게 조회를 하는데 undefined가 나와서 공식문서를 확인했더니 바로 읽을 수

코드에서는 에러가 잡히지 않는데 브라우저에서 렌더링이 되지않고 오류가 났다.eslint에서도 그랬고 여러 라이브러리에서 resolver관련 에러가 발생하는 걸 보니 자주 사용되는 단어인 것 같아서 찾아봤다.딱 한국어로 이거다! 라곤 안나오는데,만나본 오류도 그렇고 구글

아래 참고 자료를 보고 적용하면 된다. 이미 정리가 잘 되어있다.TypeScript ESLint 적용하기 (+ Airbnb)하지만 이번에도 resolve 에러가 났다.해결 방법은 간단했다. .eslintrc.json 파일에 속성을 추가해 주면 된다.근데 이렇게 해결하면

위 코드는 프로젝트에서 절대 경로를 설정했을 때 eslint도 맞춰 설정하는 코드이다.절대 경로를 사용하는 경우 src폴더부터 시작하기 때문에 import 사용 시 에러가 날 수 있어 맞춰주는 것이다.한 줄씩 보자면settings 속성은 모든 규칙에 의해 공유되는 설정

메서드 : 객체 안에 선언된 함수프로퍼티 : 객체 안에 선언된 속성위 dog 객체의 print 메서드가 동작하기 위해서는 dog 객체의 name 프로퍼티를 알아내야 한다.print 메서드와 name 프로퍼티 모두 dog 객체에 속해있다. 그럼 print 메서드는 자신이

이벤트는 DOM 요소에서 발생한다. 해당 DOM 요소에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라고 한다.이벤트는 발생한 DOM 요소를 중심으로 전파가 이루어진다. 전파는 캡처링 단계, 타깃 단계, 버블링 단계가 있다.window 객체 → 타깃

스코프는 식별자가 유효한 범위를 말한다. 또 다른 말로는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.전역 스코프 : 전역 코드에 변수를 선언하면 전역 변수가 되고 어디서든 참조가 가능하다.지역 스코프 : 함수 몸체 내부에 선언된 지역 변수

클로저는 실행 컨텍스트를 알고 모르고에 따라 이해도가 확 달라지니 실행 컨텍스트를 먼저 공부하도록 하자.외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이런 함수를 클로저라고 부른다.\-자바스

컴포넌트에서 http 요청을 하는 로직을 분리하기 위해 useFetch라는 커스텀 훅을 만들었다.responseData : 응답 데이터를 내보내기 위한 상태loading : 요청이 진행 중인지를 알기 위한 상태fetchData : 데이터 요청 함수네트워크 요청 전 로딩

애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈을 사용하면 다음의 장점을 얻을 수 있다.1\. 유지보수성관련된 기능끼리 모듈화시키면 다른 코드와의 결합도를 줄일 수 있다. 기능을 유지보수할 때 다른 코드에 영향을 덜 미치기 때문에 훨씬 편하게 할 수

얼마 전 토이 프로젝트로 투두리스트를 만들었다. context api + useReducer를 사용해 상태 관리를 해보기 위해서였다. 구현을 하다 보니 든 의문이 있었다. 서버에서 가져온 데이터를 클라이언트 쪽에서 저장하고 관리할 필요가 있나?였는데, 전부터 conte

변수 선언문, 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것을 말한다.함수 선언문은 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 함수 선언, 초기화, 할당이 한번에 이루어진다. 그래서 선언의 위치와 상관없이 어느 곳에서도 호출이 가능하다.호이스팅은

'process' is not defined.라는 에러가 났다. 이때까지 저렇게 사용해왔었는데 어떤 설정이 바뀌어서 오류가 나는지 잘 모르겠다.해결 방법은 간단하다..eslintrc.json파일에 env에 node 부분을 추가해주면 된다. process가 node에서

게시글 작성 기능을 구현하는데 텍스트만 보내는건 일반 POST로 하면 되겠는데, 이미지를 첨부할 수 있다보니 파일을 서버로 전송하는 방법을 찾아헤맸다. 처음에는 이미지 업로드를 찾아봤더니 이미지만 보내는 방법처럼 보여서 텍스트랑 같이 보내는 방법을 찾는다고 헤맸는데 알

z-index z-index는 3차원의 z축 상에서 html요소의 순서를 의미한다. html요소들의 순서를 바꾸기 위해서는 position, z-index 두 속성을 지정해줘야한다. z-index의 값은 auto, 정수, inherit로 지정할 수 있으며 positi

블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동마진 상쇄는 요소들이 세로로 배치되어 있을 경우에 발생한다.

위 사진의 하단을 보면 div의 배경 색인 빨간색 튀어나와있다. div가 이미지 크기에 맞춰 커지게 하기 위해 height 값을 주지도 않았는데 왜 저런 여백이 생길까.이미지 출처: 빔캠프 유튜브문제를 해결하려면 인라인 요소를 살펴봐야 한다. 인라인 요소는 기본값으로

position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다.position 프로퍼티를 사용하면 요소의 위치를 정의할 수 있다. top, bottom, left, rig

영화 목록을 보여주는 페이지가 있고, 목록 중 하나를 클릭하면 해당 영화의 디테일 페이지를 보여주는 사이트영화 목록 컴포넌트 : MovieList영화 목록 아이템 컴포넌트 : Movie영화 디테일 페이지 컴포넌트 : MovieDetail라우터를 만드는 게 목표니까 Ro

브라우저의 렌더링 언젠이 HTML문서를 파싱해서 브라우저가 이해할 수 있는 자료구조\[자바스크립트 딥 다이브]문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.\[MDN - DO

API > API란 무엇인가요? API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다. 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과

공식문서에서 state의 비동기 참고자료 리액트의 setState()제대로 사용하기

인스턴스 생성하는 방법은 구글에 많으니 생략루트 계정은 우리가 흔히 아는 그 최상위 계정을 말한다. 이 계정이 해킹 당하면 아주아주 큰일 나니까 쓰지 않는 것을 AWS도 공식적으로 추천한다.AWS Identity and Access Mansgement그래서 제어된 권한

node.js의 패키지 관리자이다. 개발자들이 만든 패키지를 npm 저장소에 올리면 패키지 관리자를 통해 설치, 삭제, 패키지 버전 관리, 의존성 관리가 가능하다.페이스북이 만든 패키지 관리자이다. npm 저장소를 동일하게 사용하지만 npm보다 속도나 안정성 측면이 향

프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임다양한 환경에 한 프로젝트를 배포하게 되는데 어느 환경에 배포하느냐에 따라서 다르게 설정되어야하는 값들이 있다. 이런 값들은 운영 체제 수준에서 환경 변수를 통해 관리하게 된다.또 데이터베이스의 비밀

탭스페이스 프로젝트를 구현할 때 시간에 치여 어떻게든 발표날까지 구현해야 한다!!!!!라는 생각으로 하다 보니 문제가 있음에도 일단 구현한 부분들을 하나씩 개선해보는 중이다.탭스페이스 사이트는 홍보용 랜딩페이지가 있기 때문에 seo가 중요함에도 seo를 위해 next.

탭스페이스 사이트는 vercel에서 배포했다. 굉장히 배포하기 쉽게 되어있었고 ci/cd까지 기본으로 제공해서 개발할 때 되게 편리했다. 이 글은 프로젝트 기간이 끝나고 버그를 수정하며 진행하던 개발 사이클에서 문제가 느껴져 개선한 이야기이다. 문제 이번 프로젝트

문제 위 gif를 보면 새로고침해서 로딩중에 왼쪽 위에 나타나는 버튼이 있다. 이는 아래쪽에 있는 파란색 챗봇 버튼이다. 아주아주 UX적으로 마음에 안드니까 수정해야한다. 이유 새로고침하면 저렇게 나타나는 이유는 SSR을 사용하고 있기 때문이다. next.js는

청첩장 고객님께 문의가 들어왔다. 일부 지인들의 핸드폰에서는 청첩장이 뜨지 않는다는 것이다. 그러면서 화면을 캡처해서 보여주셨는데 이런 문구가 있었다. Next.js에서 띄운 메시지인데 클라이언트 측 오류로 브라우저 콘솔을 확인하라는 것이다. 하지만 모바일에서는 브라

청첩장에 계좌번호를 복사하는 버튼이 있는데 해당 기능이 동작하지 않는 이슈가 있었다.안드로이드 카카오톡 인앱 브라우저에서만 발생하는 이슈였다.카카오톡 데브톡 사이트에도 해당 이슈가 언급되어있다.안드로이드 카톡 인앱브라우저에서 복사하기 버튼이 동작하지 않는 문제아래 참고

useEffect에서 처리를 했으나 useEffect는 렌더링 후 실행되기 때문에 페이지가 잠깐 나타났다 리다이렉트 되면서 사라지게된다. 이 때 깜빡임이 발생next.js 에서 제공하는 getServerSideProps(SSR) 함수 사용해서 서버 사이드에서 리다이렉트

모바일 디자인 pc 디자인 패스트캠퍼스 100가지 시나리오로 학습하는 프론트엔드 강의 랜딩페이지에서 사용 중 ![](https://velog.velcdn.com/i

웹에서 디버깅을 하면 대부분 해결이 되어서 잘 쓰지 않았는데 모바일 환경이 중요한 서비스를 개발하다 보니 필요성이 느껴져 세팅을 해보았다.모바일 크롬에서 개발자 도구 사용하기연결 자체는 위 영상을 참고하면 된다. 연결하고 다른 서비스를 개발자 도구로 구경하는 것도 흥미

UI 구현을 하다 보면 컴포넌트에 여백(margin)을 어떻게 적용해야 할지 고민이 될 때가 많았다. 특히 재사용 할 컴포넌트라면 사용하는 위치에 따라 여백이 달라져 수정을 하게되는 경험이 많아서 CSS를 작성할 때마다 고민이 되는 부분이었다.예를 들어 A 페이지에서

폼 입력 페이지에서 사용자가 작성 중인 내용을 실수로 잃어버리는 것은 끔찍한 경험이다. 우리 프로젝트는 길면 1시간도 넘게 폼을 사용하기 때문에 더더욱 필요한 부분이었다.이런 상황을 방지하기 위해, 사용자가 입력하던 내용을 실수로 날려버리지 않도록 이탈 방지 기능을 구

해결법은 무척 간단하다. 미들웨어에 public디렉토리를 거치지 않도록 설정해 주면 된다.처음에 middleware를 내가 설정한 게 아니라 생각을 못 하고 next.js 관련된 이슈를 찾으려 했는데 나와 똑같은 문제를 올려둔 next-auth의 깃허브 이슈를 발견했다

getStaticProps를 사용해 새로운 페이지를 구현하고 있었다. 그런데 값이 props로 넘어오지 않았다. 다른 곳에서 사용하는 코드와 동일한 방법인데...... 왜........ 처음엔 값이 안 넘어오는 줄 알았지만 터미널에 콘솔조차 찍히지 않길래 not wor

분명 오픈그래프를 설정해뒀는데 인스타그램에서 링크 공유 시 미리 보기가 보이지 않는다는 문의를 받았다.카카오톡에 공유할 때는 잘 된다. 근데 인스타그램에서 공유하면 주소만 띡 하고 보내짐...카카오톡 링크 공유 (카카오로 공유하기 X, 링크 복붙)인스타그램 링크 공유그

카카오맵을 사용하는 부분에서 메모리가 터지는 에러를 발견했다. 기존 코드를 살펴보니 useEffect 내부에 카카오맵 관련 객체를 생성하는 코드가 모두 함께 있었고 의존성 배열에 값을 추가해 사용자 입력값이 바뀌면 useEffect가 재실행 되도록 작성되어 있었다. 언

배경으로 깔려있는 이미지의 위치를 드래그해서 이동할 수 있어야 한다.두 요소가 겹쳐져 있어 배경 이미지는 클릭 이벤트가 발생할 수 없다. 하지만 이미지 위치를 조정하기 위해선 이미지에 드래그 이벤트를 발생시켜야 한다.최상위 컨테이너 요소에 마우스 클릭 이벤트가 발생하면

페이지가 새로고침된다는 오류가 접수되서 메모리 최적화를 진행했다.

앞에서 OOM으로 인해 페이지가 새로고침 된다는 현상을 해결하는 중이었다고 했다. 하지만 힙 메모리의 사용량이 아직 해결되지 않아서 이어서 해결해야 했다. [react, html] DOM 조작으로 인한 메모리 문제 해결 해결 과정 크롬의 메모리 탭에서는 3가지의