본문 바로가기
반응형

전체 글353

[React] JSX 사용법 JSX 사용법 : JavaScript 코드 + XML / HTML ... XML / HTML {JavaScript 코드} ... XML / HTML 예제 1 const name = '예은'; const element = 안녕, {name}; ReactDOM.render( element, document.getElementById('root') ); 중간에 사용된 {name} 이 name 이라는 JavaScript 의 변수를 사용하기 위해서 중괄호를 사용하여 표현한 것이다. 예제 2 funtion formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Yeeun', lastName: 'Oh' };.. 2023. 4. 13.
[React] JSX 의 장점 코드가 간결해진다. // JSX 사용함 Hello, {name} // JSX 사용 안함 React.createElement('div', null, `Hello, ${name}`); 가독성이 향상된다. : 코드를 작성할 때 뿐만 아니라, 유지보수도 쉬워지며 버그를 발견하기 쉬워진다. injection Attacks 방어로 보안성이 올라간다. const title = response.potentiallyMaliciousInput; // 이 코드는 안전합니다. const element = {title}; 2023. 4. 13.
[React] JSX JSX : A syntax extension to JavaScript (자바스크립트의 확장문법) JavaScript + XML/HTML JSX 코드 const element = Hello, world!; JSX 의 역할 : JSX 는 내부적으로 XML/HTML 코드를 JavaScript 로 변환하는 과정을 거치게 된다. 그렇기 때문에 실제로 우리가 JSX로 작성해도, 최종적으로는 JavaScript 가 나오게 되는 것이다. 여기서 JSX 코드를 JavaScript 로 변환하는 역할을 하는 것이 React 의 createElement 라는 함수인 것이다. JSX 를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.prop.. 2023. 4. 13.
[프로그래머스 - Python] Lv.2 오픈채팅방 문제 https://school.programmers.co.kr/learn/courses/30/lessons/42888 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 def solution(record): # 1 (2차원 배열로 만들기) li = [list(x.split(' ')) for x in record] # 2 name_dic = {} for x in range(0, len(li)): if (li[x][0] == 'Enter') | (li[x][0] == 'Change'): name_dic[li[x][1]] = li[x][2] # 3 answ.. 2023. 3. 12.
[프로그래머스 - Python] Lv.2 영어 끝말잇기 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12981 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 def solution(n, words): li = [words[0]] for x in range(0, len(words) - 1): li.append(words[x + 1]) se = set(li) if (words[x].strip()[-1] != words[x + 1].strip()[0]) | (len(li) != len(se)): # 끝말을 잇지 않았을 때 or 중복된 단어일 때 .. 2023. 3. 12.
[프로그래머스 - Python] Lv.2 프렌즈 4블록 문제 https://school.programmers.co.kr/learn/courses/30/lessons/17679 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 import copy def solution(m, n, board): # 1 new_board = [list(board[x]) for x in range(0, len(board))] # 문자열 분리하여 2차원 배열로 바꾸기 count = 1 new_board_temp = copy.deepcopy(new_board) while count != 0: count = 0 # 2 for x in.. 2023. 3. 9.
[프로그래머스 - Python] Lv.2 뉴스 클러스터링 문제 https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 import math import re def solution(str1, str2): one = [str1[x:x + 2].lower() for x in range(0, len(str1) - 1)] two = [str2[x:x + 2].lower() for x in range(0, len(str2) - 1)] # 공백, 숫자, 특수문자 포함 문자열 제거 new_one = [] for x.. 2023. 3. 8.
[웹개발 - DIOS] DIOS 팀 프로젝트 🖥 DIOS : 머신러닝을 이용하여 운동 횟수를 세어주고, 기록하여 운동 습관을 만들 수 있게 도와주는 웹 서비스 📌 DIOS 제작 계기 Teachable Machine 이라는 머신러닝 API 를 알게됐다. 머신러닝에 대해 전혀 모르던 나도 쉽게 사용이 가능할 만큼 쉽고 재밌는 기능이었다. 프로젝트에 꼭 사용해 보고싶어서 생각하던 중, 포즈 학습 기능을 통해 운동 자세를 학습시켜 운동 횟수를 세어주는 기능을 만들어 보고싶다는 생각이 들었다. 팀원들에게 이 아이디어를 제안했더니 흔쾌히 수락하여 프로젝트를 진행하게 되었다. 요즘 사람들은 매체에 '홈 트레이닝' 을 검색만 해도 알 수 있듯이, 운동을 통한 자기관리에 관심이 많다. 꾸준히 하는 사람들도 많겠지만 작심삼일로 끝나버리는 사람들도 분명 있을 것이다... 2023. 2. 26.
[웹개발 - DIOS] 홈 페이지 ⌦ 홈 페이지 ☑︎ 홈 페이지 홈 페이지는 길어지더라도 모든 팀원들이 만든 기능이 보여졌으면 좋겠다는 생각을 했다. 그래서 모든 기능을 다 넣었다. • 메인 문구 들어가자마자 보이는 열심히 운동하는 사진들에 마우스를 올려보면 문구가 뜬다. • 사용설명서, 기록장 바로가기, 쇼핑몰 바로가기 다음은 사용설명서와 기록장, 쇼핑몰 바로가기 버튼이 뜬다. 이 웹 서비스를 처음 이용하는 사용자는 사용법을 모를 수 있을 것 같아 설명서를 만들었다. • 회원가입 바로가기 회원가입 버튼에 마우스를 올리면 광택이 나는 효과를 주고싶어서 찾아보고 넣었다. - HTML 회원가입 하기 - CSS #hover { border: 0.1rem solid rgb(0, 0, 0); overflow: hidden; position: re.. 2023. 2. 26.
[웹개발 - DIOS] 랜덤으로 상품 추천하기 ☑︎ 랜덤으로 상품을 추천하는 기능 • 쇼핑몰 상품 목록 페이지 추천 상품은 한 번에 8개씩이다. 4개의 추천 상품이 랜덤으로 뜬 다음 1.5 초 뒤에 다른 4개의 상품이 뜬다. 새로고침하면 다른 8개의 상품이 같은 방식으로 뜬다. - Mapper, xml int[] selectIndex(); SELECT `index` AS `index` FROM `dios_store`.`items` items table 에는 DIOS 쇼핑몰에 존재하는 모든 상품의 정보가 담겨있다. items table 의 index 를 모두 select 하여 배열에 담아준다. - Service public int[] getIndex() { return this.goodsMapper.selectIndex(); } - Controller.. 2023. 2. 26.
[웹개발 - DIOS] 주문완료 페이지 ⌦ 주문완료 페이지 ☑︎ 배송지 정보와 상품 정보 출력 기능 - Controller @RequestMapping(value = "orderSuccess", method = RequestMethod.GET) public ModelAndView getOrderSuccess(@SessionAttribute(value = "user", required = false) UserEntity user, @RequestParam(value = "num") BigInteger orderNum) { ModelAndView modelAndView; if (user == null) { modelAndView = new ModelAndView("redirect:/dios/login"); } else { modelAndView .. 2023. 2. 25.
[웹개발 - DIOS] 주문 페이지 ⌦ 주문 페이지 ☑︎ orders table (DB) 장바구니 페이지(2) 에서도 다루었지만 orders table 을 따로 만든 이유는 하나로 만들게 되면 주문 완료하여 지워진 상품의 레코드를 더 이상 select 하지 못하게 되어 주문 내역 페이지를 만들 수 없다는 점이 문제가 되었다(주문이 완료가 되면 장바구니에서는 지워져야 하는데 장바구니 select 부분은 table 의 모든 레코드를 select 하므로 레코드가 영구 삭제되어야만 한다.). 그래서 carts table 과 orders table 을 따로 만들어 정보를 저장하기로 했다. 주문 페이지에서 최종 주문이 완료되면 장바구니에 담겨있다가 넘어온 상품들이 삭제되어야 한다. 주문 완료가 되었는데도 장바구니에 주문 한 상품이 남아 있으면 안되기.. 2023. 2. 25.
반응형

티스토리툴바