본문 바로가기

분류 전체보기218

npm, yarn, 그리고 yarn berry yarn 2016년 10월에 출시된 yarn 은 npm과 같은 노드 패키지 매니저 도구 중 하나로, 당시 Facebook에서 근무하던 Sebastian McKenzie가 개발한 패키지 매니저입니다. 기존의 npm이 가지고 있던 문제점들을 해결하기 위해 등장했고, 성공적으로 안착하여 현재 수 많은 프로젝트에서 사용중인 오픈소스 프로젝트가 되었습니다. 이번 글에서는 yarn이 npm의 어떤 문제들을 해결했는지, 그 이후엔 두 패키지 매니저가 어떻게 발전했고 yarn berry 가 등장하며 어떤 점이 달라졌는지까지 알아보겠습니다. npm의 문제점 yarn이 등장하기 전, 과거의 npm에는 여러가지 문제가 있었습니다. 일관적이지 않은 패키지 버전, 고정되지 않은 설치 순서, 순차적인 설치로 인한 긴 소요 시간 .. 2022. 8. 28.
자바스크립트의 index.js 우리가 자바스크립트를 사용하여, 정확히는 노드를 이용하여 프로젝트를 만들다보면 굉장히 독특한 파일 시스템 규칙 하나를 자연스레 발견하게 됩니다. 바로 index 파일입니다. index란? 사전에서의 색인과 같은 의미로 프로그래밍에서 널리 사용되는 단어입니다. 메모리 구조 상의 위치를 나타낼때도 많이 사용되고, 반복문의 카운트에 자주 사용되는 i 가 바로 "index" 의 약어입니다. 이렇게 사용하는 인덱스가 자바스크립트에서는 조금 다른 용법으로 쓰이기도 합니다. index를 이용한 간결한 import / export 이러한 파일 구조를 가진 프로젝트가 있다고 하겠습니다. 현재는 많은 파일을 불러오지 않아 import 구문이 그다지 길지 않습니다. 그러나 프로젝트가 점점 복잡해지며 점점 많은 모듈을 불러오.. 2022. 8. 23.
Submodule로 환경 변수 관리하기 모모 팀 기술 블로그에 업로드 된 포스트입니다. 이번 프로젝트의 릴리즈에서, 환경 변수의 관리 방법을 기존의 로컬 파일에 의존하던 방식에서 github의 submodule를 적용하여 관리하는 방법으로 변경하였습니다. 어떤 점에서 불편을 느꼈고, 어떻게 이러한 방식을 적용하게 되었는지 이야기해보려 합니다. 환경 변수? 위키백과에 따르면, 환경 변수란 실행 중인 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이라고 설명하고 있습니다. 물론 틀린 말은 아니나, 이것은 OS의 관점에서 설명했기에 저희 프로젝트에서 적용한 환경 변수에는 다소 와닿지 않는 설명입니다. 현재 프로젝트 상황에 맞도록 조금 다르게 설명해보면, 환경 변수는 “프로젝트의 환경에 따라 다르게 사용되는 변수” 정도로 정의.. 2022. 8. 17.
토스 Next 2022 코딩테스트 프론트 후기 이번에 토스에서 2022 Next 개발자 챌린지라는 채용 프로그램을 열었습니다. 평소 토스라는 회사에 관심이 있어 프로그램에 참여하였고, 결과적으로는 코딩 테스트에서 불합격하게 되었지만 간단하게 후기를 작성해봅니다. 나의 상황 우아한테크코스를 진행하며 한창 프로젝트에 열중하고 있다가, 토스 Next 2022가 열린다는 소식을 들었습니다. 작년에 이어서 올해도 열릴거라 생각은 하고 있었지만, 마지막으로 알고리즘 문제를 풀어봤던게 우테코 지원 당시의 코딩 테스트였을 정도로 코딩 테스트에 대한 대비를 따로 하고있지 않아 자신감은 없었습니다. 물론 문제들은 예전에야 많이 풀어보긴 했지만, 당시 대부분 C++를 사용해서 해결했을 뿐더러 그마저도 기억이 흐릿해져 알고리즘 문제가 나온다면 풀 자신이 없었기에 큰 기대.. 2022. 8. 12.
JSX 알아보기 JSX는 리액트를 사용한다면 많은 분들이 익히 만나보셨을 문법입니다. 저도 리액트 프로젝트를 하며 당연하게 사용하고 있지만 안타깝게도 JSX가 무엇인지, 정확히 어떤 역할을 하고 있는지는 잘 모르고 있습니다. 오늘은 공식 문서와 몇 가지 예제를 통해 JSX에 대해 조금 더 깊게 알아보겠습니다. JSX가 왜 필요할까요? const element = Hello, world!; 위 코드는 공식 홈페이지에 기재된 가장 간단한 JSX 예시입니다. 변수 element에 할당된 태그로 감싸진 구문이 바로 우리가 알고있는 JSX입니다. 잠시 리액트가 아닌, 순수한 자바스크립트를 사용하던 시절로 돌아가보겠습니다. 우리의 프로젝트는 대략 이런 방식을 따라 흘러가게 됩니다. 자바스크립트 파일이 정적인 HTML, CSS 문서.. 2022. 7. 24.
React.Memo 사용하기 React의 컴포넌트는 props라고 하는 입력을 받아 화면을 나타내는 JSX 엘리먼트를 반환합니다. 이러한 컴포넌트의 조합을 통해 우리가 보는 페이지를 구성하고, 하나의 완성된 결과물을 출력할 수 있게 됩니다. 리액트는 상황에 따라 다양한 화면을 보여주기 위해 지속적으로 컴포넌트를 갱신하는데, 이를 리렌더링이라고 합니다. 리렌더링 덕분에 컴포넌트는 정적인 반환에서 벗어나 많은 역할을 할 수 있었습니다. 컴포넌트가 사용자가 원하는 화면을 반영하려면 언제 리렌더링이 일어나야 할까요? 가장 확실한 방법으로는, 매 밀리초마다 컴포넌트를 렌더링 하면 정보의 누락없이 항상 최신 상태의 컴포넌트를 보여줄 수 있습니다. 하지만 그 방법은 너무 많은 리렌더링이 일어나고, 많은 리렌더링은 나쁜 사용자 경험으로 이어지기 .. 2022. 7. 11.

티스토리툴바