본문 바로가기

분류 전체보기123

22.02.22 타입스크립트의 시작 📍 책을 읽게 된 계기 4주 프로젝트를 타입스크립트로 진행했다. 타입스크입트를 도입한 이유는, 프로그램이 복잡해질 것을 우려해서다. 앱의 상당 부분에서 문자열, 숫자, 배열 등 다양한 자료형이 값으로 존재하는 객체를 data로 다뤘기때문이다. 객체 내의 값을 조작하면서 발생하는 다양한 오류들을 타입스크립트가 잡아줄거라 생각했다. 자바스크립트는 프로그램을 실행해야만 오류를 발견하지만 타입스크립트는 컴파일 단계에서 오류를 발견할 수 있기 때문에 프로그래밍에 더 효과적일거라 판단했다. 시작은 좋았으나 ! 언어를 충분히 숙지할 시간 없이 프로젝트를 진행했더니 하는 내내 찜찜했다. 내가 아는 아주 기본적인 타입 범위 안에서만 맴돌고 있다는 생각이 들었다. 타입스크립트의 장점을 백분 활용하지 못한 느낌이 들었고, .. 2022. 2. 22.
리팩토링 : 4주차 플젝 마커 정보창 css 변경 📍 오늘 고칠 문제 웹 전체 분위기에 맞게 간단한 css 변경 --> 가독성을 높이면서 포인트 컬러 적용하기 😨 BEFORE 😊 AFTER 🤨 느낀점과 오늘 하루 정리 프론트엔드의 가장 큰 장점 : 노력한만큼 눈에 보인다 & 디자인 잘 된 컴포넌트보면 보람을 느낄 수 있다. 오늘 2D 도면은 3D화 하는 기술을 가진 기업을 발견했다 !-! 너무 흥미로워서 이것저것 기업에 관한 정보 서치하다 하루를 다 보냈다. 기업 서치하는 건 시간을 정해두고 해야겠다. 꼬리에 꼬리를 무는 질문들을 따라가다 어느새 스타트업 관련 용어를 외우고 있었다. 😓 내일 할 일 ✔ 오늘 쓰던 이력서 마무리 후 지원 ✔ 방 구조 바꾸기 (새 침대 + 𝟃 인테리어) ✔ scratch now 무한 스크롤 기능 설계 ✔ CS 관련 서적 읽.. 2022. 2. 21.
22.02.17 면접 Q & A 📌 자바스크립트는 동기적 언어인가 비동기적 언어인가 ? 📌 자바스크립트의 "동기"와 "비동기"에 대해 아는대로 말해보기 자바스크립트는 동기적 언어입니다. 자바스크립트의 엔진이 싱글 스레드로 동작하기 때문에, 코드를 순서대로 읽을 수밖에 없습니다. 동기적인 언어의 문제점은, 해당 태스크를 끝내기 전까지는 아무것도 처리할 수 없다는 점입니다. 일례로 데이터를 불러오는 작업과 UI 컴포넌트의 렌더링 작업이 차례로 진행된다고 했을 때, 데이터가 모두 불러오기 전까지 화면이 하얗게 뜨는 문제가 발생할 수 있습니다. 반대로 UI 컴포넌트를 먼저 렌더링하더라도 컴포넌트에 할당된 이벤트가 동작되지 않는 문제를 야기할 수 있습니다. 이를 해결하기 위해 브라우저 엔진에 내장된 비동기 메서드를 사용합니다. fetch( ) .. 2022. 2. 18.
리팩토링 : 4주차 플젝 input 창 텍스트 길이 제한 📍 오늘 고칠 문제 ✔ 장소에 해당하는 제목의 길이를 제한했지만 적용되지 않은 에러 --> 사진을 저장할 때 해당 사진과 장소를 묶어 제목을 정할 수 있게 설계하였다. 이 제목은 태그의 느낌으로 짧게 짓도록 유도하기 위해 텍스트의 길이를 제한해놨었다. input 태그에 max-length 속성을 넣어 13으로 설정했는데 적용이 안되는 문제 발생. --> 분명 설정 당시에 작동이 되는 걸 알고 넘어갔는데, 리팩토링하면서 보니까 안되더라 😂 가끔 적용이 안된다고는 하는데 흠 ... 언제나 동작하게 함수를 만들어 해결하자 !!! 😨 BEFORE 분명 저는 max-length 속성을 넣어놓은 상태구요 .. 동작 안하구요 .. ㅎㅎ 이렇게 되면 사이드바에 탭이 추가될 때 글자가 넘쳐 UI가 무너지는 문제가 발생한.. 2022. 2. 17.
리팩토링 : 4주차 플젝 kakao Map API 마커 상태 관리 (1) 📍 프로젝트가 끝난 후 아쉬웠던 것들 당연히 부족하고, 아쉬운 것들 투성이다. 스스로 자책하기 보단 차근차근 고쳐나가기로 마음을 다잡고 고칠 점들을 리스트업 해본다. 그날 그날 고친 점들을 적고 어떻게 고쳤는지, 또 어떤 식으로 발전할 수 있을 것인지 등을 기록한 리팩토링 로그를 시작한다 👀 ✔ 루트 생성 페이지, 루츠 수정 페이지 : 마커 여러개 (5개 이상) 추가했을 때 화면이 하얘지는 에러 --> 이거 정말 심각한 문제였다. 프로젝트가 거의 끝날 때즈음에 만난 에러라 기간 내에 해결하지 못하고 제출했었다. 😓 심지어 팀원분이 "마커를 여러개 추가하면 화면 동작이 느려져요 !" 라고 알려주셔서 발견하게 됐다. 노트북에서, 혹은 모바일에서 네트워크 부하를 어떻게 감당할까 ?-? 를 고민하지 않은 대가였.. 2022. 2. 16.
자바스크립트가 data 를 저장하는 방법 (메모리 저장 방식) 📍 당신이 선언한 변수는 스스로에게 할당된 값을 모 른 다. 우리가 변수로 선언하고 지정하는 모든 것은 "식별자"이다. 식별자란, 메모리 공간에 저장되어 있는 어떤 값을 구별(식별)해 낼 수 있는 고유한 이름이다. 즉, 식별자는 값이 아니라 값이 저장된 메모리 주소를 기억한다. --> 원시 타입과 객체 타입 모두에 해당되는 내용이기 때문에 굉장히 중요함 다음과 같은 방식으로 원시 타입의 값을 복사하게 되면 1또는 2와 같은 일이 일어난다. const num = 5; const copyNum = num; console.log(num === copyNum) // true // 원시 값을 할당한 변수를 다른 변수에 할당하는 것을 "깊은 복사"라고 부르기도 한다. (공식 x) 1. 새로운 메모리 공간을 할당하여.. 2022. 2. 15.
HTML .env 변수 넣기 (feat. React) 🔊 HTML script 태그에 env 변수 넣기 테스트 용으로 써오던 카카오 map api 자바스크립트 키를 env 파일에 넣어 관리하기로 함. 진즉에 했었어야 했는데 방관. 새로운 api 키를 발급받아서 교체해주었다. 이미 깃헙에 올라간 코드는 삭제할 수 없으니, 발급받은 테스트용 api키를 파기하지만 절대 이런 실수는 용납안됨 ..! 👀 ❗ 오늘의 교훈 : 중요한 설정은 잊지말고 초기에 해주자. 1. dotenv 설치 2. .env 파일에 키,값 넣어주기 (리액트만의 규칙 있음) 3. gitignore 폴더에 .env 추가 1. npm install dotenv 2. // HTML // .env REACT_APP_KAKAO_JAVASCRIPT_KEY=leeKey .env 변수 이름 반드시 REACT.. 2022. 2. 14.
22.02.14 면접 Q & A 📌 원시 자료형과 참조 자료형의 차이 말해보기 원시 자료형은 (할당 후에) 변경 불가능한 데이터 타입이고, 참조 자료형은 (할당 후에) 변경 가능한 데이터 타입이다. 원시 자료형은 메모리에 저장될 때 값 그 자체가 저장되지만, 참조 자료형은 값의 참조 값, 즉 값의 주소가 저장되는 차이가 있습니다. 📍 과거 학습 내용 복습 2021.08.12 - [Front-end/JS] - 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 자바스크립트 원시 타입 & 객체 타입 Primitive type & Reference type 📌 원시 타입? 객체 타입? 자바스크립트가 제공하는 7가지 데이터 타입들을 크게 원시 타입primitive type과 객체 타입object/re.. 2022. 2. 14.
22.02.13 면접 Q & A 📌 자바스크립트의 자료형[data type]이 필요한 이유 말해보기 모든 언어가 다 그렇지만, 원하는 값을 메모리에 저장하고 읽고, 사용하게 된다. 메모리에 값을 저장하기 위해선 저장되는 데이터의 크기를 알아야한다. 저장하기 위한 공간을 확보해야하기 때문이다. 데이터의 크기를 알 수 있게 하는 지표가 데이터 타입이다. -> 그래서 데이터 타입이 중요하다. 📌 자바스크립트의 자료형[data type]에 대해 말해보기 자바스크립트의 모든 값은 데이터 타입을 갖는다. 1. 숫자 타입 [number] | 모든 수를 64비트 실수 처리. 2. 문자열 타입 [string] | 16비트 유니코드 문자로 표현. 3. 불리언 타입 [boolean] | True / False 4. undefined 타입 [undefine.. 2022. 2. 13.

티스토리툴바