분류 전체보기

모던 자바스크립트] 식별자

식별자 변수 이름은 식별자라고 부르기도 합니다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다. 사람을 이름으로 구별해서 식별하는 것처럼 값도 식별자로 구별해 식별할 수 있습니다! 식별자가 필요한 이유 식별자가 필요한 이유는 무엇일까요? 값은 메모리 공간에 저장되어 있습니다! 따라서 식별자는 메모리 공간에 저장되어 있는 어떤 값을 구별해 식별할 수 있어야 하기 때문에 식별자가 필요합니다. 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺습니다! 즉, 식별자는 값이 아닌 메모리 주소를 기억하고 있습니다. 식별자는 변수 이름에만 국한되어 사용되지 않고 클래스, 변수, 함수 등 모두 식별자라 할 수 있습니다. 변수 선언 let score; 위 변수 선언문은 변수 이름을 등록하고 ..

TIL] 2022/03/17

자바스크립트 모던 자바스크립트를 읽으며 내용을 정리하는 포스팅을 진행하였습니다. 변수에 대한 것을 공부했는데 복습을 하니 확실히 처음 읽었을 때보다 잘 읽히고 이해도도 높아지는 것 같습니다! 어제 먼저 풀었던 문제의 해설 강의를 수강하였는데 리팩터링 해야 돼 는 부분이 많았습니다! 확실히 강의를 수강했을 때 제가 놓치고 있던 부분들을 찝어주는 느낌이었습니다! Map에 대한 사용과 투포인터, 슬라이딩 윈도 기법을 통한 알고리즘 기법에 대한 숙련도가 높아지도록 열심히 공부해야겠다는 생각이 들었습니다. 인프런 김태원님의 자바스크립트 알고리즘 문제 풀이에 나온 문제를 먼저 푸는 시간을 가졌습니다. 스택 문제를 풀었는데 기초적인 스택 문제여서 어렵지는 않았지만 스택을 응용하려면 기초적인 부분을 잘 이해해야하기 때..

모던 자바스크립트] 변수란?!

변수 아무리 복잡한 애플리케이션이어도 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부입니다! 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이라 할 수 있습니다. 다음 코드를 자바스크립트에서 실행하면 자바스크립트는 어떻게 반응할까요? 10 + 20 자바스크립트 엔진은 10 + 20이라는 식을 해석할 때 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값을 기억합니다. 따라서 좌변 10 우변 20 이라는 숫자를 + 연산자와 함께하여 30이라는 숫자를 만들어냅니다. 하지만 30이라는 숫자를 재사용 할 수 있는 방법은 위의 코드에서는 없습니다. 자바스크립트에서는 개발자의 직접적인 메모리 제어를 허용하지 않기 때문입니다. 만일 자바스크립트가 직접적인 메모리 제어를 허용하더라도..

TIL] 2022/03/16

자바스크립트 자바스크립트를 복습할 겸 모던 자바스크립트를 다시 읽으며 읽었던 내용을 정리하는 포스팅을 진행하였습니다! 아직은 기초적인 부분이라 크게 어려운 부분은 없었습니다! 자바스크립트 공부는 정말 끊임없이 공부해야 하는데 이번 연도에 리뉴얼하는 모던 자바스크립트 정리는 일목요연하게 정리하고 처음 모던 자바스크립트를 공부하는 것은 훑어가는 느낌이었다면 복습은 복습인만큼 더욱더 열심히 공부할 예정입니다! 인프런 김태원님의 자바스크립트 알고리즘 문제 풀이에 나온 문제를 혼자 푸는 시간을 가졌습니다! 모든 아나그램 찾기 문제를 풀었는데 정답이 제대로 나오긴 했지만 강사님과는 코드가 많이 틀릴 것 같은 예감이 듭니다...! 배운 것을 최대한 응용하여 풀어 정답이 나와 기뻤지만 내일 강사님의 코드를 보고 좌절을..

모던 자바스크립트] 프로그래밍 언어란..!

프로그래밍 언어 사람이 기계어로 명령을 전달하는 것은 매우 어려운 일입니다! 따라서 약속된 구문(문법)으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성 후 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하여 명령을 전달할 수 있습니다! 이 일종의 번역기를 컴파일러 혹은 인터프리터라고 합니다. 7F 45 4C 46 01 01 01 00 00 00 00 00 00 00 00 00 02 00 03 00 01 00 00 00 35 40 B3 04 2C 00 00 00 00 00 00 00 00 00 00 00 34 00 20 00 01 00 00 00 00 00 00 00 00 40 B3 04 B2 0C EB 1C 62 00 00 00 62 00 00 00 05 00 00 00 00 10 0..

TIL] 2022/03/15 && 다시 TIL을 시작한 이유

오늘의 공부 자바스크립트 자바스크립트를 활용하여 백준 사이트에 있는 문제를 풀었습니다! 인프런 김태원님의 자바스크립트 알고리즘 문제 풀이를 복습하는 겸 아나그램 문제를 풀었는데 다양한 유형의 아나그램 문제를 풀어 숙련도를 아나그램에 대한 이해도를 높여야겠다는 생각이 들었습니다! 인프런 김태원님의 자바스크립트 알고리즘 문제 풀이 강의를 수강하였습니다! 최근 TIL을 작성하지 않았지만 2022년에 새롭게 다시 처음부터 복습하고 있습니다! 리액트 네이티브 제로초님의 리액트 네이티브 강의를 수강하였습니다! 안드로이드에서 react-native-config를 사용하기 위해 번들 파일을 수정하는 작업도 진행하고 axios를 통해 서버와 통신해 회원가입을 진행하였습니다! 리액트 네이티브는 리액트와 비슷하지만 다른 점..

ErrNote] (리액트 애니메이션처리) 리렌더링 시 애니메이션이 되지 않을 때

리액트 리 렌더링 시 애니메이션이 되지 않을 때 처리 방법 리액트에서 간단하게 애니메이션을 구현하다 첫 렌더링 시 애니메이션이 정상 작동하지만 데이터를 새롭게 받아와 리 렌더링이 되었을 때 애니메이션 효과가 적용이 안 되는 이슈가 발생했습니다! 해결한 방법은 애니메이션 효과를 적용해야하는 컴포넌트에 key값을 추가하여 해결하였습니다! key값을 추가하기 전 애니메이션 효과가 적용되지 않은 이유 리 렌더링 시 리액트는 내부 콘텐츠만 변경하게 됩니다. 이때, key를 추가하면 key가 변경될 때 다른 엘리먼트로 인식하기 때문에 애니메이션 효과가 적용됩니다!

NestJs] (git) cannot add to the index -missing -add option

NestJS 깃허브 커밋 에러 NestJS를 커밋하는데 cannot add to the index -missing -add option 로그가 발생하여 커밋이 되지 않는 현상이 발생하였습니다. NestJS프로젝트를 생성 시 루트 폴더에 git폴더가 숨어져 있는데 맥북 기준으로 해당 폴더에서 커맨드 + 쉬프트 + . 을 입력하여 숨김 폴더를 볼 수 있게 한 후 숨김 폴더를 삭제 후 다시 커밋을 하면 커밋이 정상적으로 동작합니다!

Redux] 리덕스 툴킷 configureStore

ConfigureStore configureStore는 리덕스 코어 라이브러리의 표준 함수인 createStore를 추상화한 것입니다. 기존 리덕스의 번거로운 기본 설정 과정을 자동화한 것이라 할 수 있습니다. configureStore 함수는 reducer, middleware, devTools, preloadedState, enhancer 정보를 전달합니다. reducer 리듀서는 단일 함수를 전달하여 스토어의 루트 리듀서로 바로 사용할 수 있습니다. 또한 슬라이스 리듀서들로 구성된 객체를 전달하여 루트 리듀서를 생성하도록 할 수 있습니다. 이런 경우 내부적으로 기존 리덕스에 존재하는 combineReducer 함수를 사용해서 자동적으로 병합해 루트 리듀서를 생성하게 됩니다. middleware 리덕..

FrontEnd] Axios 와 Fetch의 차이점

들어가기 앞서 Axios에 대한 기본 정보를 알아보겠습니다. Axios는 node.js와 브라우저를 위한 HTTP통신 라이브러리입니다. 비동기로 HTTP통신을 가능하게 해 주며 return을 promise 객체(Json 형식)로 해주기 때문에 데이터 다루기에도 용이합니다. axios 와 fetch의 차이 axios fetch 요청 객체에 url이 있습니다. 요청 객체에 url이 없습니다. 라이브러리 설치가 필요합니다. 빌트인이라 설치가 필요없습니다. XSRF 보호를 해줍니다. 별도의 보호가 없습니다. data 속성을 사용합니다. body 속성을 사용합니다. data 는 object를 포함합니다. body는 문자열화 되어있습니다. status가 200이고 statusText가 ok면 성공입니다. 응답객체가..