티스토리

DDODI TIL 🚀
검색하기

블로그 홈

DDODI TIL 🚀

meoweundi.tistory.com/m

은또디 님의 블로그입니다.

구독자
0
방명록 방문하기
공지 블로그 이전❗️(2022.08.10) 모두보기

주요 글 목록

  • React.FC 대신 PropsWithChildren을 사용해야 하는 이유 React.FC의 문제점 props에는 두 종류가 있다. 명시적 props: props 타입에 명시적으로 작성되어 있는 props 암시적 props:@types/react등에 의해 자동적으로 추가되는 props React.FC의 props는 기본적으로 children을 포함한다. 즉, React.FC를 사용할 경우 children이 암시적 props가 된다. excess props: 컴포넌트에 넘겨지지만 컴포넌트에서 사용되지 않는 props → excess props의 존재는 POLA원칙을 어기게 만든다. POLA: Principle of Least Astonishment 컴포넌트는 사용자가 예상한대로 작동해야 한다는 원칙 암시적 props인 children은 excess props에 해당한다. 사용자 .. 공감수 0 댓글수 0 2022. 11. 17.
  • Vanilla Javascript로 SPA 구현하기(프로그래머스 쇼핑몰 SPA) ✅ SPA(Single Page Application) 이해하기 페이지 이동의 과정을 가장 단순하게 설명한다면 다음과 같습니다. 사용자가 새로운 url을 요청한다. (새로운 페이지로 이동하는 버튼을 클릭하거나, 뒤로가기 버튼을 누르는 등) 요청한 url에 맞는 리소스(html, css, js)를 화면에 렌더링한다. 간단하죠? MPA(Multiple Page Application), SPA(Single Page Application) 모두 페이지 이동의 골자는 동일합니다. 다만 리소스를 요청하는 방식에 따라 MPA와 SPA로 구분이 됩니다. MPA의 리소스 요청 방식 사용자가 새로운 url을 요청 해당 url에 대한 리소스를 서버에 요청 서버에서 받은 응답으로 화면을 렌더링 즉, 페이지를 이동할 때마다 서.. 공감수 1 댓글수 0 2022. 11. 11.
  • Vanilla Javascript로 컴포넌트 만들기 바닐라 자바스크립트로 쇼핑몰 SPA를 구현하기 위해, 가장 기본이 될 컴포넌트를 정의했다. 황준일님의 글을 참고해 초안을 짜고, 수정을 거쳤다. 기존 코드 constructor: 컴포넌트를 생성한다. 즉 초기 state/props를 설정하고, template 연산의 결과물인 마크업을 렌더링하고, 이벤트리스너를 등록한다. setup: 초기 state를 설정한다. mounted: 하위 컴포넌트들의 생성자 함수를 호출한다. template: 컴포넌트의 state를 반영한 마크업을 리턴한다. render: $target내에 마크업을 렌더링한다. 그 다음 mounted 함수를 호출한다. setState: 상태를 업데이트하고, render 함수를 호출한다. mounted 메서드를 좀 더 자세히 살펴보자. 예시로 황.. 공감수 0 댓글수 0 2022. 10. 24.
  • Yarn Berry 적용 안되는 문제 해결 ✅ 문제 제아무리 yarn set version berry를 해도 yarn install만 하면 node_modules 폴더가 생성됨 ✅ 해결방법 혹시나 해서 yarn config로 설정을 확인해봤다. nodeLinker가 'node-modules'로 설정되어 있었다. 내가 세팅하던 레퍼지토리에 .yarnrc.yml 파일이 별도로 없었으므로 글로벌 세팅인 것으로 추정되었다. 터미널에서 루트로 이동한 다음 확인해보니 .yarnrc.yml 파일이 있었고, 파일 안에는 내 예상대로 nodeLinker: node-modules가 설정되어 있었다. 해당 라인을 지웠다. ✅ 결과 나도 드디어 node_modules에서 벗어날 수 있었다! 간단한건데 헤맸다 원인 명확히 찾고 말끔히 해결해서 뿌듯함 공감수 0 댓글수 0 2022. 10. 21.
  • 프로젝트 스캐폴딩 기록 📸 첫 번째, 초기 프로젝트의 뼈대를 만들어주는 행위를 뜻한다. 어떤 프로젝트를 시작할 때 기본적인 README, License를 비롯하여 디렉토리 구조, 컴파일 설정 등이 자동으로 생성하는 CLI 혹은 UI 도구가 이와 같다. 출처: 프로그래밍 용어사전 우리는 React Native 내에서 Next.js로 웹뷰를 띄우기로 했다. 그래서 Next.js 레퍼지토리와 React Native 레퍼지토리 두 개가 필요했다. 난 그 중 RN 레퍼지토리의 스캐폴딩을 담당했다!🙋🏻‍♀️ 디프만 이전 기수의 RN 레퍼지토리와, 다른 팀원 분이 끝내놓으신 웹 레퍼지토리를 참고했다. 다른 팀원들이 clone을 받았을 때도 문제없이 작동해야 한다는 점, 참고한 레퍼지토리에 추가되어 있는 각종 툴들(패키지들)을 직접 사용해본 적.. 공감수 0 댓글수 0 2022. 10. 18.
  • Husky로 Git hooks 자동화하기(+ lint-staged, commitlint) Git hooks란? 특정 git 이벤트가 발생했을 때 특정 동작을 실행하는 것 예) commit 시에 자동으로 lint를 실행하기 Husky란? 손쉬운 Git Hook 적용을 위한 라이브러리 Husky와 Github Actions의 차이 Husky: 로컬에서 특정 git 이벤트가 발생했을 때 특정 스크립트를 실행 Github Actions: 팀원들과 함께 사용하는 레퍼지토리에 특정 이벤트가 발생했을 때 특정 작업들을 실행. CI/CD를 위한 도구이다. 이 구분이 정확한지는 모르겠지만, 우선 나는 이렇게 이해했다. 적용할 수 있는 Git hooks 종류 프로젝트에서 터미널을 열고 아래 명령어를 입력하면 Git hooks 종류를 살펴볼 수 있다! cd .git/hooks ls lint-staged, com.. 공감수 0 댓글수 0 2022. 10. 18.
  • eslint 플러그인 종류, 총 정리 프로젝트 스캐폴딩 중 수많은 eslint 플러그인을 마주하게 된 나.. 일일이 구글링하느라 고생했어서, 혹시 나같은 사람이 있을까 정리해봄!😇 패키지들을 몇 가지로 분류해뒀으니, 아래 분류로 각 패키지의 대략적인 역할들을 파악하신 다음 자세한 설치 과정을 구글링 하시면 될 듯합니다! prettier 사용 관련 prettier와 eslint를 함께 사용하기 위한 패키지들입니다. 참고로 prettier는 코드 포맷팅이 주 목적이고, eslint는 lint(에러를 잡아내는 일)가 주 목적이기 때문에 보통 두 가지를 함께 사용합니다. eslint-config-prettier eslint-plugin-prettier typescript 사용 관련 @typescript-eslint/eslint-plugin @typ.. 공감수 0 댓글수 1 2022. 10. 15.
  • Yarn Berry로 React Native 프로젝트 시작하기 Yarn Berry로 React Native 프로젝트를 관리해보자. https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/ 맥(Mac)에 react native 개발 환경 구축하기 react-native로 앱을 개발하기 위해 맥(Mac)에 개발 환경을 구축해 보고, react-native로 생성한 프로젝트가 잘 동작하는지 확인해 봅니다. dev-yakuza.posstree.com 기본적으로 위 글을 참고했다. Yarn Berry라는 특수성이 더해졌을 뿐이다.. 🫐 🫐 Yarn Berry 간략하게 이해하기 Yarn 2.0 이후부터 Yarn Berry라고 지칭한다. Plug'N'Play(PnP) 라는 방식을 사용한다. node_modules 폴더 대.. 공감수 1 댓글수 0 2022. 10. 12.
  • Github Actions로 CI 적용하기(극 초보자용😈), Github Actions 작동 확인하는 법 이거 보십시오!!! 제가 멋진 것을 해냈습니다!!! 크크 뿌듯✌🏻이런 스크립트를 작성해본 게 처음이라 많이 헤맸다. 나같은 초보자들이 이해하기 쉽게 작성해보겠다. 💁🏻‍♂️ Github Actions란? CI/CD 툴이다. Jenkins, CircleCI, TravisCI 등의 다른 툴들도 있지만 Github Actions의 경우 Github에서 제공하는 CI/CD 툴이라는 게 큰 이점이다. 👩🏻‍💻 적용 방법 프로젝트 최상단에 .github 폴더 생성 그 안에 workflows 폴더 생성 개별 workflow 파일 작성. 확장자는 .yml 을 사용한다. 파일명은 자유롭게 지으면 된다. 나는 CI 라는 이름의 workflow를 작성했다. 파일명은 ci.yml로 지었다. workflow는 말그대로 일련의 .. 공감수 3 댓글수 0 2022. 10. 10.
  • 모듈화의 개념부터 Yarn Berry까지 디프만에서 패키지 매니저로 Yarn Berry를 사용하기로 했다. Yarn Berry의 특징을 이해하기 위해, 모듈화와 패키지 매니저의 개념부터 차근차근 짚어보았다. 🗂 모듈화의 필요성 자바스크립트는 파일을 분리해도 모두 같은 전역 스코프 위에서 실행되므로 전역 스코프를 공유한다. 따라서 모듈화를 위해선, ES6 모듈 문법을 사용해야만 한다. script 태그에 module 타입을 설정하면 자바스크립트 파일을 모듈로 로드할 수 있다. 모듈로 로드한 자바스크립트 파일은 모듈 스코프에 포함된다. 모듈 스코프 내의 자바스크립트 파일은 별도의 독립된 스코프를 가지며, 외부에서는 export한 변수와 함수만 접근할 수 있다. ES6에서는 named export 라는 모듈 문법을 사용한다. export 키워드를 사.. 공감수 0 댓글수 0 2022. 10. 10.
  • “DOM을 직접 조작한다” 의 의미와 컴포넌트의 본질 Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 위 글을 읽다가 한 가지 의문이 생겼다. 이제는 직접적으로 DOM을 다루는 행위가 급격하게 감소했고, 상태(State) 를 기준으로 DOM을 렌더링 하는 형태로 발전한 것이다. DOM이 변하는 경우가 State에 종속 되어버린 것이다. 반대로 말하면, State가 변하지 않을 경우 DOM이 변하면 안 되는 것이다. 이 글은 DOM 요소에 직접 접근하는 것과 state에 따라 DOM을 렌더링하는 것을 서로 대척점에 있는 반대 개념으로 소개하고 있다. 난 이 두 가지가 어째서 반대 개념이 되는 것인지 이해가 잘 되지 않았다. state에 따라 DOM을 렌더링하는 아래 코드에서도, innerHTML API를 사용해 DOM에 접근하지 않나.. 공감수 2 댓글수 0 2022. 10. 8.
  • CI/CD란? 빌드, 테스트, 배포의 자동화를 의미한다. CI/CD란? Continuous Integration 빌드/테스트 자동화 과정 commit할 때마다 빌드와 일련의 자동 테스트가 이루어져, 코드 변경으로 인해 발생하는 문제를 사전에 방지한다. Continuous Deployment 배포 자동화 과정 코드 변경이 파이프라인의 이전 단계를 성공적으로 통과했을 경우 별도의 개입 없이 해당 변경사항을 프로덕션에 배포한다. 도입 효과 기존의 코드 통합 프로세스 각 개발자가 feature 브랜치에 push 각 코드를 통합 통합 과정에서 디버깅 👉 코드의 양이 많아질수록 디버깅이 오래 걸릴 수밖에 없다. CI/CD 적용 후 코드 통합 프로세스 각 개발자가 feature 브랜치에 push git push가 trigger로 .. 공감수 0 댓글수 0 2022. 9. 26.
  • npm, yarn, pnpm의 차이점을 비교해보자 자바스크립트 패키지 매니저 npm, yarn, pnpm의 차이를 알아보자. 패키지 매니저란? 💁🏻‍♂️ 패키지란? npm에 등록된 node 모듈. 이러한 패키지들을 사용하기 위해서는 다운로드, 설치, 업데이트, 의존성 관리, 제거 등 복잡한 상황들이 많이 생기는데 패키지 매니저는 이러한 과정들을 자동화하여 편리하고 안전하게 수행할 수 있도록 해준다. 패키지 매니저의 등장 이전: 프로그램의 dependencies를 수동으로 다운로드 하고 관리 등장 이후: 패키지 매니저를 사용해 dependencies를 다운로드 및 관리 모든 패키지 매니저에서 통용되는 개념들은 다음과 같다. package.json은 프로그램의 메타데이터를 가지고 있다. node_modules 폴더에 dependencies를 설치한다. lo.. 공감수 0 댓글수 0 2022. 9. 26.
  • Context API 제대로 이해하기 👩🏻‍💻 언제 사용하나요? ✅ React Component Tree의 서로 다른 부분에서 동일한 데이터를 필요로 할 때 위 상황에서 보통은 props를 사용해 데이터를 전달하게 됩니다. 그런데 컴포넌트 간의 거리가 먼 경우, 특정 컴포넌트로 데이터를 전달하기 위해 여러 개의 컴포넌트를 거쳐야 하는 상황이 발생합니다. A | B | C | D 위와 같은 구조로 이뤄진 React Component Tree를 가정해봅시다. A: useState로 데이터를 관리하는 컴포넌트 D: A의 데이터를 바탕으로 UI를 그리는 컴포넌트 라고 가정했을 때, D에게 A의 데이터를 넘겨주려면 어떻게 해야 할까요? B,C가 props로 부모 컴포넌트(각각 A,B)로부터 데이터를 전달 받고, 다시 자식 컴포넌트(각각 C,D)에게 .. 공감수 1 댓글수 1 2022. 9. 22.
  • useEffect 제대로 이해하기 https://beta.reactjs.org/learn/synchronizing-with-effects 위 글을 제가 이해한 바대로 정리한 내용입니당 ‘٩꒰｡•◡•｡꒱۶’ React Docs BETA 라는 사이트인데, 기존 공식 문서보다 훨씬 이해하기 쉽고 친절하게 잘 되어 있어 React의 기본 원리를 이해하기에 좋습니다! React를 대강 쓸 줄은 아는데 깊이가 부족하다고 느껴지시는 분들에게 추천합니당 왕 추천 ❤️‍🔥 👩🏻‍💻 Effect란? two types of logic inside React components Rendering code: describes the UI, must be pure Event handlers: caused by a specific user action Effect.. 공감수 0 댓글수 2 2022. 9. 21.
  • 리팩토링 | 컴포넌트 형태로 추상화하기 프로그래머스 블로그에 있는 해설 글을 참고해 리팩토링한 내용 상태에 따라 바뀌어야 하는 영역이 크게 두 가지다. Nodes와 Breadcrumb! 리팩토링 전 App 컴포넌트 내에서 renderNodesSection 와 renderBreadcrumbSection 함수를 작성했다. 각 함수 내에서, 상태를 기반으로 마크업을 렌더링한다. 상태가 변경되면 해당 함수들을 호출해 업데이트된 상태로 화면을 렌더링한다. 구현 조건 및 프로그래머스 블로그에서 제시한 바람직한 방향은 다음과 같았다. 컴포넌트 형태로 추상화 DOM 접근을 최소화 명령형 프로그래밍보다는 선언적 프로그래밍 컴포넌트 형태로 추상화하기 '컴포넌트 형태로 추상화 하라'는 게 어떤 의미인지 잘 와닿지 않았다. 검색해 본 결과 추상화란 복잡한 자료, .. 공감수 1 댓글수 1 2022. 9. 20.
  • 디프만 12기 면접 후기 탈탈 털렸던 면접😧 반성 위해 기록 남기기 어디까지나 제 개인적인 후기임을 미리 알립니다! 웹 개발자로 디프만 12기에 지원했고, 서류에 합격해 면접을 보게 되었다. 인터넷에 나와있는 후기 글들을 싹 긁어모아 답변들을 준비했는데 결과적으로 준비 했던 질문은 하나도 나오지 않았다. 어떤 것들을 물어보나요? 대부분의 후기에서 기술 질문이 별로 없다고 했는데 이 말은 절반은 맞고 절반은 틀리다. 우선 공통 질문이 없었고, 지원자 별로 돌아가며 각기 다른 질문을 하셨다. 그리고 질문들은 지극히 지원서와 포트폴리오 위주였다! 나는 면접관 두 분, 지원자 세 분과 함께 면접을 봤는데 세 명 모두에게 지원서와 포트폴리오를 기반으로 협업, 단체생활과 관련된 질문 한 개 기술적인 질문 두 개 이렇게 질문하셨던 것 같다... 공감수 2 댓글수 1 2022. 9. 19.
  • (에러 해결) Union type과 타입 가드 함께 사용하기 Union type | 연산자로 여러 개의 타입이 연결된 타입을 의미한다. 이때 | 연산자는 or의 의미를 가지고 있다. 이러한 Union type을 활용해 인터페이스를 정의하고자 했다. 문제 정의 interface Props { data: LectureRoomsPerBuilding | LectureRoomInfo; children?: LectureRoomInfo[]; } 다음과 같이 인터페이스를 작성했는데, 타입 추론에서 문제가 발생했다. export interface LectureRoomInfo { room_name: string; room_uid: RoomUID; } export interface LectureRoomsPerBuilding { building_name: string; building.. 공감수 1 댓글수 1 2022. 9. 19.
  • 사이드바 구현하기 | UI 사이드바를 구현해보자. 명확한 요구사항 없이 단지 강의실 목록을 조회할 수 있는 사이드바를 구현해야 했다. 어떤 식으로 작동해야 할 지 감이 안와서, 레퍼런스를 참고했다. Ant Design Ant design 컴포넌트에서 다양한 사이드바를 제공하고 있다. 실제로 조작해볼 수 있고, 대략적인 코드도 제공한다. 그 중 위 이미지에 있는 사이드바 컴포넌트를 참고했다. Ant Design 코드의 일부분을 발췌해왔다. 이중 Menu 컴포넌트를 보면, props로 items를 받고 있다. items에 전달되는 예제 객체를 살펴봤더니, children이라는 프로퍼티를 확인할 수 있었다. 여기에는 서브 메뉴들의 정보가 담겨 있다. 즉, Menu 컴포넌트에 서브 메뉴가 포함된 정보를 전달하면 Menu 컴포넌트 내에서 .. 공감수 0 댓글수 0 2022. 9. 18.
  • 객체 프로퍼티에 접근하는 두 가지 방법의 차이점 객체의 프로퍼티 값에 접근하는 방법은 두 가지가 있다. 점(.) 연산자 사용 대괄호([]) 연산자 사용 두 방식은 다음과 같은 차이점을 가진다. 점 연산자를 사용한다면 오른쪽에는 프로퍼티 이름인 단순 식별자가 와야 한다. 반면 대괄호 연산자를 사용한다면 오른쪽에는 문자열로 평가되는 표현식이 와야 한다. let author = book.author; // 점 연산자 사용 let title = book["main title"]; // 대괄호 연산자 사용 두 방법의 용례 상의 차이는 접근하려는 프로퍼티 값을 동적으로 변경할 수 있는가 에 있다. 식별자의 경우 자바스크립트 데이터 타입이 아니기 때문에, 프로그램에서 조작할 수 없다. 반면 문자열은 데이터 타입이기에 프로그램이 실행되는 동안 새로 생성하고 조작할 .. 공감수 0 댓글수 0 2022. 9. 11.
  • Custom Hook은 함수일까 컴포넌트일까 custom hook을 사용해보고 싶은데, 정확히 어떤 개념인지 와닿지 않아서 간단하게 공식 문서를 읽어봤다. 커스텀 훅이란? 제목에 먼저 답을 하자면 커스텀 훅은 함수다. 내부에서 다른 hook을 호출하는 함수를, 우리는 커스텀 훅이라고 부른다. 여기서 다른 hook이라 함은 우리가 자주 사용하는 useState, useEffect 등을 일컫는다. 즉 Custom hook은 함수이며, 일반 함수와의 차이점은 내부에서 다른 hook을 호출할 수 있다는 점이다. 💁🏻‍♂️ : 앗 그렇다면 일반함수에서는 hook을 호출 할 수 없는 것인가요? ➡️ 그렇다. 일반 함수에서는 hook을 호출할 수 없다. 리액트 공식문서를 살펴보면, hook을 사용할 때 두 가지 규칙이 존재한다. 1. React 함수의 최상위 .. 공감수 0 댓글수 0 2022. 9. 9.
  • 작업 중간에 원격 저장소 pull을 받는 올바른 방법 https://meoweundi.tistory.com/20 remote에 push한 커밋은 rebase 하시면 안됩니다(꼬인 git 푼 기록) 드디어 정상적인 방법들로 꼬인 git을 풀어냈다 우하하 문제 상황 정리(순서대로) 1. local/feature/modal을 remote에 push 2. origin/feature/modal ➡️ origin/master pull request 3. 다른 팀원이 다른 브랜치.. meoweundi.tistory.com 위 글에서 가졌던 의문의 올바른 해답을 찾았다. 👩🏻‍💻 문제 상황 정의 로컬 브랜치를 local/[브랜치명], 원격 저장소의 브랜치를 remote/[브랜치명]으로 지칭하겠다. local/feature 브랜치에서 작업 중이고, remote/featur.. 공감수 0 댓글수 0 2022. 9. 7.
  • remote에 push한 커밋은 rebase 하시면 안됩니다(꼬인 git 푼 기록) 드디어 정상적인 방법들로 꼬인 git을 풀어냈다 우하하 문제 상황 정리(순서대로) 1. local/feature/modal을 remote에 push 2. origin/feature/modal ➡️ origin/master pull request 3. 다른 팀원이 다른 브랜치에서 작업 후 origin/master로 merge pr에서 받은 피드백을 반영해 local/feature/modal 브랜치에서 코드를 수정하고자 했다. 그 전에 동료의 작업을 pull 받기 위해 local/master로 이동, git pull origin master 을 실행했다. 이후 다시 local/feature/modal 브랜치로 돌아와, pull 받은 이후의 커밋부터 작업을 진행하기 위해 local/master에 대해 reba.. 공감수 1 댓글수 0 2022. 9. 4.
  • react-hook-form 로딩 화면 만들기 폼 제출 후 응답이 올 때까지 로딩 화면을 띄워보자. 🎈 기존 방식 보통 React에서 로딩 화면을 구현한다면 아래와 같은 방식일 것이다. function LoginPage() { const [loading, setLoading] = useState(null); return ( {loading && } ) } submit 버튼 클릭 ➡️ setLoading(true) ➡️ loading의 상태가 바뀌어 리렌더링 발생, 로딩 UI가 화면에 띄워짐 그러나 react-hook-form을 사용한 경우 해당 방식을 사용할 수 없다. react-hook-form 사이트에 들어가보면, react-hook-form은 form 영역을 제외한 다른 영역의 re-render를 방지하는 기능을 제공한다고 적혀있다. 이때문에 .. 공감수 0 댓글수 0 2022. 8. 22.
  • this 키워드 function App() { this.contents = []; } App(); App 함수를 선언하고 this.contents로 contents라는 상태를 관리 하고자 했는데, 아래와 같은 에러가 발생했다. this키워드를 이해하지 못해 발생한 에러였다. this 키워드의 의미 this는 기본적으로 자신이 속해 있는 객체를 지칭한다. const person = { sayHi() { console.log(this); // person 객체를 가르킨다. } } 따라서 전역함수에서의 this는 window 객체를 의미한다. 전역 scope에서 함수를 선언하면 window 객체에 추가되기 때문이다. 다만 strict mode일 때 전역함수에서 this를 사용하면 undefined가 출력된다. 위 에러가 발생.. 공감수 0 댓글수 0 2022. 8. 19.
  • 2022.08.17 기준 내게 가장 부족한 것 내가 가장 자신 없는 것, 가장 부족하다고 느끼는 것들을 정리해보자. 첫째, Vanilla JavaScript 실력 둘째, 확장성, 재사용성이 좋은 코드를 작성하는 능력 셋째, 서비스 유지보수 경험 단기간에 어떻게든 되게 만들어야 하는 프로젝트들 위주로 해온 탓이다. 덕분에 안 되는 걸 되게 하는 능력은 키울 수 있었지만, 이제는 한계에 부딪힌 것 같다. 정말 많은 개발자 분들이 바닐라 자바스크립트의 중요성을 강조하신다. 우아한테크코스와 프로그래머스 데브매칭 이 둘이 바닐라 자바스크립트 과제를 내주는 것만 봐도 그 중요성을 알 수 있다. 그런데 나는 React 위주의 개발을 해온 터라, 자바스크립트 만을 이용해 앱을 만들어 본 적이 없다. 그렇지만 이제 피할 수 없다. 해야 한다. 1번은 2번과도 연결된.. 공감수 0 댓글수 0 2022. 8. 18.
  • 내 코드가 우아하지 않은 이유 문벅스 강의의 요구사항을 직접 구현 해보며 느낀 내 코드의 전반적인 문제점 요구 사항 // TODO: localStorage에 저장 // - [] localStroage에 메뉴 데이터를 저장한다. // - [] 새로고침을 하면 localStorage에 저장되어 있던 메뉴 데이터를 불러온다. // TODO: 품절 표시 기능 // - [] 메뉴의 품절 버튼 클릭 이벤트를 받고, 이벤트 발생 시 품절 상태를 변경한다.(toggle) 내 코드 const toggleSoldOutMenu = (e) => { const $menuElement = e.target.closest("li"); const menuId = parseInt($menuElement.dataset.menuId, 10); const $menuNam.. 공감수 0 댓글수 0 2022. 8. 17.
  • 프론트엔드 개발에서 함수를 활용하는 방법 두 가지 함수의 용도는 기본적으로 반복되는 코드를 줄이는 것이다. FE 개발에 있어 함수의 리턴 값에는 크게 두 종류가 있다. 연산의 결과 UI 요소 이 중 오늘은 두번째 경우에 대해 이야기를 해보려고 한다. 첫번째 패턴의 경우 의식하지 않아도 곧잘 사용한다. 그러나 두번째 패턴의 경우 우리에게 익숙한 수학적 함수의 개념과 다소 차이가 있기 때문에, 사고방식을 의식적으로 확장하지 않으면 활용하기 어렵다. 함수가 값을 리턴하는 것은 단순히 연산의 결과값을 도출하는 게 아니다. 함수의 호출 부분이 리턴 값으로 대체된다는 것을 의미한다. 즉, 특정 UI 요소가 반복된다면 우리는 이를 여러 번 작성하는 대신 UI를 리턴하는 함수를 활용할 수 있다. 함수를 호출한 부분에 우리가 원하는 UI가 들어올 것이다. ❗️유사한 코.. 공감수 0 댓글수 0 2022. 8. 17.
  • ReactNative로 러닝어플 만들기 | 실시간 타이머 구현 2022.05.14 velog에 작성했던 글입니다 러닝 어플인 만큼 정보가 실시간으로 바뀌어야 한다. 실시간이라기 보다는 초 단위로 바뀌어야 한다는 말이 더 적합하긴 하겠다. 아무튼 대표적인 실시간 정보는 '사용자가 달린 시간'이다. 시간을 기준으로 계산해주어야 하는 값들이 존재하기 때문에(ex 페이스, 칼로리) 이 값을 잘 관리해줘야 한다 😊 ... 구현 목표 ⏰ 아래 이미지의 타이머를 구현하고자 했다. 1초씩 증가해야 하고, 바뀐 값이 화면에도 바로 반영되어야 한다. 사용자가 일시정지 버튼을 누르면 시간 증가도 멈춰야 한다. 러닝을 재개하면 일시정지 버튼 누르기 전 시간에서 다시 1초씩 증가해야 한다. 기본 타이머 구현 useInterval이라는 custom Hook을 사용했다. 리액트의 기본 Hoo.. 공감수 0 댓글수 0 2022. 8. 10.
  • 토이 프로젝트를 위한 css 방식 결정하기 🧸 🚂 🎈 새로운 토이 프로젝트에서 사용할 css 방식을 결정하기 위해 직접 여러 가지 방식들을 조사하고 장단점을 비교해 봤다! 🙋🏻‍♂️ 🎈 고려한 선택지 css module css preprocessor(scss) css-in-js(styled-components) 컴포넌트를 직접 제작해보고 싶었기 때문에 Tailwind CSS, Bootstrap, Material UI 등의 CSS Framework는 고려하지 않았다. ❗️ 기존 css가 가지는 문제점 가장 큰 문제점은 바로 중복된 클래스명에 있다. css는 global scope를 가지기 때문에, 클래스명이 중복될 경우 원치않는 곳에 스타일이 적용되는 문제가 발생할 수 있다. 이를 해결하기 위해서는 결국 클래스명을 점점 더 구체적으로 지을 수 밖에.. 공감수 0 댓글수 0 2022. 8. 10.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

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

    © Kakao Corp.