전체 글99 알아두면 쓸데있는 package.json과 package-lock.json의 차이 Node.js 프로젝트를 시작할 때, 터미널에 'npm install'을 입력하면 아래 사진과 같이 여러 파일들이 기본으로 설치된다. 그런데 여기서 package.json은 무엇이고, 거기다 package-lock.json은 무엇일까? 프로젝트 시작에 앞서 일단 구조부터 알고 시작해 보자. 1. package.json # package.json 예시 { "name": "codingElla", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "re.. 2023. 4. 30. React 초보를 위한 리액트 시작하기 ✅ 이 글은 mac OS & VScode 사용자에게 맞춰져 있는 점 참고 바랍니다. 1. iterm or Terminal에서 디렉토리 만들기 # mkdir 명령어로 프로젝트를 시작하려는 폴더에서 디렉토리를 만든다. yeonsuchoi@Ella-iMac Workspace % mkdir React # cd 명령어로 만들었던 디렉토리 안에 들어간다. (생략 가능) yeonsuchoi@Ella-iMac Workspace % cd React 2. 리액트 설치하기 # 디렉토리 안에서 npx create-react-app {디렉토리명} 을 입력한다. # 단, 아래와 같이 디렉토리 명을 대문자로 입력하면 아래와 같은 에러 코드가 뜬다. yeonsuchoi@Ella-iMac React % npx create-react.. 2023. 4. 27. 문자열에서 숫자를 모두 찾아 더한 뒤에 해당 값을 문자열의 길이로 나눈 값을 정수로 반올림하여 리턴하기 📜 문제 문자열을 입력받아 문자열에서 숫자를 모두 찾아 더한 뒤에 해당 값을 (숫자와 공백을 제외한 나머지) 문자열의 길이로 나눈 값을 정수로 반올림하여 리턴해야 합니다. ⚠️ 주의사항 - 빈 문자열을 입력받은 경우, 0을 리턴해야 합니다. - 숫자(digit)는 연속해서 등장하지 않습니다. ✍🏻 내 풀이 function numberSearch(str) { // 입출력 예시 // 'Hello6 9World 2,' // 숫자: 6+9+2 = 17, 문자열 길이: 10 (숫자 공백 제외) // 17 / 10 = 1.7 -> 반올림해서 2 // 예시 숫자를 선언 const digits = '0123456789'; // 만약 str이 빈 문자열이라면 if (str === '') { // 0을 리턴 return .. 2023. 4. 25. 프론트엔드 개발자가 왜 UI/UX를 알아야 합니까? 아래 내용은 우아한테크: [10분 테코톡] 위니의 프론트엔드 개발자에게 UX란 영상을 참고하여 몇몇 예시 화면을 덧붙였습니다. 유익한 내용 발표해주신 위니 님께 감사를 표하며, 영상을 통해 학습한 내용을 아래에 정리해 보았습니다. 0. 이 글을 쓰게 된 계기개발자는 코딩을 잘해야 하는 거 아닌가?기획은 기획자가, 디자인은 디자이너가 해야지 이번주 부트캠프 수업에서는 UI와 UX에 대해 다루었고, 피그마를 활용해 웹사이트를 클론해 보았다. 사실 전자는 어느 정도 알아야 하는 이유를 스스로 납득했지만, 후자는 아직도 잘 납득이 되지 않았다. '가뜩이나 개발만 해도 공부할 거리가 넘쳐 하루하루 우선순위 높은 공부만 쳐내기에도 바쁜데 웬 디자인'이라는 생각이 들어 실습 중 현타가 왔.. 2023. 4. 16. Self-Promotion 🍎 Today's Expression Vocabulary - incline to think that ~ : ~라고생각하는 경향이 있다 - conceited [ kənˈsiːtɪd ] : 자만하는 (ex. These people are too conceited to understand the sort of suffering that I have experienced.) - enunciate [ ɪˈnʌnsieɪt ] : 분명하게 발음하다 (ex. The representative enunciated the numbers, but it was so hard to hear them over the phone.) - go out of the way : 애쓰다 (ex. I went out of the way to.. 2023. 4. 14. 죽음의 계곡에 있는건, 결국 성장하기 위함 - 부트캠프 2개월차 회고 👏 Keep 1. 건강한 식습관 1개월 차 때와 마찬가지로, 건강한 식단을 규칙적으로 먹는다. 끼니를 거르면 간식을 많이 먹게 된다는 것을 알기 때문에 의식적으로라도 끼니를 든든하게 챙겨 먹는 것이 중요하다. 여전히 나를 위해 음식과 재료를 준비해 주시는 엄마, 외식 겸 드라이브를 시켜주시는 아빠께 정말 감사하다. 혼자 해 먹는다면 시간과 비용 모두 소모되었을 텐데 본가에서 해주시는 게 얼마나 감사한 일인지 실감한다. 2. 남과 비교하지 않고 꿋꿋하게 나아가는 자세 아직까지 전체적으로 평안한 상태를 유지하며 공부하고 있다. 20대 초중반의 취업 준비 때보다는 확실히 여러 번의 취준과 이직을 겪어왔다보니 미래를 향한 불안은 그렇게 크지 않다. 크고 작은 실패와 성취를 어느 정도 겪다 보니 걱정하는 만큼의 .. 2023. 4. 10. HTTP 메세지 구조에 대해 설명해 주세요. 👩🏻💻 HTTP 메세지 구조에 대해 설명해 주세요. 💁🏻♀️ 요약하자면 , HTTP 메시지는 크게 start line, HTTP header, empty line, body로 나뉩니다. 메시지의 구조 1. start-line 요청이나 응답의 상태를 나타내며 항상 첫 번째 줄에 위치합니다. 어떤 프로토콜을 사용하는지, 어떤 HTTP 메서드인지, 상태 코드는 무엇인지 등을 나타냅니다. 2. HTTP header 요청을 지정하거나, 메시지에 포함된 본문을 설명하는 헤더의 집합입니다. 3. empty line 헤더와 본문을 구분하는 빈 줄이 있습니다. 4. body 요청과 관련된 데이터나 응답과 관련된 데이터 또는 문서를 포함합니다. 요청과 응답의 유형에 따라 선택적으로 사용되는데요. GET, DELETE,.. 2023. 4. 10. GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 👩🏻💻 GET 메서드와 POST 메서드의 차이점에 대해 설명해 주세요. 💁🏻♀️ 요약하자면 , GET은 서버에서 데이터를 조회할 때 쓸 수 있는 메소드고, POST는 서버에서 데이터를 추가할 때 사용하는 메소드 입니다. GET과 POST 요청에는 각각 어떻게 정보를 담을 수 있나요? GET은 단순히 조회를 요청하기 때문에 body를 보내지 않는 것이 보편적이기에 query parameter나 path parameter를 씁니다. POST 요청에서는 추가하고자 하는 데이터를 HTTP body에 담아 전달합니다. 각 요청의 특징은 어떻게 되나요? GET은 요청을 무한대로 보내도 같은 요청을 회신받을 수 있는 멱등성을 가지고 있습니다. 반면 POST는 요청을 무한대로 보내면 최초 응답과는 다른 회신을 받게.. 2023. 4. 10. useEffect의 dependency array에 대해서 설명해 주세요. 👩🏻💻 useEffect의 dependency array에 대해서 설명해 주세요. 💁🏻♀️ 요약하자면 , useEffect란, 컴포넌트 내에서 사이드 이펙트를 실행할 수 있게 하는 훅입니다. useEffect는 첫 번째 인자로 콜백함수를 받고, 두 번째 인자로 배열을 받는데, 이 배열을 dependency array 라고 합니다. dependency array란 무엇인가요? 종속성 배열이라 부르는 이유는 useEffect의 실행이 화면에 처음 렌더링 될 때 그리고 종속성 배열의 value 값이 바뀔 때마다 실행되기 때문입니다. 만약 빈 배열이 전달된다면 첫 렌더링될 때만 실행됩니다. useEffect에 dependency array를 주지 않으면, 상태가 변경될 때마다 컴포넌트가 리렌더링이 됩니다. .. 2023. 4. 10. React 컴포넌트의 key 속성에 대해 설명해 주세요. 👩🏻💻 React 컴포넌트의 key 속성에 대해 설명해 주세요. React에서 리스트 형태로 컴포넌트를 렌더링 할 때, key 값을 넣어달라는 console 에러가 자주 뜨는데요. 이때 이 key 값이 어떠한 역할을 할까요? 💁🏻♀️ 요약하자면 , key는 React가 어떤 항목을 변경하거나 추가할지 또는 삭제할지 구별하도록 돕는 역할을 합니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key 속성은 같은 컴포넌트를 여러 번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해 사용하는 속성인데요. 예를 들어, 10개의 트윗 중 하나의 트윗만 변경되었을 때 해당 트윗만 재렌더링하고, 다른 9개의 트윗은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하.. 2023. 4. 10. Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 👩🏻💻 Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 💁🏻♀️ 프로미스란, 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란, 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말합니다. 프로미스가 필요한 이유는 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 활용하는데, API가 실행되어 데이터를 받아오기도 전에 데이터를 다 받아온 것처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이때 문제를 해결하기 위한 방법이 프로미스입니다. 즉, 쉽게 말하자면 프로미스는 최종 결.. 2023. 4. 10. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요. 👩🏻💻 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해 주세요. 💁🏻♀️ 요약하자면 , 순수함수란 사이드 이펙트가 없는 함수, 즉 함수의 실행이 외부에 영향을 끼치지 않는 함수를 뜻하고, 입력으로 전달된 값을 수정하지 않는 불변성을 가지고 있습니다. 따라서 순수함수는 어떠한 전달인자가 주어지더라도 항상 똑같은 값이 리턴됨을 보장합니다. 사이드 이펙트란? 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 입니다. 대표적으로 네트워크 요청, API 호출이 Side Effect입니다. 순수함수 개념이 중요한 이유는? 사이드 이펙트를 줄이고, 모듈화 수준을 높이는 함수형 프로그래밍의 특징, 즉 순수함수는 평가 시점이 무관하다는 특징으로 인해 효율적인 로직을 구성할 수 있습니다. 데이터의 .. 2023. 4. 10. 이전 1 2 3 4 5 6 7 8 9 다음
