전체보기

Javascript 콜백 함수와 콜백 지옥, Promise와 Async/Await

Callback 함수 아래와 같은 setTimeout 예제에서 최상위 레벨의 실행이 끝나면 타임아웃 이후 실행된다. 그러나 분명하게 실행 순서를 정하고 싶은 경우(thrid함수를 정해진 시간 이후 실행시키고싶은 경우)라면 비동기 코딩 방법을 사용해야 한다. function first() { console.log(1) } function second() { setTimeout(() => { console.log(2) }, 0) } function third() { console.log(3) } // Execute the functions first() second() third() Output 1 3 2 여기서 타임아웃은 데이터를 갖고 있는 비동기 API 콜을 말한다. API 콜로부터 얻은 데이터를 활용하..

싸피 7기 수료 회고

2022.01-2022.12 1년의 싸피 과정이 끝이 났다. 운이 좋게 싸피를 수료하자 마자 취업을 했다. 알고리즘도, 프로젝트 경험도 전무했는데 싸피를 통해서 많은 것을 얻어 갈 수있었다. 이 글은 싸피 생활을 돌아보며 조금 개인적으로 아쉬움이 남았던 부분과 싸피에서 이룬 성취(?)에대해 이야기 해보고자 한다. 긴글 주의 싸피를 선택한 이유 졸업을하니 전공 지식도 애매하게 알고있었고 포트폴리오, 자기소개서에 쓸만한 프로젝트도 딱히 없었다. 그래도 전공에서 간혹 맛 보았던 웹 개발은 재미있었기 때문에 개발자의 진로를 포기하고 싶진 않았다. 따라서 졸업을 하고 개인적으로 웹 공부를 하고 혼자 프로젝트도 진행 해 보았는데, 혼자서 하다보니 내가 잘 하고 있는것인지 의문이 들었다. 거기다 주로 1인 개발을 했..

Javascript 이벤트 루프

Blocking 자바스크립트는 동기적으로 실행되는 싱글 스레드 프로그래밍 언어이다. 한 타임에 한 문장을 순차적으로 실행한다. 그러나 API 호출처럼 요청받는 데이터 크기에 의존한 시간, 네트워크 연결 속도 등등과 같이 많은 이유를 통해서 불확실한 실행 시간을 가진다. 만약 API 호출이 동기적으로 실해 된다면 브라우저는 API동작이 완료되기 전까지 스크롤링이나 버튼 클릭과 같은 유저의 동작을 받아들일 수 없게 된다. 이것이 Blocking(블록킹) 이다. 블록킹 이슈를 해결하기 위해서 브라우저 환경은 자바스크립트가 비동기적으로 접근 가능한 많은 Web API를 갖고 있다. 비동기적이란 병렬적으로 다른 연산들을 실행하는 것을 말하며, 순차적으로 실행하는 동기적과 반대되는 행위이다. 비동기적인 실행은 사용..

Netlify로 배포한 사이트에 개인 domain 연결하기 (구글 도메인)

Netlify로 배포를 하고 나면 .netlify.app 으로 끝나는 도메인을 제공해주긴 하지만 좀 더 개인적인 도메인을 사용하고싶어서 도메인을 연결하고자 한다. Netlify로 프로젝트 배포는 완료한 이후에 진행한다. 배포한 프로젝트의 대시보드에서 Domain Settings로 들어간다. Netlify의 배포 설정 페이지에서 Domain Managment를 클릭하고 Add custom domain 을 클릭한다. 본인이 구매한 도메인을 입력하고 Verify 클릭 도메인을 입력하고 나면 DNS 설정을 체크하라는 메세지가 뜬다. 해당 링크들을 각각 클릭해서 알려주는대로 설정한다. 링크를 눌러보면 다음과 같이 안내 창이 뜬다. 도메인의 dns 설정에서 해당 레코드를 추가하라는 내용이다. 나는 구글 도메인을 통..

HTML 이미지 태그로부터 외부링크(참조값) 보내는것 막기

html로 이미지를 첨부할 때, 브라우저는 서버로부터 이미지를 요청한다. 리퀘스트를 할 때 브라우저는 http 헤더에 url을 담는 Reffer 이라는 속성을 붙여서 보낸다. 그러나 어쩔때는 (외부 링크 첨부 금지와 같은 상황일 때 ) 이러한 행동을 막고싶을 때가 있다. 이 행동을 막기 위한 방법중의 하나로 img 태그의 reffer 속성을 조절할 수 있다. html의 img 태그에 referrpolicy 속성을 통해서 설정한다. referrpolicy 는 이미지를 페치할 때 사용하는 특정 속성이다. Value Description no-referrer 헤더에 어떠한 정보도 보내지지 않는다. no-referrer-when-downgrade 디폴트 값. HTTPS가 아니라면 헤더에 정보를 보내지 않는다 o..

[Tailwind CSS] 다크모드 css 적용하기

Tailwind css를 사용하여 간단하게 다크모드 설정하기 tailwind.config.js 수정 Tailwind는 기본적으로 운영체제의 다크모드, 라이트모드를 따라 css를 적용할 수 있다. 그러나 우리가 웹사이트를 이용하다보면 토글 버튼을 이용하여 라이트, 다크 모드를 변경하는 옵션을 제공하는 경우가 많다. 수동으로 모드를 제어하고 싶은 경우 tailwind의 class 전략을 사용하면 된다. tailwind.confg파일에 다크를 클래스로 사용하겠다고 추가해준다. // tailwind.config.js module.exports = { darkMode: 'class', // ... } 이 설정을 주지 않으면 CSS의 media 설정의 prefers-color-scheme를 사용한다. 위 코드 처럼..