이상과현실

html은 세상 일이 늘 그렇듯 아는만큼만, 궁금한 만큼만 보인다. 처음 html을 배울 땐 이유도 모른 채로 script 삽입 코드는 늘 의 바로 위에 넣는다고 하여 그대로 했다. 하지만 모든 일에는 이유가 있고 그 맥락을 알면 더 잘 기억할 수 있는 것 같다. 브라우저가 html을 읽다가 script를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. script를 마지막에 넣는 방법도 있지만 페이지 로딩이 지연될 수 있다. 그럴때 script에 defer 나 async 를 사용할 수 있다. 모던 자바스크립트 튜토리얼을 읽다가 너무 좋은 그림이 댓글로 있길래 복붙해왔다. async load-first order. 문서 내 순서와 상관없이 먼저 다운로드된 스크립트가 먼저 실행 defer 문..

next.js 공식사이트의 튜토리얼에 global.css를 사용할 때는 _app.js 파일로 한번 전체 컴포넌트를 감싼 뒤 거기에 global.css를 연결해야한다고 나와있다. 튜토리얼을 변형해서 커피 사이트를 만드는 중 module.css로는 처음 작업하다보니 문제 발생. css variables들은 어디에 넣어야하는가? 바로 위에 나온 global.css에 넣어야 적용 가능! 하지만 css module을 사용해보니 불편해서 sass로 바꿔야겠다. next.js 튜토리얼 링크 https://nextjs.org/learn/basics/assets-metadata-css/global-styles Learn | Next.js Production grade React applications that scale..

모바일로 확인하고 싶거나 다른 사람한테 내가 개발한 페이지 보여주고 싶을 때 사용하는 패키지~~~ 회원 가입없이 간단하게 로컬 서버를 외부에 공유할 때 편리한 오픈소스 프로젝트 localtunnel 노드 패키지이기 때문에 Node 설치가 필요하다. 1. 터미널 명령어로 설치하기 npm install -g localtunnel 2. 보고싶은 로컬 서버 열기 npm start / npx serve -s build 등등... 3. 다른 터미널 열기 4. 열어놓은 로컬 서버 포트 번호를 밑의 명령어의 8000자리에 넣기 (ex - 3000으로 열린경우 lt --port 3000) lt --port 8000 그럼 뜨는 url을 공유하면 됨. 처음 접속시 피씽 조심하라는 경고화면 뜨는데 컨티뉴 버튼을 클릭하면 된다..

라이브러리를 사용하지 않고 하는 간단한 깊은 복사 방식 먼제 json 메소드 parse와 stringify를 알아야한다. JSON.parse() - JSON 문자열을 javascript 객체로 변환 - JavaScript 객체로 변환된 데이터는 . 나 [] 기호를 사용하여 각 속성에 접근할 수 있다. - 외부 문자열을 내장 데이터 타입으로 변환하는 역직렬화(deserialization) 과정에서 사용 JSON.stringify() - javascript 객체를 JSON 문자열로 변환 - 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 직렬화(serialization)과정에서 사용 Object.assign()으로 할당할 때 깊은 복사 function test() { 'use ..

주어진 배열에서 숫자의 중복횟수를 배열로 반환하는 문제 내 풀이 설명 1. spread연산자로 복사한 뒤 sort를 이용해 매개변수로 주어진 배열의 숫자를 순서대로 배치한다. 2. 반복문으로 배열요소의 앞 뒤가 같으면 카운트를 센다. 3. 배열요소의 앞뒤가 다르고 count가 1보다 크면(중복횟수가 1보다 큼) answer배열에 count를 넣은 뒤 count를 초기화 한다. 그럼 정답이 (3) [3, 2, 3]가 나온다. 정답1 분석 내 풀이와 다르게 Map, Set을 사용했다. 정답 2와 다른 점은 countOf 함수와 solution 함수를 나누어서 해결했다는 점이다. 한 함수는 한가지 역할만 하라는 클린코드 원칙에 맞게 풀이 되어서 내 코드에도 참고해야겠다는 생각이 들었다. 특히 이 1번 풀이는 ..

https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/ Explain the First 10 Lines of Twitter's Source Code to Me | CSS-Tricks A question I always like to ask when interviewing a front-end candidate is: "Explain the first ten or so lines of the Twitter source code to me." css-tricks.com css-trick을 보던 중 흥미로운 글이 있어서 정리용으로 씁니다. 이 캡쳐를 바탕으로 1~11번 줄이 무엇을 의미하는지 설명하는 포스팅이에요. 글 요약 Line ..

빅오표기법은 알고리즘의 시간 복잡도를 나타내는 표기법 아래와 예시와 같이 for문이 1번만 돌면 O(n) 이중for문으로 쓰이면 O(n^2) 시간 복잡도(알고리즘의 복잡도)를 비교하자면 O(1) < O(logn) < O(n) < O(nlogn) < O(n^2) < O(2^n)등의 순서로 복잡하다. 선생님에게 보이는 학생의 수를 구하는 알고리즘 for문을 중첩해서 구할 수 도 있겠으나 max라는 변수를 만들어서 한번만 루프를 돌리는게 더 낫다. n과 관련된 그 어떤 변수를 루프 안에 쓰더라도, 루프가 하나라면 O(n)으로 나타내면 된다 출처: https://holika.tistory.com/29 [Uing? Uing!!]

promise를 사용하는 이유 비동기적인 작업을 처리할 때 그 작업이 성공했는지 실패했는지를 표준화된 방식을 이용해서 처리할 수 있게 해준다. 성공했을 땐 .then / 실패했을 땐 .catch fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => console.log('response', response.json)) .catch(reason => console.log('reason', reason)) response.json를 통해 데이터가 json 타입이라는 것을 자바스크립트에게 알려줌. promise 사용하는 2가지 방법 1. nested promise promise then 안에서 또 then을 사용하는 방식 2. prom..