본문 바로가기

SEOP124

Ep 15. 회고가 너무 하고 싶었던 건에 대하여 1년. 내가 회고라는 걸 하기 위해 걸렸던 시간이다. 처음 개발이라는 분야에 들어와 그동안의 자기 자신을 돌아보는 회고라는 문화를 접했을 때, ' 취업하면 써야지 ', ' 나는 아직 회고를 쓸 준비가 되지 않았어 ' 라는 생각으로 한참을 참고 참았는데 드디어 내 그동안의 기억들을 되돌아보는 시간을 갖게 돼서 너무나 행복한 지금이다. 그렇다. 그렇게 간절히 바라던 취업에 드디어 성공했다. 그리고 어느새 출근한지 1주일이라는 시간이 흘렀다. 이 1주일간의 쾌락을 즐기기 위해 지난 1년을 준비했고 이제는 지난 1년을 돌아볼 수 있는 권한까지 얻게 됐다. 우선 지금 이 순간의 느낌부터 적어보자면, 겁나 행복하다. 해가 뜰 무렵에 일어나 눈도 못 뜬 채 화장실에 들어가는 기분도, 정면 혹은 휴대폰 화면이 있는 아.. 2022. 5. 8.
005_npm ci, npm i 🔥 호락호락하지 않은 프로젝트 설치 입사하고 나서 이래저래 회사 생활에 적응하던 중, 드디어 우리 팀 프로젝트 설치를 하는 순서가 찾아왔다. 이전까지 yarn이라는 패키지 매니저 위주로 사용하다 오랜만에 npm으로 설치하려는데 선임 분께서 'npm i 대신 npm ci로 설치를 진행해주세요' 라고 요청해주셨다. 그동안 npm i만 알고 있던 내게 또 다른 설치 방법이 있다는게 신기하기도 했고, 구체적으로 어떻게 다른지 확인해보기로 했다. ⚡️ npm ci? 우선 npm ci의 'ci' 는 다음 용어의 줄임말이다. ci : clean install 그냥 설치하는 것도 아니고 클린하게 설치한다는 것은 무슨 뜻일까? 이 뜻을 이해하려면 먼저 package.json과 package-lock.json에 대해 이해.. 2022. 5. 8.
016_pass by value, pass by reference ?? 최근 진행한 한 코딩테스트에서 생각한 대로 구현되지 않았던 문제가 있었다. 문제나 정답을 동일하게 작성할 수 없으니 비슷한 예를 다음과 같이 적어보겠다. function solution(N, M) { const array = new Array(N).fill([]); const words = M.split(" ").map((e) => e.split("")); for (let i = 0; i < words.length; i++) { array[Number(words[i][0])].push(words[i][1]); } return array; } console.log(solution(2, "01 13 04")); // 기대값: [['1', '4'], ['3']] // 출력 : [['1', '3', '4'.. 2022. 4. 23.
004_cdn 🔗 정의 & 특징 Content Delivery Network 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화한다. 왜 필요한가? 1. 물리적 거리의 한계 미국에서 제공하는 어떤 서비스가 있다고 가정해보자. 우리가 웹 페이지에 접속하는건 해당 서비스를 제공하는 서버에 요청을 보내고 그 응답으로 돌아오는 컨텐츠를 이용하는 것이다. 그렇다면 이 서비스를 이용하는데 서버와 가까운 미국 사람들은 쾌적하게 서비스를 즐길 수 있겠지만, 저 바다 건너 한국, 인도네시아, 남극 이런 곳들은 거리가 있기 때문에 요청과 응답에 시간이 걸리게 되는 문제가 생긴다. 2. 서버의 과부하 글로벌 서비스의 .. 2022. 4. 16.
003_css의 다양한 숨김처리 방법 🙄 같지만 다르다? 화면을 구성하면서 때때로 이벤트 효과나 기타 목적으로 요소를 보이지 않게 해야 할 때가 있다. CSS에서는 이러한 기능을 다양한 방식으로 작성할 수 있는데 지금부터 어떤 방식이 있는지 알아보자! 1. display: none 컨텐츠가 사라지면서 해당 컨텐츠가 차지하고 있던 영역도 함께 사라진다. 이벤트 (ex. 클릭)는 작동하지 않는다. 화면 영역에서 사라지는 것 뿐만 아니라 보조기기나 검색엔진이 접근하지 못하게 되어 텍스트인 경우 스크린리더 사용자가 해당 내용을 들을 수 없다. 브라우저 렌더링 시 렌더링 트리에서 요소를 완전히 제거한다. 2. visibility: hidden display: none과 달리 컨텐츠는 사라져도 해당 영역은 그대로 존재한다. 이벤트 (ex. 클릭)는 .. 2022. 4. 11.
깃허브 리드미의 새로운 기능, 다이아그램 🖇 본 글은 깃허브 블로그에 올라온 '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.
반응형

티스토리툴바