티스토리

한땀한땀 코딩하기

검색하기

블로그 홈

한땀한땀 코딩하기

stitchcoding.tistory.com/m

한땀코딩 님의 블로그입니다.

구독자: 5

방명록 방문하기

주요 글 목록

css-in-js 에서 tailwind로 옮겨가려는 이유 css-in-js 와의 첫 만남 프론트엔드 개발에 입문했던 시기에 리액트와 함께 모두가 사용하던 것이 있었으니 바로 styled-components였습니다. 솔직하게 고백하자면 그때는 왜 쓰는지를 크게 고민하지 않고 모두가 사용한다는 점과, JS 파일에 같이 스타일을 작성해서 관리한다는 점이 좋아 보여서 사용했던 기억이 있습니다. 그리고 막연하게 이 좋은 걸 두고 왜 굳이 힘들게 css 파일을 따로 만들고 클래스 형태로 적용하는지 이해를 못 했습니다. 그러다 일을 시작하고 2년 정도 이런저런 형태를 많이 보다 보니 css-in-js가 마냥 정답은 아니라는 생각이 들었습니다. 특히 제가 속한 팀에서는 scss modules를 많이 사용하고 있는데요, 사용해 보니 의외로 관리가 편하고 마크업, 퍼블리싱 쪽과.. 공감수 1 댓글수 0 2023. 7. 15.
크롬 개발자 도구 Console 숨은 기능 공식 문서 https://developer.chrome.com/docs/devtools/console/ Console console.log 만이 아니라 console.warn, console.error를 이용해 메시지를 출력하고 필터를 적용하여 개발자 도구에서 확인할 수 있다 console.table을 이용해서 표 형태로 출력할 수 있다. 속성이 여러 개인 객체의 배열인 경우 유용하다 console.group: 여러 console 메시지를 묶어서 출력 console.count: 해당 함수가 몇 번 호출되었는지 출력 console.time, console.timeEnd: 호출이 시작된 시간과 끝 시간을 출력 관련된 공식 문서 live expressions 반복적으로 찍어보고 있는 값이 있다면 live ex.. 공감수 0 댓글수 0 2023. 6. 24.
Google Chrome Memory Terminology 크롬 개발자 도구: Memory 최근에 코드 내 메모리 사용량을 알아보던 도중 크롬 개발자 도구 문서에서 메모리 관련 용어를 정리해 둔 것을 발견하여 가볍게 읽어보았습니다. 생각보다 V8 엔진에 대해서 알아야 하는 것도 많고 생소한 용어도 많아서 간단하게 이해한 부분과 더 학습이 필요할 거 같은 부분을 정리해 보았습니다. Memory terminology - Chrome Developers Object Sizes 생성되는 객체의 사이즈는 heap profiler에서 확인이 가능한데, shallow size와 retained size가 있습니다. shallow size: 객체가 직접 안고 있는 메모리 크기 보통 배열과 문자열이 shallow size가 크다고 합니다. 또한 주 저장소가 renderer me.. 공감수 0 댓글수 0 2023. 6. 18.
6월을 맞이하며 상반기가 이렇게 또… 벌써 정신을 차려보니 달력이 6월로 바뀌어있네요. 앞으로 현충일 이후로는 광복절까지 휴일이 없다는 슬픈 현실을 자각하면서 상반기 반성 및 회고를 작성해보려고 합니다. 올 상반기는 3월까지는 일이 바빴던 것도 크고 개인적으로 큰 일들이 많이 생기면서 사실상 업무 외적인 개발이나 관련 공부에 많이 소홀했지 않나 싶습니다. 일을 하면서 트러블슈팅 위주로 많이 기록을 해보고 싶었는데, 아직도 산발적으로 해결한 이슈들을 어떻게 정리하면 좋을지 어려운 거 같습니다. 해결을 하고 나면 그때그때 바로 정리를 해야 잊지 않고 기록을 남길 수 있는데, 귀찮음 + 다른 이슈 해결 같은 문제들이 발목을 잡지 않았나 싶습니다. 그래서 막상 글또를 하면서도 처음 의도한 잘 정리된 글은 작성하지 못했던 거 같.. 공감수 0 댓글수 0 2023. 6. 4.
OpenAI completion endpoint 맛보기 chatGPT, 나도 활용해볼 수 있을까? 업무와 업무 외적으로도 최근에 chatGPT를 굉장히 잘 사용하고 있습니다. 코드를 물어보기도 하고, 무엇보다 아이디어를 얻기 위해서 많이 사용하고 있었는데요, 정작 직접 Open API를 호출해 본 적이 없다는 걸 깨달았습니다. 이제는 이런 생성형 AI가 활성화되면서 내가 직접 백지부터 창조해 내는 것보다 AI를 활용하여 모든 것을 만들어가는 방향으로 변화할 거 같다는 생각이 듭니다. 그래서 일단 시작을 해보자는 마음으로 간단하게 ‘긍정 확언’을 자동으로 생성하는 페이지를 만들어보았습니다. (매번 유튜브에서 긍정 확언 영상들을 찾다가 그냥 새롭게 생성해주는 사이트가 있으면 좋겠다 싶었습니다 😂) 코드는 공식 예제에서 제공하는 레포에서 config와 프롬프트만 .. 공감수 0 댓글수 1 2023. 5. 21.
JS 라이브러리를 만들 건데 Rollup을 쓰면 되나요? 번들러 번들링은 JavaScript와 프론트엔드의 생태계에서 빼먹을 수 없는 큰 요소라고 생각합니다. 번들링과 모듈 개념만 두고 공부해 보면 거의 웹 개발의 역사를 훑게 되다 보니 항상 공부할 엄두가 잘 안 나기도 합니다. 코드 번들링을 정의한다면, 어플리케이션이 돌아가기 위해 필요한 모든 코드와 파일을 효율적으로 합치는 작업이라고 볼 수 있습니다. 이런 작업이 필요한 이유는 애플리케이션 개발에는 외부 의존성도 많이 쓰이고, 개발의 편의를 위해 여러 파일로 나눠둔 코드를 실행을 위해서 하나로 합치는 것이 리소스 면에서 효율적이기 때문입니다. 제가 처음 공부를 할 때는 번들러가 이렇게 다양한지 몰랐고, 근본이라 볼 수 있는 Webpack으로만 번들을 했었습니다. 막상 일을 시작하고 실제로 라이브러리를 만드.. 공감수 0 댓글수 0 2023. 4. 29.
Storybook 빌더 비교 (Vite, Webpack) 최근까지 Storybook 6 버전을 사용하다가 7 버전 마이그레이션을 살펴보던 도중, Vite 또한 스토리북의 빌더로 사용이 가능한 것을 알게 되었습니다. Vite가 빠르고 사용하기 편하다, 등의 이야기는 많이 접하고 있었는데, 구체적으로 어떤 면에서 유리한지를 스토리북, Vite의 공식문서를 보면서 가볍게 정리해 보았습니다. Vite Vite Vite는 개발 서버 시작 속도를 개선한 바가 있는데, 이는 의존성과 소스코드를 분리하기 때문이라고 합니다. 의존성 - esbuild를 이용하여 사전에 번들링 합니다. esbuild는 Go로 작성되어 있어 JS 기반의 번들러보다 속도 면에서 유리합니다. 소스코드 - 브라우저가 번들러의 역할을 대신하는 느낌으로, 요청이 있는 경우에만 코드를 변환하여 제공합니다. .. 공감수 0 댓글수 0 2023. 4. 23.
src가 없는 img 요소 대체하기 (pseudo-element, safari 해결방법) 문제 어떤 배경 상황이 있을지는 사람마다 다르겠지만 HTML img 요소에 src의 값이 빈 문자열인 경우 대체 이미지를 띄우고 싶은 상황이 있다고 가정해 봅시다. 대체용 이미지를 만들어두고 집어넣을 수도 있겠지만 제 경우 별도로 파일을 관리하기도 귀찮았고, inline으로 이미지의 사이즈가 주어지는 경우도 있어 고정된 사이즈의 이미지를 사용하면 비율이 엉망이 될 가능성이 높았습니다. 검색과 chat GPT의 도움을 받아 방법을 찾아보던 중, 단지 css 만으로도 이 문제를 해결할 수 있다는 놀라운 사실을 알게 되어 글을 작성해보려고 합니다. 물론 세련된 디자인을 원하신다면 적절하지 않을 수도 있으나 정적 파일이나 JS 조작이 없다는 점에서 다른 비슷한 문제 해결에도 참고가 될 수 있을 거 같습니다. 코.. 공감수 0 댓글수 0 2023. 3. 26.
눈에 보이는 리액트 UI 라이브러리 테스트 붙이기 (Storybook Interactions) UI 컴포넌트는 어떤 테스트를 붙여야 할까? 최근에 리액트 기반의 UI 라이브러리를 만들 일이 있었습니다. 서비스와는 다르게 특정 페이지가 있는 것이 아니기 때문에, 컴포넌트를 만들 때마다 화면에 그려보기 위해 선택한 도구는 평소에 애용하던 Storybook이었습니다. 서비스와 분리하여 시각적으로 UI를 확인하기엔 최적의 도구라고 생각하는데, 한 가지 고민은 코드 레벨에서의 테스트였습니다. 특히, 단순 기능 동작이 아닌, 스타일이나 스크롤 같은 변화를 감지할 필요가 있었는데, jest나 react-testing-library에서는 이런 부분이 정확히 확인이 어려웠습니다 (이미 작성한 스토리를 재활용하여 테스트를 붙일 수 있게 해주는 testing-react addon). 단순히 값이 변화하는지의 문제보단.. 공감수 0 댓글수 0 2023. 3. 12.
[HTTP 완벽 가이드] 14장 보안 HTTP 요약 14장) 보안 HTTP HTTP를 안전하게 만들기 안전한 http를 만들기 위해선 다음과 같은 고려사항들이 있다. 서버 인증: 위조된 서버가 아님을 인증 클라이언트 인증: 위조된 클라이언트가 아님을 인증 무결성: 데이터 위조 방지 암호화: 도청에 대한 걱정 없이 대화 효율: 저렴한 클라이언트 & 서버를 지원하는 빠른 알고리즘 편재성 (Ubiquity) 관리상 확장성: 누구나 어디서든 즉각적인 보안 통신 가능 적응성: 현재 알려진 최선의 보안 방법 지원 사회적 생존성: 사회적, 문화적, 정치적 요구 만족 HTTPS HTTPS는 HTTP의 하부에 전송 레벨 암호 보안 계층을 제공하며, 이 보안 계층은 안전 소켓 계층 (SSL) 혹은 그를 계승한 전송 계층 보안 (TLS)를 이용하여 구현된다. 어려운 인코딩,.. 공감수 0 댓글수 0 2022. 7. 31.
[요약] HTTP 완벽 가이드 - 1부 HTTP: 웹의 기초 1장) HTTP 개관 HTTP: 인터넷의 멀티미디어 배달부 신뢰성 있는 데이터 전송 프로토콜 웹 클라이언트와 서버 가장 흔한 클라이언트는 웹브라우저 리소스 정적 파일 & 동적 파일 꼭 파일이 아니라 검색엔진, 웹 게이트웨이 등도 리소스로 볼 수 있다 미디어 타입 MIME (Multipurpose Internet Mail Extensions) 은 원래 각기 다른 전자메일 시스템 사이에서 메시지가 오갈 때 겪는 문제점을 해결하기 위해 설계되었다. HTTP에서도 멀티미디어 콘텐츠를 기술하고 라벨을 붙이기 위해 채택. 웹 서버는 모든 HTTP 객체 데이터에 MIME 타입을 붙인다. 주타입과 부타입을 기술하는데 / 로 구분한다 text/html, image/jpeg, video/quicktime(애플 퀵타임 동영.. 공감수 1 댓글수 0 2022. 7. 3.
Cache-Control 헤더를 알아보자 (no-store, no-cache, max-age, must-revalidate) Cache-Control HTTP 완벽 가이드를 캐시 챕터를 읽으면서 header에 대해 처음으로 고민하면서 읽게 되었는데, 스터디를 하면서 재미있는 질문과 논의가 나온 거 같아 정리해보면 좋을 거 같아 글을 작성하게 되었습니다. E-tag 등도 캐시에서는 빼놓을 수 없는 헤더지만, 이번 글에서는 Cache-Control 필드에 해당하는 네 가지 디렉티브를 중심으로 정리해보려고 합니다. no-store no-cache max-age must-revalidate no-store no-store 디렉티브는 캐시에 응답을 저장하는 것을 금지합니다. 말 그대로 아예 저장(store)을 하지 않는 걸 의미합니다. 캐시를 하지 않는다, 라고 하면 당연히 이런 옵션만 있을 거 같은데 no-cache라는 디렉티브가 따.. 공감수 0 댓글수 0 2022. 6. 5.
storybook/testing-react 를 이용한 React 컴포넌트 중복 테스트 작성 방지 Storybook? Storybook은 컴포넌트 단위로 나뉜 UI를 프로그램과 별개로 띄워서 확인해볼 수 있게 해주는 일종의 테스트 도구입니다. 리액트 컴포넌트를 개발할 때, props나 상태 값에 따라 디자인부터 기능까지 달라질 수 있는데, 이를 매번 실제 개발하고 있는 페이지에 심어서 테스트하는 것은 번거롭고 놓치게 되는 부분이 많습니다. 제가 Storybook을 사용하면서 느꼈던 장점들은 이렇습니다. 개발 중인 화면과 분리하여 UI를 확인 및 테스트 가능 props 값에 따라 달라지는 모든 형태를 기록해둘 수 있어 디자인 docs 작성 + 개발을 한번에 처리 가능 디자이너와 협업 시 개발 상태를 공유 가능 Jest (React Testing Library)와의 차이 기존에 컴포넌트 테스트를 Reac.. 공감수 1 댓글수 0 2022. 4. 30.
SameSite vs SameOrigin SameSite vs SameOrigin 웹 개발을 공부하다 보면 origin이 달라서 발생하는 CORS 관련 이슈를 접하는 일이 잦습니다. 이와 관련해서는 일전에 포스팅으로 한번 정리한 적도 있습니다. 그러나 최근 스터디에서 쿠키와 관련된 이야기가 나오면서 그렇다면 쿠키는 same origin일 때만 세팅할 수 있는가, 라는 질문이 나왔는데 MDN의 쿠키 세팅 설명에 따르면, 아무것도 세팅하지 않은 상태에선 동일한 호스트(서브도메인도 제외)만 허용한다고 합니다. 이와 관련한 부분은 Domain 옵션인데, 이곳에 특정 호스트를 명시하게 되면 오히려 해당 호스트의 same-site를 모두 허용해줄 수 있기 때문에 더 제약이 없어집니다. 쿠키와 관련해선 별도의 포스팅을 할 필요가 있을 것 같아 이번 포스팅에.. 공감수 1 댓글수 1 2021. 4. 11.
Vue 컴포넌트 npm 패키지로 배포하기 npm install의 그것 최근 Vue로 작업을 하던 중 작성하던 코드의 컴포넌트를 다른 사람들과 공유하는 방법이 뭘지 의문이 생겼습니다. 어떤 사이트를 배포하여 여러 사람들이 접근하게 하는 것은 늘 익숙한 일이지만, 그 중 일부의 기능만을 재사용할 수 있는 형태로 배포하려면 제가 아는 선에서는 라이브러리로 배포하는 방법이 가장 익숙했습니다. npm 패키지가 이런 맥락의 것이라는 사실은 잘 알고 있었지만, 늘 가져다 사용하기만 한 입장에선 굉장히 복잡한 프로세스가 있다고 생각했었습니다. 뭔가 저와 다른 차원의(?) 개발자들만이 범접할 수 있는 영역이란 생각이 들었었는데, 어떤 의미로는 맞기도 합니다 (제가 오픈소스를 만든 것은 아니기 때문에...). 하지만 npm 패키지 자체를 만들어 올리고 공개하는 .. 공감수 1 댓글수 0 2021. 4. 4.
자바스크립트는 싱글 스레드인데 왜 비동기가 가능할까? 동공 지진, 그 시작 자바스크립트를 이용해 본격적으로 웹 개발에 입문할 때, 주기적으로 세뇌(?)당하는 이야기가 있는데 바로 자바스크립트가 싱글 스레드 기반의 언어라는 것입니다. 취업 준비하면서도 종종 나오는 주제 중 하나로 언급되고, 관련한 문제도 봤던 기억이 있습니다만, 도대체 이게 왜 자꾸 강조가 되는지 마음속으로 받아들이지 못했던 것 같습니다. 무엇보다 싱글 스레드라면 굉장히 제한적일 거 같은데 가능한 것들 중에는 이런 질문들이 있었습니다. 비동기는 어떻게 가능한 것인가. 동시에 두 가지가 동작하려면 멀티 스레딩을 해야한다고 배웠는데! 그럼 node 기반의 서버는 무조건 하나의 스레드에서만 동작한다는 뜻일 텐데 느리지 않을까? 아쉽게도, 아니 정확히는 이 질문에 대해 이해를 시켜주기에는 넓은 영역.. 공감수 22 댓글수 1 2021. 3. 21.
CORS, SOP란? CORS 그 첫 만남 최근 프로젝트를 진행하면서 또 마주친 것이 있으니 바로 CORS 정책입니다. GET 요청은 문제없이 보내져서 막연하게 생각하고 넘어갔지만, POST 요청이 시작되면서 브라우저가 이런 경고창을 띄우기 시작했습니다. 이 오류 메시지는 프론트와 백의 서버를 분리하여 배포하면서부터 처음 접했었는데, 이렇게 잊을만하면 마주치게 되는 것 같습니다. 웹 브라우저 기반으로 작업하는 프론트엔드 개발자라면 늘 신경 쓰고 백엔드 개발자와 소통해야 하는 부분이지 않나 싶습니다. CORS 경고 메시지 위의 오류 메시지를 읽어보면 브라우저의 오리진으로부터 서버로 보내는 XMLHttpRequest 요청이 CORS 정책에 의해 막혔다고 안내하고 있습니다. preflight request의 응답에 Access-C.. 공감수 1 댓글수 0 2021. 3. 13.
CSR vs SSR (feat. Next.js) 페이지는 누가 렌더 하는가? 리액트를 공부하다 보면 접하게 되는 용어 중 CSR(Client-Side Rendering)이 있습니다. 이름 그대로 클라이언트 측에서 렌더링을 하는 것인데, 이것이 정확히 무슨 의미일까요? 이와 비교되어 항상 등장하는 다른 용어로는 SSR(Server-side Rendering)이 있는데 둘은 어떻게 다를까요? 이를 설명하기 위해선 다양한 방법이 존재하겠지만, 이번 글에서는 간단하게 Next.js를 사용해보면서 Next.js가 제공하는 data-fetching 함수와 연결하여 설명해보려고 합니다. Next.js란? Next.js by Vercel - The React Framework Production grade React applications that scale. Th.. 공감수 2 댓글수 1 2021. 3. 7.
(서버 API가 아직 개발중이라면) MSW로 Mock API 제작하기 서버 API 나왔나요? 네? 아직 없다고요? 아직 기업 규모의 프로젝트를 경험해보진 못했지만, 웹 서비스를 만들게 되면 크게 프론트엔드 개발자와 백엔드 개발자로 나누어져 작업을 했습니다. 서로 처음 기획 단계에서 도란도란 어떻게 통신할지, API는 어떤 것이 필요한지 논의를 한 뒤 각자 할 수 있는 걸 열심히 뚝딱뚝딱 만들어갑니다. 그러다 프론트엔드 개발자는 이제 api로 데이터를 받아와 화면에 출력하는 작업을 하고 싶어집니다. 그래서 백엔드 개발자에게 물어봅니다. '서버 API 나왔나요?' '아 아직 완성이 안 돼서 없는데요...!' 없더라도 침착하자 사실 당연한 상황이라고 생각합니다. 서버나 API가 미리 갖춰진 프로젝트에 새로이 프론트가 붙는 것이 아니라 무언가 바닥부터 만들기 시작했다면 어떻게 보.. 공감수 4 댓글수 3 2021. 2. 28.
VS Code 코드 자동완성 커스터마이징하기 (a.k.a custom snippet) Snippet이란? VS Code를 사용해보면 종종 무의식 중에 사용하는 자동완성 코드가 많습니다. 개인적으로 프론트엔드 개발을 하면서 종종 사용한 것들이 rsc, for 등인데, 해당 문자열만 입력하면 VS code가 자동으로 템플릿을 불러올 수 있게끔 드롭다운 메뉴*가 등장합니다. 대표적으로 리액트를 사용하면서 rsc 스니펫을 불러오면 아래와 같이 코드 템플릿이 완성됩니다. IntelliSense VS Code에서 드롭다운 메뉴처럼 자동완성을 통해 코드 작성을 도와주는 기능 전반을 IntelliSense라고 부릅니다. 템플릿만이 아니라 변수명, 파라미터, 멤버 자동 완성 등등 다양한 기능을 제공합니다. 이렇게 아주 기본적인 리액트 functional component의 코드가 완성이 됩니다. 즉, s.. 공감수 0 댓글수 0 2021. 2. 21.
바닐라 자바스크립트로 Observer Pattern(옵저버 패턴) 흉내내보기 워낙 좋은 기술이 많은 요즘은 프론트엔드를 공부할 때 바닐라 자바스크립트를 조금 맛본 뒤 바로 리액트, 뷰와 같은 라이브러리나 프레임워크로 넘어가는 것 같습니다. 저 또한 크게 다르지 않았고, 바닐라 자바스크립트로 '상태'라는 걸 굳이 만들어보지 않았던 것으로 기억합니다. 다만, 리액트로 넘어가기 전, 부스트캠프에서 '옵저버 패턴'을 소개한 적이 있는데, 리액트를 무작정 사용하기 전에 어떻게 변화하는 값에 맞춰 화면에 렌더링 되는지를 직접 만들어보며 이해하는 것이 맹점이었습니다. 그때는 리액트도, 리덕스도 경험해보기 전이라 어떤 장점이 있는지도, 어떻게 하는 느낌인지도 파악을 못 해 눈물을 흘리며 넘어갔던 기억이 납니다. 그리고 이래저래 맛보기를 해본 지금, 바닐라 자바스크립트로 todo list를 연습.. 공감수 6 댓글수 0 2021. 2. 7.
You Don't Know JS Yet - Scope & Closures 요약 및 감상 (2)클로저 요약 1편 '변수'는 여기를 확인하세요. 들어가며 자바스크립트를 공부해보면 클로저가 등장합니다. this와 더불어 처음 접하는 입장에서 정확한 개념을 이해하기가 굉장히 난해한 축에 속한다고 생각합니다. 개념을 대충 알더라도, 또 의식적으로 활용하기가 어렵지 않나 싶습니다 (생각보다 우리는 모듈에서도 그렇고 클로저라고 모르고 사용하는 클로저가 많습니다). 특히 private, public 변수가 기본적으로 명시되지 않은 자바스크립트에선 클로저가 encapsulation을 위해선 필수로 등장합니다. You Don't Know JS Yet 2권은 전반에 걸쳐 클로저에 대한 정의, 흔히 하는 오해, 활용법 등을 설명하고 있는데, 사족을 몇 가지 곁들여가며 요약해보았습니다. 클로저? 외부 함수의 변수를 참조하고,.. 공감수 0 댓글수 0 2021. 1. 24.
You Don't Know JS Yet - this & Object Prototypes CH01 요약 Ch01 | this or That? 자바스크립트에서 this는 그 이름 때문에 많은 개발자들이 혼란을 느끼는 요소입니다. 알아보면 동작 자체가 굉장히 복잡하진 않지만, 이름에서 오는 혼동 때문에 많이들 잘못 사용하고 있다고 합니다. Why this? this를 활용하면 이용하여 하나의 함수가 컨텍스트를 특별히 인자로 받지 않아도 call같은 컨텍스트 변경 함수를 이용하여 원하는 결과를 줄 수 있게 됩니다. function identify() { return this.name.toUpperCase(); } var me = { name: "Grace" }; var you = { name: "Reader" }; identify.call( me ); // GRACE identify.call( you ); //.. 공감수 0 댓글수 0 2021. 1. 20.
You Don't Know JS Yet - Scope & Closures 요약 및 감상 (1)변수 들어가며 전반적인 introduction에 해당하는 1권 이후 스터디를 진행하며 You Don't Know JS Yet 2권을 읽어보았습니다. 2권은 부제에서 확인할 수 있듯 scope(스코프)와 closure(클로저)에 대한 이야기가 중점인데, 특히 클로저를 설명하기까지 필요한 기본적인 개념과 그 동작 원리를 독자들이 차근차근 이해할 수 있게 구성한 점이 굉장히 좋았습니다. 굉장히 당연시하고 넘어갔던 변수 선언이나 스코프에 대한 것도 JS의 특징과 함께 잘 엮어서 설명해주고 있습니다. 많은 이야기가 오가는 책인만큼, 모든 걸 요약하는 것보다는 제가 인상 깊게 읽은 부분을 가볍게 정리해보고자 합니다. 크게 꼽아보자면 아래와 같습니다. var 와 let (+hoisting) 글로벌 객체 window Clo.. 공감수 0 댓글수 0 2021. 1. 17.
2021년에 쓰는 2020년 회고 2020년을 보내며 2020년은 정말이지 여러 가지 의미로 제 인생에서 잊기 힘든 해가 될 거 같습니다. 글로벌한 판데믹도 한몫하겠지만, 인생의 큰 변환점이 된 해가 아닌가 싶습니다. 무엇보다도 스스로를 '개발자'로 정의하기 시작한 해라 그러리라 생각합니다. 본격적으로 개발자로 진로 방향을 잡고 달려온 1년이었는데, 사실 시작할 때는 1년이면 뭐든 하겠지!라는 생각이 컸습니다. 지금은 얼마나 오만한(?) 생각이었는지 알게 되었지만요. 끊임없는 학습이 매력적으로 느껴져 개발에 뛰어들었지만 생각보다 배울 것이 많았단 것이 함정이었을까요. 그래도 2020년을 개발자로 살고 나서 퇴사를 한 것이나, 이 길을 선택한 것에 후회가 있느냐면 그건 절대 아니라고 단언할 수 있습니다. 42Seoul 2020년의 시작은 .. 공감수 5 댓글수 1 2021. 1. 10.
[프로그래머스] 멀쩡한 사각형 - Python 멀쩡한 사각형 가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다. 그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다. 가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solut.. 공감수 0 댓글수 0 2021. 1. 2.
[프로그래머스] 124나라의 숫자 - Python 문제 설명 124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. 예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 10진법124 나라10진법124 나라 1 1 6 14 2 2 7 21 3 4 8 22 4 11 9 24 5 12 10 41 자연수 n이 매개변수로 주어질 때, n을 124 나라에서 사용하는 숫자로 바꾼 값을 return 하도록 solution 함수를 완성해 주세요. 제한사항 n은 500,000,000이하의 자연수 입니다. 입출력 예 nresult 1 1 2 2 3 4 4 11 나의 풀이 패턴을 코드로 옮겨보는 데서 .. 공감수 1 댓글수 0 2020. 12. 31.
[프로그래머스] k번째 수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a.. 공감수 0 댓글수 0 2020. 12. 29.
부스트캠프2020 멤버십을 마치며 부스트캠프란 이 블로그에서 부스트캠프2020 챌린지를 후기글에서도 소개한 바 있듯이, 부스트캠프는 네이버 커넥트 재단에서 2016년부터 진행하고 있는 코딩 교육 프로그램입니다. 한 달간의 챌린지 기간을 거쳐 선발된 인원은 약 4개월의 멤버십 과정을 진행하게 됩니다. 코스는 JavaScript를 기반으로 한 웹, Swift IOS를 기반으로 하는 앱 코스 두 가지이며, 제가 선택한 것은 웹 풀스택 코스입니다. 멤버십은 8월부터 12월 말까지 대략 4개월 정도의 기간 동안 진행되었습니다. 무엇이 바뀌었을까 부스트캠프의 상세한 교육 내용을 적기보다는, 후기 및 회고의 느낌인 만큼 시작할 때의 저와 비교하여 지금의 저는 어떤 것이 바뀌어있는지를 기록해보면 어떨까 싶습니다. 사실 아직 글을 적는 현시점에서는 취업.. 공감수 7 댓글수 0 2020. 12. 27.
Storybook을 이용하여 Atomic Design 시작해보기 Storybook이 뭔가요? Storybook: UI component explorer for frontend developers Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. storybook.js.org 간단하게 말하면 Storybook은 오픈소스 UI 테스터 툴입니다. 즉, UI 컴포넌트를 제작하면서 바로바로 확인해볼 수 있도록 도와주는 툴입니다. 아마 Storybook을 쓰기 전의 저와 비슷한 생각을 가진 사람이라면, 바로바로 페이지를 만들면서 확인할 수 있는 .. 공감수 1 댓글수 1 2020. 12. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.