모르면 배우면 된다

@@수정필요 select 1 from table 1이나 'X'로 처리를 해주는데 이유는 진짜 값을 가져오려는 게 아니라, 있는지 없는지만 체크해오려고 하는 거기 때문에 상수값을 넣어준다 교집합, 차집합을 나타낼 때 써주면 좋다. 한 로우씩 체크를 함 select * from 무한도전; select * from 런닝맨; SELECT * FROM 런닝맨 A WHERE EXISTS(select 1 from 무한도전 B WHERE A.NAME= B.NAME) 1. 먼저 FROM 런닝맨이 실행 2. WHERE EXISTS 가 실행되면서 한 로우씩 체크. 무한도전 테이블과 런닝맨 테이블에 같은 NAME이 있으면 TRUE 반환하여, 해당 로우가 나타남. 만약 NAME이 같지 않으면, FALSE 반환하면서 해당 ROW..

2022년의 1분기가 지났습니다. 4월도 벌써 21일이나 지났네요. 이 시점에서 좀 많이 늦었지만 1분기 회고록을 작성해볼까 합니다. 말은 1분기지만 4월 내용이 많이 포함돼 있는 회고록. 코딩 얘기보다 멘탈 얘기가 더 많은 거 같아요. 3~4월 통합 테스트가 있는 달이었습니다. 제가 맡은 화면들도 테스트를 진행했습니다. QA분들이 가차 없이 결함과 비결함을 날려주신 기간이었죠. 결함 처리를 하루이틀 만에 해야 해서 조금 빡센 기간이었습니다. 간만에 예전에 짠 코드들을 뒤집어보며 엇.. 이거 왜 이렇게 짰지? 어리둥절해 하며.. ㅎㅎ 그래도 조금 성장했구나 싶었습니다. 사용자의 시선에서 기능을 바라보기 테스트 중 화면에서 처리했어야 할 오류 처리들을 몇 개 빠뜨린 걸 발견했어요. 상사께서 그걸 캐치하시고..

as-is에 있는 sql을 받아와 아무 생각 없이 화면에 필요한 데이터만 체크했다. api를 적용하고, 조회를 클릭했다. 한 건만 나와야 할 결과가 4건씩, 8건씩 나왔다. 왜일까 고민하고, 잘못된 join문들을 하나하나 고쳐나갔다. 그런데도 문제가 계속 발생했다. 2주 내내 나를 괴롭혔다. 화면을 보던 어느날 어떤 생각이 섬광처럼 지나갔다. 이 테이블... 왜 필요한 거지? 그런 것이다. 이 화면에는, 그 테이블이 필요하지 않았다. 그럼에도 나는 as-is에 있었다는 이유로, 아무 비판 없이 '문제'에만 몰입했다. 진짜 해결 방법은 따로 있었는데도... 현재 발생한 문제에 과도하게 몰입해 본질적인 문제를 놓치지 말자. ㅠㅠ

https://www.notion.so/JS-100-1-0465a498481c471488646526a181087f JS 100제 - 1권 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 문제출처 : 제주코딩베이스 JS 100제 우선 49번 문제까지 해결. 49번까지는 JS의 기본 메소드를 학습할 수 있는 문제들로 구성돼 있다. 학습 목표 JS가 가진 여러 메소드를 활용해 객체와 배열을 자유자재로 다룰 수 있도록 트레이닝하는 것을 목표로 했다. 풀이 방식 1) 풀이가 머릿속으로 바로 떠오르지 않을 때는 먼저 어떤 프로세스로 코딩할지 주석으로 먼저 썼다. 2) 각 프로세스에 맞는 함수가 무엇이 있..

JS 공부를 하면서 제주 코딩 베이스에서 JS 문제 100개를 무료배포하고 있는 것을 발견했다. 쉬운 문제도 있지만 잘 기억나지 않았던 내장함수 등을 다시 짚어보면서 공부할 수 있는 계기가 됐다. 그중 공부했던 부분을 정리. 1. 배열삭제 let nums = [100, 200, 300, 400, 500]; nums.splice(-2, 2); console.log(nums); 마지막 한 개를 삭제할 때는 pop()이 제일 간편하지만, 여러 개를 삭제해야 할 때는 splice를 사용할 수 있다. array.splice(num1, num2); 첫 번째 인자: 삭제를 시작할 인덱스 두 번째 인자 : 삭제할 개수 인덱스 0 은 첫 번째 원소를 말하고, -1은 맨 마지막 원소를 말한다. 마지막에서 두 번째는 -2 ..

나의 업무? 리액트, JS, SQL, 스프링부트를 활용해 화면을 개발하고 있다. 국비 학원을 다니면서 백엔드와 Java에 흥미를 가졌기에, JavaSpring과 React로 대부분의 업무가 진행된다는 사실을 알고 초반에 크게 실망했다. 그러나... 이젠 프론트 업무에 흥미를 갖게 됐다. 화면이 바로바로 변경되는 것, 기능끼리 주고받는 영향을 정교하게 설계하는 것이 매력적이랄까. 물론 빡치는 지점이기도 하다. JS가 재밌다니... JS가 얼마나 강력한 언어인지 느꼈다! 업무 시작 후 생긴 가장 큰 변화다. 학원 시절 JS 내장 메소드가 뭐가 있는지도 모르고.... JS로 객체를 어떻게 만드는지도 모르고.. 심각한 상황에서 프로젝트를 해야 했기에... JS를 사용하며 너무 큰 좌절을 겪었다. 그래서 어색한 ..

동적으로 컴포넌트 만들기JSX 내에서 {} 중괄호 열고 JS코드로 작업한다배열로 받아올 경우, JS의 map을 활용해, 각 원소를 컴포넌트로 대체해서 반환한다.{props.item.map((expense) => ( //비용 배열 원소에 따라 동적으로 컴포넌트 생성 ))}단, 이렇게 사용했을 때Each child in a list should have a unque ‘key’ prop. 이라는 경고 메시지가 뜸key == id 유니크한 id를 설정해주는 prop커스텀 컴포넌트, html 엘리먼트 모두 가능하다.위처럼 map으로 컴포넌트를 동적으로 만들었을 때의 문제점. 새로 컴포넌트가 추가됐을 때, 리액트는 이미 만들어진 div까지 모두 렌더링하고, 그후 새로 추가된 div를..

리액트 state 이해하기리액트는 어떤 흐름으로 실행되나? state 이해하기컴포넌트는 JSX에 return되는 함수다.초기 렌더링 시 리액트는 JSX의 컴포넌트를 계속해서 훑어 내려가는데, 더이상 불러올 컴포넌트가 없을 때까지 진행한다. 불러오기가 끝나면, JSX를 DOM 명령어로 번역해 화면에 렌더링한다.가장 처음 시작되는 곳은 index.js로, ReactDOM.render(, document.getElementById(’root’)); 함수 실행이 첫 번째다. App → ExpenseItem → expenses... 컴포넌트를 타고 타고 타고 내려감. (확인 필요)리액트는 초기 렌더링 시 이 모든 것을 실행한다. 이후 전체적인 렌더링은 진행하지 않는다. 즉, html이 어떻게 바뀌어도 화면은 변하..

리액트는 왜 쓰나요?재사용, 우려사항을 분리하기 위해. 코드를 작고 관리할 수 있는 규모.커다란 html, js파일을 가지고 있을 수 있음. 각 컴포넌트가 하나의 사항에 대해서만 집중할 수 있게 된다. ㅗ드를 여러 개의 파일로 나누면 단위별로 코드를 관리하기 쉽다. 하나의 함수는 하나의 역할을 하는, 고런ㄴ 느낌.컴포넌트는 어떻게 만드나?유저 인터페이스는 html, css js가 결함한 거다. 리액트로 자겁하고 컴포넌트를 만들 때도 똑같음. 이 셋을 같은 컴포넌트로 묶고 사용자 인터페이스를 만듦. 리액트 컴포넌트에서 가장 중요한건 html, js다.리액트는 컴포넌트로 만든다. 컴포넌트는 js, html, css로 만든다. 리액트는 선언 접근 방식이다. 나만의 고유한 html 엘리먼트를 만들 수 있다.cr..

https://docs.oracle.com/javase/7/docs/api/java/lang/StringBuilder.html StringBuilder (Java Platform SE 7 ) Inserts the string into this character sequence. The characters of the String argument are inserted, in order, into this sequence at the indicated offset, moving up any characters originally above that position and increasing the length of this sequence by docs.oracle.com StringBuilder를 문자열..