🔗 포트폴리오 링크 김예린의 다님 포트폴리오 다님 소개 맡은 역할 회원가입, 로그인 무한스크롤, 스켈레톤 마이리스트 댓글 multiple modal

Luneflix NextJS + Typescript + TailwindCSS 🔗 github https://github.com/yelinz515/luneflix 🔗 배포 사이트 https://luneflix-yelinz515.vercel.app/

Github action으로 클라이언트 CI/CD를 구축해보자 github action으로 클라이언트 CI/CD를 구축한 배포 링크 기존 파일을 배포하기 위해 client.yml을 만들었다. 깃허브 Secrets -> Actions에 , 를 넣고 커밋하면 된다.

오랜만에 velog에 블로그를 써보았습니다. 해당 내용은 아래 링크에서 확인해주세요! https://velog.io/@dpfls0515/Optimization

TDD 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법 코드를 작성하기에 앞서 테스트 코드를 먼저 작성해야 하기 때문에 시간이 오래 걸리는 것처럼 느껴지지만, 오히려 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있다. [과제] Test Builder detectNetwork.test.js 위와 같은 방법으로 test의 조건을 작성해주었습니다. Chai는 좀 더 영어 문법에 가까운 코드로 테스트를 작성할 수 있게 도와줍니다.

GraphQL의 개념을 이해하고, 과제를 통해 GraphQL 쿼리를 직접 쳐보며 문법 및 활용법을 익히는 시간을 갖도록 하겠습니다. GraphQL Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language ex) 도서 검색 서버에 요청 필드에 인수를 전달하는 부분을 추가하게 되면 쿼리의 필드 및 중첩된 객체들에 전달하여 원하는 데이터만 받아올 수 있습니다. 도서 검색 서버 응답 GraphQL의 특징 GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받습니다. 응답을 받을 시, 데이터 결과를 JSON 형식으로 받습니다. GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있습니다. GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사합니다. REST API와 GraphQL의 차이 REST API는 Resource에 대한 형태 정의와 데이터 요청 방법이 …

문자열 다루기 기본 문자열 s의 길이가 4 혹은 6이라면, NaN이 배열 안에 없으면 true를 반환한다. 4 길이의 숫자로 시작하고 끝나거나 6길이의 숫자로 시작하고 끝난다면 true를 반환한다. NaN 특징 NaN 특징: NaN은 판별에 주의해야하는데, 따라서 자료구조에서 NaN를 구별해야하는 로직에서는 isNaN() 함수를 사용하는 것이 바람직해보인다.

번들링 동서식품 POST에서 콘푸라이트를 사면 제공했던 게임 CD ‘하얀마음백구’ 사례와 같이 실질적으로 여러 제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 그렇다면 프론트엔드 개발자에게 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음입니다. 웹팩 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러 모듈 번들러 : 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다. 웹팩의 핵심 개념 loader는 JavaScript, JSON이 아닌 파일을 불러와 처리합니다. Node.js는 그 자체만으로는 CSS를 읽을 수 없어 문법 에러가 발생합니다. 적절한 로더로 CSS 파일을 처리해야 합니다. html-webpack-plugin은 번들링 과정 중 html 파일을 자신이 원하는 형태…

목표 꾸준한 자기주도적 학습 고연봉 받는 개발자 T자로 커리어 관리 🚀 Keep: 만족스러운 부분, 계속 이어가면 좋을 부분 ✔️ Keep 1: 알고리즘 공부 스터디를 통해서 알고리즘 공부를 시작했다. 실무에서 알고리즘을 써야하는 경우가 드물지만, 단순한 요구사항 구현을 넘어 효율성, 성능, 개발에 소요되는 시간까지 생각하게 된다면, 결국에는 알고리즘과 자료구조를 응용하지 않을 수 없다고 생각한다. 그래서 매일 꾸준히 알고리즘 공부를 하려고 노력한다. ✔️ Keep 2: 자기주도적 학습 프로그래머 직군의 가장 큰 특성 중 하나는 ‘배움에 끝이 없다’라는 것이다. 매년 프레임워크나 새로운 언어체계등 새로운 기술들이 등장하고 업데이트 되는 개발자들의 직업환경에서, 기존의 개발업무와 동시에 전혀 다른 문법의 언어를 습득하려면 효율적인 학습을 해야한다. 이제는 매일 꾸준히 공부하는 습관이 잡혀서 다행이다. 이 시간에는 복습하거나 알고리즘 공부를 하거나 새로운 지식을 공부하고 있다. 앞으로의…

지난 시간에 Cookie, Session에 대해 알아보았습니다. 오늘은 Token에 대해 알아보도록 하겠습니다. Token 토큰은 “나는 돈을 지불했고, 이 시설 또는 서비스를 사용할 수 있어!”라는 메시지를 담고 있는 입장 티켓이라고 이해할 수 있습니다. 이러한 개념에서 착안하여 클라이언트에서 인증 정보를 보관하는 방법으로 토큰기반 인증이 고안되었습니다. 그러면 토큰을 클라이언트에 저장하는 것이 위험하지 않나요? 토큰은 유저 정보를 암호화했기 때문에, 클라이언트에 담을 수 있습니다. JWT JWT는 엑세스 토큰, 리프레시 토큰을 이용해 인증 구현을 합니다. 권한을 부여 받는 데엔 엑세스 토큰만 가지고 있으면 되지만, 유효기간이 만료된다면 리프레시 토큰을 사용하여 새로운 토큰을 발급받아야 합니다. 이때 유저는 다시 로그인할 필요가 없습니다. github-blog.png JWT 구조에 대해 알아보겠습니다. 1. Header 어떤 종류의 토큰인지, 어떤 알고리즘으로 암호화 할 지 적혀…

핸드폰 번호 가리기 푸는 방법이 다양하다. 처음 보는 방법이었다. 안에 필요한 개수만큼 ”*“을 넣어주고 시작한다는 뜻이다. 이후에 맨 앞에서 지정한 문자열을 채워서 새로운 문자열을 반환한다. 음양 더하기 메서드로 깔끔하게 작성했다.

Cookie 서버에서 클라이언트에 영속성있는 데이터를 저장하는 방법 서버는 쿠키를 이용하여 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있지만, 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있다. Axios 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios는 자동으로 JSON데이터 형식으로 변환하기 때문에 은 필요없다. Session 사용자가 인증에 성공한 상태는 세션이라고 부른다. 웹사이트에서 로그인을 유지하기 위한 수단으로 쿠키를 사용하는데, 쿠키에는 서버에서 발급한 세션 아이디를 저장합니다. 마무리 다음 시간에는 토큰 개념에 대해 알아보고, 과제를 통해서 JWT와 Oauth의 작동원리에 대해 실습해보겠습니다.

스터디에서 다른 사람의 코드를 참고하면서 좋았던 부분에 대해 이야기하고자 한다. 하샤드 수 처음 설명듣기 전에 이게 무슨 코드지? 라는 생각이 들었다. ? ? 자바스크립트는 타입 강제 변환이 일어나기 때문에 연산자를 통해 형변환을 일으킬 수 있다는 것이다. 다시 코드를 보면 , x가 12이라고 했을 때 ‘12’으로 만들어 여러 개의 문자열로 나누면 [ ‘1’, ‘2’ ]이 된다. 이후 map함수를 이용해 이 되면서 [ 1, 2 ]가 되고, reduce함수를 통해 더해서 3이 된다. 정리하면, 12 % 3 === 0이기 때문에 true를 반환하게 된다. 다시 봐도 정말 신기한 코드이다. 최대공약수와 최소공배수 gcd함수에서 a가 b보다 크면 작은 수인 b로 나눈 나머지 값을 리턴하고, 아니면 그 반대의 경우로 자기 자신을 호출하였다.

Summury 요소의 자식 요소로 요소, 요소를 작성해주는 것이 일반적이다. 요소 name 속성값 설명 description 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용. keywords 웹 페이지의 관련 키워드들을 나열할 때 사용. author 콘텐츠의 제작자를 표시. SEO가 목적이라면 위 표처럼 name 속성을 사용하는 요소에 더 중점을 두되, 오픈 그래프(ex. property=“og:title”)도 잘 작성해주는 것이 좋다. 콘텐츠를 작성할 때 요소에 넣어주는 것도 SEO에 도움이 되지만, 똑같은 키워드만 반복해서 넣는 것은 역효과를 불러 올 수 있어 비슷한 키워드로 대체해서 사용하거나, 핵심 키워드의 관련 키워드들을 쭉 포함시키는 것이 좋다. 웹 접근성 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것 WAI-ARIA 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관에서 발…

Cmarket Redux Redux의 원리와 구조, 즉 설계하면서 어려웠던 부분, 부족한 부분, 느낀점에 대해 얘기해보려 한다. 어려웠던 내용 🤢 ShoppingCart.js 와 는 를 이용해 풀 수 있었다. 이 부분은 과제할 때 작성되어 있어서 대충 보고 그냥 넘어간 것 같다. 그래서 페어와 함께 다시 지우고 작성해보았다. 어떤식으로 장바구니 안 체크박스가 해제되고 선택되는지 알 수 있는 시간이었다. (이 페어분과 다음에 같이 만나서 다른 과제를 다시 풀어보기로 했다ㅋㅋㅋ) 부족한 내용 🧐 itemReducer.js if문에서 불변성을 지키는 코드를 작성하려고 하니까 많이 어려웠다. 결국 레퍼런스를 참고했지만, 나중에 스스로 작성할 수 있도록 더 열심히 공부해야겠다.. 느낀점 🤠 이틀 간 주어진 과제였고, 첫 날에 과제를 완성해서 제출했다. todo를 통해 풀긴 했지만, 아직 이해가 가지 않는 코드들이 많았다. 그래서 페어와 함께 다시 작성했던 코드를 지우고.. 지워서 작성할 수…

Redux에 들어가기에 앞서, mutate state가 무엇인지 알아보자. mutate state state를 수정하려고 할 때, 아래처럼 작성하였다. state 값을 바꿀 땐, mutate를 할 수 없다! mutate 파생변수를 생성할 때 사용하는 함수. 쉽게 말하자면 array의 값을 바꾸는 메서드는 사용할 수 없다는 이야기다. 이런 것들 말이다. state를 바꿀때는 위 코드처럼 새롭게 정의해주어야 한다. 즉 state가 배열이라면, 배열을 새롭게 정의해야한다. Redux에서 저장소나 리듀서에서 상태 불변성을 지키자. NEVER! MUTATE STATE!! Redux github-blog-1.png [Redux 구조 - FLUX 패턴] 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 객체가 생성된다. 이 Action 객체는 함수의 인자로 전달된다. Dispatch 함수는 Action 객체를 함수로 전달한다. Reducer 함수는 Action …

Side Effect 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청 (백엔드 API 요청) Cmarket Hooks 지금까지 배운 React Router, React Hooks를 이용해 과제를 해보았다. 어려웠던 부분, 부족한 부분, 느낀점에 대해 얘기해보려 한다. App.js 어려웠던 내용 🤢 ItemListContainer.js 와 가 같으면 found이다. [0]을 해준 이유는 기존에 장바구니에 없었다면 undefined였을 것이고, 있었다면 undefined가 아니기 때문이다. 그래서 조건이 undefined라면 수량을 1로해서 새로 추가하는 것이다. ShoppingCart.js 는 장바구니에 있는 수량 버튼을 눌러 수량을 추가하거나 삭제할 수 있다. 는 과 가 일치하지 않은 아이템을 장바구니에 남겨놓는다. 부족한 내용 🧐 장바구니에 있던 아이템을 다시 장바구니에 넣으면 기존에 있던 수량에 추가되는 기능을 넣어보면 좋을 것 같다. 느낀점 🤠 오늘…

Styled-Component, useRef를 이용해 과제를 해보았다. 어려웠던 부분, 부족한 부분, 느낀점에 대해 얘기해보려 한다. 어려웠던 내용 🤢 Tag.js 에서는 태그를 삭제하기 위해 를 이용해 태그를 하나씩 삭제하고, 에 전개연산자를 이용해 의 좌항에서 명시적으로 할당되지 않은 나머지 배열 값들을 나타낸다. 에서는 tags 배열에 새로운 태그를 추가해야 한다. 주석을 참고하면 된다. Autocomplete.js 에 를 적어줘야 한다는 것을 기억해두자. ClickToEdit.js 가 뭘까? onblur : 포커스가 해지될 때 이벤트 설정 을 클릭했을 때, 우리는 에서 글을 수정할 수 있다. 다음 을 클릭해 글을 적으려고 했을 때, 다시 으로 돌아가야한다. 이때 이벤트를 통해 설정할 수 있다. 이벤트를 쓰지 않으면, 그대로 에 머물러 있게 된다. 부족한 내용 🧐 Modal.js 과 을 클릭하면 가 나타난다. 여기서 중요한 점은 를 닫을 때 과 을 클릭해야 닫혀야 하는…

Component Driven Development (CDD) 디자인과 개발 단계에서부터 재사용할 수 있는, 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 CSS-in-JS (ex. Styled-Component) 기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공 Styled Components 문법 1. 컴포넌트 만들기 2. Props 활용하기 Props로 조건부 렌더링하기: Props 값으로 렌더링하기: 3. 전역 스타일 설정하기 GlobalStyle.js 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 컴포넌트의 스타일이 적용된다. App.js Storybook Component Driven Development를 하기 위한 도구 지원하는 주요 기능 UI 컴포넌트들을 카탈로그화하기 컴포넌트 변화를 Stories로 저장하기 핫 모듈 재 로딩과 같은 개발 툴 경험을…

Figma를 사용해서 기존 운영중인 서비스의 화면의 디자인을 따라서 만들어 보자. 과제1 - Toss 앱 클론 페어와 함께 토스 앱의 디자인을 따라해보았다. 따라하면서 어려웠던 부분, 부족한 부분, 느낀점에 대해 얘기해보려 한다. 어려웠던 내용 🤢 오버레이로 창 띄우기(팝업창) github-blog.png 주식에서 추가하기를 누르거나 오늘의 발견에서 하트를 누르면 아래와 같은 결과가 나와야 한다. github-blog.png 처음에 주식화면을 가져와 투명도 있는 검은 배경과 팝업을 추가했다. 문제는 Move in을 적용하면 검은 배경까지 이동하기 때문에 생각한 결과가 나오지 않았다. 그래서 해결하기 위해 아래와 같이 팝업화면은 배경을 없애고 필요한 팝업창만 구현하였다. 그리고 주식 화면에서 Open overlay를 적용해 주식화면 위에 팝업을 띄우도록 바꿨다. github-blog.png github-blog.png 이미지 자동 넘기기 필요한 사진을 하나의 프레임으로 묶는다. 참…

📱 와이어프레임 & 프로토타입 와이어프레임(wireframe) 와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기위한 목적으로 만든다. 프로토타입(prototype) 프로토타입은 실제 제품과 거의 흡사하게 구현한 것으로, 페이지 이동과 상호 작용이 가능합니다. 본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시뮬레이션하는 것이 목적이다. 차이점 와이어프레임이나 프로토타입을 표현할 때 품질 수준을 전문용어로 피델리티(fidelity) 라고 표현한다. 와이어프레임 프로토타입 작성시기 기획 단계 개발 전 단계 작성목적 화면 구조 설계 UI 상호작용 시뮬레이션 특징 정적 동적 피델리티 Low ~ Middle (High는 거의 작성하지 않음) Middle ~ High (Low는 테스트에 적합하지 않음) 🎨 Figma 2016년 9월에 출시된 UI 디자인&프로토타이밍 툴 github-blog.…

면접 단골 질문이다. 프론트엔드 개발자는 UX를 잘 알아야 한다. 🎄 중요한 키워드 UI UX UI와 UX의 차이점 UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. UX UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다. UI와 UX의 관계 Chinese Salty Egg UX는 UI를 포함한다. 또한 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다. UI 디자인 패턴 모달 (Modal) 모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다. 캐러셀 (Carousel) 캐러셀은 자동으로 돌아가거나, 사용자가 옆으로 넘겨야만 넘어가거나, 아니면 둘 중 선택할 수 있도록 만들 수 있다. GNB (Global Navigation Bar), LNB (Local Navig…

시작은 달라도 결국 동일선상에 서 있다 6주동안 알고리즘 소모임이 시작된다. 오늘 OT에서 가장 인상깊었던 말이다. 남들보다 늦게 출발했어도 알고리즘 문제를 열심히 풀다보면 결국 빨리 시작한 사람들과 같은 곳에 있을 것이라는 말이다. 1주차 OT 나는 백준 사이트를 처음 사용해보는 것은 아니다. 백준에서는 자바스크립트 언어를 사용하기 위해 node.js 입출력(fs모듈)으로 문제를 풀었었다. 소모임을 참여하게 된 이유 일단 다른 사람들과 함께 알고리즘 문제에 대해 소통할 수 있어서 좋았다. 항상 여러가지 풀이 방법이 존재하는데 다른 사람들은 어떻게 풀었는지, 내 답이 베스트인지 등 생각하지 못했던 방법을 발견할 수 있다. fs모듈을 이용하는 방법 한 줄로 입력을 받을 때 여러 줄로 입력을 받을 때 fs모듈을 이용하는 방법(vscode) 파일을 만들고 문제에서 주어진 예제 입력을 그대로 복사해서 저장한다. 텍스트 파일의 이름은 항상 달라지기 때문에 더 편리한 방법으로 풀 수 있었…

Json.stringify : 객체를 JSON으로 변환한다. JSON으로 변환된 객체의 타입은 문자열이다. : JSON을 객체로 변환한다. JSON의 기본 규칙 자바스크립트 객체 JSON 키 키는 따옴표 없이 쓸 수 있음 반드시 쌍따옴표를 붙여야 함 문자열 값 작은따옴표도 사용 가능 반드시 큰따옴표로 감싸야 함 키와 값 사이 공백 사용 가능 사용 불가능 키-값 쌍 사이 공백 사용 가능 사용 불가능 stringifyJSON stringifyJSON.js 초반에 숫자, boolean, 문자열을 문자열로 반환한다. 배열일 때를 보면 로 재귀함수를 호출하고 있다. 재귀함수로 호출하는 이유는 배열 안 요소가 문자열인지 숫자인지 다시 판단할 필요 없다. 객체일 때도 마찬가지이다. key와 value를 재귀함수로 호출하고 있다. Tree UI Chinese Salty Egg 위 사진처럼 자식 노드가 있는 경우, 재귀함수로 반복되는 호출해야한다. 만약 자식 노…

를 생성하고 바로 이런 오류가 났다. 해결방법: 에 categories를 추가하면 된다. category 현재 태그는 활용되고 있지 않으며, 카테고리는 블로그 리스트 하단에 보이고, 카테고리로 포스팅을 검색 가능하게 한다. 주의할 점 과 을 동시에 하면 오류난다. 마무리 공부할 겸 이 블로그 테마에 맞게 블로그를 수정하거나 내가 원하는 기능과 디자인으로 바꿔야겠다.

재귀(Recursion) : 원래의 자리로 되돌아가거나 되돌아옴. 예시 #1 은 첫 번째 요소, 은 첫 번째 요소를 제외하고 자기 자신을 호출을 반복한다. 그 결과, , , , , 가 되어 에 속해 을 반환하면 , , , , 해서 최종적으로 가 나온다. Chinese Salty Egg 이 그림을 보니까 더 잘 이해가 되는 것 같다. #2 , , 이 되고, 은 이기 때문에 다시 그 결과를 거슬러 올라가면 , , 해서 최종적으로 가 나오게 된다. 이것이 재귀 함수이다. 코플릿 오늘 재귀 코플릿을 풀면서 어려웠던 문제들이 많았다. 헷갈렸던 문제들을 다시풀어보고 풀이하도록 하겠다. 02_isOdd 08_drop 이 작아지면서 는 첫 번째 요소를 제외하고 자기 자신을 호출한다. 09_take , 해서 이 0이기 때문에 빈 배열을 리턴한다. 다시 정리하면, , 해서 최종적으로 가 나온다. 12_reverseArr , , 가 되고 배열이 0인 경우 빈 배열을 리턴한다. 다시 정리하면, , ,…

목표 꾸준한 자기주도적 학습 고연봉 받는 개발자 T자로 커리어 관리 🚀 Keep: 만족스러운 부분, 계속 이어가면 좋을 부분 ✔️ Section1_Keep: 블로그 작성하기 ➡️ Section2_Keep 1 최근 Jekyll에서 Gatsby로 블로그 마이그레이션을 하다가 매일 채워지는 잔디를 몇 개 잃었다.😮‍💨 처음하는 작업이다보니까 실수도 많았던 것 같다. 개발한 내용을 하나의 완결된 아티클로 적는 경험은 관련 지식을 머릿속에 명확하게 정리해주고, 기억에 오래 남게 해준다. 블로그를 작성하는 부분은 잘 지켜나가고 있다고 생각하기 때문에, 앞으로도 쭉~ 블로그를 작성하자. ✔️ Keep 2: 자기주도적 학습 프로그래머 직군의 가장 큰 특성 중 하나는 ‘배움에 끝이 없다’라는 것이다. 매년 프레임워크나 새로운 언어체계등 새로운 기술들이 등장하고 업데이트 되는 개발자들의 직업환경에서, 기존의 개발업무와 동시에 전혀 다른 문법의 언어를 습득하려면 효율적인 학습을 해야한다. 이 부분에 있어서 …

오늘 과제의 핵심은 server에서 데이터를 가져와 client에서 그 데이터를 보여주는 것이라고 생각한다. server에서 데이터 가져오기 (fetch 사용) 처음 로딩화면을 실행하고, server에서 데이터를 가져오면 로딩화면을 보여주지 않게 작성했다. 만약 이 true이면 컴포넌트를 실행해 로딩 화면을 보여주고, false이면 컴포넌트를 실행하여 discussion list를 보여준다. 화면 true Chinese Salty Egg Result Chinese Salty Egg

Express 프레임워크로 StatesAirline API Server 구현하는 과제를 해보았다. ✅ 과제 시작 전 Express 공식문서에서 , 를 사용하는 방법을 확인할 것이다. req.query 위 코드는 id과 name 값을 동시에 가져올 수 있다. 에 들어간다고 가정하자. 화면에 가 보일 것이다. 위 코드는 배열로 값들을 가져온다. 에 들어간다고 가정하면, id가 1이기 때문에인 가 화면에 보인다. 실제로는 에 파일이나 데이터베이스로 교체해서 짧은 코드로 값을 가져올 것이다. req.params 에 들어간다고 하면 아래와 같은 결과가 나올 것이다. 안에는 객체가 들어가 있고, 그 객체의 pageId 프로퍼티 값을 통해서 CSS라는 값을 가져온다는 뜻이다. ✅ StatesAirline-Server(수정) 의 위치가 굉장히 중요하다. -> 쿼리 파라미터 -> path 파라미터 flightController.js bookController.js

Express 간단한 웹 서버 만들기 라우팅: 메서드와 url에 따라 분기(Routing)하기 Node.js로 라우팅을 구현한 코드는 이렇다. 메서드와 url(, 등)로 분기점을 만드는 것을 라우팅(Routing) 이라고 한다. 반면에 Express는 프레임워크 자체에서 라우터 기능을 제공합니다. Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다. ✔️ Express 미들웨어를 사용하는 상황 POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때) 모든 요청/응답에 CORS 헤더를 붙여야 할 때 모든 요청에 대해 url이나 메서드를 확인할 때 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때 case 1: POST 요청 등에 포함된 body(payload)를 구조화할 때 Express 내장 미들웨어인 express.json()을 사용한다. case 2: 모든 요청/응답에 CORS 헤더를 붙일 때 case 3: 모든 …

API 서버는 프론트엔드 개발자도 구현할 줄 알아야 한다. 새로운 서비스를 만들려고 해도, 필요한 데이터를 저장하거나 불러오는 기본적인 API 서버를 구현할 수 없다면 아무런 동적 활동을 할 수 없는 클라이언트만 구현될 수 밖에 없다. SOP가 생겨난 이유 SOP은 애초에 다른 사이트와의 리소스 공유를 제한하기 때문에 해킹 등의 위협에서 보다 더 안전해질 수 있다. 모든 브라우저에서 기본적으로 사용하고 있는 정책이다. CORS Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유를 뜻한다. 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. ✔️ CORS 동작 방식 프리플라이트 요청 (Preflight Request) 단순 요청 (Simple Request)이라는 것은 프리플라이트 요청(Preflight Request)을 생략하는 요청이다…

States Airline 시작하기 useEffect 두 번째 전달인자인 종속성이 없으면 첫번째 전달인자인 함수를 _______________ 실행한다. 처음 컴포넌트가 생성될 때 props가 변경될 때 state가 변경될 때 promise Promise 에 있는 데이터를 접근하려면 사용 예시: States Airline LoadingIndicator.js 라는 로딩 화면 구현은 사용자에게 중요하다. 개발자라면 이 부분에 대해서 관대해지면 안된다. 구현해 주는 것이 좋겠다. Chinese Salty Egg Main.js 밖에 선언되어 있는데 실행은 되지만 이 끝날 때까지 기다리지 않기 때문에 을 바로 실행이 된다. 그렇기 때문에 을 안에 넣어줘야 하는 것이다. Main.js 전체 코드는 이렇다. FlightDataApi.js Main.js를 보면 는 아래와 같이 FlightDataApi.js에 있다. FlightDataApi.js 위 코드를 보면 우리는 flightList…

React 데이터 흐름 페이지를 만들기 이전에, 컴포넌트를 먼저 만들고 조립한다. 상향식으로 앱을 만들면 테스트가 쉽고 확장성이 좋다. 단방향 데이터 흐름(one-way data flow) 상태를 최소화하는 것이 가장 좋으며, Lifting state / 하향식 데이터 흐름(Top-down data flow) 보통 state는 rendering을 위해서 component에 추가되는데, 만약 다른 component도 함께 state를 필요로하면 그 component들의 공통된 부모 component로 state를 끌어올린다. 부모 component에서 관리하게 되는것이다. 이것이 하향식 데이터 흐름를 활용하는 방법이다. 장점 : bug가 줄고, 관리하는 로직 수정이 쉬움. 📍 만약 UI에서 잘못된 값이 render 된 부분을 발견한다면 해당 data, 즉 props가 어떠한 부모 component로부터 왔는지 component tree의 상위를 탐색하여 파악할 수 있다. 그 결과, …

유투브에서 우연히 영상을 보았다. 직접 server와 client 간의 데이터를 주고받는 법을 배울 수 있었다. server 파일과 client 파일 생성 server 파일 pacakage.json 파일이 생성된다. ✔️ 서버 실행 client 파일 ✔️ react 실행화면 보기 CORS 실제로 데이터베이스가 없을 때 직접 서버를 구축하고 postman을 통해서 데이터를 어떻게 주고 받는지 알 수 있었다. 중간에 server와 client 포트가 달라서 ccess-Control-Allow-Origin 헤더가 요청된 리소스에 없다면서 CORS 정책을 위반해서 나온 에러가 떴다. CORS 정책을 위반하여 서로 다른 출처를 가진 상태에서 무언가를 요청하게 되면 브라우저가 보안 상의 이유로 차단을 해버린다! 해결: CORS 미들웨어 사용하기 위 코드를 추가해주면 된다. 📍 하지만, app.use(cors()) 이런 식으로 하게 되면 모든 출처에서 오는 요청을 허용하는 것이므로 지양하자. 마무…

API 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해줘야 한다. 예를 들어 카페에서 서버(주인)는 “아메리카노 주문은 /americano로 요청하세요” 라는 메뉴판을 제공하는 것을 API라고 할 수 있다. REST API 개요 클라이언트와 서버가 HTTP 통신을 할 때(요청과 응답할 때), ‘제대로 보내고 받을 수 있는’ 일종의 규약이 존재 REST는 “Representational State Transfer”의 약자로, 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식 🚩 REST API 디자인 우리는 메뉴판을 api로 예를 들었다. 알아보기 쉽고 잘 작성된 메뉴판이 필요한데, 이 역할을 API가 수행해야 하므로 모두가 잘 알아볼 수 있도록 작성하는 것이 중요하다. Chinese Salty Egg ✔️ REST 성숙도 모델 - 0단계 단순 HTTP 프로토콜을 사용 ✔️ REST…

Client Server Architecture 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 프론트엔드 vs 백엔드 프론트엔드엔드 개발자 : 사용자가 직접 눈으로 보고, UI를 클릭 또는 터치하는 등의 상호작용을 할 수 있는 앱을 주로 개발 백엔드 개발자 : 사용자 눈에 직접 보이지 않게 뒤에서 작동하게 한다. 클라이언트-서버 통신과 API API 서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를 제공해줘야 한다. 예를 들어 카페에서 서버(주인)는 “아메리카노 주문은 /americano로 요청하세요” 라는 메뉴판을 제공하는 것을 API라고 한다. HTTP API 디자인 Best Practice Chinese Salty Egg 보통 인터넷에 있는 데이터를 요청할 때에는 HTTP 프로토콜을 사용하며, 주소(URL, URI)를 통해 접근할 수 있다. Chinese Salty Egg HTTP 요청시 메서드를 지정하여 리소스와 관련된 행동(CRUD)을 지정할 수…

State 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 useState useState 를 호출하면 배열을 반환하는데, 배열의 는 현재 state 변수이고, 는 이 변수를 갱신할 수 있는 함수이다. useState 의 인자로 넘겨주는 값은 state의 초깃값이다 useState 를 호출한다는 것은 “state” 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. Props 외부로부터 전달받은 값 함부로 변경될 수 없는 읽기 전용 객체이다. React Twittler State & Props 과제를 하면서 중요했던 내용에 대해 적어보도록 하겠습니다. State와 Props에 대해 더 쉽게 이해할 수 있을 것입니다. Tweets.js : state를 저장하는 함수 : state tweets 를 변경하는 함수 : state hook : state 초깃값 컴포넌트에 , 를 로 감싸 넘겨주고 있다. Tweet.js 넘겨받은 을 이용하여 필요한…

React 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 React에서 데이터 다루는 두 가지 방법 ✔️ State 내부에서 변화하는 값. 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 useState useState 를 호출한다는 것은 “state” 라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. ✔️ Props 외부로부터 전달받은 값 함부로 변경될 수 없는 읽기 전용 객체 React 데이터 흐름 ✔️ 상향식으로 앱을 만들기 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. ✔️ 데이터는 위에서 아래로 흐른다 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식(top-down) 임을 의미한다. 📍 사실 상태는 최소화하는 것이 가장 좋다. 상태가 많아질수록 애플리케이션은 복잡해지기 때문이다.

React 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 React SPA 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트 ✔️ SPA 방식으로 만들어진 서비스 Youtube facebook Gmail airbnb Netflix React Router 라우팅에 따라 다른 뷰를 보여주기 위 React Router 라이브러리 사용 라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 과정을 “경로에 따라 변경한다.”라는 의미 ✅ React Router 주요 컴포넌트 개발 환경 구축하기 React Router를 설치하고 React Router 라이브러리가 제공하는 컴포넌트들을 사용하기 위한 세팅을 진행한다. 📍 를 사용할 때 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다

React 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 라이브러리 : 다른 프로그램에서 호출하여 사용할 수 있도록 제공하는 일종의 함수 집합 리액트를 쓰는 이유에 3가지 특징이 있다. 선언형 html, css, js 파일을 각각 적는 것은 불편하다. 리액트는 다른 기술을 한 곳에 볼 수 있어 개발자가 코드만 보고도 실제 기능을 쉽게 상상할 수 있다. 컴포넌트 기반 코드를 묶어둔 컴포넌트 단위로 구현되어 실제 기능을 쉽게 상상할 수 있다. 장점은 독립성, 재사용성에 효율적이다. 컴포넌트를 잘 만들어 놓으면 계속 재사용이 가능해진다는 것이다. 최상위 컴포넌트는 Root이며, 트리 구조를 형상화하여 표현할 수 있다. 범용성 기존에 개발하던 코드를 일부만 고쳐서 어디에든 유연하게 적용할 수 있다. 리액트 네이티브와도 호환이 가능하다고 한다. JSX JavaScript를 확장한 문법 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScri…

fetchAPI fetch API는 위와 같이, 특정 URL로부터 정보를 받아오는 역할 종합 퀴즈 2. ✅ 버튼에 비동기 이벤트를 추가하고 싶을 때_ 비동기 이벤트를 연결하려면 함수 자체를 연결해야 한다. 왜 틀렸을까? 위 코드는 함수 자체를 연결한 것이 아닌 handleClick 함수를 실행한 것을 연결하고 있기 때문에 정상적으로 작동하지 않는다. 그렇다면 어떻게 적어야 하는지… 위 코드처럼 비동기 이벤트를 추가하면 된다. 여러가지 방법이 있으며, 아래 코드처럼 추가할 수도 있다. 6. setTimeout함수는 비동기 함수이다. ✅ setTimeout의 첫 번째 전달인자에 실행할 콜백함수를 넣는다. ✅ setTimeout의 두 번째 전달인자에 값을 넣지 않아도 동작하지만, 따로 값을 주지 않았기 때문에 timer의 기능은 제한된다.

Callback Async 제어 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료 Promise callback의 가독성을 높이기 위해 Promise 객체를 사용한다. Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. ✔️ Promise의 세가지 상태 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Chinese Salty Egg 그림을 보면 과 가 있다. Promise.prototype.then() 메서드는 Promise (en-US)를 리턴하고 두 개의 콜백 함수를 인수로 받는다. Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다 Promise.prototype.catch() Promise 거부된 사례만 반환하고 처리 async await Promise이지만…

Bare Minimum Test underbar 라는 과제를 하는 이유는 고차함수에 대해 더욱 깊게 이해하기 위해 시작했다. callback function -> 전달인자로 들어가는 함수 _.filter, _.map, _.reduce, _.foreach를 직접 만들어 callback _.foreach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행 세 가지 매개변수를 받는다는 것과 반환 값이 없다는 것이 특징이다. _.indexOf

프로토타입 체인 .prototype .__ proto __ Object 프로토타입 체인 상속을 JS에서 구현할 때 프로토타입 체인 사용한다. extends와 super 키워드를 이용해 상속을 구현한다. .__ proto __ .__ proto __를 통해 계속 접근하면 상속 관계를 확인할 수 있다. 아래 그림을 통해 이해할 수 있을 것 같다. Object 실제 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스이다. Chinese Salty Egg 화살표 방향은 부모를 가리키고, EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재합니다.

객체 지향 개요 데이터와 기능을 한곳에 묶어서 처리 클래스라는 이름으로 속성과 메서드가 하나의 “객체”라는 개념에 포함 예시 위 코드에서 객체 man은 name과 favorite 속성이 있고, favorite 속성은 함수 자료형이므로 favorite() 메서드라고 부른다. this.name은 메서드 내에서 자기 자신이 가진 속성을 출력하기 위해서 사용되는데, 같은 man 객체에 존재하는 name을 불러온다는 뜻이다. 코드를 실행하게 되면 Kurien은(는) 게임을(를) 좋아합니다.라는 문장이 출력됩니다. 메서드 - “객체에 딸린 함수” this - “인스턴스 객체” 클래스 인스턴스 new 키워드 생성자 함수 ES5 클래스 작성 문법 ES6 클래스 작성 문법 클래스와 인스턴스 Chinese Salty Egg new 키워드 인스턴스를 만들 때 new 키워드를 사용 즉시 생성자 함수가 실행된다. 각각의 인스턴스는 클래스이 고유한 속성과 메서드를 갖게 된다. 생성자 함수 객체지향 프로그래…

고차 함수 오늘 공부한 내용 어려웠던 내용 궁금한 내용과 부족한 내용  느낀점 ✨ 오늘 공부한 내용 고차 함수 함수를 리턴하는 함수, 함수를 전달인자로 받는 함수(=커링 함수) 이때 다른 함수의 전달인자로 전달되는 함수 : 콜백 함수(callback function) 콜백 함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출할 수 있다. 아예 호출하지 않을 수도 있고, 여러 번 실행할 수 있다. 📍 for…of vs for…in for…of : 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복 위처럼 쓰지 않아도 아래 코드로 쓰면 대입받은 변수를 이용하면 루프 안에서 객체의 열거할 수 있는 프로퍼티에 순차적으로 접근할 수 있습니다. for…in : 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복 자세한 내용은 아래 링크를 눌러주세요! 출처 : YJUN IT BLOG…

✨ 기술 면접 준비하기 : 개발자로서 기술적 직무 역량을 충분히 갖추었는지 판단하는 모든 면접 형태 ☑️ 기술 면접 종류 이력서 기반 질문형 기본 개념 질문형 알고리즘 문제 해결형 간단한 실무 문제 해결형 미니 프로젝트 제작형 ☑️ 기술 면접의 목표 나랑 같이 개발할 수 있을까? 정말 잘 아는가? 정말 잘 하는가? 잘 이해하고 잘 말해야 한다. 내가 정말 잘 아는지, 잘하는지 간단명료하게 설명하기 위해 한 문장 요약 + 자세한 설명 or 경험 🔹 두괄식으로 말하는 것이 좋다! 기계처럼 정확하게 말하려는 것보다 더듬더듬 말해도 자신이 잘 아는 것에 대해 잘 설명하는 것이 더 중요하다고 생각했습니다. ☑️ 기술 모의 면접 학습법 제시되는 단답형 질문이나 본인이 작성한 프로젝트 기술 면접 질문에 대한 짧은 정답을 작성한다. 예상되는 꼬리 질문을 스스로 준비한다. 단답형 질문과 꼬리 질문에 대해 설명하기 위한 풍부한 사례를 자신의 언어로 준비한다. 📍 고른 질문에 대한 답변을 글로 작성하기 ✅…

목표 꾸준한 자기주도학습 고연봉 받는 개발자 T자로 커리어 관리 🚀 Keep: 만족스러운 부분, 계속 이어가면 좋을 부분 깃허브 블로그를 매일 작성하려고 노력했다. 게시물을 업로드하면 contribute 수에 따라 잔디가 심어지는데, 매일 채워지는 모습을 보니까 뿌듯했다.☺️ 앞으로 연한 초록색보다 진한 초록색을 많이 심도록 부지런히 블로그를 작성하자.😬😬😬😬 Problem: 개선이 필요하다고 생각되는 부분 질문하지 않고 혼자 힘으로 해결하려고 했다. 이 과정에서 많은 시간이 소요되었지만, 스스로 문제를 해결해나가는 과정이 재미었다. 주어진 시간 내에 해결해나가야 하는 만큼 상황에 맞게 질문을 적절히 하는 유연성을 길러야 한다. 앞으로 아고라 스테이츠를 통해 동료와 크루분들께 정리된 항목으로 질문하는 습관을 기르자.😬😬 Try: Keep과 Problem을 기반으로 실천해 보고자 하는 것 🧐 Keep1 🧐 Problem1. * 매일 수업 한 시간 전, 전날 수업 복습 or 그날 수업을…

나만의 아고라 스테이츠 만들기 오늘 공부한 내용 어려웠던 내용 궁금한 내용과 부족한 내용  느낀점 ✨ 오늘 공부한 내용 지금까지 페어와 함께 프로젝트를 해결해 나갔다면, 어제와 오늘! 이틀 동안 솔로 프로젝트를 해보았다. ✅ 프로젝트 제목 : ‘나만의 아고라 스테이츠 만들기’ 아고라 스테이츠란 기술 관련 질문을 깃허브에 올리면 동기분들이나 크루분들이 답변해주는 커뮤니티이다. 이런 커뮤니티의 틀을 참고해서 기술 관련 질문을 등록하고, 등록 날짜, 제목 등 입력을 받아들이는 기능을 구현해야했다. ✨ 어려웠던 내용 추가적으로 페이지네이션 기능, 현재시간 기능을 넣고 싶었다. ✅ 현재시간은 위와 같은 코드를 작성해주면 댓글을 submit 했을 떄 현재시간으로 댓글이 등록되는 것을 볼 수 있다.👍 Chinese Salty Egg ✅ 페이지네이션과 로컬스토리지 구현  로컬스토리지 코드 페이지네이션 구현 코드 📍 …

유효성 검사 오늘 공부한 내용 어려웠던 내용 궁금한 내용과 부족한 내용  느낀점 ✨ 오늘 공부한 내용 페어와 이틀동안 로그인 페이지를 제작해보았다. 아이디를 4글자 이상 작성시 ‘사용할 수 있는 아이디입니다’ 라는 문구와 함께 녹색 박스가 나타나고, 아니라면 ‘아이디는 네 글자 이상이어야 합니다’ 라는 문구와 함께 빨간 박스가 나타나게 된다. 비밀번호 재확인하여 일치 시 녹색 박스가 나타나고, 일치 하지 않으면 ‘비밀번호가 일치하지 않습니다’ 라는 문구와 함께 빨간 박스가 나타난다. ✨ 어려웠던 내용 css를 수정할 때 이러한 기능을 넣고 싶었다. 👍 input:focus : input을 클릭하면 label이 움직이는 애니메이션. transition을 이용하는 애니메이션이다. 👍 input:valid : input에 글을 써도 label이 위로 올라간 상태를 유지. 결과적으로, Chinese Salty Egg 다행히 생각했던 것과 비슷하게 구현이 되었다. 이 기능을 적용하기 …

DOM(Document Object Model) JS를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. DOM이라는 구조를 기반으로, JavaScript로 프로그램을 작성하여 HTML을 조작합니다. DOM 구조 조회 부모 요소에서 첫 자식 요소 조회 CRUD(Create, Read, Update, Delete) 이벤트 객체 함수를 작성하면 함수를 여러 번 재사용할 수 있다. 함수에 어떤 메뉴를 추가해도 menus 버튼을 누르면 모두 실행된다. 그렇다면.. 사용자가 누른 버튼에 따라 출력되는 메뉴가 다르게 보이기 위한 코드는 무엇인가? 위 빈칸에 event.target.textContent로 적어주면 된다. 이벤트 함수에 매개변수로 event를 넣으면 여러 event를 한 번에 할당할 수 있다. event.target은 실행된 event가 발생한 곳의 객체 주소를 담고 있다. onclick과 addEventLister의 차이점 onclick : 마지막 하나만 실행. 옛…

✨ 스코프 : 변수 접근 규칙에 따른 유효 범위 1. firstName 변수가 함수 안쪽 정의 :arrow_right: 함수 바깥쪽에서 firstName으로 접근 불가능 (=ReferenceError) 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능 안쪽에서 선언한 변수는 바깥쪽 스포크에서 사용 불가능 2. 중첩 가능 “지역 변수는 전역 변수보다 더 높은 우선순위를 가진다” 2️번 출력에서 ‘김코딩’이 나오는 이유는 지역 name 변수를 새로 선언했기 때문에 전역에 있는 name 변수와는 다르다. 만약, 지역 name 변수를 새로 선언하지 않았다면 전역 name 변수와 같은 변수이기 때문에 ‘김코딩’ 에서 ‘박해커’로 변경된다. 따라서, 3번 출력은 ‘박해커’가 된다. ✨ 스코프의 종류 : 블록 스코프, 함수 스코프 🔹 화살표 함수는 블록 스코프로 취급된다. 🔹 var키워드_ 블록 스코프에서 block 범위를 벗어나도 같은 function scope에서는 사용이 가능하다…

01_Introduction.js ✨ expect 함수 테스트하는 값과 기대값을 비교 04_Scope.js ✨ 함수 선언식(declaration)과 함수 표현식(expression)의 차이 ✨ 자바스크립트 함수 호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 “변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것” 이라고 주로 설명할 수 있다. ✨ lexical scope 자바스크립트는 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 - 어휘적 환경 - 을 기준으로 변수를 조회하려고 함. 05_ArrowFunction.js ✨ 화살표 함수 사용법 function 키워드를 생략하고 화살표 => 를 붙인다. 리턴을 생략할 수 있습니다 💡 원본 변경 메서드 vs 간접 변경 메서드 1. 원본 변경 메서드 push() pop() shift() unshift() splice() 2. 간접 변경 메서드 slice() …

✨ 취업.. 가능할까요? 코드 스테이츠를 수료 후에 취업을 할 수 있는가? 고민하는 사람들이 많을 것이다. 나도 그렇다. 끊임없이 남과 비교하며 포기하고 싶다는 생각도 많이 들겠지만, 이 시간을 통해 얻은 교훈은… ‘남’이 아닌 ‘나의 어제’와 비교하라는 것이다.😊 😊 ✨ 잠이 오면 잠을 자요! 나는 잠을 빨리 자고 빨리 일어나는 편이다. 늦게 자서 아침에 일어날 때 피곤하면 짜증지수가 올라가기 때문에 차라리 빨리자서 새벽 5시에 일어나는 것이 더 낫다. 기억해야 할 명언 “우울한 사람은 과거에 사는 자이고 불안한 사람은 미래에 사는 자이며 평안한 사람은 이 순간에 사는 자다.” -노자- ➡️ 시간이 지날수록 페어와 같이 프로그래밍 하는 시간이 소중해진다. 다양한 사람들과 문제를 같이 해결할 수 있어서 정말 좋은 시간인 것 같다.❤️ 전공자로서의 장점을 찾았다! 나는 전공자라서 약간의 부끄러움(?)을 가지고 있었다. ‘전공자가 왜 여기에 들어오지?’ 라는 궁금해할 수 있다. 실제로 나…

원시자료형과 참조자료형 원시 자료형 데이터의 크기와는 관계없이 변수에는 하나의 데이터만 담습니다. 참조 자료형 변수에 값이 아닌 주소를 저장합니다. 주소를 따라가 보면 특별한 데이터 보관함을 찾을 수 있고, 사이즈가 동적으로 변할 수 있습니다. (= heap) 결론 원시 자료형 : 각 변수 간의 원시 타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않는다. 참조 자료형 : 주소를 복사하기 때문에 복사한 데이터에서 원소를 변경하면 주소 안의 데이터가 변경된다. 따라서, 기존의 데이터에 영향이 간다.

MDN MDN가서 메소드나 함수를 참고하면 좋을 것 같다 😊 실제로 자바스크립트와 메서드를 함께 검색하면 MDN이 먼저 검색되는 것을 볼 수 있다. 객체 코플릿 오답노트(수정) #20 #21 마무리 코드스테이츠에서 자바스크립트를 처음부터 배울 수 있어서 좋은 기회라고 생각한다. 자바, c언어 등 다양한 언어를 배워왔지만, 프론트엔드에 관심을 두고 있기 때문에 누군가의 도움이 필요했다. 대학교 1학년 때 html과 css 개념 정도로만 간단하게 배워서 전문가로서 다룰 실력이 안됐다.😭 며칠 간 코플릿으로 배열, 객체의 기본을 이해하고, 로직을 짜니까 생각외로 너무 잘하고 있다는 생각에 자신감이 올라갔다. 데헷😊 클린 코드를 써야한다 만약 쉬운 문제를 풀고 있다면, 읽기 쉬운 코드로 작성하여 가독성을 높일 수 있다. 어렵다고 생각되는 문제 어떻게든 스파게티 코드라도 작성해서 정답을 도출하려고 했다.🔥 이후 레퍼런스를 보며, 클린 코드로 작성하려고 노력했다. 쨌든, 오늘은 나도 할 수 …

후기 아직 많이 부족함을 느끼며 수업을 열심히 듣고 있다. 내 힘으로 코딩 로직을 짜고 느끼며 더 나은!!! 더 잘하는 개발자가 되었으면 좋겠다🔥 모르는 부분이 있으면 그 날 바로 해결하고 있다. 아직까지 코플릿 할 만하다.

이제 좀 깃허브 알 것 같아. 벨로그를 썼다가 깃허브 블로그로 옮겼다. 아직 마크다운 언어에 대해 익숙하지 않지만, vscode로 작성해서 git add, git commit, git push를 이용하면 금방 포스팅이 가능하다. vscode를 통해서 원격 저장소로 간단하게 업로드하는 방법을 알게 되어서 좋았다 😊 더 익숙해지면 깃허브 블로그 디자인과 기능을 수정해야겠다. 앞으로 더 발전하는 내가 되자! 👍 Ubuntu 현재 윈도우 운영체제를 쓰고 있고, WSL를 통해서 우분투를 사용하고 있다. 이제 막 노트북을 샀기 때문에.. MacOS는 다음 기회에..ㅎ 오늘 배운 CLI 수업을 통해서 과제를 제출하는 방법도 알았다. 📝

오늘은 페어와 같이 계산기에 기능을 작성하였다.😊 ✨ 후기 페어님이 너무 잘하셔서 나도 분발해야겠다는 생각이 들었다. 노력은 배신하지 않는다고 코딩의 천재는 이길 수 없겠지만, 한 만큼 실력이 늘거라고 믿고 있다. 블로그에 힘쓰지 않고, 코딩연습에 힘쓰는 시간을 많이 투자해야 겠다는 생각이 들었다!

실시간 세션에서 코츠 동기들과 함께 자신이 만든 계산기를 자랑하는 시간을 가졌다.😊 ✨ 후기 html과 css를 이용해서 계산기를 만들었다. 다양한 계산기 디자인을 볼 수 있어서 좋았다.

2022-06-21 ~ 2022-07-20 velog blog.