본문 바로가기

Programming104

깃허브 리드미의 새로운 기능, 다이아그램 🖇 본 글은 깃허브 블로그에 올라온 'Include diagrams in your Markdown files with Mermaid' 글을 번역한 글입니다. 일부 오역이나 의역이 있을 수 있으니 이 점 참고 바랍니다🙏🏻 출처 : https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ 사진은 천 개의 단어를 나타낸다고 하죠. 그래서인지 지금까지 GitHub의 Markdown 파일에 사진과 도표를 포함시키는 유일한 방법은 이미지를 삽입하는 것이었습니다. 최근 SVG 삽입에 대한 지원을 추가했습니다만, 도표를 최신 상태로 유지하고 ASCII 아트처럼 쉽게, 그리고 훨씬 더 예쁘게 만들고 싶을 때도 있을 것입니다. Mermaid를 시작해보세요.. 2022. 4. 5.
015_자바스크립트에서의 클린 코드 (변수, 함수 편) ✏️ 본 글은 clean-code-javascript 레포지토리를 참고해 작성했습니다. 출처 : https://github.com/qkraudghgh/clean-code-javascript-ko 1. 변수 의미있고 발음하기 쉬운 변수 이름을 사용할 것 // 안 좋은 예 const yyyymmdstr = moment().format('YYYY/MM/DD'); // 좋은 예 const currentDate = moment().format('YYYY/MM/DD'); 동일한 유형의 변수에 동일한 어휘를 사용할 것 // 안 좋은 예 getUserInfo(); getClientData(); getCustomerRecord(); // 좋은 예 getUser(); 검색가능한 이름을 사용할 것 // 안 좋은 예 // 대체 8.. 2022. 4. 4.
002_인터넷 🌎 인터넷, 다 아는거 아닌가? 처음엔 그렇게 생각했다. 그러다 문득 개발자가 되겠다는 생각을 갖고 초창기에 봤었던 프론트엔드 개발자 로드맵을 다시 보게 됐는데, 가장 기초인 인터넷 항목에 대해 제대로 공부하지 않았다는 생각이 들었다. 로드맵 기준으로 가장 처음 위치에 있는 이 인터넷 파트를 넘어가서 무작정 HTML, CSS, JS를 공부했다는게 뭔가 부끄럽기도 했고, 그래서 준비한 이번 글은 인터넷에 관한 이야기이다. 1. 인터넷은 어떻게 동작할까? 우선 인터넷의 어원은 다음과 같다. 인터넷이란 이름은 1973년 TCP/IP를 정립한 빈튼 서프( Vinton Gray Cerf) 와 로버트 칸( Robert E. Kahn )이 '네트워크의 네트워크'를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결( Int.. 2022. 4. 3.
003_원티드 프론트엔드 프리온보딩 수료 후기 🏆 🤪 정신 차려보니 코스가 끝났다?! 어느새 코스가 끝난 지도 보름쯤 되는 것 같다. 처음에는 매 프로젝트가 끝날 때마다 '~주차 ~번째 후기' 이런 글을 작성하려 했지만.. 정말 정신을 못 차릴 정도로 바쁜 나날 때문에 이렇게 다 끝나고 후기로 돌아오게 됐다. 분명 새해와 함께 아주 추운 겨울에 시작했던 프리온보딩 코스였는데 벌써 꽃이 피기 시작하고 기업에 지원하고 있다니 아직도 믿기지 않는다. 그간 참 배운 것도 많고 이래저래 만든 것도 많은데, 이제 한번 하나씩 그간의 썰을 풀어볼까 한다. 원티드 프론트엔드 프리온보딩 코스를 '미리보기'해보고 싶은 분들이라면 끝까지 읽어보자! ✏️ 코스 후기 우선 이수한 코스 교육과 프로젝트 이야기부터 해보자. 5주라는 짧은 시간 동안 1번의 개인 프로젝트, 8번의 .. 2022. 4. 1.
014_Redux, Context API 없이 전역 관리하기 🔥 당연하다 생각했지만 당연하지 않은 것 - 면접 때 다음과 같은 질문을 받았다. - 'Redux나 Context API 없이 전역 관리를 하려면 어떻게 해야할까요?' - 그동안 위 두 방식을 너무나 당연하게 사용했던지라 면접관님의 질문에 당황하긴 했지만, 당시 내 답변은 '전역으로 관리할 state를 Redux의 store 형식으로 따로 만들어 사용하면 되지 않을까요?' 였다. - 대략 어떻게 해야할 지에 대한 생각은 했지만 이번 기회에 직접 작성해보며 내가 생각한 답변이 실제로 작동하는지 확인해보기로 했다. 원리 - Redux의 Store, Action, Dispatch의 개념을 활용해 훅을 제작한다. - Store는 Dispatch가 작동할 때마다 값이 바뀐다. - Dispatch는 작동할 때마다 St.. 2022. 4. 1.
013_자바스크립트의 비동기 처리 종류 + setTimeout() '자바스크립트의 비동기 처리 방식엔 어떤게 있을까요?' - 최근 진행했던 기술면접에서 제대로 답변하지 못했던 질문이었다. - 분명 공부했었고 다 안다고 생각했는데, 막상 질문이 들어왔을 때 제대로 답변하지 못했던 그 때의 나를 반성하며 제대로 비동기 처리 방식에 대해 정리해보고자 한다. 시작하기 전 다시 정리하는 동기 & 비동기 1. 동기 동작 : 현재 실행 중인 코드가 끝나야 다음 코드를 실행 = 현재 실행중인 task가 종료할 때까지, 다음 task가 대기하는 방식 장점 : 동기 처리는 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다. 단점 : 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는게 문제 = 블로킹(blocking) 2. 비동기 동작 : 현재 실행 중.. 2022. 3. 31.
001_브라우저의 저장소에 대해 알아보자 🌎 Web Storage Web Storage란 HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능이다. Web Storage는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 저장한다. 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분해 사용할 수 있다. Web Storage는 사이트의 도메인 단위로 접근이 제한된다. 예를 들어 A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없다. HTML5부터 새롭게 지원하는 저장소이기 때문에 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. Web Storage vs Cookie 웹 스토리지 쿠.. 2022. 3. 31.
012_정적 타입 언어와 동적 타입 언어, 그리고 TypeScript 타입(type)이란? - 자료형을 뜻한다. - boolean, string, number, Symbol, Object 등 동적 타입 언어란? - 대표적인 언어로는 JavaScript, Python 등이 있다. - 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고, 실행할 때 결정한다. 장점 1. 프로그래머들이 타입을 고민할 필요 없이 빠르게 코드를 작성할 수 있다. 2. 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높다. ※ 런타임 프로그래밍 언어가 구동되는 환경 단점 1. 사전에 버그를 미리 간파하기 어렵다. 2. 실행 도중에 변수에 예상치 못한 타입이 들어와 TypeError를 발생시킬 수 있다. 정적 타입 언어란? - 대표적인 언어로는 C, C#, C++, Jav.. 2022. 3. 25.
011_'절대값이 2^53보다 크거나 같은 숫자 리터럴은 너무 커서 정수로 정확하게 표시할 수 없습니다.' console.log("333333333333333333" - "3"); // "333333333333333300" // ?????????????????????????? ??? - 최근 블로그 스터디를 하면서 한 분이 이런 질문을 하셨다. - '왜 계산이 이렇게 되는 걸까요?' - 그래서 직접 이리저리 텍스트를 바꿔가며 테스트를 해봤는데 여전히 정확한 계산이 안되는 것이었다. - 그러다 숫자로 값을 변경하면서 다음과 같은 사실을 알게 됐다. Number라고 생각했지만 Number가 아니다? - 위 에러 메세지에서 '절대값이 2^53보다 크거나 같은 숫자 리터럴'에 주목할 필요가 있다. - JavaScript의 Number는 부동 소수점으로 표시된다. 이는 정밀도가 제한적이라는 것을 의미한다. - 그래서 .. 2022. 3. 15.
010_for, forEach, map(재정리 ver.) 👀 어..? - 최근 현직자와의 모의 면접에 참관한 적이 있는데, 여러 질문 중 다음과 같은 질문을 하신 적이 있었다. "forEach와 map의 차이에 대해 설명해보시겠어요?" - 이 질문을 듣고 처음엔 당연히 안다고 생각하고 면접자분께서 답하기 전에 혼자서 답을 생각해봤는데, '어..?' 라는 말밖에 나오지 못했다. - 이에 이번 포스트를 통해 다시 한 번 정리하고 확실하게 개념을 다져보고자 한다. - 추가 : 뭔가 글을 썼던 것 같아서 찾아보니 자바스크립트 파트에 가장 처음 쓴 글이 forEach와 map의 차이였... 반성하는 마음으로 이번에는 절대 잊지 않겠다는 각오와 함께 써보도록 하겠다 😢 Chapter 1. for() - for()은 초기값부터 시작해 증가 또는 감소하면서 조건에 부합하면 계속.. 2022. 3. 14.
009_자바스크립트, 싱글 쓰레드, 비동기, 논블로킹, 이벤트 루프 자바스크립트는 싱글 쓰레드 언어인데 비동기 처리가 가능하다? 글을 시작하기 전 알아둬야 할 지식 1. 프로그램 (Program) - 어떤 작업을 위해 실행할 수 있는 파일. - 정적인 개념 (아직 동작하지 않고 있기 때문) 2. 프로세스 (Process) - 프로그램이 메모리에 올라와 cpu(자원)를 할당받고 프로그램이 실행되고 있는 상태. - 여기서 자원은 cpu 시간, 운영되기 위해 필요한 주소 공간, Code, Data, Stack, Heap 구조로 되어 있는 독립된 메모리 영역을 말한다. - 기본적으로 프로세스당 최소 1개의 쓰레드(메인 쓰레드)를 가진다. - 동적인 개념 (프로그램이 동작하고 있기 때문) 3. 쓰레드 (Thread) - 프로세스 내에서 실행되는 흐름의 단위 - 쓰레드가 1개면 싱.. 2022. 3. 14.
자바스크립트에서 If-Else, Switch 대신 사용할 수 있는 방법, 객체 리터럴 💡 이 글은 Jack Taylor의 'Don’t Use If-Else and Switch in JavaScript, Use Object Literals' 를 번역한 내용으로 구성돼 있습니다. 번역글이다보니 약간의 오역이나 의역이 있을 수 있습니다 ! 출처 : https://betterprogramming.pub/dont-use-if-else-and-switch-in-javascript-use-object-literals-c54578566ba0 리터럴(literal)이란? CS에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어로 쓰인다. 다르게 표현하자면 '문자 그대로의 값'을 뜻한다. const num = 1; 이라는 코드를 예로 들자면 num은 상수이고, 1은 10진수 정수 리터럴이다... 2022. 3. 2.
반응형

티스토리툴바