비제어 컴포넌트 vs 제어 컴포넌트
·
🎨 프론트엔드 공부/React & Next
📍비교 ✅비제어 컴포넌트 (uncontrolled) - 로컬 변수만을 갖는 컴포넌트 - 부모 컴포넌트가 영향을 줄 수 없음 ✅제어 컴포넌트 (controlled) - 컴포넌트의 중요한 정보가 props에 의해 구동됨 - 부모 컴포넌트가 props를 통해 이 컴포넌트를 완전히 제어 컴포넌트 대신 element에도 적용할 수 있다 📍비제어 input element 예시 - 전통적인 HTML의 form 입력과 비슷 - Form 컴포넌트는 input에서 값을 "pull" 해와야 함 (예 - form 제출 전에) 예) input element의 실시간으로 바뀌는 값을 ref 를 통해서 구할 수 있음 const FormComponent = () => { const inputEl = useRef(null); retu..
프로그래머스 < 공원 산책 > JavaScript
·
☕️ 커리어 & 인터뷰 준비/코딩 테스트
📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/172928 📍알고리즘 분류 - 구현 📍문제 풀이 N * M 크기의 2차원 배열 park가 주어진다. 이차원 배열은 하나의 S, 여러개의 O, X로 구성되어 있다 - S : 시작 좌표 - O : 이동 가능한 좌표 - X : 장애물 (이동 불가) 좌표 그리고 "E 2", "N 1" 처럼, 동서남북 방향과 이동거리가 원소인 배열 routes가 주어진다 routes 를 순회하며, route의 이동 결과가 N * M을 넘지 않고, 장애물을 만나지않을 경우에만 좌표를 움직인다 그리고 최종 결과를 출력한다 📍코드 (JavaScript) const park = ["OSO", "OOO", "OXO", "..
프로그래머의 뇌 - 5. 코드를 더 깊이있게 이해하기
·
🤓 기술 학습 & 공부 기록/컴퓨터 일반
프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 2. 신속한 코드 분석 3. 프로그래밍 문법 빠르게 배우기 4. 복잡한 코드를 읽는 방법 2장 | 코드에 대해 생각하기 5. 코드를 더 깊이있게 이해하기 📍요약 ✅코드를 깊게 이해하는 다양한 방법이 존재한다 1. 변수 역할 프레임워크 (role of variable) 2. 헝가리안 표기법 (현재는 안쓰임) 3. 텍스트 이해 전략 - 코드 읽기와 자연어 읽기가 매우 유사하므로, 자연어를 쉽게 배우는 능력을 통해 프로그래밍을 배우는 능력을 예측 가능 - 텍스트 이해 전략을 코드 읽기에 적용 가능 📍"변수 역할" 프레임워크 ✅핀란드의 사야니에미 교수가 만든 프로그램 내에서 변수 역할(총 11개)을 ..
프로그래머스 < 삼총사 > JavaScript
·
☕️ 커리어 & 인터뷰 준비/코딩 테스트
📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/131705 📍알고리즘 분류 - 백트래킹 📍문제 풀이 - 중복된 수가 있을 수 있는 정수 배열이 주어진다. 정수 배열에서 3개의 숫자를 뽑아서 (조합) 합이 0이 되는 경우의 수를 구하라 백트래킹을 이용해서 조합을 구현할 수 있다 📍코드 (JavaScript) function solution(number) { const chosenNums = []; // 뽑힌 숫자들 (조합) const isUsed = []; // 중복을 막기 위해 사용됐는지 확인할 배열 let answer = 0; // 가짓수 // 백트래킹 function recursive(depth, start) { if (depth ..
프로그래머의 뇌 - 4. 복잡한 코드를 읽는 방법
·
🤓 기술 학습 & 공부 기록/컴퓨터 일반
프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 2. 신속한 코드 분석 3. 프로그래밍 문법 빠르게 배우기 4. 복잡한 코드를 읽는 방법 📍4-1. 복잡한 코드를 이해하는 것이 왜 어려울까? ✅작업 기억 공간 (Working Memory) 은 특정 문제에 대한 STM이다. 따라서 많아봐야 7개 정도의 공간 제한이 있다. 인지 부하(cognitive load) : WM이 처리할 수 있는 한계 인지 부하가 한도를 초과하면 과부하(overload) 상태가 된다 ✅인지 부하의 3종류 - 내재적 부하 : 문제 자체의 복잡도. 예) 피타고라스의 법칙을 이해. 3^2 + 4^2 = 5^2 - 외재적 부하 : 외부적 요인에 의해 문제에 추가된 것 예) 피..
webstorm 자주 쓰는 단축키 (for Windows)
·
⚙️ 개발 팁 & 노하우/기타
Jetbrain 계열 에디터는 공통으로 작동할 듯..? 📍다중 커서 ✅원하는 곳에 커서 만들기 alt + 원하는 위치 클릭 ✅수직으로 드래그하면서 커서 만들기 alt + shift 누르고 아래로 드래그 📍라인 복사, 제거 등 ✅한 라인 아예 날리기 crtl + Y ✅라인 위 아래로 이동 crtl + shift + ↑↓ ✅한 라인 통째로 아래로 복사하기 crtl + D 📍기타 ✅자동 정렬 crtl + alt + L ✅텍스트 대문자로 만들기 crtl + shift + U ✅터미널 띄우기 alt + F12 ✅모두 바꾸기 crtl + R